/* Shared Turno appearance; the shop's theme variables remain authoritative. */
:root{--ui-bg:var(--theme-background,#090909);--ui-text:var(--theme-foreground,#f4eee5);--ui-accent:var(--theme-accent,#dcc39c);--ui-muted:var(--theme-muted,#b9ad9c);--ui-surface:#171411;--ui-surface-raised:#211c16;--ui-line:#42382c;--ui-gold:#dcc39c;--bg:var(--ui-bg);--panel:var(--ui-surface);--line:var(--ui-line);--gold:var(--ui-gold);--muted:#b9ad9c}
html{background:var(--ui-bg);scroll-padding-top:24px}html body{background-color:var(--ui-bg);color:var(--ui-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
html body .turno-access{background:var(--ui-bg);color:var(--ui-text);font-family:inherit}
html body>header{background:var(--ui-bg);color:var(--ui-text);border-bottom:1px solid color-mix(in srgb,var(--ui-accent) 23%,transparent);padding:22px max(20px,5vw);gap:18px;align-items:center}
html body>header strong,html body .access-brand{color:var(--ui-accent)}
html body>header nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;letter-spacing:normal}
html body>header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--ui-accent) 28%,transparent);border-radius:8px;text-decoration:none;font-size:13px;line-height:1.5}
html body a{color:var(--ui-accent);text-underline-offset:4px}
html body h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}html body h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.2;letter-spacing:-.015em}
html body :is(.card,.panel,.metric,.access-card){background:var(--ui-surface);border-color:var(--ui-line);border-radius:14px;color:#f4eee5;box-shadow:0 12px 34px #00000018}
html body .access-card{border-radius:16px}html body :is(.access-copy,.access-note,.access-card small,.note,.meta){color:#b9ad9c}html body .access-card h1{color:#f4eee5}html body .access-card label{color:#d8cdbd}
html body :is(button,input,select,textarea){font-family:inherit}html body :is(button,.action){border-radius:8px;min-height:44px}html body button:disabled{cursor:wait;opacity:.55}
html body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=hidden]),html body select,html body textarea{background:#100f0d;border:1px solid #60503e;border-radius:8px;color:#f4eee5;min-height:48px;padding:11px 13px;font-size:16px;max-width:100%;color-scheme:dark;box-sizing:border-box}
html body input::placeholder,html body textarea::placeholder{color:#a99d8b}html body :is(input[type=checkbox],input[type=radio]){accent-color:var(--ui-gold)}
html body :is(.primary,.access-submit,.action,#create,#grant-save,#accept,#wi-save){background:var(--ui-gold);border-color:var(--ui-gold);color:#19140d}
html body .secondary{background:transparent;color:#eed2a6;border-color:#756044}html body .access-tabs{border-color:var(--ui-line);border-radius:10px}html body .access-tabs button.selected{background:#393023;color:#f3e4cf}
html body :is(.service.active,.barber-card.active){box-shadow:inset 3px 0 var(--ui-gold),0 0 0 1px #dcc39c22}html body :is(.eyebrow,.access-eyebrow){letter-spacing:.2em}
html body :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}html body :is(input,select,textarea):user-invalid{border-color:#e2a08d;box-shadow:0 0 0 2px #e2a08d24}
html body :is([aria-current=page],header nav .active){background:color-mix(in srgb,var(--ui-accent) 12%,transparent);border-color:var(--ui-accent)}
html body .access-message,html body .verification-help{background:#211c16;border-color:#655139;border-radius:10px}
html body>aside{background:#11100e;border-color:var(--ui-line)}html body>aside nav a[aria-current=page]{background:#30271c;color:#f2dab8}html body .track{background:#30271c}html body>footer,html body .turno-access footer{color:var(--ui-muted);border-color:var(--ui-line)}
@media(prefers-reduced-motion:no-preference){
 html body :is(button,a,input,select,textarea,.service,.barber-card){transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease}
 html body main>[data-section]:not([hidden]),html body .access-card{animation:turno-enter .2s ease both}
 html body button:not(:disabled):active,html body .action:active{transform:translateY(1px) scale(.99)}
 @keyframes turno-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
}
@media(hover:hover){html body>header nav a:hover{background:color-mix(in srgb,var(--ui-accent) 12%,transparent)}html body button:not(:disabled):hover{filter:brightness(1.08)}html body :is(.service,.barber-card):hover{border-color:#a58a62;box-shadow:0 5px 18px #0003}html body .secondary:hover{background:#33291e}}
@media(max-width:600px){html body>header{padding:18px 20px;gap:14px}html body>header nav{gap:8px}html body>header nav a{padding:9px 12px;font-size:12px}html body :is(.card,.panel,.metric,.access-card){border-radius:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}html body :is(button,a,input,select,textarea,.service,.barber-card,.access-card,[data-section]){animation:none!important;transition:none!important}}
/* Keep text readable when a business chooses a light custom background. */
html body :is(.note,.meta){color:var(--ui-muted)}
html body :is(.card,.panel,.metric,.access-card) :is(.note,.meta){color:#cfc0ab}
html body :is(.card,.panel,.metric,.access-card) a:not(.action){color:#eed2a6}
html body :is(.card,.panel,.metric,.access-card) :is(button,a,input,select,textarea,summary):focus-visible{outline-color:#eed2a6}
/* Give the business logo a stable, readable size at every viewport. */
html body>header{flex-wrap:wrap}
html body>header :is(.logo,.client-brand){min-width:0;max-width:100%;gap:16px}
html body>header .shop-logo{width:96px;height:76px;max-width:none;object-fit:contain;flex:0 0 auto}
html body>header :is(.wordmark,[data-shop-name]){min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){html body>header .shop-logo{width:76px;height:64px}html body>header :is(.logo,.client-brand){gap:12px}html body>header .wordmark{font-size:14px}html body>header nav{flex-basis:100%}}