/* ============================================================
   Metro Diagnostics Center — Global Stylesheet
   All site CSS consolidated here (loaded by every layout).
   Brand: red #e30613 (primary) + navy #0b2449 (accent).
   ============================================================ */

/* ---------- Brand palette ---------- */
:root{
    --brand:#e30613; --brand-dark:#b00510; --ink:#0b2449;
}

/* ---------- Base ---------- */
body{ font-family:'Inter',sans-serif; color:#1f2937; }
a{ text-decoration:none; }

/* ---------- Brand utilities (public + admin + auth) ---------- */
.text-brand{ color:var(--brand)!important; }
.bg-brand{ background:var(--brand)!important; }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-outline-brand{ color:var(--brand); border-color:var(--brand); font-weight:600; }
.btn-outline-brand:hover{ background:var(--brand); color:#fff; }

/* ============================================================
   Public layout (navbar, hero, footer, shared sections)
   ============================================================ */
.navbar .nav-link{ color:#374151; font-weight:500; position:relative; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--brand); }
.navbar .nav-link.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--brand); border-radius:2px; }
.brand-logo{ font-weight:800; color:var(--brand); font-size:1.25rem; }

/* Hero */
.hero{
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 15v14M15 22h14' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        radial-gradient(900px 500px at 85% 10%, rgba(255,255,255,.06), transparent),
        linear-gradient(120deg,#071a38 0%, #0b2449 55%, #13345f 100%);
    color:#fff; position:relative; overflow:hidden;
}
.hero-search .form-control{ border:0; padding:.85rem 1rem; }
.hero-search .btn{ padding-left:1.4rem; padding-right:1.4rem; }
.float-card{ background:#fff; color:#1f2937; border-radius:.85rem; box-shadow:0 12px 30px rgba(0,0,0,.18); z-index:2; }
.hero-img{ width:100%; height:auto; max-height:560px; object-fit:contain; display:block; }
@media (min-width:992px){ .hero-img-shift{ margin-left:-3rem; } }

/* ===== light-theme hero carousel ===== */
.hero-c{ position:relative; overflow:hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 16v14M16 23h14' stroke='%23e30613' stroke-opacity='0.12' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        linear-gradient(135deg,#fde9ea 0%, #fdf2f3 55%, #ffffff 100%);
}
.hero-c .slide-min{ min-height:520px; }
.slide-counter{ background:var(--brand); color:#fff; border-radius:999px; padding:.28rem .95rem; font-weight:600; font-size:.85rem; }
.hero-heading{ color:#0b2449; font-weight:800; letter-spacing:-.5px; }
.hero-heading .accent{ color:var(--brand); }
.heading-rule{ width:90px;height:5px;background:var(--brand);border-radius:3px; }
.hero-sub{ color:#5b6b72; }

/* family image with arc ring */
.hero-photo-wrap{ position:relative; display:inline-block; }
.hero-photo{ width:100%; max-width:520px; height:440px; object-fit:cover; border-radius:50% 50% 46% 46%/40% 40% 50% 50%; box-shadow:0 24px 60px rgba(227,6,19,.20); }
.hero-ring{ position:absolute; inset:-18px; border:2px dashed rgba(227,6,19,.35); border-radius:50%; pointer-events:none; }

/* floating info cards */
.fcard{ background:#fff; border-radius:.9rem; box-shadow:0 16px 38px rgba(11,36,73,.12); display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; z-index:3; }
.fcard .fic{ width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:1.2rem; flex-shrink:0; }
.fcard small{ color:#6b7b82; }

/* circular nav arrows */
.hero-c .carousel-control-prev,.hero-c .carousel-control-next{ width:auto; opacity:1; z-index:5; }
.nav-arrow{ width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.14); color:var(--brand); display:flex;align-items:center;justify-content:center; font-size:1.3rem; }
.nav-arrow:hover{ background:var(--brand); color:#fff; }
.hero-c .carousel-indicators{ bottom:14px; }
.hero-c .carousel-indicators [data-bs-target]{ width:11px;height:11px;border-radius:50%;background:#f1a8ac; opacity:1; border:0; margin:0 4px; }
.hero-c .carousel-indicators .active{ background:var(--brand); }

.feature-strip{ background:#fdf3f4; }
.feature-strip .fs-ico{ width:58px;height:58px;border-radius:50%;background:#fde9ea;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.5rem; }

@media (max-width:991px){
    .hero-c .slide-min{ min-height:auto; }
    .hero-photo{ height:320px; }
    .hero-c .carousel-control-prev,.hero-c .carousel-control-next{ display:none; }
}

/* inner-page banner + breadcrumb */
.page-hero{
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 15v14M15 22h14' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        linear-gradient(120deg,#071a38 0%, #0b2449 60%, #13345f 100%);
}
.page-hero .breadcrumb-item.active{ color:rgba(255,255,255,.75); }
.page-hero .breadcrumb-item+.breadcrumb-item::before{ color:rgba(255,255,255,.6); }

/* gentle auto-float animations for the hero badge cards */
@keyframes floatY  { 0%,100%{transform:translateY(0)}      50%{transform:translateY(-12px)} }
@keyframes floatX  { 0%,100%{transform:translateX(0)}      50%{transform:translateX(10px)} }
@keyframes floatXY { 0%,100%{transform:translate(0,0)}     50%{transform:translate(-8px,-10px)} }
.float-anim-1{ animation:floatY 4s ease-in-out infinite; }
.float-anim-2{ animation:floatX 5s ease-in-out infinite; }
.float-anim-3{ animation:floatXY 4.5s ease-in-out infinite .4s; }
@media (prefers-reduced-motion: reduce){
    .float-anim-1,.float-anim-2,.float-anim-3{ animation:none; }
}

/* Category cards */
.cat-card{ border:1px solid #eef0f2; border-radius:1rem; transition:.2s; background:#fff; }
.cat-card:hover{ box-shadow:0 12px 26px rgba(0,0,0,.08); transform:translateY(-3px); }
.cat-ico{ width:64px;height:64px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:1.6rem; margin:0 auto; }
.ring-btn{ width:34px;height:34px;border-radius:50%;border:1px solid var(--brand); color:var(--brand); display:inline-flex;align-items:center;justify-content:center; }
.cat-card:hover .ring-btn{ background:var(--brand); color:#fff; }

.soft-section{ background:#fdf3f4; }
.feature-ico{ width:54px;height:54px;border-radius:50%;background:#fde3e4;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.4rem; }
.cta-card{ background:linear-gradient(120deg,#0b2449,#071a38); color:#fff; border-radius:1rem; overflow:hidden; }
footer.site{ background:#071328; color:#aeb9c2; }
footer.site a{ color:#cdd7de; }
footer.site a:hover{ color:#fff; }
.test-ico{ width:42px;height:42px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem; }

/* ===== Page preloader ===== */
#preloader{ position:fixed; inset:0; z-index:9999; background:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; transition:opacity .5s ease, visibility .5s ease; }
#preloader.hide{ opacity:0; visibility:hidden; }
#preloader .pl-logo{ height:48px; animation:plPulse 1.4s ease-in-out infinite; }
#preloader .pl-spin{ width:42px;height:42px;border:4px solid #f7d9db;border-top-color:var(--brand);border-radius:50%;animation:plSpin .8s linear infinite; }
@keyframes plSpin{ to{ transform:rotate(360deg); } }
@keyframes plPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.08); opacity:.7; } }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.reveal-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none; }
    #preloader .pl-logo,#preloader .pl-spin{ animation:none; }
}

/* ============================================================
   Admin dashboard layout (sidebar / topbar)
   ============================================================ */
.sidebar{ width:260px; min-height:100vh; background:linear-gradient(180deg,#071a38 0%, #0b2449 100%); position:sticky; top:0; align-self:flex-start; }
.sidebar .nav-link{ color:#b9c6da; border-radius:.5rem; padding:.55rem .85rem; font-size:.92rem; font-weight:500; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar .nav-link.active{ background:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(227,6,19,.4); }
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }
.topbar{ height:66px; background:#fff; border-bottom:1px solid #eef1f2; }
.topbar .search{ background:#f3f6f7; border:0; border-radius:999px; padding:.5rem 1rem; min-width:240px; }
.avatar-circle{ width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700; }
@media (max-width:768px){ .sidebar{ width:100%; min-height:auto; position:static; } }

/* ============================================================
   Page: About Us
   ============================================================ */
.ab-hero{ background:linear-gradient(120deg,#fde9ea 0%, #fdf2f3 55%, #fad9db 100%); }
.ab-eyebrow{ letter-spacing:1.5px;font-weight:700;color:var(--brand);font-size:.8rem; }
.ab-eyebrow::after{ content:"";display:block;width:46px;height:3px;background:var(--brand);border-radius:2px;margin-top:.4rem; }
.mvv-ico{ width:56px;height:56px;border-radius:50%;background:#fdeff0;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.stats-band{ background:linear-gradient(120deg,#0b2449,#071a38); color:#fff; border-radius:1rem; }
.stats-band .s-ico{ font-size:1.6rem; opacity:.9; }
.stats-band .divider{ border-left:1px solid rgba(255,255,255,.2); }
.wc-ico{ width:42px;height:42px;border-radius:.6rem;background:#fdeff0;color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.doc-card{ border:1px solid #eef1f2;border-radius:1rem;background:#fff;text-align:center;transition:.2s; }
.doc-card:hover{ box-shadow:0 14px 30px rgba(227,6,19,.12);transform:translateY(-4px); }
.doc-avatar{ width:96px;height:96px;border-radius:50%;margin:1.25rem auto .75rem;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,#e30613,#b00510); }

/* ============================================================
   Page: Our Services (tests index)
   ============================================================ */
.svc-hero{ background:linear-gradient(120deg,#fde9ea 0%, #fdf2f3 50%, #fad9db 100%); position:relative; overflow:hidden; }
.svc-hero .svc-img{ position:absolute; right:0; top:0; height:100%; width:46%; object-fit:cover; clip-path:polygon(14% 0, 100% 0, 100% 100%, 0% 100%); }
@media (max-width:991px){ .svc-hero .svc-img{ display:none; } }
.svc-eyebrow{ letter-spacing:2px; font-weight:700; color:var(--brand); font-size:.85rem; }
.svc-card{ border:1px solid #eef1f2; border-radius:1rem; background:#fff; transition:.2s; text-align:center; }
.svc-card:hover{ box-shadow:0 16px 34px rgba(227,6,19,.12); transform:translateY(-4px); }
.svc-ico{ width:74px;height:74px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:1.25rem auto .25rem; }
.title-rule{ width:70px;height:4px;background:var(--brand);border-radius:2px;margin:.5rem auto 0; }
.svc-strip{ background:#fdf2f3; border-radius:1rem; }
.svc-strip .ic{ width:48px;height:48px;border-radius:50%;background:#fff;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0; }

/* ============================================================
   Page: Service detail (tests show)
   ============================================================ */
.sd-hero{ background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M15 1l13 7v15l-13 7-13-7V8z' fill='none' stroke='%23e30613' stroke-opacity='0.10'/%3E%3C/svg%3E"),
    linear-gradient(120deg,#fde9ea 0%, #fdf2f3 55%, #fad9db 100%); position:relative; overflow:hidden; }
.sd-hero .sd-img{ position:absolute; right:0; top:0; height:100%; width:44%; object-fit:cover; clip-path:ellipse(75% 100% at 75% 50%); }
@media (max-width:991px){ .sd-hero .sd-img{ display:none; } }
.sd-eyebrow{ letter-spacing:1.5px;font-weight:700;color:var(--brand);font-size:.8rem; }
.sd-eyebrow::after{ content:"";display:block;width:46px;height:3px;background:var(--brand);border-radius:2px;margin-top:.35rem; }
.info-chip{ background:#fff;border:1px solid #f7eef0;border-radius:.7rem;padding:.6rem .85rem;display:flex;align-items:center;gap:.6rem; }
.info-chip .ic{ width:38px;height:38px;border-radius:.55rem;background:#fdeff0;color:var(--brand);display:flex;align-items:center;justify-content:center; }
.sd-tabs{ position:sticky; top:64px; background:#fff; z-index:10; border-bottom:1px solid #eef1f2; }
.sd-tabs a{ padding:1rem .25rem; color:#5b6b72; font-weight:600; border-bottom:3px solid transparent; }
.sd-tabs a.active,.sd-tabs a:hover{ color:var(--brand); border-color:var(--brand); }
.sd-sec{ scroll-margin-top:130px; }
.check-li{ display:flex;align-items:center;gap:.5rem; }
.check-li i{ color:var(--brand); }
.benefit-ico{ width:46px;height:46px;border-radius:50%;background:#fdeff0;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.2rem; }
.side-ico{ width:40px;height:40px;border-radius:50%;background:#fdeff0;color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0; }

/* ============================================================
   Page: Health Blog (index + article)
   ============================================================ */
.blog-hero{ background:linear-gradient(120deg,#fdeff0 0%, #fdf2f3 55%, #fdf3f4 100%); position:relative; overflow:hidden; }
.blog-hero .bh-img{ position:absolute; right:4%; top:50%; transform:translateY(-50%); max-height:80%; }
@media (max-width:991px){ .blog-hero .bh-img{ display:none; } }
.blog-eyebrow{ letter-spacing:1.5px;font-weight:700;color:var(--brand);font-size:.8rem; }
.topic-chip{ border:1px solid #f3dadc;border-radius:999px;padding:.4rem 1rem;font-size:.85rem;color:#0b2449;white-space:nowrap; }
.topic-chip.active,.topic-chip:hover{ background:var(--brand);border-color:var(--brand);color:#fff; }
.post-card{ border:1px solid #eef1f2;border-radius:.9rem;overflow:hidden;background:#fff;transition:.2s;height:100%; }
.post-card:hover{ box-shadow:0 14px 30px rgba(227,6,19,.12);transform:translateY(-4px); }
.post-thumb{ height:170px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#fff; }
.post-cat{ font-size:.75rem;font-weight:700;color:var(--brand); }
.side-card{ border:1px solid #eef1f2;border-radius:.9rem;background:#fff; }
.cat-row{ display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #f1f4f5; }
.cat-count{ background:#fdeff0;color:var(--brand);border-radius:999px;padding:.1rem .55rem;font-size:.75rem;font-weight:600; }
.news-box{ background:#fdf2f3;border-radius:.9rem; }
/* blog article (show) */
.share-btn{ width:38px;height:38px;border-radius:50%;border:1px solid #e1e9ea;color:var(--brand);display:inline-flex;align-items:center;justify-content:center; }
.share-btn:hover{ background:var(--brand);color:#fff;border-color:var(--brand); }
.author-avatar{ width:46px;height:46px;border-radius:50%;object-fit:cover;background:#e30613;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700; }
.post-body{ color:#3b4a4f;line-height:1.8; }
.post-body h2,.post-body h3{ color:#0b2449;font-weight:700;margin-top:1.5rem; }
.post-body img{ max-width:100%;border-radius:.75rem; }
.post-body ul,.post-body ol{ padding-left:1.2rem; }
.cta-strip{ background:#fdf2f3;border-radius:.9rem; }
.navpost{ border:1px solid #eef1f2;border-radius:.7rem; }

/* ============================================================
   Page: Contact Us
   ============================================================ */
.ct-hero{ background:linear-gradient(120deg,#fde9ea 0%, #fdf2f3 55%, #fad9db 100%); position:relative; overflow:hidden; }
.ct-hero .ct-img{ position:absolute; right:0; top:0; height:100%; width:50%; object-fit:cover; clip-path:polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width:991px){ .ct-hero .ct-img{ display:none; } }
.ct-eyebrow{ letter-spacing:1.5px;font-weight:700;color:var(--brand);font-size:.8rem; }
.ct-eyebrow::after{ content:"";display:block;width:46px;height:3px;background:var(--brand);border-radius:2px;margin-top:.4rem; }
.ct-ico{ width:42px;height:42px;border-radius:50%;background:#fdeff0;color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.input-icon{ position:relative; }
.input-icon .ib{ position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#9aa7ad; }
.input-icon .form-control,.input-icon .form-select{ padding-left:2.4rem; }
.ct-strip{ background:#fdf2f3;border-radius:1rem; }
.ct-strip .ic{ width:48px;height:48px;border-radius:50%;background:#fff;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0; }
.social-btn{ width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center; }
.social-btn:hover{ background:var(--brand-dark);color:#fff; }

/* ============================================================
   Page: Book Your Test (wizard)
   ============================================================ */
.bt-hero{ background:linear-gradient(120deg,#fde9ea 0%, #fdf2f3 50%, #fad9db 100%); position:relative; overflow:hidden; }
.bt-hero .bt-img{ position:absolute; right:0; top:0; height:100%; width:48%; object-fit:cover; opacity:.95; }
@media (max-width:991px){ .bt-hero .bt-img{ display:none; } }
.stepper{ display:flex; align-items:center; }
.stepper .step{ display:flex; align-items:center; gap:.5rem; color:#9aa7ad; font-weight:600; white-space:nowrap; }
.stepper .step .num{ width:34px;height:34px;border-radius:50%;border:2px solid #d4dde0; display:flex;align-items:center;justify-content:center; background:#fff; }
.stepper .step.active{ color:#0b2449; }
.stepper .step.active .num{ background:var(--brand); border-color:var(--brand); color:#fff; }
.stepper .step.done .num{ background:#fad9db; border-color:var(--brand); color:var(--brand); }
.stepper .line{ flex:1; height:2px; margin:0 .75rem; border-top:2px dashed #d4dde0; background:none; }
.wizard-step{ display:none; }
.wizard-step.active{ display:block; }
.ib-icon{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#9aa7ad; }
.why-card{ border:1px solid #e7eef0; border-radius:.8rem; text-align:center; padding:1rem .5rem; }
.why-card .ic{ width:46px;height:46px;border-radius:50%;background:#fdeff0;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto .4rem; }
.chip{ border:1px solid #f3dadc; border-radius:999px; padding:.4rem 1rem; font-size:.85rem; color:#0b2449; }
.chip:hover{ border-color:var(--brand); color:var(--brand); }