/* =============================================
   ZORA WOMEN — Shared Stylesheet
   ============================================= */

/* ── Google Fonts are loaded via <link> in each HTML file ── */

/* ── Material Symbols ── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Base Typography ── */
body {
    font-family: 'Manrope', 'Jost', sans-serif;
    min-height: max(884px, 100dvh);
}
h1, h2, h3, h4 {
    font-family: 'Newsreader', 'Cormorant Garamond', serif;
}
.font-headline { font-family: 'Newsreader', 'Cormorant Garamond', serif; }
.font-body     { font-family: 'Manrope', 'Jost', sans-serif; }

/* ── Shadows ── */
.editorial-shadow { box-shadow: 0 40px 60px rgba(0, 0, 0, 0.5); }
.card-shadow      { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }

/* ── Clip Paths ── */
.asymmetric-bleed  { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.asymmetric-image  { clip-path: polygon(0 0, 100% 5%, 95% 100%, 5% 95%); }

/* ── Gradient Button ── */
.btn-gradient {
    background: linear-gradient(135deg, #ffb693 0%, #dc743e 100%);
}
.btn-gradient:hover { filter: brightness(1.1); }

/* ── Custom Scrollbar ── */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #210f07; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ffb693;
    border-radius: 10px;
}

/* ── Mobile Nav Menu ── */
#mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(33, 15, 7, 0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 182, 147, 0.15);
    padding: 1.5rem 2rem;
}
#mobile-menu.open { display: flex; flex-direction: column; gap: 1.25rem; }
#mobile-menu a {
    font-family: 'Newsreader', serif;
    font-size: 1.1rem;
    color: rgba(255, 182, 147, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s;
}
#mobile-menu a:hover { color: #fff; }

/* ── Intake Step Panels ── */
/* !important beats Tailwind CDN utility classes (flex/grid) on inactive panels */
.step-panel:not(.active) { display: none !important; }
/* Active panels: no display rule here — Tailwind's grid/flex classes on each step handle it */

/* ── Age Selector Cards ── */
.age-option {
    transition: all 0.25s ease;
    cursor: pointer;
}
.age-option.selected {
    background-color: #dc743e;
    color: #4b1b00;
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(220, 116, 62, 0.2);
}
.age-option.selected .age-label { font-style: italic; font-weight: 500; }
.age-option.selected .age-check { opacity: 1; }
.age-option:not(.selected) .age-check { opacity: 0; }
.age-option:not(.selected):hover .age-check { opacity: 0.4; }

/* ── Symptom Cards ── */
.symptom-card {
    transition: all 0.25s ease;
    cursor: pointer;
}
.symptom-card.selected {
    background-color: #ffb693;
    color: #4b1b00;
    border-color: rgba(255, 182, 147, 0.3);
}
.symptom-card.selected .symptom-check { opacity: 1; }
.symptom-card:not(.selected) .symptom-check { opacity: 0; }

/* ── Doctor History Options ── */
.doctor-option {
    transition: all 0.25s ease;
    cursor: pointer;
}
.doctor-option.selected {
    background-color: #3b251c;
    border-left: 4px solid #ffb693;
    padding-left: 20px;
}
.doctor-option.selected .option-text { color: #ffb693; }
.doctor-option.selected .radio-dot { opacity: 1; }
.doctor-option:not(.selected) .radio-dot { opacity: 0; }

/* ── Progress Bar ── */
.progress-fill {
    height: 100%;
    background-color: #f4bd6c;
    transition: width 0.6s ease;
    box-shadow: 0 0 15px rgba(255, 182, 147, 0.3);
}

/* ── Thank You Page ── */
.thankyou-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 98, 45, 0.15), transparent 70%);
    pointer-events: none;
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Transitions ── */
* { box-sizing: border-box; }
a, button { transition: opacity 0.2s, transform 0.2s, filter 0.2s; }