/* Mobile-first CSS variables for quick branding */
:root{
  --bg:#0b0f14; /* deeper charcoal */
  --surface:#0b1220;
  --muted:#9aa4b2;
  --accent:#c9a63a; /* refined warm-gold accent */
  --white:#ffffff;
  --radius:10px;
  --container:min(1100px, calc(100% - 32px));
  --glass: rgba(255,255,255,0.04);
  --pattern: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 60px);
  --header-height:64px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
/* Date fields sit on dark backgrounds: use the dark picker so its calendar icon is visible */
input[type="date"]{color-scheme:dark;cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.85}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
html{min-height:100%;width:100%;overflow-x:hidden;background:#0b0f14;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 8px)}
/* 100vh so the page background reaches the bottom of the window on short pages */
body{min-height:100vh;width:100%;background:#0b0f14}
/* Prevent iOS rubber-band overscroll from revealing a blue background flash */
html{overscroll-behavior-y:none;background:#0b0f14}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--white);
  background:#0b0f14;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  position:relative;
  overflow-x:clip;
}
/* subtle textured overlay for a tactile, luxurious feel */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background: var(--pattern);
  opacity:0.35; pointer-events:none; mix-blend-mode:overlay;
}

/* Headings use refined serif for upscale look */
h1,h2,h3{font-family:'Playfair Display', serif;color:var(--white);margin:0}
h1{font-weight:700}
h2{font-weight:600}

.container{width:min(1100px, 100%);margin:0 auto;padding:16px;position:relative;z-index:20}
.site-header{background:rgba(11,17,24,0.96);position:fixed;left:0;right:0;top:0;width:100%;max-width:100vw;z-index:1200;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.03);transform:translateZ(0)}
.site-header .container{padding-top:0;padding-bottom:0}
main{padding-top:var(--header-height);overflow-x:hidden}
.header-row{display:flex;align-items:center;gap:10px;min-height:48px}
.brand{display:inline-flex;align-items:center;min-height:44px;flex:1 1 auto;min-width:0;font-weight:800;color:var(--white);text-decoration:none;font-size:20px;line-height:1.15;letter-spacing:0.6px;font-family:'Playfair Display', serif}
/* Reset native appearance for consistent cross-browser rendering */
button, .slideshow-btn, .rev-btn, #navToggle, .book-now { -webkit-appearance:none; appearance:none; }

/* Phones and tablets: menu toggle, brand and Book button; secondary links live in the menu */
.nav{position:relative;order:-1}
#navToggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;background:none;border:0;color:var(--white);font-size:22px;cursor:pointer;touch-action:manipulation}
#navToggle:focus{outline:3px solid rgba(201,166,58,0.25);outline-offset:3px;border-radius:6px}
.nav-list a:focus, .rev-btn:focus, .slideshow-btn:focus, .book-now:focus{outline:2px solid rgba(201,166,58,0.18);outline-offset:3px;border-radius:6px}
.nav-list{list-style:none;margin:0;display:flex;flex-direction:column;gap:2px;padding:8px;background:rgba(11,17,24,0.97);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,0.6);position:absolute;top:calc(100% + 8px);left:0;min-width:220px;z-index:500}
.nav-list.hidden{display:none}
.nav-list li{margin:0}
.nav-list a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--muted);text-decoration:none;font-size:18px;letter-spacing:0.4px}
.nav-list li:not(.nav-extra) + .nav-extra{border-top:1px solid rgba(255,255,255,0.08);margin-top:4px;padding-top:4px}
.nav-extra a{font-size:15px}
.header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.header-extra{display:none}
.book-btn{background:linear-gradient(180deg,var(--accent), #b58b2d);color:#081018;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.04);font-size:18px}
.site-header .book-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-size:14px;white-space:nowrap;flex-shrink:0}
.booksy-fallback{font-size:13px;color:var(--muted);text-decoration:none}
button.booksy-fallback{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}

@media(min-width:700px){
  body{background:radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0.85)),linear-gradient(180deg,var(--bg), #0b0f14);background-attachment:fixed}
  .site-header{background:linear-gradient(180deg, rgba(11,17,24,0.6), rgba(11,17,24,0.35));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .container{width:min(1100px, calc(100% - 32px));padding:24px}
  .site-header .container{padding-top:0;padding-bottom:0}
  .brand{font-size:clamp(20px,3.6vw,34px)}
  .site-header .book-btn{font-size:16px;padding:0 20px}
}

/* Wide screens: full inline menu with the secondary links under the Book button */
@media(min-width:1200px){
  .header-row{justify-content:space-between;gap:16px}
  .brand{flex:0 1 auto;min-width:min-content}
  .nav{order:0}
  #navToggle{display:none}
  .nav-list,.nav-list.hidden{display:flex !important;flex-direction:row;flex-wrap:nowrap;position:static;padding:0;background:none;box-shadow:none;min-width:0;gap:4px}
  .nav-list li{flex:0 0 auto}
  .nav-list a{font-size:18px;padding:0 8px;white-space:nowrap}
  .nav-extra{display:none}
  .header-extra{display:inline-flex;align-items:center;min-height:24px;font-size:12px}
  .site-header .book-btn{font-size:18px}
}

/* HERO */
.hero{position:relative;overflow:hidden;background:#05080d;padding:100px 0;border-radius:12px;margin:20px 0;box-shadow:0 14px 50px rgba(0,0,0,0.6)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.6))}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-inner{position:relative;z-index:2;background:transparent;padding:48px;border-radius:14px;backdrop-filter:none;max-width:900px;margin:0 auto;text-align:center}
.hero h1{margin:0 0 14px;font-size:clamp(28px,6vw,64px);letter-spacing:0.6px}
.lead{color:var(--muted);margin:0 0 22px;font-size:18px}
.hero-ctas a{display:inline-block;margin-right:12px;padding:12px 18px;border-radius:999px;text-decoration:none}
.primary{background:linear-gradient(180deg,var(--accent), #b58b2d);color:#081018;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.04)}
.secondary{border:1px solid rgba(255,255,255,0.06);color:var(--white);background:transparent}

/* Generic card panel (admin, account, confirmation pages) */
.service-card{background:rgba(255,255,255,0.02);padding:16px;border-radius:10px;box-shadow:0 6px 24px rgba(2,6,12,0.6);border-left:4px solid rgba(201,166,58,0.12)}
.service-card h3{margin:0 0 6px;font-size:20px}
.price{font-weight:800;color:var(--accent)}

/* Section heading: title, short gold rule, one-line subtitle */
.section-head{margin-bottom:20px}
.section-rule{display:block;width:56px;height:2px;margin:10px 0 10px;background:linear-gradient(90deg,var(--accent),rgba(201,166,58,0))}
.section-sub{margin:0;color:var(--muted);font-size:15px;letter-spacing:0.3px}

/* Home page services: information only, not links (the shop books on Booksy for now).
   Mobile: compact rows (icon | name + description). Desktop: 3-column cards. */
.services-grid{display:grid;grid-template-columns:1fr;gap:12px}
.svc-card{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(201,166,58,0.28);box-shadow:0 6px 24px rgba(2,6,12,0.5);color:var(--white)}
.svc-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);background:rgba(201,166,58,0.1);border:1px solid rgba(201,166,58,0.3)}
.svc-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-card h3{margin:0 0 3px;font-size:18px}
.svc-card .desc{margin:0;color:var(--muted);font-size:14px;line-height:1.45}

.section{padding:28px 0}
.section.alt{background:transparent}
.h2{font-size:20px}
.muted{color:var(--muted)}

/* Team */
.team-grid{display:grid;grid-template-columns:1fr;gap:18px}
.team-row{display:grid;gap:18px}
/* Page not found */
.not-found{min-height:70vh;display:flex;align-items:center;text-align:center}
.not-found .container{max-width:640px}
.not-found-pole{width:28px;height:96px;margin:0 auto 18px;border-radius:14px;border:2px solid rgba(201,166,58,0.6);background:repeating-linear-gradient(135deg,#c9a63a 0 10px,#f5f0e6 10px 20px,#8b1e1e 20px 30px,#f5f0e6 30px 40px);background-size:100% 56px;animation:pole-spin 2.4s linear infinite}
@keyframes pole-spin{to{background-position:0 56px}}
@media (prefers-reduced-motion: reduce){.not-found-pole{animation:none}}
.not-found-code{margin:0;color:var(--accent);font-weight:800;letter-spacing:0.3em;font-size:14px}
.not-found h1{margin:6px 0 12px}
.not-found-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:24px 0}
.not-found-home{display:inline-flex;align-items:center;text-decoration:none;padding:12px 20px;border-radius:999px;font-size:18px;font-weight:800;color:var(--white);border:1px solid rgba(201,166,58,0.6)}
.not-found-home:hover{background:rgba(201,166,58,0.12)}
.not-found-links a{color:var(--accent)}
.team-card{display:flex;flex-direction:column;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:18px;border-radius:12px;text-align:center;box-shadow:0 6px 30px rgba(0,0,0,0.55)}
.team-card img{width:100%;height:260px;object-fit:cover;border-radius:10px;margin-bottom:12px}
.team-photo-placeholder{display:flex;align-items:center;justify-content:center;height:260px;border-radius:10px;margin-bottom:12px;background:rgba(201,166,58,0.08);color:var(--accent);font-family:'Playfair Display',serif;font-size:72px}
.team-card .book-now{display:inline-flex;align-self:center;align-items:center;min-height:44px;margin-top:auto;padding:8px 18px;border-radius:999px;background:linear-gradient(180deg,var(--accent), #b58b2d);color:#081018;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,0.04)}
.team-card .bio{color:var(--muted);font-size:15px;line-height:1.6;margin:10px 0 12px;text-align:left}
.team-photo-placeholder{width:100%;height:260px;border-radius:10px;background:linear-gradient(180deg,#0b0f12,#081018);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;border:1px solid rgba(255,255,255,0.03);margin-bottom:12px}
.role{color:var(--muted);margin-top:6px}
.inline-link{color:var(--accent);text-decoration:underline}

.booking-form{margin-top:18px;display:grid;gap:14px;max-width:680px}
.booking-form label{display:grid;gap:8px;font-weight:600;color:var(--white)}
.booking-form input,.booking-form select{
  width:100%;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--white);
  border-radius:8px;
  padding:12px 14px;
  font:inherit;
}
.booking-form input:focus,.booking-form select:focus{outline:2px solid rgba(201,166,58,0.35);outline-offset:2px}
/* Checkbox beside its text, not stacked like the other form fields */
.booking-form label.checkbox-label,label.checkbox-label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.booking-form .checkbox-label input,.checkbox-label input{width:20px;height:20px;min-height:20px;padding:0;margin:0;flex-shrink:0;accent-color:var(--accent)}
/* Password fields: eye button inside the input to show/hide what was typed */
.password-field{position:relative;display:block}
.booking-form .password-field input{padding-right:52px}
.password-toggle{position:absolute;top:50%;right:2px;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer}
.password-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-toggle[aria-pressed="true"]{color:var(--accent)}
.password-toggle:focus-visible{outline:2px solid rgba(201,166,58,0.35);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.password-toggle:hover{color:var(--white)}}
.booking-divider{border:0;border-top:1px solid rgba(255,255,255,0.12);margin:24px 0}
#serviceMeta{margin:-4px 0 2px}

/* Confirmation page */
.confirm-container{max-width:640px;margin:0 auto;padding-top:32px}
.confirm-card{text-align:center;padding:28px 16px}
.confirm-icon{font-size:52px;color:#6ee7b7;margin-bottom:12px}
.confirm-card h1{font-size:clamp(22px,4vw,36px);margin-bottom:8px}
.confirm-details{margin:22px 0;text-align:left;background:rgba(255,255,255,0.02);border-radius:10px;padding:16px 20px;display:grid;gap:10px}
.confirm-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.confirm-label{color:var(--muted);font-size:14px;font-weight:600}
.confirm-value{color:var(--white);font-size:14px;text-align:right}
.confirm-note{margin-top:10px;font-size:14px}
.confirm-actions{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:22px;flex-wrap:wrap}
.admin-panel{margin-top:24px}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.admin-stats{display:flex;gap:14px;flex-wrap:wrap}
.admin-stat{font-size:14px;color:var(--muted)}
.admin-stat strong{color:var(--white)}
.admin-stat-alert{background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.5);color:#fca5a5;border-radius:999px;padding:2px 10px;cursor:pointer;font:inherit;font-size:14px}
.admin-stat-alert strong{color:#fecaca}
.admin-tabs{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tab{flex:0 0 auto;min-height:44px;background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--muted);border-radius:6px;padding:6px 14px;cursor:pointer;font-size:14px;font-family:inherit;white-space:nowrap}
.admin-tab.active{background:var(--accent);color:#081018;border-color:var(--accent);font-weight:700}
.admin-tab-panel{margin-top:8px}
.admin-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.admin-filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.admin-filters input,.admin-filters select,.admin-field{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--white);
  border-radius:8px;
  padding:8px 10px;
  font:inherit;
  font-size:16px;
  min-height:44px;
  max-width:100%;
}
.admin-field{display:block;margin-top:6px}
/* .admin-field gives every field a dropdown arrow; this one is a text box */
input.admin-svc-desc{width:100%;background-image:none;padding-right:10px}
.admin-svc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* Shop Services: compact rows that expand to edit */
input.admin-svc-search{width:100%;background-image:none;padding-right:10px;margin:10px 0 12px}
.admin-svc-list{display:grid;gap:6px}
.admin-svc-row{border:1px solid rgba(255,255,255,0.1);border-radius:8px;background:rgba(255,255,255,0.02);overflow-wrap:anywhere}
.admin-svc-row[open]{border-color:rgba(201,166,58,0.5)}
.admin-svc-summary{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;min-height:52px}
summary.admin-svc-summary{cursor:pointer;list-style:none}
summary.admin-svc-summary::-webkit-details-marker{display:none}
summary.admin-svc-summary::before{content:'▸';color:var(--accent);transition:transform .15s}
.admin-svc-row[open] summary.admin-svc-summary::before{transform:rotate(90deg)}
.admin-svc-name{flex:1;font-weight:700;min-width:0}
.admin-svc-meta{color:var(--muted);font-size:14px;white-space:nowrap}
.admin-svc-edit{padding:4px 12px 12px;margin:0}
.admin-svc-move{display:flex;gap:6px;flex-shrink:0}
/* Barbers tab */
.admin-textarea{width:100%;min-height:96px;resize:vertical;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.14);color:var(--white);border-radius:8px;padding:12px 14px;font:inherit}
.barber-thumb{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(201,166,58,0.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700}
.barber-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.barber-badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.18);color:var(--muted);white-space:nowrap}
.barber-badge.warn{border-color:rgba(252,211,77,0.5);color:#fcd34d}
.barber-badge.ok{border-color:rgba(110,231,183,0.5);color:#6ee7b7}
.barber-photo-preview{width:120px;height:120px;border-radius:10px;object-fit:cover;display:block;margin:6px 0}
.admin-svc-row.inactive{opacity:0.6}
@media (max-width:480px){
  .admin-svc-summary{flex-wrap:wrap}
  .admin-svc-meta{order:3;width:100%;padding-left:20px}
}
.admin-move-svc{min-width:44px;font-size:18px;line-height:1}
.admin-move-svc:disabled{opacity:0.3;cursor:default}
.admin-grid{display:grid;grid-template-columns:1fr;gap:14px}
.admin-grid > *{min-width:0}
.admin-panel code{overflow-wrap:anywhere}
.admin-list{display:grid;gap:10px}
.admin-item{padding:10px;border-radius:8px;background:rgba(255,255,255,0.03);overflow-wrap:anywhere}
.admin-item .booksy-fallback{display:inline-block;padding:10px 4px}
.admin-password-card{margin-top:14px}
.admin-customers-card{margin-top:14px}
.admin-services-card{margin-top:14px}
.admin-actions{display:flex;gap:8px;align-items:center;margin-top:10px}
.admin-status-select,.admin-save-svc,.admin-deactivate-svc,.admin-del-user{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--white);
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  min-height:44px;
  font-size:16px;
}
.admin-small-btn{padding:8px 12px;font-size:14px;min-height:44px}
/* Secondary buttons: dark with a thin gold outline (main actions stay solid gold) */
.admin-small-btn:not(.book-btn),.admin-save-svc{background:transparent;border:1px solid rgba(201,166,58,0.55);color:var(--white);border-radius:6px;font-family:inherit;cursor:pointer}
.admin-small-btn:not(.book-btn):hover,.admin-save-svc:hover{background:rgba(201,166,58,0.12)}
/* Destructive actions: red-tinted outline */
.admin-deactivate-svc:not(.book-btn),.admin-del-user:not(.book-btn),.remove-time-off-btn:not(.book-btn),.waitlist-action-btn[data-status="removed"]:not(.book-btn){background:transparent;border:1px solid rgba(248,113,113,0.55);color:#fca5a5}
.admin-deactivate-svc:not(.book-btn):hover,.admin-del-user:not(.book-btn):hover,.remove-time-off-btn:not(.book-btn):hover,.waitlist-action-btn[data-status="removed"]:not(.book-btn):hover{background:rgba(248,113,113,0.12)}
.admin-topbar .book-btn{font-size:15px;padding:10px 18px;min-height:44px}
.admin-item-inactive{opacity:0.5}
/* Customer portal booking window */
.account-layout{display:grid;gap:16px}
.rebook-note{margin:4px 0 10px;padding:10px 12px;border:1px solid rgba(201,166,58,0.45);border-radius:8px;background:rgba(201,166,58,0.08);color:var(--white);font-size:14px}
.account-side{padding:0}
.account-side-inner{display:flex;flex-direction:column;max-height:70vh;padding:16px}
.account-side .admin-tabs{flex:0 0 auto}
.account-side .admin-tab-panel{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) transparent;padding-right:4px}
/* Side by side: the right column takes the booking card's height and its tabs scroll inside it */
@media(min-width:900px){
  .account-layout{grid-template-columns:1fr 1fr;align-items:stretch}
  .account-side{position:relative;min-height:320px}
  .account-side-inner{position:absolute;inset:0;max-height:none;padding:20px}
}
.account-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.booking-form input[readonly]{background:rgba(255,255,255,0.01);border-style:dashed;color:var(--muted);cursor:default}
.account-contact-note{margin-top:-6px;font-size:13px}
/* Barber schedule and time off */
.tab-badge{display:inline-block;min-width:18px;margin-left:4px;padding:0 6px;border-radius:9px;background:var(--accent);color:#081018;font-size:12px;font-weight:700;line-height:18px;text-align:center}
.admin-tab.active .tab-badge{background:#081018;color:var(--accent)}
.status-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:9px;font-size:12px;font-weight:600;vertical-align:middle}
.status-pending{background:rgba(252,211,77,0.15);color:#fcd34d}
.status-approved{background:rgba(110,231,183,0.15);color:#6ee7b7}
.status-denied{background:rgba(248,113,113,0.15);color:#f87171}
.timeoff-conflict{display:inline-block;margin-top:4px;color:#fcd34d;font-size:13px}
.time-off-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.time-off-item{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.schedule-section{margin-top:28px}
.working-hours-grid{display:grid;gap:10px;margin:14px 0 16px}
.working-hours-row{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(150px,1fr);
  align-items:end;
  gap:14px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
}
.working-hours-row label{margin:0}
.working-hours-day{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:700}
.working-hours-day input{width:20px;min-height:20px}
.working-hours-row input:disabled{opacity:0.4;cursor:not-allowed}
/* Time fields match the other dark fields; a dark color-scheme darkens the browser's clock picker */
input[type="time"]{color-scheme:dark;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.14);color:var(--white);border-radius:8px;padding:8px 10px;font:inherit;font-size:16px;min-height:44px}
.schedule-conflict-warning{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(252,211,77,0.55);
  border-radius:10px;
  background:rgba(252,211,77,0.09);
  color:#fcd34d;
}
.schedule-conflict-warning p{margin:6px 0 10px}
.schedule-conflict-warning .admin-item{color:var(--white)}
@media(max-width:700px){
  .working-hours-row{grid-template-columns:1fr 1fr}
  .working-hours-day{grid-column:1 / -1}
}
.user-barber-link select{margin-left:6px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.14);color:var(--white);border-radius:6px;padding:4px 8px;font:inherit;font-size:16px;min-height:44px;max-width:100%}
.report-summary{display:flex;flex-wrap:wrap;gap:14px;padding:12px;background:rgba(255,255,255,0.02);border-radius:10px;margin-bottom:12px}
.report-stat{display:flex;flex-direction:column;gap:4px;min-width:110px}
.report-stat strong{font-size:20px;color:var(--accent)}
.customer-detail{margin-top:16px;padding:16px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.08)}
.customer-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.customer-detail h4{margin:0 0 8px;font-size:16px;color:var(--muted)}
.customer-search-form{margin-bottom:4px}
.customer-search-form label{flex:1 1 240px;min-width:0}
.customer-result-count{margin:0 0 8px;font-size:13px}
.customer-list-scroll{max-height:770px;overflow-y:auto;padding-right:6px;scrollbar-gutter:stable}
.customer-list-scroll .customer-row{min-height:68px}
.customer-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px}
.customer-pagination button:disabled{cursor:not-allowed;opacity:0.45}

/* Appointment calendar */
.calendar-grid{overflow-x:auto}
.cal-layout{display:flex;gap:0;min-width:600px}
.cal-hours{display:flex;flex-direction:column;width:52px;flex-shrink:0;padding-top:32px}
.cal-hour-label{font-size:12px;color:var(--muted);height:var(--cal-hour,60px);line-height:1;padding-top:2px;text-align:right;padding-right:8px}
.cal-columns{display:flex;flex:1;gap:6px}
.cal-column{flex:1;min-width:120px;display:flex;flex-direction:column}
.cal-col-header{text-align:center;font-size:13px;font-weight:700;padding:6px 4px 8px;color:var(--white)}
.cal-col-body{position:relative;height:660px;background:rgba(255,255,255,0.02);border-radius:6px;overflow:hidden}
.cal-block{position:absolute;left:2px;right:2px;border-radius:6px;padding:3px 6px;font-size:12px;line-height:15px;overflow:hidden;cursor:default;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.cal-timeoff{position:absolute;inset:0;z-index:0;padding:8px;border-radius:6px;font-size:12px;color:var(--white);text-align:center}
.cal-timeoff-approved{background:repeating-linear-gradient(135deg,rgba(255,255,255,0.08) 0 8px,rgba(255,255,255,0.03) 8px 16px)}
.cal-timeoff-pending{border:2px dashed rgba(252,211,77,0.6);color:#fcd34d}
.cal-block{z-index:1}
.cal-busy{background:repeating-linear-gradient(135deg,#4b5563 0 6px,#3f4753 6px 12px);color:var(--white);border:1px solid rgba(255,255,255,0.25);padding-right:22px}
.cal-busy-remove{position:absolute;top:1px;right:2px;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:rgba(0,0,0,0.35);color:var(--white);font-size:14px;line-height:20px;cursor:pointer}
.cal-busy-remove:hover{background:rgba(248,113,113,0.6)}
.cal-block-panel{margin:12px 0}
.cal-block-panel > summary{display:inline-flex;align-items:center;list-style:none;cursor:pointer}
.cal-block-panel > summary::-webkit-details-marker{display:none}
.cal-block-panel[open] > summary{margin-bottom:10px}
.cal-block-panel form{max-width:560px}
/* Blocked time in My Schedule */
.schedule-block-item{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-left:3px solid #6b7280}
.block-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,0.25);color:var(--muted)}
.cal-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hours-list{list-style:none;margin:10px 0;padding:0;border:1px solid rgba(255,255,255,0.1);border-radius:8px;max-width:420px}
.hours-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.06)}
.hours-list li:last-child{border-bottom:0}
.hours-day{font-weight:700;min-width:48px}
.eligibility-list{display:grid;gap:2px;margin:10px 0;max-height:360px;overflow-y:auto;padding-right:4px}
.eligibility-item{display:flex;align-items:center;gap:10px;min-height:40px;margin:0;font-weight:400;cursor:pointer}
.eligibility-item input{width:20px;min-height:20px;flex-shrink:0;accent-color:var(--accent)}

/* Gallery placeholders */
.gallery-placeholder{height:160px;border-radius:8px;background:linear-gradient(180deg,#0b0f12,#081018);display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}

/* Gallery / Slideshow */
.gallery-grid{display:flex;align-items:center;justify-content:center}
.slideshow{position:relative;max-width:1100px;width:100%;display:block;text-align:center;min-height:40vh;padding-bottom:92px}
.slideshow img{display:block;margin:0 auto;max-width:100%;width:auto;height:auto;max-height:70vh;object-fit:contain;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.6);background:#070709;aspect-ratio:16/9;-webkit-aspect-ratio:16/9}
/* position controls absolutely so they don't shift when image height changes */
.slideshow-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:12px;justify-content:center;z-index:200}
.slideshow-btn{background:rgba(0,0,0,0.6);color:var(--white);border:0;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;-webkit-appearance:none;appearance:none}
.slideshow-btn svg{width:60%;height:60%;display:block}
.rev-btn svg{width:60%;height:60%;display:block}
.slideshow-btn.pause{font-size:18px}
/* Lightbox */
.slideshow img{max-height:40vh}
.slideshow-btn{width:44px;height:44px;font-size:20px}
@media(min-width:700px){
  .slideshow{min-height:60vh}
  .slideshow img{max-height:60vh}
  .slideshow-btn{width:56px;height:56px;font-size:28px}
}

/* Reviews carousel */
.reviews-outer{display:flex;flex-direction:column;gap:12px}
.reviews-controls{display:flex;gap:20px;justify-content:center;margin-bottom:14px}
/* Match gallery arrow button size */
.rev-btn{background:rgba(0,0,0,0.65);color:var(--white);border:0;width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,0.5);transition:transform 120ms ease, background 120ms ease}
.reviews-carousel{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch}
.review{background:rgba(255,255,255,0.02);padding:16px;border-radius:8px;margin:0;min-height:110px;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.review::before{content:"★★★★★";color:#F7C843;font-size:16px;letter-spacing:1px;line-height:1;margin:0 0 10px;display:block}
.review p{margin:0 0 8px;font-size:15px;color:var(--muted)}
.review cite{font-size:14px;color:var(--white);font-weight:600}
@media(min-width:481px){
  .reviews-carousel{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:901px){
  .reviews-carousel{grid-template-columns:repeat(5,1fr)}
}


/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:12px}
.map-placeholder{background:linear-gradient(90deg,#071025,#0b1220);height:160px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);margin-top:12px}
.map-wrap{position:relative;margin-top:14px;height:300px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);box-shadow:0 12px 30px rgba(0,0,0,0.5)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(10%) contrast(1.05);pointer-events:none}
/* The whole map is one link to Google Maps (easy to tap on a phone); the logo marks the shop */
.map-pin-link{position:absolute;inset:0;display:block;z-index:3}
.map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:58px;height:58px;object-fit:cover;border-radius:999px;border:2px solid #ffffff;box-shadow:0 8px 18px rgba(0,0,0,0.45);background:#fff;display:block}

/* Footer */
.site-footer{padding:28px 0;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);border-top:1px solid rgba(255,255,255,0.03);}
.footer-row{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
/* Footer social block: icons above labels */
.footer-social{display:flex;width:100%;justify-content:space-between;gap:10px;align-items:center}
.social-item{display:flex;flex:1 1 0;min-width:0;min-height:44px;flex-direction:column;align-items:center;text-decoration:none;color:var(--muted)}
.social-item svg{width:28px;height:28px;margin-bottom:6px}
.social-item span{font-size:13px}
.site-footer a{color:var(--muted);text-decoration:none;margin-left:0}
.site-footer small{color:var(--muted)}
/* Labisko Enterprise credit: fixed colors so the block can be reused on other dark footers.
   Gold #ecc379 is the brand gold from labiskoenterprise.com. */
.le-credit{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06);font-size:14px;line-height:1.5;color:#9aa4b2}
.le-credit p{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.le-credit .le-credit-link{display:inline-flex;align-items:center;gap:6px;color:#ecc379;font-weight:600;text-decoration:none;transition:color .2s}
.le-credit .le-credit-link:hover,.le-credit .le-credit-link:focus-visible{color:#f5d699}
.le-credit .le-credit-link:focus-visible{outline:2px solid #ecc379;outline-offset:3px;border-radius:4px}
.le-credit svg{width:18px;height:18px;flex:none}

/* Contact links: inherit site color but remain clickable */
.contact-grid a{color:var(--muted);text-decoration:none}

/* Larger screens */
@media(min-width:700px){
  .services-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .svc-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px}
  .svc-icon{width:52px;height:52px}
  .svc-icon svg{width:26px;height:26px}
  .svc-card h3{font-size:20px;margin-bottom:6px}
  /* Rows of 3 in Barbers-tab order; a short last row is centered */
  .team-row{display:flex;flex-wrap:wrap;justify-content:center}
  .team-row > .team-card{flex:0 0 calc((100% - 36px) / 3);min-width:0}
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
  .contact-grid{display:flex;gap:32px;align-items:flex-start}
  .contact-grid > div:first-child{flex:1 1 60%}
  .contact-grid > div:nth-child(2){flex:0 0 320px}
  .admin-grid{grid-template-columns:1fr 1fr}
}

@media(min-width:700px){
  .footer-row{flex-direction:row;justify-content:space-between;align-items:center;gap:12px}
  .footer-social{width:auto;justify-content:flex-start;gap:20px}
  .social-item{flex:0 0 auto}
  .social-item span{font-size:14px}
}

/* Dropdowns: Safari ignores height on native selects (they stay ~24px), so drop the
   native look and draw the arrow ourselves; the dark scheme matches the popup list */
.booking-form select,.admin-filters select,.admin-field,.user-barber-link select,.admin-status-select{
  -webkit-appearance:none;appearance:none;color-scheme:dark;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa4b2' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;padding-right:36px
}
.booking-form select{min-height:48px}

@media (min-width:700px){
  .admin-tabs{flex-wrap:wrap;overflow-x:visible}
  .confirm-card{padding:36px 28px}
}
@media (min-width:700px) and (pointer:fine){
  .admin-tab{min-height:0}
  .admin-filters input,.admin-filters select,.admin-field,.user-barber-link select{font-size:14px;min-height:0}
  .admin-status-select,.admin-save-svc,.admin-deactivate-svc,.admin-del-user{font-size:14px;min-height:0}
  .admin-small-btn{min-height:0}
  .admin-topbar .book-btn{font-size:18px;padding:12px 20px}
}

/* Hover effects only for devices with a real pointer: on touch screens hover
   "sticks" after a tap, leaving buttons and tabs looking pressed */
@media (hover:hover) and (pointer:fine){
  .book-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,0.6)}
  .booksy-fallback:hover{color:var(--accent);text-decoration:underline}
  .slideshow-btn:hover{background:rgba(0,0,0,0.8)}
  .rev-btn:hover{background:rgba(0,0,0,0.85);transform:translateY(-4px)}
  .map-pin-link:hover .map-pin{transform:translate(-50%,-100%) scale(1.04)}
  .contact-grid a:hover{color:var(--accent);text-decoration:underline}
  .admin-tab:not(.active):hover{border-color:var(--accent);color:var(--white)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Utility */
.hidden{display:none}