@media(max-width:600px){html{scroll-padding-block:76px}salon-app{display:block;min-width:0}salon-app :is(.customer-app,.barber-app,.admin-app){padding-bottom:calc(80px + env(safe-area-inset-bottom))}salon-app :is(.content,.admin-content,.customer-app>main,.header-inner,.topbar-inner){width:min(calc(100% - 24px),492px);min-width:0}salon-app :is(.content,.admin-content,.customer-app>main){padding-top:12px}salon-app :is(.admin-topbar,.topbar,.customer-header){height:auto;min-height:60px;padding-top:env(safe-area-inset-top)}salon-app :is(.header-inner,.topbar-inner){min-height:60px;gap:8px}salon-app .admin-topbar{padding-inline:12px;gap:8px}salon-app :is(.profile,.brand,.owner-identity,.profile-copy,.owner-identity>div){min-width:0}salon-app :is(.profile-copy strong,.brand strong,.owner-identity strong){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.6}salon-app :is(.avatar,.brand-mark,.salon-photo){flex-shrink:0}salon-app :is(.admin-head,.owner-toolbar,.renew-bar,.renewal-salon-head){gap:8px;flex-wrap:wrap}salon-app :is(.admin-head h1,.page-head h1){font-size:21px;line-height:1.5}salon-app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=date]):not([type=hidden]),salon-app textarea,salon-app select{min-width:0;max-width:100%;font-size:16px;scroll-margin-block:80px}salon-app textarea{resize:vertical}salon-app :is(.auth-card,.setup){width:min(calc(100% - 24px),390px);margin-block:24px;padding:18px}salon-app .auth-card input{min-height:48px}salon-app :is(.auth-card h1,.install-help h2){line-height:1.5}salon-app :is(.overlay,.sheet-backdrop,.admin-backdrop,.cancel-backdrop,.name-editor-backdrop,.install-help-backdrop,.push-prompt-backdrop){align-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}salon-app :is(.booking-dialog,.rating-dialog,.sheet,.admin-sheet,.cancel-sheet,.name-editor-sheet,.install-help){min-width:0;max-width:100%;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:18px}salon-app :is(.name-editor-sheet,.cancel-sheet,.install-help){overflow-y:auto;overscroll-behavior-y:contain}salon-app :is(.dialog-body,.sheet-body,.admin-sheet-body){min-height:0;padding:14px;overflow-y:auto;overscroll-behavior-y:contain}salon-app :is(.booking-dialog,.rating-dialog,.sheet,.admin-sheet)>:is(header,footer){flex-shrink:0}salon-app :is(.profile-menu,.owner-profile-menu,.owner-settings-panel,.settings-sheet,.customer-profile-menu,.customer-settings-sheet){width:min(84vw,300px);max-width:100%;padding-bottom:env(safe-area-inset-bottom)}salon-app :is(.settings-body,.owner-settings-body,.customer-settings-body,.notification-list,.customer-notification-list){min-height:0;overscroll-behavior-y:contain}salon-app :is(.profile-username,.settings-card-copy,.notification-copy){min-width:0;overflow-wrap:anywhere}salon-app :is(.profile-menu-head,.owner-profile-head){gap:10px}salon-app :is(.profile-menu-head,.owner-profile-head)>div{min-width:0}salon-app :is(.favorite,.notification-button,.admin-bell,.rating-close){min-width:44px;min-height:44px}salon-app :is(.book-button,.rating-later,.booking-filters button){min-height:40px}salon-app .barber-card{padding:10px;gap:8px;grid-template-columns:44px minmax(0,1fr) auto}salon-app .barber-card>.photo-shell{width:44px;height:44px}salon-app .barber-actions{gap:2px}salon-app .barber-copy>strong{font-size:15px;line-height:1.6}salon-app .rating-preview{gap:4px}salon-app .rating-count{padding-inline-start:5px;margin-inline-start:1px;font-size:11px}salon-app .work-time{flex-wrap:wrap;justify-content:center}salon-app .service-main{gap:7px;grid-template-columns:34px minmax(0,1fr) auto 12px}salon-app .service-icon{width:34px;height:34px}salon-app .managed .card>div{flex-wrap:wrap;gap:6px 12px;padding-block:8px}salon-app .managed .card strong{overflow-wrap:anywhere}salon-app :is(.barber-admin-copy,.salon-card>div,.platform-sub-card>div,.history-list article>div){min-width:0;overflow-wrap:anywhere}salon-app :is(.subscription-card dl,.history-list article){grid-template-columns:minmax(0,1fr) auto}salon-app :is(.toast,.admin-toast){max-width:calc(100% - 24px);overflow-wrap:anywhere;bottom:calc(80px + env(safe-area-inset-bottom))}salon-app :is(.customer-nav,.bottom-nav,.admin-nav){padding-inline:max(8px,env(safe-area-inset-left))}salon-app:has(>.install-app-button){display:flex;flex-direction:column}salon-app>.install-app-button{position:static;order:-1;align-self:flex-end;margin:8px 12px;min-height:40px;padding:6px 12px;font-size:13px;box-shadow:none}}@media(hover:none)and (pointer:coarse){salon-app :is(.topbar,.customer-header,.admin-topbar,.customer-nav,.bottom-nav,.admin-nav){backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-surface)}salon-app :is(.overlay,[class$=-backdrop]){backdrop-filter:none;-webkit-backdrop-filter:none}}@media(prefers-reduced-motion:reduce){salon-app *,salon-app *:before,salon-app *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@font-face{font-family:Tajawal;src:url(/assets/regular.ttf) format("truetype");font-weight:400;font-display:swap}@font-face{font-family:Tajawal;src:url(/assets/medium.ttf) format("truetype");font-weight:500;font-display:swap}:root{color-scheme:light;--color-canvas: #eef2f7;--color-surface: #f9fbfd;--color-surface-muted: #e7ecf4;--color-ink: #172033;--color-muted: #566277;--color-line: #cbd4e1;--color-primary: #4056a1;--color-primary-dark: #2f4288;--color-primary-soft: #dce4f5;--color-danger: #ad4051;--bg: var(--color-canvas);--text: var(--color-ink);--muted: var(--color-muted);--accent: var(--color-primary);--surface: var(--color-surface);--surface-muted: var(--color-surface-muted)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 Tajawal,Arial,sans-serif}body.customer-overlay-open{overflow:hidden}.setup{width:min(100% - 32px,440px);margin:48px auto}h1{font-size:24px;font-weight:500;margin:0 0 12px}p{color:var(--muted);overflow-wrap:anywhere}button{min-height:44px;padding:8px 16px;background:var(--accent);color:#fff;font:inherit;border:0;border-radius:10px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.65;cursor:wait}button:focus-visible{outline:2px solid var(--text);outline-offset:3px}.auth-card{width:min(100% - 32px,390px);margin:48px auto;background:var(--surface);border:1px solid var(--color-line);border-radius:14px;padding:20px}.auth-card form{display:grid;gap:8px;margin-top:18px}.auth-card label{font-size:14px;color:var(--muted);margin-top:4px}.auth-card input{width:100%;min-height:44px;border:1px solid var(--color-line);border-radius:10px;padding:8px 11px;font:inherit;background:var(--surface)}.auth-card input:not([type=password]){border-color:transparent transparent var(--color-line);border-radius:10px 10px 6px 6px;background:var(--surface-muted)}.auth-card input:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 18%,transparent)}.auth-card input:not([type=password]):focus{border-color:transparent transparent var(--accent);outline:0;box-shadow:inset 0 -2px var(--accent)}input:is([type=text],[type=tel],[type=number]){border-color:transparent transparent var(--color-line)!important;border-radius:10px 10px 6px 6px!important;background:var(--color-surface-muted)!important;box-shadow:none!important}input:is([type=text],[type=tel],[type=number]):focus{border-color:transparent transparent var(--color-primary)!important;outline:0!important;box-shadow:inset 0 -2px var(--color-primary)!important}.auth-card button{margin-top:10px;width:100%}.password-field{position:relative}.password-field input{padding-left:48px}.auth-card .visibility-toggle{position:absolute;inset:0 auto 0 0;width:44px;min-height:44px;margin:0;padding:10px;background:transparent;color:var(--muted);border-radius:10px 0 0 10px}.visibility-toggle svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.visibility-toggle:hover{color:var(--accent)}.form-error{color:#a33c40;font-size:14px;margin:4px 0 0}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.install-app-button{position:fixed;z-index:40;inset:14px auto auto 14px;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;box-shadow:0 5px 18px #1426302e}.install-app-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.install-help-backdrop{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:20px;background:#0f1a2285}.install-help{width:min(100%,380px);padding:20px;border-radius:16px;background:var(--surface);box-shadow:0 18px 50px #0f1a2247}.install-help h2{margin:0 0 8px;font-size:18px}.install-help p{margin:0 0 18px}.install-help button{width:100%}@media(max-width:480px){.install-app-button{inset:10px auto auto 10px;font-size:14px}}
