:root {
    --odb-primary: #0d9488;      /* teal */
    --odb-primary-dark: #0f766e;
    --odb-primary-light: #ccfbf1;
    --odb-accent: #2563eb;        /* blue */
    --odb-dark: #0f172a;
    --odb-muted: #64748b;
    --odb-bg: #f1f5f9;
    --odb-card-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    --odb-radius: 14px;
}

* { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }

body {
    background-color: var(--odb-bg);
    color: #1e293b;
    min-height: 100vh;
}

a { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 500; padding: .5rem 1.1rem; }
.btn-primary { background-color: var(--odb-primary); border-color: var(--odb-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--odb-primary-dark); border-color: var(--odb-primary-dark); }
.btn-outline-primary { color: var(--odb-primary); border-color: var(--odb-primary); }
.btn-outline-primary:hover { background-color: var(--odb-primary); border-color: var(--odb-primary); }
.text-primary { color: var(--odb-primary) !important; }
.bg-primary { background-color: var(--odb-primary) !important; }
.link-primary { color: var(--odb-primary) !important; }

/* ---------- Navbar ---------- */
.odb-navbar {
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .05);
    padding: .6rem 0;
}
.odb-brand { font-weight: 800; font-size: 1.35rem; color: var(--odb-primary) !important; letter-spacing: -.5px; }
.odb-brand i { color: var(--odb-accent); }
.odb-navbar .nav-link { font-weight: 500; color: #334155; padding: .5rem 1rem; }
.odb-navbar .nav-link:hover, .odb-navbar .nav-link.active { color: var(--odb-primary); }

/* ---------- Hero ---------- */
.odb-hero {
    background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
    color: #fff;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}
.odb-hero h1 { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); }
.odb-hero .lead { opacity: .92; }

/* Hero layout. Stacked in source order by default — headline, slider, search card — which is
   what a phone gets. From lg the copy and the search card become rows of a left column and the
   art spans both of them on the right. */
.odb-hero-grid { display: grid; gap: 1.25rem; }
@media (min-width: 992px) {
    .odb-hero-grid {
        grid-template-columns: 7fr 5fr;
        column-gap: 2rem;
        row-gap: 0;
        align-items: center;
    }
    .odb-hero-grid__copy { grid-column: 1; grid-row: 1; }
    .odb-hero-grid__actions { grid-column: 1; grid-row: 2; }
    .odb-hero-grid__art {
        grid-column: 2; grid-row: 1 / span 2;
        display: flex; align-items: center; justify-content: center;
    }
}
.odb-search-card {
    background: #fff;
    border-radius: var(--odb-radius);
    box-shadow: var(--odb-card-shadow);
    padding: 1.25rem;
}
.odb-hero-art {
    position: relative;
    width: min(100%, 380px);
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.odb-hero-art__backdrop {
    position: absolute;
    inset: 8% 10% 4% 14%;
    border-radius: 34% 66% 42% 58% / 45% 39% 61% 55%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
    filter: blur(2px);
}
.odb-hero-card {
    position: relative;
    z-index: 2;
    width: min(100%, 300px);
    border-radius: 28px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 32px 70px rgba(15, 23, 42, .24);
    backdrop-filter: blur(8px);
}
.odb-hero-slider {
    position: relative;
    height: 320px;
    background: rgba(255, 255, 255, .08);
}
.odb-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .7s ease, transform 1.4s ease;
}
.odb-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}
.odb-hero-card__body {
    padding: 1rem 1.15rem 1.2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08));
}
.odb-hero-card__eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .76);
    margin-bottom: .55rem;
}
.odb-hero-card__quote {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 600;
}
.odb-hero-art__dot {
    position: absolute;
    right: 5%;
    top: 46%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .18));
    backdrop-filter: blur(4px);
    z-index: 3;
}
.odb-hero-art__icon {
    position: absolute;
    right: 1%;
    bottom: 3%;
    font-size: clamp(7rem, 14vw, 9rem);
    line-height: 1;
    color: rgba(255, 255, 255, .16);
    transform: rotate(-2deg);
    z-index: 1;
}

/* ---------- Cards ---------- */
.card { border: none; border-radius: var(--odb-radius); box-shadow: var(--odb-card-shadow); }
.odb-stat-card { border-left: 4px solid var(--odb-primary); }
.odb-stat-card .stat-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; background: var(--odb-primary-light); color: var(--odb-primary-dark);
}
.odb-stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.odb-stat-label { color: var(--odb-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

.doctor-card { transition: transform .18s ease, box-shadow .18s ease; height: 100%; }
.doctor-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
.doctor-avatar {
    width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--odb-primary-light);
}

/* Next-available time chips on a doctor card — each one deep-links into the booking form. */
.doctor-slots { border-top: 1px dashed #e2e8f0; padding-top: .65rem; }
.slot-chip {
    display: inline-block; border: 1.5px solid var(--odb-primary-light); border-radius: 999px;
    padding: .18rem .6rem; font-size: .76rem; font-weight: 600; line-height: 1.5;
    color: var(--odb-primary); background: #fff; text-decoration: none; transition: .12s;
    white-space: nowrap;
}
.slot-chip:hover { background: var(--odb-primary); border-color: var(--odb-primary); color: #fff; }
.slot-chip-more { color: var(--odb-muted); border-color: #e2e8f0; background: #f8fafc; }
.slot-chip-more:hover { background: #e2e8f0; border-color: #cbd5e1; color: #334155; }
.avatar-placeholder {
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--odb-primary-light); color: var(--odb-primary-dark);
    font-weight: 700; font-size: 1.6rem;
}
.avatar-sm { width: 42px; height: 42px; font-size: 1rem; }
.avatar-lg { width: 120px; height: 120px; font-size: 2.6rem; }
/* Lets the same circle hold a chosen photo instead of initials — used by the upload preview
   on the registration form. */
.avatar-placeholder { overflow: hidden; flex-shrink: 0; }
.avatar-placeholder img { width: 100%; height: 100%; object-fit: cover; }

/* Flex children default to min-width:auto, so a long unbreakable value stops the sibling
   shrinking. Repeated per-view before now. */
.min-w-0 { min-width: 0; }

.specialty-tile {
    background: #fff; border-radius: var(--odb-radius); padding: 1.5rem 1rem; text-align: center;
    box-shadow: var(--odb-card-shadow); transition: .18s; height: 100%; color: inherit; display: block;
}
.specialty-tile:hover { transform: translateY(-4px); color: var(--odb-primary); }
.specialty-tile i { font-size: 2rem; color: var(--odb-primary); margin-bottom: .6rem; }
.specialty-tile .fw-semibold { overflow-wrap: anywhere; line-height: 1.25; }

/* Responsive specialty grid: adapts to any number of cards the admin publishes,
   holding 5 per row on desktop down to 2 per row on phones. */
.odb-specialty-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 576px) { .odb-specialty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .odb-specialty-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .odb-specialty-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.odb-how-intro {
    max-width: 720px;
    font-size: 1.05rem;
}
.odb-how-grid {
    position: relative;
}
.odb-how-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
    border: 1px solid rgba(13, 148, 136, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.odb-how-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(15, 23, 42, .12);
}
.odb-how-card__step {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(13, 148, 136, .10);
    color: var(--odb-primary-dark);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.odb-how-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(13, 148, 136, .16), rgba(37, 99, 235, .12));
    color: var(--odb-primary-dark);
    font-size: 1.8rem;
}
.odb-how-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .7rem;
    color: var(--odb-dark);
}
.odb-how-card__text {
    color: #475569;
    line-height: 1.65;
    margin-bottom: 1rem;
}
.odb-how-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
}
.odb-how-card__list li {
    position: relative;
    padding-left: 1.35rem;
    color: #334155;
    font-size: .95rem;
}
.odb-how-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--odb-primary), var(--odb-accent));
}

/* ---------- Hero: quick-pick chips & trust line ---------- */
.odb-search-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}
.odb-search-chips__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--odb-muted);
    margin-right: .2rem;
}
.odb-search-chips a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: .82rem;
    font-weight: 600;
    transition: .15s;
}
.odb-search-chips a:hover { background: var(--odb-primary); border-color: var(--odb-primary); color: #fff; }
.odb-search-chips a i { font-size: .78rem; }

.odb-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .88);
}
.odb-hero-trust i { margin-right: .35rem; }

/* ---------- Quick-action tiles (the public dashboard) ---------- */
.odb-action-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 576px) { .odb-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .odb-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.odb-action {
    display: block;
    background: #fff;
    border-radius: var(--odb-radius);
    padding: 1.35rem;
    box-shadow: var(--odb-card-shadow);
    border: 1px solid transparent;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.odb-action:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 148, 136, .35);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
    color: inherit;
}
.odb-action__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: .85rem;
    background: linear-gradient(135deg, rgba(13, 148, 136, .16), rgba(37, 99, 235, .12));
    color: var(--odb-primary-dark);
}
.odb-action__title { display: block; font-weight: 700; color: var(--odb-dark); margin-bottom: .25rem; }
.odb-action__text { display: block; color: var(--odb-muted); font-size: .88rem; line-height: 1.55; }

/* Pulsing dot on the "Available today" heading. */
.odb-live-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: #10b981; margin-right: .45rem; vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .6);
    animation: odb-pulse 2s infinite;
}
@keyframes odb-pulse {
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---------- Symptom shortcuts ---------- */
.odb-symptom-card {
    background: linear-gradient(135deg, #ecfeff 0%, #f8fafc 100%);
    border-radius: 22px;
    padding: 1.75rem;
    border: 1px solid rgba(13, 148, 136, .12);
}
.odb-symptom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
@media (min-width: 576px) { .odb-symptom-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.odb-symptom {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    background: #fff; border-radius: 14px; padding: .9rem .5rem; text-align: center;
    color: #334155; font-size: .82rem; font-weight: 600; line-height: 1.3;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05); transition: .18s;
}
.odb-symptom i { font-size: 1.35rem; color: var(--odb-primary); }
.odb-symptom:hover { transform: translateY(-3px); color: var(--odb-primary-dark); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }

/* ---------- Trust cards ---------- */
.odb-trust {
    background: #fff; border-radius: var(--odb-radius); padding: 1.35rem;
    box-shadow: var(--odb-card-shadow); border-top: 3px solid var(--odb-primary-light);
}
.odb-trust__icon {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: .8rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--odb-primary-light); color: var(--odb-primary-dark); font-size: 1.1rem;
}
.odb-trust p { color: var(--odb-muted); font-size: .9rem; line-height: 1.6; }

/* ---------- Payment explainer ---------- */
.odb-pay-card {
    background: #fff; border-radius: 22px; padding: 1.75rem;
    box-shadow: var(--odb-card-shadow);
}
.odb-pay-methods { display: flex; flex-wrap: wrap; gap: .5rem; }
.odb-pay-methods span {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 10px; background: #f1f5f9;
    font-weight: 600; font-size: .85rem; color: #334155;
}
.odb-pay-methods i { color: var(--odb-primary); }
.odb-pay-steps {
    counter-reset: paystep; list-style: none; padding: 0; margin: 0;
    display: grid; gap: .85rem;
}
@media (min-width: 768px) { .odb-pay-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.odb-pay-steps li {
    counter-increment: paystep; position: relative;
    padding: .9rem 1rem .9rem 3rem; border-radius: 14px; background: #f8fafc;
    color: var(--odb-muted); font-size: .88rem; line-height: 1.55;
}
.odb-pay-steps li::before {
    content: counter(paystep);
    position: absolute; left: .9rem; top: .9rem;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--odb-primary); color: #fff; font-size: .78rem; font-weight: 700;
}
.odb-pay-steps strong { display: block; color: var(--odb-dark); font-weight: 600; }

/* ---------- Testimonials ---------- */
.odb-testimonial {
    background: #fff; border-radius: var(--odb-radius); padding: 1.35rem;
    box-shadow: var(--odb-card-shadow); margin: 0;
    display: flex; flex-direction: column;
}
.odb-testimonial__quote {
    margin: 0 0 1rem; color: #334155; font-size: .95rem; line-height: 1.65;
}
.odb-testimonial__quote::before { content: "\201C"; }
.odb-testimonial__quote::after { content: "\201D"; }
.odb-testimonial__meta {
    display: flex; align-items: center; gap: .7rem; margin-top: auto;
    border-top: 1px dashed #e2e8f0; padding-top: .85rem;
}

/* ---------- Checkout: merchant account callout ---------- */
.odb-merchant {
    display: flex; gap: .6rem; align-items: flex-start;
    background: #fff; border: 1px dashed #f9a8d4; border-radius: 10px;
    padding: .6rem .75rem; margin-bottom: .75rem; font-size: .82rem; line-height: 1.5;
}
.odb-merchant__label { color: var(--odb-muted); font-weight: 600; white-space: nowrap; }
.odb-merchant code { font-weight: 700; letter-spacing: .02em; }

/* ---------- Blog ---------- */
.odb-blog-head {
    background: linear-gradient(135deg, var(--odb-primary-dark) 0%, var(--odb-accent) 100%);
    color: #fff;
    padding: 3rem 0 3.25rem;
    text-align: center;
}
.odb-blog-head h1 { font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.75rem); }
.odb-blog-head .lead { opacity: .92; max-width: 680px; margin: 0 auto; font-size: 1.02rem; }
.odb-blog-search { max-width: 560px; margin: 0 auto; }
.odb-blog-search .input-group { box-shadow: 0 12px 30px rgba(15, 23, 42, .18); border-radius: 12px; overflow: hidden; }
.odb-video-filter__count {
    background: rgba(15, 23, 42, .08); border-radius: 999px;
    padding: 0 .4rem; font-size: .74rem; margin-left: .1rem;
}
.odb-video-filter.is-active .odb-video-filter__count { background: rgba(255, 255, 255, .25); }

/* Post card */
.odb-post-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border-radius: var(--odb-radius); overflow: hidden;
    box-shadow: var(--odb-card-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.odb-post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15, 23, 42, .13); }
.odb-post-card__cover {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0f172a;
}
.odb-post-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.odb-post-card:hover .odb-post-card__cover img { transform: scale(1.05); }
.odb-post-card__fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; color: rgba(255, 255, 255, .5);
    background: linear-gradient(135deg, var(--odb-primary-dark), var(--odb-accent));
}
.odb-post-card__cat {
    position: absolute; left: .7rem; bottom: .7rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem; border-radius: 999px;
    background: rgba(255, 255, 255, .94); color: var(--odb-primary-dark);
    font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.odb-post-card__cat.position-static { margin-bottom: .75rem; }
.odb-post-card__body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
.odb-post-card__title { font-size: 1.08rem; font-weight: 700; line-height: 1.4; margin-bottom: .5rem; }
.odb-post-card__title a { color: var(--odb-dark); }
.odb-post-card__title a:hover { color: var(--odb-primary); }
.odb-post-card__excerpt { color: var(--odb-muted); font-size: .89rem; line-height: 1.6; margin-bottom: 1rem; }
.odb-post-card__meta {
    display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: auto;
    color: var(--odb-muted); font-size: .8rem;
}

/* Lead story */
.odb-post-lead {
    display: grid; grid-template-columns: 1fr; color: inherit;
    background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .1);
    transition: transform .18s ease, box-shadow .18s ease;
}
.odb-post-lead:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(15, 23, 42, .15); color: inherit; }
@media (min-width: 992px) { .odb-post-lead { grid-template-columns: 1.05fr 1fr; } }
.odb-post-lead__cover { position: relative; min-height: 260px; background: #0f172a; }
.odb-post-lead__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.odb-post-lead__fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: rgba(255, 255, 255, .45);
    background: linear-gradient(135deg, var(--odb-primary-dark), var(--odb-accent));
}
.odb-post-lead__body { padding: 1.75rem 1.9rem 2rem; align-self: center; }
.odb-post-lead__body h2 { font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.3; color: var(--odb-dark); }
.odb-post-lead__body p { color: var(--odb-muted); line-height: 1.65; margin: .75rem 0 1rem; }

/* Sidebar */
.odb-post-mini { display: flex; gap: .75rem; align-items: flex-start; color: inherit; }
.odb-post-mini__thumb {
    width: 62px; height: 52px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--odb-primary-light); color: var(--odb-primary-dark);
}
.odb-post-mini__thumb img { width: 100%; height: 100%; object-fit: cover; }
.odb-post-mini__title { display: block; font-weight: 600; font-size: .88rem; line-height: 1.4; color: var(--odb-dark); }
.odb-post-mini:hover .odb-post-mini__title { color: var(--odb-primary); }
.odb-post-mini__meta { display: block; color: var(--odb-muted); font-size: .76rem; margin-top: .2rem; }
.odb-topic-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem .25rem; border-radius: 8px; color: #334155; font-size: .9rem; font-weight: 500;
}
.odb-topic-link:hover { background: #f8fafc; color: var(--odb-primary); }

/* Article reader */
.odb-article__head { background: #fff; padding: 2.5rem 0 2rem; }
.odb-article__head h1 {
    font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.25;
    max-width: 820px; margin: 0 auto; text-align: center;
}
.odb-article__standfirst {
    max-width: 720px; margin: 1rem auto 0; text-align: center;
    color: var(--odb-muted); font-size: 1.08rem; line-height: 1.65;
}
.odb-article__meta {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    margin-top: 1.5rem; color: var(--odb-muted); font-size: .85rem;
}
.odb-article__meta strong { color: var(--odb-dark); font-size: .92rem; }
.odb-article__cover {
    width: 100%; max-height: 460px; object-fit: cover;
    border-radius: 20px; margin: 1.5rem 0 .5rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
}
.odb-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem;
    color: var(--odb-muted); font-size: .82rem; margin-bottom: 1.25rem;
}
.odb-crumbs a { color: var(--odb-muted); }
.odb-crumbs a:hover { color: var(--odb-primary); }
.odb-crumbs i { font-size: .6rem; opacity: .6; }

/* The article body itself — admin-authored HTML, styled here rather than inline. */
.odb-prose { color: #334155; font-size: 1.04rem; line-height: 1.75; padding-top: 1.5rem; }
.odb-prose h2 {
    font-weight: 700; font-size: 1.45rem; color: var(--odb-dark);
    margin: 2.25rem 0 .85rem; padding-left: .85rem; border-left: 4px solid var(--odb-primary);
}
.odb-prose h3 { font-weight: 700; font-size: 1.15rem; color: var(--odb-dark); margin: 1.75rem 0 .65rem; }
.odb-prose p { margin-bottom: 1.15rem; }
.odb-prose a { color: var(--odb-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.odb-prose ul, .odb-prose ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.odb-prose li { margin-bottom: .55rem; }
.odb-prose li::marker { color: var(--odb-primary); font-weight: 700; }
.odb-prose strong { color: var(--odb-dark); font-weight: 600; }
.odb-prose blockquote {
    margin: 1.75rem 0; padding: 1.1rem 1.35rem;
    background: var(--odb-primary-light); border-radius: 14px;
    color: var(--odb-primary-dark); font-size: 1rem; font-weight: 500; line-height: 1.65;
}
.odb-prose hr { margin: 2.25rem 0; border-color: #e2e8f0; }
.odb-prose img { max-width: 100%; border-radius: 14px; margin: 1rem 0; }

.odb-tag {
    display: inline-block; padding: .25rem .7rem; border-radius: 999px;
    background: #f1f5f9; color: #475569; font-size: .8rem; font-weight: 600;
}
.odb-tag:hover { background: var(--odb-primary); color: #fff; }

.odb-share {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-top: 1.5rem; padding: 1rem 1.25rem;
    background: #fff; border-radius: var(--odb-radius); box-shadow: var(--odb-card-shadow);
}
.odb-share__btn {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #475569; transition: .15s;
}
.odb-share__btn:hover { background: var(--odb-primary); color: #fff; }

.odb-author-box {
    display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 1.5rem; padding: 1.35rem;
    background: #fff; border-radius: var(--odb-radius); box-shadow: var(--odb-card-shadow);
    border-left: 4px solid var(--odb-primary);
}

/* ---------- Video gallery ---------- */
.odb-video-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    text-align: left;
    background: #fff;
    border: none;
    border-radius: var(--odb-radius);
    box-shadow: var(--odb-card-shadow);
    overflow: hidden;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.odb-video-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15, 23, 42, .14); }
.odb-video-card:focus-visible { outline: 3px solid var(--odb-primary); outline-offset: 2px; }

.odb-video-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    overflow: hidden;
}
.odb-video-card__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.odb-video-card:hover .odb-video-card__thumb img { transform: scale(1.05); }
/* Drawn poster, used when a video has no uploaded thumbnail. Built from a themed gradient, a
   faint grid, a corner glow and an oversized category mark so it reads as artwork rather than
   as a missing image. */
.odb-poster {
    position: absolute; inset: 0; overflow: hidden;
    display: block;
    background: linear-gradient(135deg, var(--poster-a, #0f766e) 0%, var(--poster-b, #2563eb) 100%);
}
.odb-poster--intro   { --poster-a: #0f766e; --poster-b: #2563eb; }
.odb-poster--patient { --poster-a: #0e7490; --poster-b: #4f46e5; }
.odb-poster--doctor  { --poster-a: #065f46; --poster-b: #0d9488; }
.odb-poster--payment { --poster-a: #b45309; --poster-b: #db2777; }
.odb-poster--rx      { --poster-a: #4338ca; --poster-b: #7c3aed; }
.odb-poster--tips    { --poster-a: #be123c; --poster-b: #ea580c; }
.odb-poster--other   { --poster-a: #334155; --poster-b: #0f766e; }

.odb-poster__grid {
    position: absolute; inset: 0; opacity: .28;
    background-image:
        linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 72%);
}
.odb-poster__glow {
    position: absolute; width: 62%; aspect-ratio: 1; right: -12%; top: -28%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 68%);
}
/* Oversized watermark of the category icon, bled off the bottom-left corner. */
.odb-poster__mark {
    position: absolute; left: -.4rem; bottom: -1.6rem;
    font-size: 7.5rem; line-height: 1;
    color: rgba(255, 255, 255, .16);
    transform: rotate(-8deg);
}
.odb-poster__label {
    position: absolute; left: 1rem; top: 1rem;
    padding: .22rem .6rem; border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(4px);
    color: #fff; font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.odb-poster__brand {
    position: absolute; left: 1rem; bottom: 1rem;
    display: inline-flex; align-items: center; gap: .35rem;
    color: rgba(255, 255, 255, .82); font-size: .78rem; font-weight: 700; letter-spacing: .01em;
}
.odb-poster__brand i { color: rgba(255, 255, 255, .6); }

/* Larger cards get proportionally larger poster furniture. */
.odb-video-card--lg .odb-poster__mark { font-size: 10rem; bottom: -2.2rem; }
.odb-video-card--lg .odb-poster__brand { font-size: .88rem; }
.odb-video-card__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); color: var(--odb-primary-dark);
    font-size: 1.15rem; padding-left: .2rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
    transition: transform .18s ease, background .18s ease;
}
.odb-video-card:hover .odb-video-card__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}
.odb-video-card__time {
    position: absolute; right: .55rem; bottom: .55rem;
    padding: .12rem .45rem; border-radius: 6px;
    background: rgba(15, 23, 42, .8); color: #fff;
    font-size: .72rem; font-weight: 600;
}
.odb-video-card__body { display: block; padding: 1rem 1.1rem 1.15rem; }
.odb-video-card__cat {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--odb-primary-dark); margin-bottom: .4rem;
}
.odb-video-card__title {
    display: block; font-weight: 700; color: var(--odb-dark); line-height: 1.35;
}
.odb-video-card__text {
    display: block; margin-top: .35rem;
    color: var(--odb-muted); font-size: .87rem; line-height: 1.55;
}

/* Lead video on the home page: bigger play button and title. */
.odb-video-card--lg .odb-video-card__play { width: 76px; height: 76px; font-size: 1.5rem; }
.odb-video-card--lg .odb-video-card__title { font-size: 1.25rem; }
.odb-video-card--lg .odb-video-card__body { padding: 1.25rem 1.4rem 1.5rem; }

/* Home-page video pager: two cards at a time, arrows and dots when there are more. */
.odb-video-slide { display: flex; }
.odb-video-slide > .odb-video-card { width: 100%; }
.odb-video-nav {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin-top: 1.75rem;
}
.odb-video-nav__btn {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid #e2e8f0; background: #fff; color: #334155;
    display: inline-flex; align-items: center; justify-content: center;
    transition: .15s;
}
.odb-video-nav__btn:hover { background: var(--odb-primary); border-color: var(--odb-primary); color: #fff; }
.odb-video-dots { display: flex; align-items: center; gap: .45rem; }
.odb-video-dot {
    width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
    background: #cbd5e1; transition: .18s;
}
.odb-video-dot.is-active { width: 26px; background: var(--odb-primary); }

.odb-video-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 576px) { .odb-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .odb-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.odb-video-filter {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; border-radius: 999px;
    background: #fff; border: 1.5px solid #e2e8f0;
    color: #334155; font-size: .86rem; font-weight: 600;
    transition: .15s;
}
.odb-video-filter:hover { border-color: var(--odb-primary); color: var(--odb-primary); }
.odb-video-filter.is-active {
    background: var(--odb-primary); border-color: var(--odb-primary); color: #fff;
}

/* Player modal — the frame is black so letterboxed videos look deliberate. */
.odb-video-modal .modal-body { background: #000; }
.odb-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
}
.odb-video-frame iframe,
.odb-video-frame video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ---------- For-doctors panel ---------- */
.odb-doctor-panel {
    background: linear-gradient(135deg, var(--odb-primary-dark) 0%, var(--odb-accent) 100%);
    color: rgba(255, 255, 255, .9);
    border-radius: 24px;
    padding: 2rem;
}
.odb-doctor-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.odb-doctor-benefits li { display: flex; gap: .6rem; font-size: .92rem; line-height: 1.5; }
.odb-doctor-benefits i { margin-top: .28rem; font-size: .75rem; color: #a7f3d0; }
.odb-doctor-steps {
    display: grid; gap: .85rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) { .odb-doctor-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.odb-doctor-steps article {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px; padding: 1.15rem; backdrop-filter: blur(6px);
}
.odb-doctor-steps__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; margin-bottom: .6rem;
    background: #fff; color: var(--odb-primary-dark); font-weight: 800; font-size: .85rem;
}
.odb-doctor-steps h6 { color: #fff; font-weight: 700; margin-bottom: .35rem; }
.odb-doctor-steps p { margin: 0; font-size: .86rem; line-height: 1.55; color: rgba(255, 255, 255, .82); }

/* ---------- FAQ ---------- */
.odb-faq .accordion-item {
    border: none; border-radius: var(--odb-radius) !important;
    margin-bottom: .7rem; box-shadow: var(--odb-card-shadow); overflow: hidden;
}
.odb-faq .accordion-button { font-weight: 600; color: var(--odb-dark); }
.odb-faq .accordion-button:not(.collapsed) { background: var(--odb-primary-light); color: var(--odb-primary-dark); box-shadow: none; }
.odb-faq .accordion-button:focus { box-shadow: none; }
.odb-faq .accordion-body { color: var(--odb-muted); font-size: .92rem; line-height: 1.65; }
.nav-pills .nav-link { color: #334155; font-weight: 600; border-radius: 999px; }
.nav-pills .nav-link.active { background: var(--odb-primary); }

/* ---------- Help & emergency ---------- */
.odb-help {
    background: #fff; border-radius: var(--odb-radius); padding: 1.5rem;
    box-shadow: var(--odb-card-shadow); display: flex; gap: 1.1rem; align-items: flex-start;
}
.odb-help__icon {
    width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--odb-primary-light); color: var(--odb-primary-dark); font-size: 1.35rem;
}
.odb-emergency {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: rgba(255, 255, 255, .92);
    border-radius: var(--odb-radius); padding: 1.5rem;
}
.odb-emergency h6 { color: #fff; }
.odb-emergency p { font-size: .86rem; line-height: 1.55; margin-bottom: 0; }

/* ---------- Phone-only quick bar ---------- */
.odb-mobile-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
    display: flex; background: #fff; border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .08);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
}
.odb-mobile-bar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .35rem .2rem; color: var(--odb-muted); font-size: .7rem; font-weight: 600;
}
.odb-mobile-bar a i { font-size: 1.05rem; }
.odb-mobile-bar a:hover, .odb-mobile-bar a:focus { color: var(--odb-primary); }
/* Keep the bar from covering the end of the page — only on pages that render it. */
@media (max-width: 991.98px) { body:has(.odb-mobile-bar) { padding-bottom: 62px; } }

/* ---------- Star rating ---------- */
.stars { color: #f59e0b; letter-spacing: 1px; }
.stars .empty { color: #cbd5e1; }

/* ---------- Badges ---------- */
.badge-status { font-weight: 600; padding: .4em .7em; border-radius: 8px; font-size: .75rem; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-confirmed { background: #dbeafe; color: #1e40af; }
.status-completed { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-paid { background: #d1fae5; color: #065f46; }
.status-refunded { background: #e0e7ff; color: #3730a3; }
.status-failed { background: #fee2e2; color: #991b1b; }
.status-approved { background: #d1fae5; color: #065f46; }
.status-rejected { background: #fee2e2; color: #991b1b; }

/* ---------- Dashboard layout ---------- */
.odb-shell { display: flex; min-height: 100vh; }
.odb-sidebar {
    width: 260px; background: var(--odb-dark); color: #cbd5e1; flex-shrink: 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.odb-sidebar .brand { padding: 1.25rem 1.5rem; font-weight: 800; font-size: 1.25rem; color: #fff; }
.odb-sidebar .brand i { color: var(--odb-primary); }
.odb-sidebar .nav-section { padding: .5rem 1.5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-top: .5rem; }
.odb-sidebar .nav-link {
    color: #cbd5e1; padding: .7rem 1.5rem; display: flex; align-items: center; gap: .8rem;
    border-left: 3px solid transparent; font-weight: 500;
}
.odb-sidebar .nav-link i { width: 20px; text-align: center; }
.odb-sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.odb-sidebar .nav-link.active { background: rgba(13,148,136,.15); color: #fff; border-left-color: var(--odb-primary); }
.odb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.odb-topbar {
    background: #fff; padding: .85rem 1.5rem; box-shadow: 0 2px 8px rgba(15,23,42,.04);
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100;
}
.odb-content { padding: 1.75rem; flex: 1; }
.page-title { font-weight: 700; font-size: 1.5rem; margin-bottom: .25rem; }
.page-subtitle { color: var(--odb-muted); margin-bottom: 1.5rem; }

/* ---------- Slots ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.slot-btn {
    border: 1.5px solid #e2e8f0; background: #fff; border-radius: 10px; padding: .55rem .25rem;
    font-size: .82rem; font-weight: 600; cursor: pointer; transition: .12s; text-align: center; color: #334155;
}
.slot-btn:hover { border-color: var(--odb-primary); color: var(--odb-primary); }
.slot-btn.selected { background: var(--odb-primary); border-color: var(--odb-primary); color: #fff; }
.slot-btn.booked { background: #f1f5f9; color: #cbd5e1; cursor: not-allowed; text-decoration: line-through; }

/* ---------- Notifications ---------- */
/* Clamped to the viewport: a flat 360px is wider than the screen on a small phone, which
   pushes the dropdown off the edge and pans the whole page sideways. */
.notif-dropdown { width: min(360px, calc(100vw - 1.5rem)); max-height: min(440px, 70vh); overflow-y: auto; padding: 0; }
.notif-item { padding: .8rem 1rem; border-bottom: 1px solid #f1f5f9; display: flex; gap: .75rem; }
.notif-item.unread { background: #f0fdfa; }
.notif-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--odb-primary-light); color: var(--odb-primary-dark); }

/* ---------- Misc ---------- */
.odb-footer { background: var(--odb-dark); color: #94a3b8; padding: 2.5rem 0 1.5rem; margin-top: 4rem; }
.odb-footer a { color: #cbd5e1; }
.odb-footer a:hover { color: #fff; }
.odb-social { display: flex; gap: .6rem; flex-wrap: wrap; }
.odb-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); color: #cbd5e1; font-size: 1rem; transition: background .2s, color .2s, transform .2s; }
.odb-social a:hover { background: var(--odb-primary); color: #fff; transform: translateY(-2px); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--odb-muted); }
.empty-state i { font-size: 3rem; opacity: .35; margin-bottom: 1rem; }
.form-control, .form-select { border-radius: 10px; padding: .55rem .9rem; border-color: #e2e8f0; }
.form-control:focus, .form-select:focus { border-color: var(--odb-primary); box-shadow: 0 0 0 .2rem rgba(13,148,136,.15); }
.table > :not(caption) > * > * { padding: .85rem 1rem; vertical-align: middle; }
.invoice-box { max-width: 800px; margin: auto; background: #fff; padding: 2.5rem; border-radius: var(--odb-radius); box-shadow: var(--odb-card-shadow); }

/* Backdrop behind the off-canvas sidebar. Rendered on every dashboard page but inert until
   the sidebar is opened, so it never intercepts taps on desktop. */
.odb-sidebar-backdrop {
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(15, 23, 42, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
body.odb-sidebar-open .odb-sidebar-backdrop { opacity: 1; visibility: visible; }
/* Close button lives in the sidebar itself; on desktop the sidebar is always open, so hide it. */
.odb-sidebar__close { display: none; }

/* The toggle that reveals this sidebar is `d-md-none`, i.e. it disappears at exactly 768px.
   The old `max-width: 768px` here overlapped by one pixel, so at a 768px viewport the sidebar
   was parked off-screen with no button left to bring it back. */
@media (max-width: 767.98px) {
    .odb-sidebar {
        position: fixed; top: 0; bottom: 0; left: -260px; height: 100%;
        z-index: 1050; transition: left .2s ease;
        box-shadow: 0 0 40px rgba(15, 23, 42, .35);
        overscroll-behavior: contain;
    }
    .odb-sidebar.open { left: 0; }
    .odb-sidebar__close {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: .85rem; right: .85rem;
        width: 38px; height: 38px; border-radius: 50%; border: none;
        background: rgba(255, 255, 255, .1); color: #fff; font-size: 1rem;
    }
    .odb-sidebar .brand { padding-right: 3.5rem; }
    /* Stop the page behind the open sidebar from scrolling under the visitor's finger. */
    body.odb-sidebar-open { overflow: hidden; }
}
@media (min-width: 768px) {
    .odb-sidebar-backdrop { display: none; }
}

/* ============================================================================
   Small-screen layer
   Everything below narrows the chrome, keeps long values inside their box and
   raises tap targets. `clip` rather than `hidden` for the overflow guard —
   `hidden` turns the element into a scroll container and kills the
   `position: sticky` the header, sidebar and topbar all rely on.
   ============================================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Reboot only sets `vertical-align` on images. Uploaded covers, avatars and blog art arrive at
   whatever size the uploader had, so cap them at their container. Sized images elsewhere set
   their own dimensions with a more specific selector and are unaffected. */
img { max-width: 100%; }

/* Admin-authored article HTML is the one place we do not control the markup, so
   anything wide inside it scrolls on its own instead of widening the page. */
.odb-prose { overflow-wrap: break-word; }
.odb-prose pre, .odb-prose table { display: block; max-width: 100%; overflow-x: auto; }
.odb-prose iframe, .odb-prose video { max-width: 100%; }

/* Emails, transaction IDs and URLs are unbreakable strings; without this they
   force their column wider than the screen. */
.notif-item, .odb-post-mini__title, .odb-merchant, .empty-state { overflow-wrap: anywhere; }

/* A wide table inside `.table-responsive` scrolls, but on a phone the visitor sees a clean
   right edge and no reason to think the Status and Actions columns exist at all. These two
   pairs of gradients paint a shadow against whichever edge still has content beyond it:
   the white "cover" layers scroll with the content (`local`) and slide over the shadow
   layers (`scroll`) as each end is reached, so the hint disappears exactly when there is
   nothing more to see. No JS and no scroll listener. */
.table-responsive {
    background-image:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%),
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ---------- Tablet and below ---------- */
@media (max-width: 991.98px) {
    /* The expanded mobile menu sits inside a sticky header. Long menus would run past
       the bottom of a short screen with nothing to scroll, stranding the lower items. */
    .odb-navbar .navbar-collapse {
        max-height: calc(100vh - 4.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .odb-navbar .nav-link { padding: .6rem .5rem; }
    .odb-navbar .navbar-nav .btn { margin-top: .35rem; }

    /* The hero slider now shows on phones too. At 430px tall it would push the search card off
       the bottom of the screen, so the card shrinks to the photo plus its caption. The oversized
       watermark, floating dot and blurred backdrop are all framing for the desktop composition —
       at this width they crowd the photo instead, so they come out. */
    .odb-hero-grid__art { display: flex; justify-content: center; }
    .odb-hero-art { width: min(100%, 340px); min-height: 0; }
    .odb-hero-art__backdrop, .odb-hero-art__dot, .odb-hero-art__icon { display: none; }
    .odb-hero-card { width: 100%; border-radius: 20px; }
    .odb-hero-slider { height: 230px; }
    .odb-hero-card__body { padding: .85rem 1rem 1rem; }
    .odb-hero-card__quote { font-size: .92rem; line-height: 1.5; }
}

/* ---------- Phones and small tablets ---------- */
@media (max-width: 767.98px) {
    /* iOS Safari zooms the page whenever a focused field is under 16px. The `-sm`
       controls used across the admin filters are 14px, so every tap on one nudged
       the layout sideways. */
    .form-control, .form-select,
    .form-control-sm, .form-select-sm,
    input, select, textarea { font-size: 16px; }

    .odb-content { padding: 1.15rem; }
    .odb-topbar { padding: .7rem 1rem; }
    .page-title { font-size: 1.3rem; }
    .page-subtitle { margin-bottom: 1rem; }

    /* 2.5rem of padding is a fifth of a phone screen on each side. */
    .invoice-box { padding: 1.25rem; }
    .odb-symptom-card { padding: 1.15rem; }
    .odb-pay-card { padding: 1.25rem; }
    .odb-doctor-panel { padding: 1.35rem; }
    .odb-post-lead__body { padding: 1.25rem 1.25rem 1.5rem; }
    .odb-article__head { padding: 1.75rem 0 1.25rem; }
    .odb-hero { border-radius: 18px; }

    /* Wide cells are what make a table scroll; tighter padding buys back real columns. */
    .table > :not(caption) > * > * { padding: .65rem .6rem; }
    .table thead th { white-space: nowrap; }

    /* Stacked side by side in `col-6`, these read as intended; the block layout they
       inherit from desktop puts the icon on its own line and doubles the card height. */
    .odb-help, .odb-author-box { flex-wrap: wrap; }

    .odb-share { justify-content: center; }
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
    /* "Tk 1,250,000" at 1.8rem does not fit a half-width stat card on a 360px screen. */
    .odb-stat-value { font-size: 1.4rem; overflow-wrap: anywhere; }
    .odb-stat-label { font-size: .72rem; }
    .odb-stat-card .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; }

    .display-4, .display-5, .display-6 { font-size: 2rem; }

    .odb-content { padding: .85rem; }
    .invoice-box { padding: 1rem; }
    /* Cards carry `p-4` on the card itself in most views and on an inner wrapper in a few. */
    .card.p-4, .card .p-4 { padding: 1.15rem !important; }

    .avatar-lg { width: 92px; height: 92px; font-size: 2rem; }

    /* Pagination runs to seven items; at full size that is wider than the screen. */
    .pagination { flex-wrap: wrap; gap: .2rem; }
    .pagination .page-link { padding: .35rem .6rem; font-size: .88rem; }

    .odb-video-nav { gap: .6rem; }
}

/* ---------- Touch devices ---------- */
/* Keyed on the pointer rather than the width: a small window on a desktop does not
   need bigger hit areas, a large tablet does. */
@media (hover: none) and (pointer: coarse) {
    .slot-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .odb-mobile-bar a { min-height: 46px; justify-content: center; }
    .odb-sidebar .nav-link { padding-top: .8rem; padding-bottom: .8rem; }
    .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }
    .odb-share__btn, .odb-social a { width: 44px; height: 44px; }
    /* The dashboard notification bell is an 18x20 glyph with no padding — a coin-flip to hit
       with a thumb. Padding it out costs no layout, the topbar row is taller than this already. */
    .odb-topbar .dropdown > a {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px;
    }
    /* 16px checkboxes and radios. The label is usually clickable too, but the box itself is
       what people aim at. */
    .form-check-input { width: 1.15em; height: 1.15em; margin-top: .15em; }
    .form-switch .form-check-input { width: 2.3em; height: 1.15em; }

    /* The time chips on a doctor card deep-link straight into the booking form — the single
       most valuable tap on the site — and they were 26px tall. */
    .slot-chip {
        display: inline-flex; align-items: center; min-height: 36px;
        padding: .3rem .8rem; font-size: .8rem;
    }
    /* Hero quick-picks and footer navigation: both were sub-32px rows of links. */
    .odb-search-chips a { padding: .45rem .85rem; }
    .odb-footer a { display: inline-block; padding: .2rem 0; }
    /* Hover transforms stick on touch, leaving cards lifted after a tap. */
    .doctor-card:hover, .specialty-tile:hover, .odb-action:hover,
    .odb-post-card:hover, .odb-video-card:hover, .odb-how-card:hover,
    .odb-symptom:hover { transform: none; }
}

@media print {
    .odb-sidebar, .odb-topbar, .odb-sidebar-backdrop, .odb-mobile-bar, .no-print { display: none !important; }
    body { background: #fff; }
    .odb-content { padding: 0; }
    .invoice-box { box-shadow: none; padding: 0; max-width: none; }
}