/* ==========================================================================
   Sanjeevni Nasha Mukti Kendra — Core Stylesheet
   Palette: 60% Primary Blue / 30% White / 10% Healing Green
   Fonts: Poppins (display) + Inter (body)
   ========================================================================== */

:root{
    --primary:#0D47A1;
    --primary-hover:#0A3A87;
    --secondary:#FFFFFF;
    --accent:#2EAF5D;
    --accent-hover:#24964F;

    --bg:#F4F8FC;
    --text:#1A2B49;
    --text-muted:#5C6B85;
    --border:#D9E3EE;

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-full:999px;

    --shadow-soft: 0 4px 20px rgba(13,71,161,0.08);
    --shadow-card: 0 10px 30px rgba(13,71,161,0.10);
    --shadow-lift: 0 20px 45px rgba(13,71,161,0.16);

    --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    font-family:'Inter', sans-serif;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-display{
    font-family:'Poppins', sans-serif;
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:2px;
    border-radius:6px;
}

/* ---------- Utility text/bg helpers (kept small, Tailwind covers most) ---------- */
.text-primary{ color:var(--primary); }
.text-accent{ color:var(--accent); }
.bg-primary{ background:var(--primary); }
.bg-accent{ background:var(--accent); }
.bg-app{ background:var(--bg); }

/* ---------- Loading Animation ---------- */
#preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--primary);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
#preloader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring{
    width:56px; height:56px; border-radius:50%;
    border:4px solid rgba(255,255,255,0.25);
    border-top-color:#fff;
    animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Sticky Header ---------- */
#site-header{
    position:sticky; top:0; z-index:1000;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    transition:box-shadow .3s var(--ease);
}
#site-header.scrolled{ box-shadow:var(--shadow-soft); }

.nav-link{
    position:relative;
    color:var(--text);
    font-weight:500;
    padding-bottom:4px;
}
.nav-link::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:2px;
    background:var(--accent);
    transition:width .3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--primary); font-weight:600; }

.btn-call, .btn-whatsapp{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px;
    border-radius:var(--radius-full);
    font-weight:600; font-size:0.9rem;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-call{ background:var(--primary); color:#fff; }
.btn-call:hover{ background:var(--primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.btn-whatsapp{ background:var(--accent); color:#fff; }
.btn-whatsapp:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:var(--shadow-card); }

.btn-outline{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 22px;
    border-radius:var(--radius-full);
    border:1.5px solid var(--primary);
    color:#fff; 
    font-weight:600;
    transition:all .25s var(--ease);
}
.btn-outline:hover{ background:var(--primary); color:#fff; transform:translateY(-2px); }

/* Mobile menu */
#mobile-menu{
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease);
}
#mobile-menu.open{ max-height:520px; }

/* ---------- Hero ---------- */
.hero{
    position:relative;
    background:linear-gradient(180deg,#EAF2FB 0%, var(--bg) 100%);
    overflow:hidden;
}
.hero::before{
    content:'';
    position:absolute; top:-120px; right:-120px;
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(46,175,93,0.14) 0%, rgba(46,175,93,0) 70%);
}
.hero::after{
    content:'';
    position:absolute; bottom:-160px; left:-160px;
    width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle, rgba(13,71,161,0.10) 0%, rgba(13,71,161,0) 70%);
}
.hero-img-frame{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lift);
}
.trust-chip{
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(6px);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.trust-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }

/* ---------- Section labels ---------- */
.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--accent); font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; font-size:0.78rem;
}
.eyebrow::before{
    content:''; width:22px; height:2px; background:var(--accent); display:inline-block;
}

/* ---------- Service / Feature Cards ---------- */
.service-card, .feature-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service-card:hover, .feature-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lift);
    border-color:rgba(13,71,161,0.18);
}
.icon-badge{
    width:56px; height:56px;
    border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(13,71,161,0.10), rgba(46,175,93,0.14));
    color:var(--primary);
    font-size:1.4rem;
    transition:transform .35s var(--ease);
}
.service-card:hover .icon-badge, .feature-card:hover .icon-badge{ transform:scale(1.08) rotate(-4deg); }

/* ---------- Recovery Journey (signature element) ----------
   A single flowing river-path that carries the six steps,
   echoing the wave motif in the clinic's own header artwork. */
.journey-wrap{ position:relative; }
.journey-path{
    position:absolute;
    top:0; left:50%; transform:translateX(-50%);
    height:100%; width:100%;
    pointer-events:none;
}
.journey-step{
    position:relative;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.journey-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.journey-num{
    width:40px; height:40px; min-width:40px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:600;
    box-shadow:0 6px 16px rgba(13,71,161,0.3);
}

/* ---------- Gallery ---------- */
.gallery-item{
    position:relative;
    border-radius:var(--radius-md);
    overflow:hidden;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
}
.gallery-item img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(13,71,161,0) 40%, rgba(10,25,55,0.75) 100%);
    opacity:0; transition:opacity .35s var(--ease);
    display:flex; align-items:flex-end; padding:16px;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }

/* Lightbox */
#lightbox{
    position:fixed; inset:0; z-index:2000;
    background:rgba(10,20,40,0.92);
    display:none; align-items:center; justify-content:center;
    padding:24px;
}
#lightbox.open{ display:flex; }
#lightbox img{
    max-width:90vw; max-height:85vh;
    border-radius:var(--radius-md);
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close, .lightbox-nav{
    position:absolute;
    color:#fff; background:rgba(255,255,255,0.12);
    border-radius:50%;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    transition:background .25s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover{ background:rgba(255,255,255,0.25); }
.lightbox-close{ top:20px; right:20px; }
.lightbox-nav.prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:20px; top:50%; transform:translateY(-50%); }

/* ---------- Testimonials ---------- */
.testimonial-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
}
.stars i{ color:#F5A623; }

/* ---------- FAQ Accordion ---------- */
.faq-item{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:#fff;
    overflow:hidden;
}
.faq-question{
    width:100%; text-align:left;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px;
    font-weight:600; font-family:'Poppins',sans-serif;
    cursor:pointer;
}
.faq-icon{ transition:transform .3s var(--ease); color:var(--primary); }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-answer{
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease);
    padding:0 20px;
    color:var(--text-muted);
}
.faq-item.open .faq-answer{ padding-bottom:18px; }

/* ---------- Contact ---------- */
.contact-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
}
.form-input{
    width:100%;
    border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 16px;
    background:#fff;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(13,71,161,0.10);
    outline:none;
}
.map-frame{
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-card);
}

/* ---------- Footer ---------- */
footer{ background:#0A2E6B; color:rgba(255,255,255,0.85); }
footer a{ transition:color .25s var(--ease); }
footer a:hover{ color:var(--accent); }
.social-icon{
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,0.10);
    display:flex; align-items:center; justify-content:center;
    transition:background .25s var(--ease), transform .25s var(--ease);
}
.social-icon:hover{ background:var(--accent); transform:translateY(-3px); }

/* ---------- Floating Buttons ---------- */
.floating-btns{ position:fixed; right:18px; bottom:18px; z-index:900; display:flex; flex-direction:column; gap:12px; }
.fab{
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.4rem;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    transition:transform .25s var(--ease);
}
.fab:hover{ transform:scale(1.08); }
.fab-whatsapp{ background:var(--accent); }
.fab-call{ background:var(--primary); }
.fab-top{
    width:44px; height:44px; border-radius:50%;
    background:#fff; color:var(--primary);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-soft);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:all .3s var(--ease);
}
.fab-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.wa-pulse{
    position:absolute; inset:0; border-radius:50%;
    background:var(--accent);
    animation:pulse 2s infinite;
    z-index:-1;
}
@keyframes pulse{
    0%{ transform:scale(1); opacity:.6; }
    100%{ transform:scale(1.7); opacity:0; }
}

/* ---------- Reveal-on-scroll (lightweight AOS replacement) ---------- */
[data-reveal]{
    opacity:0; transform:translateY(24px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-30px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(30px); }
[data-reveal="right"].in-view{ transform:translateX(0); }

/* ---------- Section divider wave (echoes header art) ---------- */
.wave-divider{ display:block; width:100%; line-height:0; }
.wave-divider svg{ width:100%; height:60px; display:block; }

/* Skip link */
.skip-link{
    position:absolute; left:-9999px; top:auto;
    background:var(--primary); color:#fff;
    padding:10px 16px; border-radius:8px; z-index:2000;
}
.skip-link:focus{ left:16px; top:16px; }