/* ==========================================================================
   Fusion Salon — Design tokens
   Palette: warm espresso dark, brushed gold + muted clay accent
   Type: Cormorant Garamond (display) / Manrope (body + UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:        #14110d;
  --bg-soft:   #1c170f;
  --card:      #221c14;
  --card-hi:   #2a2318;
  --line:      #3a3122;
  --text:      #f4ede0;
  --muted:     #a99a80;
  --muted-2:   #7d715d;
  --gold:      #c9a24b;
  --gold-hi:   #e0bd6b;
  --rose:      #a85c46;
  --rose-hi:   #c17a63;
  --danger:    #d9695a;
  --ok:        #7fae7a;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 12px 32px rgba(0,0,0,.35);
  --container: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .4em;
  color: var(--text);
  letter-spacing: .01em;
}
h1{ font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3{ font-size: 1.4rem; }
p{ margin: 0 0 1em; color: var(--muted); max-width: 60ch; }
a{ color: var(--gold-hi); text-decoration: none; }
img{ max-width: 100%; display: block; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-body); font-weight:700; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color: var(--gold);
  margin-bottom: .9em;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background: var(--gold); display:inline-block;
}

/* signature underline flourish — used once per section header */
.flourish{ display:block; width:150px; height:14px; margin:.35em 0 1.1em; overflow:visible; }
.flourish path{
  fill:none; stroke: var(--gold); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.1s ease;
}
.flourish.in-view path{ stroke-dashoffset: 0; }

/* ---------- buttons & forms ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-body); font-weight:700; font-size:.85rem;
  letter-spacing:.03em; text-transform:uppercase;
  padding: .95em 1.7em; border-radius: var(--radius); border: 1px solid transparent;
  cursor:pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  line-height:1;
}
.btn:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.btn-primary{ background: var(--gold); color: #1a1509; }
.btn-primary:hover{ background: var(--gold-hi); transform: translateY(-1px); }
.btn-outline{ background: transparent; border-color: var(--line); color: var(--text); }
.btn-outline:hover{ border-color: var(--gold); color: var(--gold-hi); }
.btn-ghost{ background: transparent; color: var(--muted); border-color: transparent; padding:.6em 1em; }
.btn-ghost:hover{ color: var(--text); }
.btn-danger{ background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color: #1a1509; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-block{ width:100%; }

.field{ margin-bottom: 1.1em; text-align:left; }
.field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); margin-bottom:.5em; }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg-soft); border:1px solid var(--line); color: var(--text);
  padding: .85em 1em; border-radius: var(--radius); font-family: var(--font-body); font-size: .95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.15);
}
.field small{ display:block; color: var(--muted-2); margin-top:.4em; font-size:.78rem; }
.field-error{ color: var(--danger); font-size: .8rem; margin-top: .4em; }
.checkbox-row{ display:flex; align-items:flex-start; gap:.6em; }
.checkbox-row input{ width:auto; margin-top:.3em; accent-color: var(--gold); }
.checkbox-row label{ text-transform:none; font-weight:500; letter-spacing:0; color: var(--muted); font-size:.9rem; }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(20,17,13,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding: 18px 0; }
.brand{ font-family: var(--font-display); font-size:1.5rem; font-weight:600; color: var(--text); letter-spacing:.02em; }
.brand span{ color: var(--gold); }
.nav-links{ display:flex; gap: 2.2em; list-style:none; margin:0; padding:0; }
.nav-links a{
  color: var(--muted); font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding: .4em 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active{ color: var(--text); border-color: var(--gold); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color: var(--text); border-radius: var(--radius); padding:.5em .7em; }

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background: var(--bg-soft);
    flex-direction:column; gap:0; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .nav-links.open{ max-height: 400px; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding: 1em 24px; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height: 84vh; display:flex; align-items:center;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(201,162,75,.14), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  overflow:hidden; border-bottom: 1px solid var(--line);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, rgba(244,237,224,.05) 1px, transparent 0);
  background-size: 26px 26px;
}
.hero-inner{ position:relative; z-index:1; max-width: 720px; }
.hero-kicker{ color: var(--gold); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:.78rem; margin-bottom:1em; }
.hero p.lead{ font-size:1.15rem; color: var(--muted); max-width: 46ch; }
.hero-cta{ display:flex; gap:1em; margin-top:1.8em; flex-wrap:wrap; }
.hero-media-frame{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width: 34vw; max-width:460px; min-width:260px; aspect-ratio: 3/4;
  border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.hero-media-frame img, .hero-media-frame video{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 980px){ .hero-media-frame{ display:none; } }

/* ---------- sections ---------- */
section{ padding: 92px 0; }
.section-soft{ background: var(--bg-soft); }
.section-head{ max-width: 640px; margin-bottom: 3em; }

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:14px;
}
.gallery-item{
  position:relative; border-radius: var(--radius); overflow:hidden; background: var(--card);
  border:1px solid var(--line); aspect-ratio: 1/1;
}
.gallery-item.wide{ grid-column: span 2; }
.gallery-item.tall{ grid-row: span 2; aspect-ratio: 1/2; }
.gallery-item img, .gallery-item video{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.gallery-item:hover img, .gallery-item:hover video{ transform: scale(1.04); }
.gallery-grid > *{ grid-column: span 3; }
@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid > *{ grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio:1/1 !important; }
}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 1em; font-size:.78rem; color: var(--text);
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}
.gallery-empty{
  grid-column: 1/-1; border:1px dashed var(--line); border-radius: var(--radius-lg);
  padding: 3em; text-align:center; color: var(--muted-2);
}

/* ---------- staff ---------- */
.staff-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 980px){ .staff-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .staff-grid{ grid-template-columns: 1fr; } }
.staff-card{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.staff-photo{ aspect-ratio: 3/4; background: var(--card-hi); position:relative; overflow:hidden; }
.staff-photo img{ width:100%; height:100%; object-fit:cover; }
.staff-photo .initials{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:2.6rem; color: var(--muted-2);
}
.staff-body{ padding: 1.3em 1.4em 1.6em; }
.staff-body h3{ margin-bottom:.15em; }
.staff-role{ color: var(--gold); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- services ---------- */
.service-row{
  display:flex; justify-content:space-between; align-items:baseline; gap: 2em;
  padding: 1.6em 0; border-bottom: 1px solid var(--line);
}
.service-row:first-child{ border-top: 1px solid var(--line); }
.service-name{ font-family: var(--font-display); font-size:1.35rem; color: var(--text); }
.service-meta{ color: var(--muted-2); font-size:.85rem; margin-top:.25em; }
.service-price{ font-family: var(--font-display); font-size:1.35rem; color: var(--gold-hi); white-space:nowrap; }
.category-label{ margin: 2.6em 0 .6em; color: var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:700; }
.category-label:first-child{ margin-top:0; }

/* ---------- cards / grid utility ---------- */
.card{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6em; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 860px){ .grid-3{ grid-template-columns:1fr; } }

/* ---------- booking stepper ---------- */
.stepper{ display:flex; gap: 0; margin-bottom: 3em; list-style:none; padding:0; }
.stepper li{
  flex:1; text-align:center; padding-bottom: 1em; border-bottom: 2px solid var(--line);
  color: var(--muted-2); font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  position:relative;
}
.stepper li.active{ color: var(--gold-hi); border-color: var(--gold); }
.stepper li.done{ color: var(--muted); border-color: var(--gold-hi); }
.option-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.option-card{
  text-align:left; background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.3em; cursor:pointer; transition: border-color .15s, background .15s;
}
.option-card:hover{ border-color: var(--gold); }
.option-card.selected{ border-color: var(--gold); background: var(--card-hi); }
.option-card h4{ font-family: var(--font-display); margin-bottom:.2em; font-size:1.15rem; }
.option-card .meta{ color: var(--muted-2); font-size:.82rem; }
.slot-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap:10px; }
.slot-btn{
  background: var(--card); border:1px solid var(--line); color: var(--text); border-radius: var(--radius);
  padding:.8em .5em; font-weight:600; font-size:.85rem; cursor:pointer; transition: background .15s, border-color .15s;
}
.slot-btn:hover{ border-color: var(--gold); }
.slot-btn.selected{ background: var(--gold); color:#1a1509; border-color: var(--gold); }
.step-actions{ display:flex; justify-content:space-between; margin-top: 2.4em; }
.summary-row{ display:flex; justify-content:space-between; padding: .8em 0; border-bottom:1px solid var(--line); }
.summary-row:last-child{ border-bottom:none; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 4em; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; gap:2.5em; } }
.contact-item{ display:flex; gap: 1em; margin-bottom: 1.6em; }
.contact-item .icon{ color: var(--gold); flex-shrink:0; }
.contact-item h4{ margin-bottom:.2em; font-size:1.05rem; }
.contact-item p{ margin:0; }

/* ---------- footer ---------- */
.site-footer{ background: var(--bg-soft); border-top: 1px solid var(--line); padding: 60px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3em; margin-bottom: 2.5em; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; gap:2em; } }
.footer-grid h4{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-bottom:1em; }
.footer-grid a{ color: var(--muted); display:block; margin-bottom:.6em; font-size:.92rem; }
.footer-grid a:hover{ color: var(--gold-hi); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em; padding-top: 1.8em; border-top:1px solid var(--line); color: var(--muted-2); font-size:.82rem; }

/* ---------- modal (onboarding) ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(10,8,5,.72); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding: 20px;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  max-width: 460px; width:100%; padding: 2.2em; box-shadow: var(--shadow);
  max-height: 90vh; overflow-y:auto;
}
.modal h2{ font-size:1.6rem; }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom: 24px; right:24px; background: var(--card); border:1px solid var(--gold);
  color: var(--text); padding: 1em 1.4em; border-radius: var(--radius); box-shadow: var(--shadow);
  z-index: 200; font-size:.9rem; max-width: 320px;
}
.toast.error{ border-color: var(--danger); }

/* ---------- admin ---------- */
body.admin-body{ background: var(--bg); }
.admin-shell{ display:grid; grid-template-columns: 240px 1fr; min-height:100vh; }
@media (max-width: 800px){ .admin-shell{ grid-template-columns:1fr; } }
.admin-sidebar{ background: var(--bg-soft); border-right:1px solid var(--line); padding: 1.6em 1.2em; }
.admin-sidebar .brand{ display:block; margin-bottom: 2em; font-size:1.3rem; }
.admin-nav{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3em; }
.admin-nav button{
  width:100%; text-align:left; background:none; border:none; color: var(--muted); padding: .8em 1em;
  border-radius: var(--radius); font-family: var(--font-body); font-size:.9rem; font-weight:600; cursor:pointer;
}
.admin-nav button:hover{ background: var(--card); color: var(--text); }
.admin-nav button.active{ background: var(--card-hi); color: var(--gold-hi); }
.admin-main{ padding: 2.4em 2.6em; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 2em; }
.stat-card{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4em; }
.stat-card .num{ font-family: var(--font-display); font-size:2.2rem; color: var(--gold-hi); }
.stat-card .label{ color: var(--muted-2); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding: .9em 1em; border-bottom: 1px solid var(--line); font-size:.9rem; }
th{ color: var(--muted-2); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; }
tr:hover td{ background: rgba(255,255,255,.02); }
.badge{ display:inline-block; padding:.25em .7em; border-radius: 20px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.badge-confirmed{ background: rgba(127,174,122,.15); color: var(--ok); }
.badge-pending{ background: rgba(201,162,75,.15); color: var(--gold-hi); }
.badge-cancelled{ background: rgba(217,105,90,.15); color: var(--danger); }
.badge-completed{ background: rgba(168,110,70,.15); color: var(--rose-hi); }
.admin-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4em; flex-wrap:wrap; gap:1em; }
.thumb-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.thumb{ position:relative; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--card); aspect-ratio:1; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .thumb-actions{ position:absolute; top:6px; right:6px; display:flex; gap:4px; }
.thumb .thumb-actions button{ background: rgba(0,0,0,.6); border:none; color:#fff; width:26px; height:26px; border-radius:4px; cursor:pointer; font-size:.75rem; }
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--bg); padding:20px; }
.login-card{ width:100%; max-width:380px; background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 2.4em; }
.hint-box{ background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding: 1em 1.2em; font-size:.82rem; color: var(--muted); margin-top:1.4em; }

.dropzone{
  border: 1.5px dashed var(--line); border-radius: var(--radius-lg); padding: 2.4em; text-align:center;
  color: var(--muted); cursor:pointer; transition: border-color .15s;
}
.dropzone:hover, .dropzone.drag{ border-color: var(--gold); color: var(--text); }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }