@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Sora:wght@600;700;800&family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

/* ============ THEME TOKENS ============ */
/* Heritage — old-world evening barbershop: brass, walnut, deep serif */
:root, [data-theme="heritage"] {
  --bg: #1b1613;
  --panel: #241e19;
  --panel-2: #2c241e;
  --text: #f3ece0;
  --muted: #ab9c89;
  --line: #3c3229;
  --accent: #c0904a;
  --accent-2: #f0d9ad;
  --accent-contrast: #1b1613;
  --danger: #d3695f;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', Arial, sans-serif;
  --radius-s: 8px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow: none;
  --border-w: 1px;
  --hero-clip: none;
  --tracking-display: 0em;
  --btn-radius: 999px;
}

/* Studio — daytime, editorial, minimal */
[data-theme="studio"] {
  --bg: #eeeae2;
  --panel: #ffffff;
  --panel-2: #f4f1ea;
  --text: #211f1b;
  --muted: #71695d;
  --line: #d9d2c4;
  --accent: #3f5d47;
  --accent-2: #274032;
  --accent-contrast: #ffffff;
  --danger: #a3352c;
  --font-display: 'Sora', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --radius-s: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow: none;
  --border-w: 1px;
  --hero-clip: none;
  --tracking-display: -0.01em;
  --btn-radius: 4px;
}

/* Neon Fade — bold, urban, high-energy night shop */
[data-theme="neon"] {
  --bg: #0e1013;
  --panel: #16191d;
  --panel-2: #1c2025;
  --text: #f2f4f6;
  --muted: #868f99;
  --line: #262b31;
  --accent: #45b8ff;
  --accent-2: #ff4d94;
  --accent-contrast: #06121a;
  --danger: #ff5d6c;
  --font-display: 'Bebas Neue', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --radius-s: 4px;
  --radius: 10px;
  --radius-lg: 0px;
  --shadow: 0 0 0 1px rgba(69,184,255,.15);
  --border-w: 1px;
  --hero-clip: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
  --tracking-display: 0.01em;
  --btn-radius: 6px;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);line-height:1.6;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1160px,92%);margin:auto}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--tracking-display);line-height:1.05;margin:0;font-weight:700}
[data-theme="neon"] h1, [data-theme="neon"] h2{font-weight:400}
p{margin:0}
.muted{color:var(--muted)}

.btn{border:var(--border-w) solid transparent;border-radius:var(--btn-radius);padding:13px 22px;font-weight:700;font-family:var(--font-body);cursor:pointer;font-size:.95rem;display:inline-block;transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.gold{background:var(--accent);color:var(--accent-contrast)}
.btn.gold:hover{filter:brightness(1.08)}
.btn.outline{border-color:var(--line);background:transparent;color:var(--text)}
.btn.ghost{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Header ---- */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font:700 1.4rem var(--font-display);letter-spacing:var(--tracking-display)}
.brand span{color:var(--accent)}
.links{display:flex;gap:26px;font-weight:600;font-size:.94rem}
.links a{opacity:.85}
.links a:hover{opacity:1}
.theme-switch{display:flex;gap:6px;align-items:center;margin-right:6px}
.theme-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.theme-dot[data-theme-target="heritage"]{background:linear-gradient(135deg,#c0904a,#1b1613)}
.theme-dot[data-theme-target="studio"]{background:linear-gradient(135deg,#3f5d47,#eeeae2)}
.theme-dot[data-theme-target="neon"]{background:linear-gradient(135deg,#45b8ff,#0e1013)}
.theme-dot.active{border-color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:16px}

/* ---- Hero ---- */
.hero{min-height:680px;display:grid;align-items:center;position:relative}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,color-mix(in srgb, var(--bg) 88%, black) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent 100%), var(--hero) center/cover;
  clip-path:var(--hero-clip);
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:70px 0}
.hero h1{font-size:clamp(3.2rem,6.4vw,5.6rem);margin:16px 0}
.hero p.lede{max-width:600px;color:color-mix(in srgb, var(--text) 78%, transparent);font-size:1.08rem}
.kicker{color:var(--accent);font-weight:700;font-size:.95rem}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Heritage: a single vertical striped divider as the one bold flourish.
   Only heritage gives it a grid track; other themes keep the 2-column
   layout above and the div stays out of flow entirely. */
.pole-divider{display:none;width:12px;border-radius:6px;align-self:stretch;
  background:repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--accent-2) 10px 20px, #6f2b2b 20px 30px);
}
[data-theme="heritage"] .hero-grid{grid-template-columns:1.05fr 14px .95fr}
[data-theme="heritage"] .pole-divider{display:block}

/* ---- Booking panel ---- */
.panel{background:var(--panel);border:var(--border-w) solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow)}
.booking h3{font-size:1.7rem;margin-bottom:4px}
.booking small{color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.full{grid-column:1/-1}
label{font-size:.8rem;color:var(--muted);font-weight:600}
input,select,textarea{width:100%;margin-top:6px;padding:12px 13px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit}
input:disabled,select:disabled{opacity:.6}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Sections ---- */
section{padding:90px 0}
.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:40px;flex-wrap:wrap}
.section-head h2{font-size:clamp(2.2rem,4vw,3.4rem)}
.section-head p{max-width:460px;color:var(--muted)}
[data-theme="studio"] .section-head{border-bottom:1px solid var(--line);padding-bottom:24px}

/* Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{background:var(--panel);border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
[data-theme="neon"] .svc-card{border-top:3px solid var(--accent);border-radius:var(--radius)}
.svc-card h3{font-size:1.4rem;margin:10px 0 8px}
.svc-card p{color:var(--muted);font-size:.95rem}
.price{font-family:var(--font-display);font-size:1.8rem;color:var(--accent);margin-top:14px}

/* Studio: price list style instead of cards for services (it IS a sequential list) */
[data-theme="studio"] .cards{display:block}
[data-theme="studio"] .svc-card{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:22px 0;background:transparent;box-shadow:none}
[data-theme="studio"] .svc-card h3{grid-column:1;margin:0;font-size:1.25rem}
[data-theme="studio"] .svc-card p{grid-column:1;margin-top:6px}
[data-theme="studio"] .svc-card .price{grid-column:2;grid-row:1;font-size:1.25rem}

/* Barbers */
.barbers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.barber img{width:100%;height:290px;object-fit:cover;border-radius:var(--radius);background:var(--panel-2)}
[data-theme="neon"] .barber img{border-radius:var(--radius-s)}
.barber h3{margin-top:16px;font-size:1.3rem}

/* About */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about img{width:100%;height:480px;object-fit:cover;border-radius:var(--radius-lg)}
.about h2{font-size:clamp(2.2rem,4vw,3.6rem);margin-bottom:14px}
.about p{color:var(--muted);margin-top:12px}

/* Contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px}
.info-row{padding:14px 0;border-bottom:1px solid var(--line)}
.info-row b{font-family:var(--font-body)}
.success{display:none;color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);border-radius:var(--radius-s);padding:11px;margin-top:12px;font-weight:600}
.error-msg{display:none;color:var(--danger);background:color-mix(in srgb, var(--danger) 14%, transparent);border-radius:var(--radius-s);padding:11px;margin-top:12px;font-weight:600}

footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:.9rem}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:900px){
  .links{display:none}
  .hero-grid,.about,.contact{grid-template-columns:1fr}
  .cards,.barbers{grid-template-columns:1fr}
  .hero{padding:50px 0}
  .hero::before{clip-path:none}
  .pole-divider{display:none !important}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  h1{font-size:2.6rem}
  .section-head{flex-direction:column;align-items:start}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ============ ADMIN ============ */
.admin-body{margin:0;background:#0c0c0c;color:#f6f3ed;font-family:'Inter',Arial,sans-serif}
.admin-body button,.admin-body input,.admin-body textarea,.admin-body select{font:inherit}
.a-wrap{width:min(1180px,94%);margin:auto}
.a-top{display:flex;justify-content:space-between;align-items:center;padding:24px 0}
.a-top h1{margin:0;font-family:Georgia,serif;font-size:1.6rem}
.a-btn{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.a-gold{background:#c9a45c;color:#17120b}
.a-danger{background:#4a1919;color:#ffdada}
.a-ghost{background:#242424;color:#eee}
.a-login{max-width:420px;margin:10vh auto;background:#171717;border:1px solid #303030;border-radius:20px;padding:28px}
.a-login h1{font-family:Georgia,serif}
.a-field{margin:12px 0}
.a-field label{display:block;font-size:.8rem;color:#ccc;margin-bottom:6px}
.a-field input,.a-field textarea,.a-field select{width:100%;background:#222;border:1px solid #383838;color:white;padding:11px;border-radius:9px}
.a-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.a-tabs button.active{background:#c9a45c;color:#17120b}
.a-section{display:none}
.a-section.active{display:block}
.a-panel{background:#171717;border:1px solid #303030;border-radius:18px;padding:20px;margin-bottom:18px}
.a-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.a-full{grid-column:1/-1}
.a-row{display:grid;grid-template-columns:auto 1fr 1.4fr .7fr .5fr auto;gap:9px;align-items:center;border-bottom:1px solid #303030;padding:10px 0}
.a-row:last-child{border-bottom:0}
.a-row input{width:100%;background:#222;border:1px solid #3a3a3a;color:#fff;border-radius:8px;padding:9px}
.a-order-btns{display:flex;flex-direction:column;gap:2px}
.a-order-btns button{background:#242424;color:#ccc;border:1px solid #3a3a3a;border-radius:5px;width:26px;height:22px;cursor:pointer;line-height:1}
.a-cards{display:grid;gap:12px}
.a-item{border:1px solid #303030;border-radius:14px;padding:14px;background:#131313}
.a-item b{color:#f5d993}
.a-muted{color:#aaa}
.a-status{padding:5px 8px;border-radius:999px;background:#292929}
.a-notice{padding:10px;border-radius:9px;background:#1c3322;color:#c9f2d3;display:none;margin:10px 0}
.a-notice.err{background:#3a1c1c;color:#ffd0d0}
.a-upload-preview{max-width:240px;border-radius:12px;margin-top:8px}
.theme-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.theme-pick label{display:block;border:2px solid #303030;border-radius:14px;padding:14px;cursor:pointer;text-align:center}
.theme-pick label.picked{border-color:#c9a45c}
.theme-swatch{height:52px;border-radius:9px;margin-bottom:10px}
.theme-swatch.heritage{background:linear-gradient(135deg,#c0904a,#1b1613)}
.theme-swatch.studio{background:linear-gradient(135deg,#3f5d47,#eeeae2)}
.theme-swatch.neon{background:linear-gradient(135deg,#45b8ff,#0e1013)}
@media(max-width:760px){
  .a-grid{grid-template-columns:1fr}
  .a-full{grid-column:auto}
  .a-row{grid-template-columns:1fr}
  .a-top{align-items:flex-start;gap:10px;flex-direction:column}
  .theme-pick{grid-template-columns:1fr}
}