/* ====================================
   LADY A BEAUTY – SHARED DESIGN SYSTEM
   Noir Glamour / Dark Luxury Editorial
==================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --neon-pink: #ff69b4;
  --neon-pink-rgb: 255, 105, 180;
  --rose-gold: #c9a97a;
  --deep-black: #18171f;
  --soft-black: #1e1d26;
  --charcoal: #2a2935;
  --border: rgba(255,255,255,0.08);
  --white: #f7f5f0;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--deep-black); color: var(--white); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--deep-black); }
::-webkit-scrollbar-thumb { background: rgba(var(--neon-pink-rgb),.4); border-radius: 3px; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: var(--font-body); }

/* LAYOUT */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
@media(min-width:640px){ .container { padding: 0 1.5rem; } }
@media(min-width:1024px){ .container { padding: 0 2rem; } }

/* UTILITIES */
.neon-glow { color: var(--neon-pink); text-shadow: 0 0 10px rgba(var(--neon-pink-rgb),.6), 0 0 24px rgba(var(--neon-pink-rgb),.35), 0 0 50px rgba(var(--neon-pink-rgb),.18); }
.gold-text { background: linear-gradient(135deg, #c9a97a, #e8cc90, #c9a97a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.label-tag { font-family: var(--font-body); font-size:.65rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--rose-gold); }

/* BUTTONS */
.btn-primary { display:inline-block; padding:.85rem 2rem; background:var(--neon-pink); color:var(--deep-black); font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; border-radius:3px; transition:opacity .3s,box-shadow .3s; box-shadow:0 0 22px rgba(var(--neon-pink-rgb),.3); text-align:center; cursor:pointer; }
.btn-primary:hover { opacity:.9; box-shadow:0 0 36px rgba(var(--neon-pink-rgb),.5); }
.btn-outline { display:inline-block; padding:.85rem 2rem; border:1px solid rgba(255,255,255,.28); color:#fff; font-family:var(--font-body); font-size:.78rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; border-radius:3px; transition:border-color .3s,color .3s; text-align:center; cursor:pointer; }
.btn-outline:hover { border-color:var(--neon-pink); color:var(--neon-pink); }
.btn-neon-outline { display:inline-block; padding:.85rem 2rem; border:2px solid var(--neon-pink); color:var(--neon-pink); font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; border-radius:3px; transition:background .3s,color .3s; text-align:center; cursor:pointer; }
.btn-neon-outline:hover { background:var(--neon-pink); color:var(--deep-black); }

/* NAVBAR */
.navbar { position:fixed; top:0; left:0; right:0; z-index:100; transition:background .5s,border-color .5s,box-shadow .5s; border-bottom:1px solid transparent; }
.navbar.scrolled { background:rgba(24,23,31,.96); backdrop-filter:blur(12px); border-color:rgba(var(--neon-pink-rgb),.09); box-shadow:0 4px 30px rgba(var(--neon-pink-rgb),.04); }
.navbar-inner { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; }
.nav-links { display:none; list-style:none; gap:1.5rem; align-items:center; flex:1; }
@media(min-width:1024px){ .nav-links { display:flex; } }
.nav-links.right { justify-content:flex-end; }
.nav-link { font-family:var(--font-body); font-size:.65rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.65); transition:color .3s; position:relative; padding-bottom:2px; cursor:pointer; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--neon-pink); transition:width .3s; }
.nav-link:hover,.nav-link.active { color:var(--neon-pink); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-cta { display:none; font-family:var(--font-body); font-size:.65rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; padding:.6rem 1.4rem; border:2px solid var(--neon-pink); color:var(--neon-pink); border-radius:6px; transition:background .3s,color .3s; box-shadow:0 0 12px rgba(var(--neon-pink-rgb),.2); cursor:pointer; }
@media(min-width:1024px){ .nav-cta { display:inline-block; } }
.nav-cta:hover { background:var(--neon-pink); color:var(--deep-black); }
.logo-btn { display:flex; align-items:center; justify-content:center; cursor:pointer; }
.logo-img { height:5.5rem; width:auto; filter:drop-shadow(0 0 24px rgba(var(--neon-pink-rgb),.35)); transition:height .4s; }
.navbar.scrolled .logo-img { height:4.5rem; }
@media(min-width:640px){ .logo-img { height:6.5rem; } .navbar.scrolled .logo-img { height:5.5rem; } }
@media(min-width:1024px){ .logo-img { height:8.5rem; } .navbar.scrolled .logo-img { height:7rem; } }
.hamburger { display:flex; align-items:center; justify-content:center; width:44px; height:44px; color:rgba(255,255,255,.8); transition:color .3s; }
@media(min-width:1024px){ .hamburger { display:none; } }
.hamburger:hover { color:var(--neon-pink); }
.mobile-menu { position:fixed; inset:0; z-index:90; background:rgba(24,23,31,.98); backdrop-filter:blur(20px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; opacity:0; pointer-events:none; transition:opacity .3s; }
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-menu a,.mobile-menu button { font-family:var(--font-display); font-size:1.1rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.75); transition:color .3s; min-height:48px; display:flex; align-items:center; cursor:pointer; background:none; border:none; }
.mobile-menu a:hover,.mobile-menu button:hover { color:var(--neon-pink); }
.mobile-cta { margin-top:1rem; padding:1rem 3rem; border:1px solid var(--neon-pink) !important; color:var(--neon-pink) !important; font-family:var(--font-body) !important; font-size:.8rem !important; letter-spacing:.15em !important; border-radius:3px; }
.mobile-cta:hover { background:var(--neon-pink) !important; color:var(--deep-black) !important; }

/* SECTION HEADERS */
.section-header { text-align:center; margin-bottom:3rem; }
.section-header h2 { margin-top:.75rem; font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem); font-weight:700; color:#fff; }
.section-line { margin:1.25rem auto 0; width:3rem; height:1px; background:var(--neon-pink); }

/* REVEAL ANIMATIONS */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s,transform .7s; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* FORM STYLES */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-family:var(--font-body); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.6); margin-bottom:.5rem; }
.form-input { width:100%; padding:.85rem 1rem; background:rgba(30,29,38,.6); border:1px solid rgba(255,255,255,.1); color:#fff; font-family:var(--font-body); font-size:.875rem; border-radius:6px; transition:border-color .3s; outline:none; }
.form-input:focus { border-color:var(--neon-pink); }
.form-input::placeholder { color:rgba(255,255,255,.2); }
.form-input.icon { padding-left:2.75rem; }

/* FOOTER */
.footer { background:var(--deep-black); border-top:1px solid rgba(255,255,255,.04); }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; padding:3.5rem 0 2rem; }
@media(min-width:640px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:768px){ .footer-grid { grid-template-columns:1fr 1fr 1fr; } }
.footer-logo { height:5rem; width:auto; filter:drop-shadow(0 0 22px rgba(var(--neon-pink-rgb),.35)); margin:0 auto 1.25rem; display:block; }
@media(min-width:640px){ .footer-logo { margin-left:0; } }
.footer-desc { font-family:var(--font-body); font-size:.8rem; color:rgba(255,255,255,.35); line-height:1.7; max-width:18rem; text-align:center; }
@media(min-width:640px){ .footer-desc { text-align:left; } }
.footer-social { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.38); transition:border-color .3s,color .3s; }
.footer-social:hover { border-color:rgba(var(--neon-pink-rgb),.38); color:var(--neon-pink); }
.footer-h4 { font-family:var(--font-display); font-size:.8rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin-bottom:1.25rem; }
.footer-nav-link { display:flex; align-items:center; font-family:var(--font-body); font-size:.83rem; color:rgba(255,255,255,.38); transition:color .3s; min-height:32px; cursor:pointer; background:none; border:none; }
.footer-nav-link:hover { color:var(--neon-pink); }
.footer-legal { margin-top:1rem; padding:1.5rem 0; border-top:1px solid rgba(255,255,255,.04); }
.footer-copy { font-family:var(--font-body); font-size:.68rem; color:rgba(255,255,255,.18); letter-spacing:.04em; }
.footer-credit { font-family:var(--font-body); font-size:.68rem; color:rgba(var(--neon-pink-rgb),.55); transition:color .3s; }
.footer-credit:hover { color:var(--neon-pink); }

/* PAGE HEADER (sub-pages) */
.page-header { background:linear-gradient(to bottom, rgba(var(--neon-pink-rgb),.1), var(--deep-black)); border-bottom:1px solid rgba(var(--neon-pink-rgb),.2); padding:5rem 0 3rem; margin-top:0; }
.page-header h1 { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.5rem); font-weight:700; color:#fff; }
.page-header p { color:rgba(255,255,255,.5); margin-top:.75rem; font-size:.875rem; }

/* BOOKING PAGE */
.booking-header { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(24,23,31,.96); backdrop-filter:blur(12px); border-bottom:1px solid rgba(var(--neon-pink-rgb),.1); padding:.65rem 0; }
.booking-wrap { padding-top:6rem; padding-bottom:4rem; }
.step-progress { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:2.5rem; }
.step-dot { width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:.72rem; font-weight:600; transition:all .3s; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.3); }
.step-dot.active { background:var(--neon-pink); color:var(--deep-black); border-color:var(--neon-pink); }
.step-dot.done { background:rgba(var(--neon-pink-rgb),.2); color:var(--neon-pink); border-color:rgba(var(--neon-pink-rgb),.4); }
.step-line { width:2rem; height:1px; background:rgba(255,255,255,.1); transition:background .3s; }
.step-line.done { background:rgba(var(--neon-pink-rgb),.4); }
.booking-step { display:none; }
.booking-step.active { display:block; }
.service-option { display:block; width:100%; text-align:left; padding:1.1rem 1.25rem; border:1px solid rgba(255,255,255,.1); background:rgba(30,29,38,.5); margin-bottom:.6rem; border-radius:4px; transition:all .3s; cursor:pointer; }
.service-option:hover,.service-option.selected { border-color:rgba(var(--neon-pink-rgb),.5); background:rgba(var(--neon-pink-rgb),.04); }
.service-option-name { font-family:var(--font-body); font-weight:600; color:#fff; font-size:.92rem; }
.service-option:hover .service-option-name,.service-option.selected .service-option-name { color:var(--neon-pink); }
.service-option-meta { display:flex; justify-content:space-between; align-items:center; margin-top:.4rem; }
.service-option-price { font-family:var(--font-display); font-size:1rem; font-weight:600; }
.service-option-duration { font-size:.7rem; color:rgba(255,255,255,.35); letter-spacing:.1em; text-transform:uppercase; }
.calendar-wrap { border:1px solid rgba(255,255,255,.1); background:rgba(30,29,38,.5); padding:1.5rem; border-radius:4px; }
.calendar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.calendar-nav { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); transition:color .3s; cursor:pointer; }
.calendar-nav:hover { color:var(--neon-pink); }
.calendar-nav:disabled { color:rgba(255,255,255,.1); cursor:not-allowed; }
.calendar-month { font-family:var(--font-display); font-size:1.1rem; color:#fff; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
.calendar-day-label { text-align:center; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); padding:.5rem 0; font-family:var(--font-body); font-weight:500; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:.85rem; border-radius:4px; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.7); }
.cal-day:hover:not(:disabled):not(.unavailable) { background:rgba(var(--neon-pink-rgb),.15); color:var(--neon-pink); }
.cal-day.selected { background:var(--neon-pink); color:var(--deep-black); font-weight:600; }
.cal-day.unavailable { color:rgba(255,255,255,.15); cursor:not-allowed; }
.cal-day.today:not(.selected) { border:1px solid rgba(var(--neon-pink-rgb),.3); }
.time-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
@media(min-width:480px){ .time-grid { grid-template-columns:repeat(4,1fr); } }
.time-slot { padding:.85rem .5rem; text-align:center; border:1px solid rgba(255,255,255,.1); font-family:var(--font-body); font-size:.83rem; border-radius:4px; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.7); }
.time-slot:hover { border-color:rgba(var(--neon-pink-rgb),.4); color:var(--neon-pink); }
.time-slot.selected { background:var(--neon-pink); color:var(--deep-black); border-color:var(--neon-pink); font-weight:600; }
.time-slot.unavailable { opacity:.3; cursor:not-allowed; }
.summary-box { border:1px solid rgba(255,255,255,.08); background:rgba(30,29,38,.4); border-radius:6px; padding:1.25rem; margin-top:1.5rem; }
.summary-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.summary-row:last-child { border-bottom:none; }
.summary-label { font-family:var(--font-body); font-size:.78rem; color:rgba(255,255,255,.4); }
.summary-value { font-family:var(--font-body); font-size:.83rem; color:#fff; font-weight:500; text-align:right; }
.notice-box { padding:1rem 1.25rem; border-radius:6px; display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.5rem; }
.notice-box.pink { border:1px solid rgba(var(--neon-pink-rgb),.25); background:rgba(var(--neon-pink-rgb),.06); }
.notice-box.muted { border:1px solid rgba(255,255,255,.08); background:rgba(30,29,38,.3); }
.notice-title { font-family:var(--font-body); font-size:.8rem; font-weight:600; color:var(--neon-pink); }
.notice-text { font-family:var(--font-body); font-size:.75rem; color:rgba(255,255,255,.5); line-height:1.6; margin-top:.2rem; }

/* LOGIN / REGISTER CARD */
.auth-card { background:rgba(30,29,38,.45); backdrop-filter:blur(16px); border:1px solid rgba(var(--neon-pink-rgb),.2); border-radius:10px; padding:2rem; box-shadow:0 20px 60px rgba(var(--neon-pink-rgb),.08); }
@media(min-width:640px){ .auth-card { padding:2.5rem; } }
.input-icon-wrap { position:relative; }
.input-icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:rgba(var(--neon-pink-rgb),.4); pointer-events:none; }
.input-icon-wrap input { padding-left:2.75rem; }

/* LEGAL PAGES */
.legal-content { max-width:56rem; margin:0 auto; padding:3rem 0; }
.legal-section { margin-bottom:3rem; }
.legal-section h2 { font-family:var(--font-display); font-size:1.5rem; color:var(--neon-pink); margin-bottom:1rem; }
.legal-section p,.legal-section li { font-family:var(--font-body); font-size:.9rem; color:rgba(255,255,255,.7); line-height:1.8; margin-bottom:.75rem; }
.legal-section ul { padding-left:1.5rem; }
.legal-section li { margin-bottom:.4rem; }
.legal-info-box { padding:1rem 1.25rem; background:rgba(255,255,255,.03); border:1px solid rgba(var(--neon-pink-rgb),.18); border-radius:6px; margin-bottom:1.5rem; }
.legal-info-box p { margin-bottom:.35rem; }
.legal-info-box p:last-child { margin-bottom:0; }
.legal-info-box strong { color:rgba(255,255,255,.85); }

/* ── TOAST ── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }

/* ── LOADING SPINNER ── */
.spinner { width:2rem; height:2rem; border:2px solid rgba(255,105,180,.2); border-top-color:var(--neon-pink); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay { position:fixed; inset:0; background:rgba(24,23,31,.7); backdrop-filter:blur(4px); z-index:500; display:flex; align-items:center; justify-content:center; }
.loading-overlay.hidden { display:none; }

/* ── NAV ACTIVE STATE ── */
.nav-link.active { color:var(--neon-pink); }
.nav-link.active::after { width:100%; }

/* ── SECTION SPACING ── */
.section-pt { padding-top:5rem; }
@media(min-width:640px){ .section-pt { padding-top:7rem; } }

/* ── PAGE BODY FLUSH ── */
.page-flush { padding-top:5.5rem; }

/* ── ERROR STATE ── */
.field-error { font-size:.72rem; color:#f87171; margin-top:.35rem; }
.input-invalid { border-color:#f87171 !important; }