/* =========================================================================
   Diagnostic Center PP — Public theme  "Clinical & Fresh"  (Teal + Cyan)
   Distinct from sibling PP sites: teal/cyan palette, Sora display font,
   split hero, cyan wave dividers, glassmorphism, rounded-2xl, pill buttons.
   ========================================================================= */
:root {
    --dc-primary: #0E9488;
    --dc-primary-rgb: 14, 148, 136;
    --dc-accent: #06B6D4;
    --dc-accent-rgb: 6, 182, 212;
    --dc-dark: #0F2A2E;
    --dc-light: #F2FAF9;
    --dc-muted: #5B7B79;
    --dc-border: #DCEFEC;
    --dc-surface: #ffffff;

    --dc-radius-sm: .5rem;
    --dc-radius: .85rem;
    --dc-radius-lg: 1.15rem;
    --dc-radius-2xl: 1.5rem;
    --dc-shadow-sm: 0 2px 10px rgba(15, 42, 46, .06);
    --dc-shadow: 0 10px 30px rgba(15, 42, 46, .08);
    --dc-shadow-lg: 0 18px 50px rgba(15, 42, 46, .12);
    --dc-t: .25s cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

body {
    font-family: 'Hind Siliguri', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--dc-dark);
    background: var(--dc-surface);
    margin: 0;
    line-height: 1.65;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, .display-font {
    font-family: 'Sora', 'Hind Siliguri', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dc-dark);
}

a { color: var(--dc-primary); text-decoration: none; transition: color var(--dc-t); }
a:hover { color: var(--dc-accent); }

.container-dc { max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }

/* ---- Buttons (pill + gradient) ---- */
.btn-dc {
    display: inline-flex; align-items: center; gap: .5rem;
    background: linear-gradient(135deg, var(--dc-primary), var(--dc-accent));
    color: #fff; border: none; border-radius: 50rem;
    padding: .7rem 1.5rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--dc-primary-rgb), .28);
    transition: transform var(--dc-t), box-shadow var(--dc-t), filter var(--dc-t);
    text-decoration: none;
}
.btn-dc:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; box-shadow: 0 10px 26px rgba(var(--dc-primary-rgb), .36); }
.btn-dc.btn-sm { padding: .45rem 1rem; font-size: .85rem; }
.btn-dc-outline {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; color: var(--dc-primary);
    border: 1.5px solid var(--dc-primary); border-radius: 50rem;
    padding: .65rem 1.4rem; font-weight: 600; transition: all var(--dc-t); text-decoration: none;
}
.btn-dc-outline:hover { background: var(--dc-primary); color: #fff; }
.btn-dc-outline.btn-sm { padding: .4rem 1rem; font-size: .85rem; }

/* ---- Cards (rounded-2xl + hover lift) ---- */
.card-dc {
    background: var(--dc-surface); border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2xl); box-shadow: var(--dc-shadow-sm);
    overflow: hidden; transition: transform var(--dc-t), box-shadow var(--dc-t);
}
.card-dc:hover { transform: translateY(-6px); box-shadow: var(--dc-shadow-lg); }

/* ---- Glassmorphism quick-action card ---- */
.glass {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--dc-radius-2xl);
    box-shadow: var(--dc-shadow);
}

/* ---- Section helpers ---- */
.section { padding: 4.5rem 0; }
.section-light { background: var(--dc-light); }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title .eyebrow {
    display: inline-block; color: var(--dc-accent); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: .35rem;
}
.section-title h1, .section-title h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.section-title .divider { width: 64px; height: 4px; border-radius: 4px; margin: .8rem auto 0; background: linear-gradient(90deg, var(--dc-primary), var(--dc-accent)); }

/* ---- Cyan wave divider ---- */
.wave-divider { line-height: 0; }
.wave-divider svg { width: 100%; height: 60px; display: block; }

/* ---- Header ---- */
.dc-topbar { background: var(--dc-dark); color: #cfeee9; font-size: .85rem; }
.dc-topbar a { color: #cfeee9; }
.dc-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--dc-border); }
.dc-nav-link { color: var(--dc-dark); font-weight: 600; padding: .5rem .75rem; border-radius: 50rem; transition: all var(--dc-t); white-space: nowrap; }
@media (min-width: 992px) {
    #mainNav { flex-wrap: nowrap; }
    .btn-dc.ms-lg-2 { white-space: nowrap; }
}
.dc-nav-link:hover, .dc-nav-link.active { color: var(--dc-primary); background: rgba(var(--dc-primary-rgb), .08); }

/* ---- Split hero ---- */
.hero-split { background: linear-gradient(135deg, var(--dc-light), #ffffff); padding: 3.5rem 0 1rem; }
.hero-split h1 { font-size: clamp(2rem, 4.5vw, 3.3rem); }
.hero-badge { display: inline-flex; gap: .4rem; align-items: center; background: rgba(var(--dc-accent-rgb), .12); color: var(--dc-primary); border-radius: 50rem; padding: .35rem .9rem; font-weight: 600; font-size: .85rem; }
.report-lookup { background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-2xl); box-shadow: var(--dc-shadow); padding: 1.5rem; }

/* ---- Hero carousel slide ---- */
.hero-carousel .carousel-inner { border-radius: var(--dc-radius-2xl); }
.hero-slide {
    min-height: 460px;
    background: linear-gradient(135deg, var(--dc-primary), var(--dc-accent));
    border-radius: var(--dc-radius-2xl);
}
.hero-carousel .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 575px) { .hero-slide { min-height: 320px; } }

/* ---- Price tag ---- */
.price { color: var(--dc-primary); font-weight: 800; font-family: 'Sora', sans-serif; }
.price-old { color: var(--dc-muted); text-decoration: line-through; font-size: .9em; margin-left: .4rem; }
.badge-off { background: var(--dc-accent); color: #fff; border-radius: 50rem; padding: .15rem .6rem; font-size: .75rem; font-weight: 700; }
.badge-soft { background: rgba(var(--dc-primary-rgb), .1); color: var(--dc-primary); border-radius: 50rem; padding: .2rem .7rem; font-size: .78rem; font-weight: 600; display: inline-block; }

/* ---- Image fallback (when external placeholder host is blocked, show a tinted box not a broken icon) ---- */
img { background: var(--dc-light); color: transparent; }
img.rounded-circle { background: rgba(var(--dc-primary-rgb), .12); }

/* ---- Icon circle ---- */
.icon-circle { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: rgba(var(--dc-primary-rgb), .1); color: var(--dc-primary); }

/* ---- Page hero (inner / listing pages) ---- */
.page-hero {
    background: linear-gradient(135deg, var(--dc-light), #ffffff);
    border-bottom: 1px solid var(--dc-border);
    padding: 2.75rem 0 2.5rem;
}
.page-hero .eyebrow { display: inline-block; color: var(--dc-accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: .3rem; }
.page-hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 0; }
.page-hero .crumbs { font-size: .85rem; color: var(--dc-muted); margin-top: .55rem; }
.page-hero .crumbs a { color: var(--dc-primary); }
.page-hero .crumbs .sep { margin: 0 .35rem; opacity: .5; }

/* Inner/listing pages: trim the big top gap now that a hero band sits above */
.page-hero + .section { padding-top: 3rem; }

/* ---- Listing-card helpers ---- */
.card-avatar { width: 116px; height: 116px; object-fit: cover; }
.card-icon-lg { width: 64px; height: 64px; font-size: 1.7rem; }

/* ---- Department listing card: icon + hover accent ---- */
.dept-card .icon-circle { transition: background var(--dc-t), color var(--dc-t); }
.dept-card:hover .icon-circle { background: linear-gradient(135deg, var(--dc-primary), var(--dc-accent)); color: #fff; }

/* ---- Footer ---- */
.dc-footer { background: var(--dc-dark); color: #b9d9d4; padding: 3.5rem 0 1.5rem; }
.dc-footer h5, .dc-footer h6 { color: #fff; }
.dc-footer a { color: #b9d9d4; }
.dc-footer a:hover { color: var(--dc-accent); }
.dc-footer .credit { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1.2rem; font-size: .85rem; }

/* ---- Floating actions ---- */
.fab-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: flex; flex-direction: column; gap: .6rem; }
.fab { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; box-shadow: var(--dc-shadow); transition: transform var(--dc-t); }
.fab:hover { transform: scale(1.08); color: #fff; }
.fab-wa { background: #25d366; }
.fab-call { background: var(--dc-primary); }
.fab-top { background: var(--dc-dark); }

/* ---- Reveal: pure-CSS entrance so content is ALWAYS visible (no JS dependency).
   Plays once on render; gracefully static if animations are disabled. ---- */
@keyframes dcReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-reveal] { animation: dcReveal .7s ease both; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { animation: none; } }

/* ---- Responsive ---- */
@media (max-width: 991px) { .section { padding: 3rem 0; } }
@media (max-width: 767px) { .hero-split { padding: 2rem 0 .5rem; } .dc-footer { text-align: center; } }
@media (max-width: 480px) { .fab { width: 46px; height: 46px; font-size: 1.2rem; } }

@media print {
    .dc-header, .dc-footer, .fab-stack, .dc-topbar { display: none !important; }
    body { color: #000; }
}