/* ==========================================================================
   MediConnect design system
   One small set of tokens and components, shared by the public site, the
   patient portal and the doctor's back office. Calm, high-contrast and
   generously spaced, with large tap targets for older patients
   (SRS §4.1 User Interfaces, §5.3 Usability).
   ========================================================================== */

:root {
    /* Brand: a clinical teal that reads calm and trustworthy, not cold */
    --mc-primary: #0F766E;
    --mc-primary-dark: #115E59;
    --mc-primary-light: #14B8A6;
    --mc-primary-wash: #F0FDFA;
    --mc-primary-border: #99F6E4;

    --mc-accent: #F59E0B;
    --mc-accent-wash: #FFFBEB;

    --mc-ink: #0F172A;
    --mc-body: #334155;
    --mc-muted: #64748B;
    --mc-faint: #94A3B8;

    --mc-surface: #FFFFFF;
    --mc-canvas: #F8FAFC;
    --mc-line: #E2E8F0;

    --mc-success: #059669;
    --mc-success-wash: #ECFDF5;
    --mc-warning: #B45309;
    --mc-warning-wash: #FFFBEB;
    --mc-danger: #DC2626;
    --mc-danger-wash: #FEF2F2;
    --mc-info: #0369A1;
    --mc-info-wash: #F0F9FF;

    --mc-radius-sm: 8px;
    --mc-radius: 14px;
    --mc-radius-lg: 20px;
    --mc-radius-pill: 999px;

    --mc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --mc-shadow: 0 4px 16px rgba(15, 23, 42, .07);
    --mc-shadow-lg: 0 18px 48px rgba(15, 23, 42, .12);

    --mc-header-h: 72px;
    --mc-sidebar-w: 268px;
}

/* ---------- base ---------- */

html { font-size: 16px; scroll-behavior: smooth; }

body {
    /* "Nirmala UI"/"Noto Sans Bengali" are included so the taka sign (৳) and any Bengali
       copy render properly rather than falling back to a mismatched glyph. */
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
                 "Nirmala UI", "Noto Sans Bengali", sans-serif;
    color: var(--mc-body);
    background: var(--mc-canvas);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--mc-ink);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
}

a { color: var(--mc-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--mc-primary-dark); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--mc-primary-light); outline-offset: 2px; border-radius: 4px; }

/* Bootstrap caps the container at 1140px (xl) and 1320px (xxl), which strands a wide band of
   empty margin on large monitors. 95vw reproduces those stock widths almost exactly at the
   breakpoints themselves and only pulls ahead past ~1400px, so nothing below xl moves - phones
   and tablets keep Bootstrap's widths untouched. The 1600px ceiling stops lines of body copy
   from running too long to scan on very wide displays.
   Applies to the public site, header and footer; the dashboard shell uses its own layout. */
@media (min-width: 1200px) {
    .container { max-width: min(1600px, 95vw); }
}

.mc-muted { color: var(--mc-muted) !important; }
.mc-faint { color: var(--mc-faint) !important; }
.mc-ink { color: var(--mc-ink) !important; }
/* Money and counters: tabular figures so columns of amounts line up. */
.mc-mono {
    font-variant-numeric: tabular-nums;
    font-family: "Segoe UI", "Nirmala UI", "Noto Sans Bengali", system-ui, Arial, sans-serif;
}

.mc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mc-primary);
}

/* ---------- buttons ---------- */

.btn {
    --bs-btn-font-weight: 600;
    border-radius: var(--mc-radius-sm);
    padding: .6rem 1.15rem;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn-lg { padding: .8rem 1.6rem; font-size: 1.02rem; border-radius: var(--mc-radius); }
.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--mc-primary);
    --bs-btn-border-color: var(--mc-primary);
    --bs-btn-hover-bg: var(--mc-primary-dark);
    --bs-btn-hover-border-color: var(--mc-primary-dark);
    --bs-btn-active-bg: var(--mc-primary-dark);
    --bs-btn-active-border-color: var(--mc-primary-dark);
    --bs-btn-disabled-bg: #94A3B8;
    --bs-btn-disabled-border-color: #94A3B8;
    box-shadow: 0 2px 10px rgba(15, 118, 110, .22);
}

.btn-outline-primary {
    --bs-btn-color: var(--mc-primary);
    --bs-btn-border-color: var(--mc-primary-border);
    --bs-btn-hover-bg: var(--mc-primary);
    --bs-btn-hover-border-color: var(--mc-primary);
    --bs-btn-active-bg: var(--mc-primary-dark);
    --bs-btn-active-border-color: var(--mc-primary-dark);
}

.btn-accent { background: var(--mc-accent); border-color: var(--mc-accent); color: #422006; font-weight: 700; }
.btn-accent:hover { background: #D97706; border-color: #D97706; color: #fff; }

.btn-soft {
    background: var(--mc-primary-wash);
    border: 1px solid var(--mc-primary-border);
    color: var(--mc-primary-dark);
    font-weight: 600;
}

.btn-soft:hover { background: #CCFBF1; color: var(--mc-primary-dark); }

.btn-ghost { background: transparent; border: 1px solid var(--mc-line); color: var(--mc-body); font-weight: 600; }
.btn-ghost:hover { background: #fff; border-color: var(--mc-muted); color: var(--mc-ink); }

/* ---------- cards & sections ---------- */

.mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
}

.mc-card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

.mc-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--mc-shadow);
    border-color: var(--mc-primary-border);
}

.mc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.05rem 1.35rem;
    border-bottom: 1px solid var(--mc-line);
}

.mc-card-header h2, .mc-card-header h3 { font-size: 1.02rem; margin: 0; font-weight: 700; }

.mc-card-body { padding: 1.35rem; }
.mc-card-body-tight { padding: 1rem 1.35rem; }

.mc-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.mc-section-wash { background: var(--mc-primary-wash); }
.mc-section-surface { background: var(--mc-surface); }

/* A whisper of the brand wash in the corners - the same teal/amber pairing as the hero, so the
   page reads as one piece. Enough to lift the two panels off the background without becoming
   the flat teal block the Services section below already uses. */
.mc-section-doctor {
    background:
        radial-gradient(900px 440px at 100% 0%, #ECFDF5 0%, rgba(236, 253, 245, 0) 62%),
        radial-gradient(720px 380px at 0% 100%, #FFFBEB 0%, rgba(255, 251, 235, 0) 58%),
        var(--mc-surface);
}

.mc-section-head { max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.mc-section-head h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); margin: .6rem 0 .75rem; }
.mc-section-head p { color: var(--mc-muted); font-size: 1.05rem; margin: 0; }

/* ---------- pills & stats ---------- */

.mc-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: var(--mc-radius-pill);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.mc-pill-primary { background: var(--mc-primary-wash); color: var(--mc-primary-dark); border: 1px solid var(--mc-primary-border); }
.mc-pill-success { background: var(--mc-success-wash); color: var(--mc-success); border: 1px solid #A7F3D0; }
.mc-pill-warning { background: var(--mc-warning-wash); color: var(--mc-warning); border: 1px solid #FDE68A; }
.mc-pill-danger  { background: var(--mc-danger-wash);  color: var(--mc-danger);  border: 1px solid #FECACA; }
.mc-pill-info    { background: var(--mc-info-wash);    color: var(--mc-info);    border: 1px solid #BAE6FD; }
.mc-pill-neutral { background: #F1F5F9; color: var(--mc-muted); border: 1px solid var(--mc-line); }

.mc-stat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    height: 100%;
}

.mc-stat-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.2rem;
    background: var(--mc-primary-wash);
    color: var(--mc-primary);
}

.mc-stat-icon.is-accent  { background: var(--mc-accent-wash);  color: var(--mc-warning); }
.mc-stat-icon.is-success { background: var(--mc-success-wash); color: var(--mc-success); }
.mc-stat-icon.is-danger  { background: var(--mc-danger-wash);  color: var(--mc-danger); }
.mc-stat-icon.is-info    { background: var(--mc-info-wash);    color: var(--mc-info); }

.mc-stat-value { font-size: 1.65rem; font-weight: 700; color: var(--mc-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.mc-stat-label { font-size: .82rem; color: var(--mc-muted); font-weight: 600; }

/* ---------- forms ---------- */

.form-label { font-weight: 600; font-size: .875rem; color: var(--mc-ink); margin-bottom: .35rem; }

.form-control, .form-select {
    border-radius: var(--mc-radius-sm);
    border-color: #CBD5E1;
    padding: .6rem .85rem;
    font-size: .95rem;
    color: var(--mc-ink);
}

.form-control:focus, .form-select:focus {
    border-color: var(--mc-primary-light);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .16);
}

.form-control::placeholder { color: var(--mc-faint); }
.form-text { font-size: .82rem; color: var(--mc-muted); }
.form-check-input:checked { background-color: var(--mc-primary); border-color: var(--mc-primary); }
.form-switch .form-check-input { width: 2.4em; height: 1.25em; }

.field-validation-error, .validation-summary-errors { font-size: .84rem; font-weight: 600; color: var(--mc-danger); }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

.mc-form-section { padding-bottom: 1.35rem; margin-bottom: 1.35rem; border-bottom: 1px dashed var(--mc-line); }
.mc-form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.mc-form-section-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mc-primary);
    margin-bottom: .9rem;
}

.mc-otp-input {
    font-size: 1.6rem;
    letter-spacing: .6rem;
    text-align: center;
    font-weight: 700;
    padding: .75rem;
}

/* ---------- tables ---------- */

.mc-table-wrap {
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    overflow-x: auto;
}

.mc-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }

.mc-table thead th {
    background: #F8FAFC;
    border-bottom: 1px solid var(--mc-line);
    padding: .8rem 1rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mc-muted);
    white-space: nowrap;
}

.mc-table tbody td { padding: .9rem 1rem; border-bottom: 1px solid #F1F5F9; vertical-align: middle; font-size: .92rem; }
.mc-table tbody tr:last-child td { border-bottom: 0; }
.mc-table tbody tr:hover { background: var(--mc-primary-wash); }

/* ---------- avatars ---------- */

.mc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mc-primary-wash);
    color: var(--mc-primary-dark);
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
    flex: 0 0 auto;
    border: 2px solid #fff;
    box-shadow: var(--mc-shadow-sm);
    text-transform: uppercase;
}

.mc-avatar-sm { width: 32px; height: 32px; font-size: .78rem; }
.mc-avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.mc-avatar-xl { width: 104px; height: 104px; font-size: 2rem; }

/* ---------- empty state ---------- */

.mc-empty { text-align: center; padding: 3rem 1.5rem; color: var(--mc-muted); }
.mc-empty i { font-size: 2.6rem; color: var(--mc-primary-border); display: block; margin-bottom: .85rem; }
.mc-empty h3 { font-size: 1.05rem; color: var(--mc-ink); margin-bottom: .35rem; }
.mc-empty p { margin: 0 auto; max-width: 420px; font-size: .93rem; }

/* ---------- public header & footer ---------- */

.mc-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--mc-header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mc-line);
}

.mc-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--mc-ink);
    letter-spacing: -.02em;
}

.mc-brand:hover { color: var(--mc-primary); text-decoration: none; }

.mc-brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-light));
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(15, 118, 110, .3);
}

.mc-nav-link { padding: .5rem .85rem; border-radius: var(--mc-radius-sm); font-weight: 600; font-size: .94rem; color: var(--mc-body); }
.mc-nav-link:hover { background: var(--mc-primary-wash); color: var(--mc-primary-dark); text-decoration: none; }
.mc-nav-link.active { color: var(--mc-primary-dark); background: var(--mc-primary-wash); }

.mc-footer { background: #0B2F2C; color: #94A3B8; padding: 3.25rem 0 1.75rem; }
.mc-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.mc-footer a { color: #CBD5E1; font-size: .92rem; }
.mc-footer a:hover { color: #5EEAD4; text-decoration: none; }
.mc-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.25rem; padding-top: 1.25rem; font-size: .85rem; }

/* ---------- hero ---------- */

.mc-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 88% -8%, #CCFBF1 0%, rgba(204, 251, 241, 0) 62%),
        radial-gradient(760px 420px at 4% 106%, #FEF3C7 0%, rgba(254, 243, 199, 0) 58%),
        var(--mc-surface);
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

/* Scrolling welcome bar. The track holds the messages twice and travels exactly half its width,
   so the copy behind lands where the first began - a seamless loop with no JavaScript. */
.mc-ticker {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.6rem;
    padding: .5rem .6rem .5rem .85rem;
    border: 1px solid var(--mc-primary-border);
    border-radius: 999px;
    background: rgba(240, 253, 250, .92);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.mc-ticker-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mc-primary);
    color: #fff;
    font-size: .88rem;
}

.mc-ticker-viewport {
    flex: 1 1 auto;
    overflow: hidden;
    /* The fade ramp is exactly as wide as this padding, so the first message sits clear of it on
       arrival and only softens once it starts sliding out on the left. */
    padding-left: 1.4rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.4rem, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.4rem, #000 calc(100% - 2.5rem), transparent 100%);
}

.mc-ticker-track {
    display: flex;
    width: max-content;
    /* Paced to the wider text: longer messages need longer to cross, or they read as a blur. */
    animation: mc-ticker-scroll 36s linear infinite;
}

.mc-ticker-run { display: flex; }

/* Hovering or tabbing in stops the bar so a message can actually be read. */
.mc-ticker:hover .mc-ticker-track,
.mc-ticker:focus-within .mc-ticker-track { animation-play-state: paused; }

.mc-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-right: 3rem;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mc-primary-dark);
}

.mc-ticker-star { font-size: .56rem; color: var(--mc-primary-light); }

@keyframes mc-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* No motion: park the bar and let it be scrolled by hand instead. */
@media (prefers-reduced-motion: reduce) {
    .mc-ticker-track { animation: none; }
    .mc-ticker-viewport { overflow-x: auto; }
    .mc-ticker-dup { display: none; }
}

/* The copy column sits on its own panel so it balances the portrait frame opposite it.
   The tint is the faintest step of the brand wash - enough to lift the card off the hero
   gradient without competing with the primary button for attention. */
.mc-hero-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 3.2vw, 2.5rem);
    border-radius: var(--mc-radius-lg);
    border: 1px solid var(--mc-primary-border);
    background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 42%, var(--mc-primary-wash) 100%);
    box-shadow: var(--mc-shadow);
}

/* A thin brand rule down the leading edge - the same cue the section cards use. */
.mc-hero-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mc-primary-light), var(--mc-primary));
}

.mc-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); margin-bottom: 1.1rem; }
.mc-hero-card h1 { margin-top: .55rem; }
.mc-hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--mc-body); max-width: 34rem; margin-bottom: 0; }

.mc-hero-actions { margin: 1.6rem 0 1.75rem; }

/* Ruled off from the pitch above: these are supporting proof, not part of the sales copy. */
.mc-hero-stats {
    padding-top: 1.4rem;
    border-top: 1px solid var(--mc-primary-border);
}

.mc-hero-photo {
    position: relative;
    border-radius: var(--mc-radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, var(--mc-primary-wash), #fff);
    border: 1px solid var(--mc-primary-border);
    box-shadow: var(--mc-shadow-lg);
    aspect-ratio: 4 / 5;
    /* The frame decides its own height and nothing inside may push it taller. The picture layer
       is taken out of flow (below), and min-height:0 closes the other route - a flex item's
       automatic minimum size, which would otherwise let a tall image force the box open. */
    min-height: 0;
    display: grid;
    place-items: center;
}

/* Out of flow, so a portrait, a landscape and a square upload all land in the same box: the
   picture is cropped to the frame instead of the frame resizing to the picture. Without this,
   switching to a differently proportioned slide would shove the rest of the page down. */
.mc-hero-photo > img { position: absolute; inset: 0; }
.mc-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* The frame is aspect-locked, so on a wide container an unbounded column would keep making it
   taller. Cap it, and in the hero hold it against the outer edge so the extra width the wider
   container frees up goes to the copy card instead.

   Both hero columns are stretched to the row's height so the copy card and the portrait frame
   finish on the same line. The frame's 4/5 ratio still sets the natural height; whichever
   column comes out taller drives the row and the other grows to meet it, so this holds even
   when the doctor writes a long headline. */
@media (min-width: 992px) {
    .mc-hero-photo { max-width: 560px; }

    .mc-hero-copy,
    .mc-hero-media { display: flex; flex-direction: column; }

    .mc-hero-media .mc-hero-photo { flex: 1 1 auto; margin-left: auto; }

    .mc-hero-card { flex: 1 1 auto; display: flex; flex-direction: column; }

    /* Any slack lands above the rule, so the proof numbers sit on the card's bottom edge
       rather than leaving a gap under them. */
    .mc-hero-card .mc-hero-stats { margin-top: auto; }
}

/* Slideshow variant of the same frame. The carousel has to fill it edge to edge, and every
   control is kept clear of the verified badge pinned across the bottom. */
.mc-hero-slider { display: block; }

/* Same reasoning as the single image: the whole carousel is lifted out of flow, so no slide -
   whatever its dimensions - contributes any height of its own. The frame's size is fixed and
   every slide is cropped into it, so the hero never jumps as pictures rotate. */
.mc-hero-slider .carousel { position: absolute; inset: 0; }

.mc-hero-slider .carousel-inner,
.mc-hero-slider .carousel-item { height: 100%; }

.mc-hero-slider .carousel-item img { width: 100%; height: 100%; object-fit: cover; }

.mc-hero-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--mc-primary-border);
    box-shadow: var(--mc-shadow);
    font-size: .8rem;
    font-weight: 700;
    color: var(--mc-primary-dark);
}

.mc-hero-dots {
    top: 1rem;
    right: 1rem;
    left: auto;
    bottom: auto;
    width: auto;
    margin: 0;
}

.mc-hero-dots [data-bs-target] {
    width: 9px;
    height: 9px;
    margin: 0 3px;
    border: 0;
    border-radius: 50%;
    background: var(--mc-primary);
    opacity: .28;
    transition: opacity .15s ease, transform .15s ease;
}

.mc-hero-dots .active { opacity: 1; transform: scale(1.25); }

.carousel-control-prev.mc-hero-nav,
.carousel-control-next.mc-hero-nav {
    width: 38px;
    height: 38px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--mc-shadow);
    color: var(--mc-primary-dark);
    font-size: 1.05rem;
    opacity: 1;
}

.carousel-control-prev.mc-hero-nav { left: .75rem; }
.carousel-control-next.mc-hero-nav { right: .75rem; }

.carousel-control-prev.mc-hero-nav:hover,
.carousel-control-next.mc-hero-nav:hover,
.carousel-control-prev.mc-hero-nav:focus-visible,
.carousel-control-next.mc-hero-nav:focus-visible { background: #fff; color: var(--mc-primary); }

.mc-hero-badge {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-radius: var(--mc-radius);
    padding: .7rem .9rem;
    box-shadow: var(--mc-shadow);
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mc-ink);
}

/* ---------- doctor profile & consultation fees (home) ---------- */

/* Same panel language as the hero card, so the two read as a set as you scroll. Full height and
   a flex column, so it finishes level with the fee panel and the button can sit on the bottom
   edge however much copy the doctor writes above it. */
.mc-doctor-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--mc-radius-lg);
    border: 1px solid var(--mc-primary-border);
    background: linear-gradient(150deg, #FFFFFF 0%, #FFFFFF 46%, var(--mc-primary-wash) 100%);
    box-shadow: var(--mc-shadow);
}

.mc-doctor-name { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .55rem 0 .35rem; }
.mc-doctor-intro { font-size: 1.08rem; color: var(--mc-body); max-width: 46rem; margin-bottom: 1.5rem; }
/* align-self keeps the button at its own width - the panel stretches its children by default,
   and margin-top:auto drops it onto the bottom edge when the panel is the shorter of the two. */
.mc-doctor-cta { align-self: flex-start; margin-top: auto; background: rgba(255, 255, 255, .8); }

/* The fees are the most-scanned thing in this section, so the panel is given a tinted header
   and footer rather than sitting as an all-white card on an almost-white background. */
.mc-fee-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Clips the tinted strips to the corners. */
    overflow: hidden;
    border-radius: var(--mc-radius-lg);
    border-color: var(--mc-primary-border);
    box-shadow: var(--mc-shadow);
}

.mc-fee-card .mc-card-header {
    background: linear-gradient(180deg, var(--mc-primary-wash), #FFFFFF);
    border-bottom-color: var(--mc-primary-border);
    color: var(--mc-primary-dark);
}

.mc-fee-card .mc-card-body { flex: 1 1 auto; padding: .35rem 1.35rem; }

.mc-fee-list { list-style: none; margin: 0; padding: 0; }

/* Hairline between rows instead of gaps: three prices scan faster as a table than as cards. */
.mc-fee-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--mc-line);
}

.mc-fee-item:last-child { border-bottom: 0; }

.mc-fee-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mc-primary-wash);
    border: 1px solid var(--mc-primary-border);
    color: var(--mc-primary);
    font-size: .95rem;
}

.mc-fee-name { flex: 1 1 auto; font-weight: 600; color: var(--mc-ink); }

.mc-fee-amount {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--mc-primary-dark);
    white-space: nowrap;
}

/* How you pay is a caveat, not a fourth fee - its own strip keeps it out of the price list. */
.mc-fee-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .95rem 1.35rem;
    border-top: 1px solid var(--mc-primary-border);
    background: var(--mc-primary-wash);
    font-size: .85rem;
    line-height: 1.55;
    color: var(--mc-primary-dark);
}

.mc-fee-note i { margin-top: .18rem; color: var(--mc-primary); }

/* ---------- tiles ---------- */

/* Every tile carries an accent as three custom properties - the ink for its icon, a wash for
   the foot of the card, and a matching hairline. Teal is the default; the services grid below
   rotates through the other three. */
.mc-tile {
    --mc-tile-ink: var(--mc-primary);
    --mc-tile-wash: #E2F8F3;
    --mc-tile-line: var(--mc-primary-border);

    height: 100%;
    padding: 1.6rem;
    /* Mostly white so the copy stays high-contrast, with the accent only surfacing across the
       bottom third - enough to tell the cards apart without turning the row into a rainbow. */
    background: linear-gradient(160deg, var(--mc-surface) 0%, var(--mc-surface) 54%, var(--mc-tile-wash) 100%);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mc-tile:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow); border-color: var(--mc-tile-line); }

.mc-tile-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--mc-tile-wash);
    border: 1px solid var(--mc-tile-line);
    color: var(--mc-tile-ink);
    font-size: 1.35rem;
    margin-bottom: 1.05rem;
}

.mc-tile h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.mc-tile p { color: var(--mc-muted); font-size: .93rem; margin-bottom: 0; }

.mc-fee-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.05rem; padding-top: .9rem; border-top: 1px dashed var(--mc-tile-line, var(--mc-line)); }

/* Four accents in rotation, so a row of cards reads as distinct items instead of one block
   repeated. All four come from the existing tokens - the clinical teal, blue and green plus the
   warm accent - so no new colour enters the palette. Nothing here is load-bearing: the meaning
   is in the icons and the pills, the tint only helps the eye separate the cards.

   Put mc-accent-rotate on any row whose columns each hold one card; the card picks the accent
   up through the three custom properties. The :not() keeps the services invitation tile out of
   the rotation - it stays brand teal wherever in the grid it happens to land. */
.mc-accent-rotate > *:nth-child(4n + 2) > *:not(.mc-tile-cta) {
    --mc-tile-ink: var(--mc-info);
    --mc-tile-wash: var(--mc-info-wash);
    --mc-tile-line: #BAE6FD;
}

.mc-accent-rotate > *:nth-child(4n + 3) > *:not(.mc-tile-cta) {
    --mc-tile-ink: var(--mc-success);
    --mc-tile-wash: var(--mc-success-wash);
    --mc-tile-line: #A7F3D0;
}

.mc-accent-rotate > *:nth-child(4n) > *:not(.mc-tile-cta) {
    --mc-tile-ink: var(--mc-warning);
    --mc-tile-wash: var(--mc-warning-wash);
    --mc-tile-line: #FDE68A;
}

/* The tile that fills the leftover width of the last row. Dashed, so it reads as an invitation
   rather than a sixth service someone forgot to price. */
.mc-tile-cta {
    --mc-tile-ink: var(--mc-primary);
    --mc-tile-wash: var(--mc-primary-wash);
    --mc-tile-line: var(--mc-primary-border);

    display: flex;
    flex-direction: column;
    border-style: dashed;
    border-color: var(--mc-primary-border);
    background: linear-gradient(150deg, var(--mc-surface) 0%, var(--mc-primary-wash) 100%);
    text-decoration: none;
}

.mc-tile-cta:hover { text-decoration: none; border-color: var(--mc-primary); }
.mc-tile-cta h3 { color: var(--mc-ink); }

/* Pinned to the bottom edge so it lines up with the fee pills on the tiles either side. */
.mc-tile-cta-link {
    margin-top: auto;
    padding-top: 1.05rem;
    font-weight: 700;
    font-size: .93rem;
    color: var(--mc-primary);
}

/* ---------- the chamber (home) ---------- */

/* White settling to the neutral canvas, with a teal glow behind the map side. Keeps the band
   light between the tinted stories above and the FAQ wash below, while still giving the two
   panels something to sit on. */
.mc-section-clinic {
    background:
        radial-gradient(820px 420px at 88% 10%, var(--mc-primary-wash) 0%, rgba(240, 253, 250, 0) 60%),
        linear-gradient(180deg, var(--mc-surface) 0%, var(--mc-canvas) 100%);
}

.mc-chamber-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.15rem);
    border-radius: var(--mc-radius-lg);
    border: 1px solid var(--mc-primary-border);
    background: linear-gradient(150deg, var(--mc-surface) 0%, var(--mc-surface) 48%, var(--mc-primary-wash) 100%);
    box-shadow: var(--mc-shadow);
}

.mc-chamber-name { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: .5rem 0 1.1rem; }

.mc-chamber-list { list-style: none; margin: 0; padding: 0; }

.mc-chamber-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--mc-primary-border);
}

.mc-chamber-item:first-child { padding-top: 0; }
.mc-chamber-item:last-child { border-bottom: 0; }

/* Label above value, not the other way round: the label is a signpost, the detail is the
   content, so the detail gets the ink and the label steps back. */
.mc-chamber-label {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mc-muted);
    margin-bottom: .12rem;
}

.mc-chamber-value { display: block; color: var(--mc-ink); line-height: 1.55; }

.mc-chamber-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .55rem;
    padding: .12rem .55rem;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-success-wash);
    border: 1px solid #A7F3D0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mc-success);
}

.mc-chamber-whatsapp:hover { background: #D1FAE5; color: var(--mc-success); text-decoration: none; }

/* Pinned to the bottom edge, so the buttons line up with the foot of the map beside them. */
.mc-chamber-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1.5rem; }

/* The map fills its column edge to edge. Height comes from the row - whichever of the two
   panels is taller - with the min-height as the floor when the card stack is short. */
.mc-map-card {
    display: flex;
    height: 100%;
    overflow: hidden;
    border-radius: var(--mc-radius-lg);
    border: 1px solid var(--mc-primary-border);
    box-shadow: var(--mc-shadow);
    background: var(--mc-surface);
}

.mc-map-card iframe {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 380px;
    border: 0;
}

/* ---------- test referral on a prescription ---------- */

/* Set apart from the tests themselves: the tests are the clinical instruction, this is directions.
   Keeping them visually separate is what stops the suggestion reading as part of the order. */
.mc-rx-referral {
    margin-top: .75rem;
    padding: .8rem .9rem;
    border-radius: var(--mc-radius-sm);
    border: 1px solid var(--mc-primary-border);
    background: var(--mc-primary-wash);
}

.mc-rx-referral-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mc-primary);
    margin-bottom: .3rem;
}

.mc-rx-referral-name { font-weight: 700; color: var(--mc-ink); }
.mc-rx-referral-line { font-size: .88rem; color: var(--mc-body); }

.mc-rx-referral-free {
    margin-top: .45rem;
    font-size: .8rem;
    color: var(--mc-muted);
}

/* ---------- how the video consultation works (home) ---------- */

/* Blue-leaning, because blue is the online mode's colour everywhere else on the site. Sits between
   the neutral steps band above and the tinted stories below, so it stays light. */
.mc-section-video {
    background:
        radial-gradient(880px 420px at 50% 0%, #EFF6FF 0%, rgba(239, 246, 255, 0) 62%),
        linear-gradient(180deg, var(--mc-canvas) 0%, var(--mc-surface) 100%);
}

/* The four things patients ask before a first video call, in a grid that collapses to one column
   on a phone without needing its own breakpoints. */
.mc-video-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .85rem;
    margin-top: 1.35rem;
}

.mc-video-fact {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.05rem 1.1rem;
    border-radius: var(--mc-radius-lg);
    border: 1px solid var(--mc-line);
    background: var(--mc-surface);
    box-shadow: var(--mc-shadow-sm);
}

.mc-video-fact-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mc-info-wash);
    border: 1px solid #BAE6FD;
    color: var(--mc-info);
    font-size: 1.05rem;
}

.mc-video-fact-title { display: block; font-weight: 700; font-size: .95rem; color: var(--mc-ink); margin-bottom: .15rem; }
.mc-video-fact-text { display: block; font-size: .89rem; line-height: 1.6; color: var(--mc-muted); }

/* The way out when the technology fails - deliberately a real phone number, not a help article. */
.mc-video-help {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--mc-radius-lg);
    border: 1px solid var(--mc-primary-border);
    background: var(--mc-primary-wash);
    font-size: .92rem;
    color: var(--mc-primary-dark);
}

.mc-video-help i { margin-top: .2rem; font-size: 1.05rem; color: var(--mc-primary); }

/* ---------- patient stories (home) ---------- */

/* A white glow at the top left and a warm one at the bottom right, over the brand wash. The
   amber picks up the star rating, which is the one warm thing on the page - it keeps this band
   distinct from the availability band above, which is teal throughout. */
.mc-section-stories {
    background:
        radial-gradient(900px 420px at 12% 6%, #FFFFFF 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(720px 380px at 92% 96%, #FFFBEB 0%, rgba(255, 251, 235, 0) 56%),
        var(--mc-primary-wash);
}

.mc-story-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.5rem 1.45rem 1.3rem;
    /* Warm foot rather than the teal used elsewhere, so the stories read as their own kind of
       content and stay legible on the teal band behind them. */
    background: linear-gradient(160deg, var(--mc-surface) 0%, var(--mc-surface) 62%, #FFFCF2 100%);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mc-story-card:hover { transform: translateY(-3px); box-shadow: var(--mc-shadow); border-color: #FDE68A; }

/* The oversized opening quote that says "testimonial" before a word is read. Decorative, so it
   is a pseudo-element and never reaches a screen reader. */
.mc-story-card::before {
    content: "\201C";
    position: absolute;
    top: .35rem;
    right: 1.1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.6rem;
    line-height: 1;
    color: var(--mc-accent);
    opacity: .18;
    pointer-events: none;
}

.mc-story-rating { font-size: 1rem; letter-spacing: .1em; margin-bottom: .7rem; }

/* Grows to fill, so the attribution lines up along the bottom of every card in the row however
   long or short the story is. */
.mc-story-quote { flex: 1 1 auto; margin: 0 0 1.1rem; }
.mc-story-quote p { margin: 0; font-size: .97rem; line-height: 1.72; color: var(--mc-body); }

.mc-story-foot {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--mc-line);
}

/* The avatar's own border is white, which disappears on a white card - a hairline ring gives
   the initials something to sit in. */
.mc-story-foot .mc-avatar { box-shadow: 0 0 0 1px var(--mc-primary-border); }

.mc-story-name { display: block; font-weight: 700; font-size: .92rem; color: var(--mc-ink); line-height: 1.4; }

/* Only shown for a PatientReview - a story the patient wrote and submitted themselves. */
.mc-story-verified {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--mc-success);
}

/* The doctor-entered equivalent: same slot, deliberately quieter and with no check mark. */
.mc-story-shared { display: block; font-size: .76rem; color: var(--mc-faint); }

/* ---------- how it works (home) ---------- */

/* Settling from white to the neutral canvas gives the four cards a floor to sit on, without
   adding another tinted band between the teal availability section above and the patient
   stories below. */
.mc-section-steps { background: linear-gradient(180deg, var(--mc-surface) 0%, var(--mc-canvas) 100%); }

.mc-step-card {
    --mc-tile-ink: var(--mc-primary);
    --mc-tile-wash: #E2F8F3;
    --mc-tile-line: var(--mc-primary-border);

    position: relative;
    height: 100%;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--mc-surface) 0%, var(--mc-surface) 56%, var(--mc-tile-wash) 100%);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mc-step-card:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow); border-color: var(--mc-tile-line); }

/* A big ghosted numeral carries the running order on its own. The old "Step 1" pill sat beside
   the icon competing with the heading for the same glance; this sits behind everything. */
.mc-step-num {
    position: absolute;
    top: .5rem;
    right: 1rem;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mc-tile-ink);
    opacity: .15;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.mc-step-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--mc-tile-wash);
    border: 1px solid var(--mc-tile-line);
    color: var(--mc-tile-ink);
    font-size: 1.3rem;
    margin-bottom: 1.05rem;
}

.mc-step-card h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.mc-step-card p { color: var(--mc-muted); font-size: .93rem; margin-bottom: 0; }

/* Dashed connectors across the gutters, so four cards read as one route rather than four
   unrelated boxes. Only at lg, where the steps actually sit in a single row of four. */
@media (min-width: 992px) {
    .mc-steps-grid > *:not(:last-child) .mc-step-card::after {
        content: "";
        position: absolute;
        top: 2.5rem;
        left: 100%;
        width: var(--bs-gutter-x, 1rem);
        border-top: 2px dashed var(--mc-primary-border);
    }
}

/* ---------- availability preview (home) ---------- */

/* A white halo behind the section head, deepening to a slightly stronger wash at the foot. The
   flat wash left the white cards almost invisible; this gives them something to sit on. */
.mc-section-slots {
    background:
        radial-gradient(860px 400px at 50% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 66%),
        linear-gradient(180deg, var(--mc-primary-wash) 0%, #E3F9F4 100%);
}

/* A tear-off calendar page: dated head, openings below. */
.mc-day-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Clips the tinted head to the rounded corners. */
    overflow: hidden;
    background: var(--mc-surface);
    border: 1px solid var(--mc-primary-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mc-day-card:hover { transform: translateY(-3px); box-shadow: var(--mc-shadow); }

.mc-day-card-head {
    padding: .8rem 1rem;
    text-align: center;
    background: linear-gradient(180deg, var(--mc-primary-wash), var(--mc-surface));
    border-bottom: 1px solid var(--mc-primary-border);
}

.mc-day-card-label { display: block; font-weight: 700; color: var(--mc-ink); line-height: 1.35; }
.mc-day-card-date { display: block; font-size: .78rem; color: var(--mc-muted); font-variant-numeric: tabular-nums; }

.mc-day-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .9rem .8rem 1rem;
}

/* One tinted block per appointment type, using the same blue-for-online and teal-for-in-clinic
   the rest of the site uses, so a patient can tell at a glance which times mean a video call and
   which mean travelling to the chamber. */
.mc-day-mode {
    --mc-mode-ink: var(--mc-info);
    --mc-mode-wash: var(--mc-info-wash);
    --mc-mode-line: #BAE6FD;

    padding: .55rem .6rem .6rem;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-mode-wash);
    border: 1px solid var(--mc-mode-line);
}

.mc-day-mode.is-clinic {
    --mc-mode-ink: var(--mc-primary-dark);
    --mc-mode-wash: var(--mc-primary-wash);
    --mc-mode-line: var(--mc-primary-border);
}

.mc-day-mode-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-bottom: .45rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mc-mode-ink);
}

/* Times are openings, not metadata: white chips with a coloured hairline read as something you
   can take, where the grey neutral pills read as a disabled state. */
.mc-day-times {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* White against the block's own tint, and inheriting that block's colour. */
.mc-day-times li {
    padding: .28rem .55rem;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface);
    border: 1px solid var(--mc-mode-line, var(--mc-primary-border));
    font-size: .78rem;
    font-weight: 600;
    color: var(--mc-mode-ink, var(--mc-primary-dark));
    font-variant-numeric: tabular-nums;
}

/* The soonest day carries a solid brand head, so the eye starts at the card most visitors want
   rather than scanning four identical ones. */
.mc-day-card.is-next {
    border-color: var(--mc-primary);
    box-shadow: 0 10px 26px rgba(15, 118, 110, .18);
}

.mc-day-card.is-next .mc-day-card-head {
    background: linear-gradient(180deg, var(--mc-primary), var(--mc-primary-dark));
    border-bottom-color: var(--mc-primary-dark);
}

.mc-day-card.is-next .mc-day-card-label { color: #FFFFFF; }
.mc-day-card.is-next .mc-day-card-date { color: #CCFBF1; }

/* ---------- slot picker ---------- */

.mc-day-strip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .6rem; }

.mc-day {
    flex: 0 0 auto;
    min-width: 96px;
    padding: .7rem .5rem;
    text-align: center;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    background: var(--mc-surface);
    color: var(--mc-ink);
}

.mc-day:hover { border-color: var(--mc-primary-light); text-decoration: none; color: var(--mc-ink); }

.mc-day.active {
    border-color: var(--mc-primary);
    background: var(--mc-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 118, 110, .28);
}

.mc-day.active .mc-day-count, .mc-day.active .mc-day-name { color: rgba(255, 255, 255, .88); }
.mc-day.is-full { opacity: .55; }
.mc-day-name { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mc-muted); font-weight: 700; }
.mc-day-date { font-size: 1.02rem; font-weight: 700; }
.mc-day-count { font-size: .72rem; color: var(--mc-success); font-weight: 600; }

.mc-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .6rem; }

.mc-slot { position: relative; display: block; cursor: pointer; margin: 0; }
.mc-slot input { position: absolute; opacity: 0; pointer-events: none; }

.mc-slot-face {
    display: block;
    padding: .7rem .5rem;
    text-align: center;
    border: 1.5px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface);
    font-weight: 600;
    font-size: .9rem;
    color: var(--mc-ink);
    transition: all .14s ease;
}

.mc-slot:hover .mc-slot-face { border-color: var(--mc-primary-light); background: var(--mc-primary-wash); }

.mc-slot input:checked + .mc-slot-face {
    border-color: var(--mc-primary);
    background: var(--mc-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 118, 110, .28);
}

.mc-slot input:disabled + .mc-slot-face {
    background: #F1F5F9;
    color: var(--mc-faint);
    border-color: #F1F5F9;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ---------- choice cards ---------- */

.mc-choice { position: relative; display: block; height: 100%; cursor: pointer; margin: 0; }
.mc-choice input { position: absolute; opacity: 0; pointer-events: none; }

.mc-choice-face {
    height: 100%;
    padding: 1.5rem;
    border: 2px solid var(--mc-line);
    border-radius: var(--mc-radius);
    background: var(--mc-surface);
    transition: all .16s ease;
}

.mc-choice:hover .mc-choice-face { border-color: var(--mc-primary-light); }

.mc-choice input:checked + .mc-choice-face {
    border-color: var(--mc-primary);
    background: var(--mc-primary-wash);
    box-shadow: 0 6px 20px rgba(15, 118, 110, .14);
}

.mc-choice input:disabled + .mc-choice-face { opacity: .55; cursor: not-allowed; }
.mc-choice-face .mc-tile-icon { margin-bottom: .85rem; }

/* ---------- steps ---------- */

.mc-steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.mc-step { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 600; color: var(--mc-faint); }

.mc-step-num {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #F1F5F9;
    color: var(--mc-muted);
    font-size: .78rem;
    font-weight: 700;
}

.mc-step.is-active { color: var(--mc-primary-dark); }
.mc-step.is-active .mc-step-num { background: var(--mc-primary); color: #fff; }
.mc-step.is-done { color: var(--mc-success); }
.mc-step.is-done .mc-step-num { background: var(--mc-success); color: #fff; }
.mc-step-sep { color: var(--mc-line); }

/* ---------- timeline ---------- */

.mc-timeline { position: relative; padding-left: 1.9rem; }

.mc-timeline::before {
    content: "";
    position: absolute;
    left: .48rem;
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    background: var(--mc-line);
}

.mc-timeline-item { position: relative; padding-bottom: 1.5rem; }
.mc-timeline-item:last-child { padding-bottom: 0; }

.mc-timeline-item::before {
    content: "";
    position: absolute;
    left: -1.66rem;
    top: .42rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--mc-surface);
    border: 2.5px solid var(--mc-primary);
}

/* ---------- app shell ---------- */

.mc-shell { display: flex; min-height: 100vh; }

.mc-sidebar {
    width: var(--mc-sidebar-w);
    flex: 0 0 var(--mc-sidebar-w);
    background: #0B2F2C;
    color: #CBD5E1;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    transition: transform .25s ease;
    overflow-y: auto;
}

.mc-sidebar .mc-brand { color: #fff; padding: 1.15rem 1.25rem .35rem; }
.mc-sidebar .mc-brand:hover { color: #fff; }

.mc-sidebar-role {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5EEAD4;
    font-weight: 700;
    padding: 0 1.25rem 1rem 4.1rem;
}

.mc-sidebar-group {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 700;
    padding: 1.1rem 1.25rem .45rem;
}

.mc-side-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem 1.25rem;
    color: #CBD5E1;
    font-weight: 600;
    font-size: .92rem;
    border-left: 3px solid transparent;
}

.mc-side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.mc-side-link.active {
    background: rgba(20, 184, 166, .16);
    color: #fff;
    border-left-color: var(--mc-primary-light);
}

.mc-side-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }

.mc-side-badge {
    margin-left: auto;
    background: var(--mc-accent);
    color: #422006;
    font-size: .7rem;
    font-weight: 800;
    padding: .1rem .42rem;
    border-radius: var(--mc-radius-pill);
}

.mc-sidebar-footer { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); }

.mc-main { flex: 1 1 auto; min-width: 0; margin-left: var(--mc-sidebar-w); display: flex; flex-direction: column; }

.mc-topbar {
    min-height: var(--mc-header-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem clamp(1rem, 3vw, 2rem);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mc-line);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.mc-topbar h1 { font-size: 1.16rem; margin: 0; }
.mc-topbar-sub { font-size: .8rem; color: var(--mc-muted); }

.mc-content { padding: clamp(1.25rem, 3vw, 2rem); flex: 1 1 auto; }

.mc-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.mc-page-head h2 { font-size: 1.4rem; margin-bottom: .2rem; }
.mc-page-head p { color: var(--mc-muted); margin: 0; font-size: .92rem; }

.mc-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1035; }

/* ---------- notifications ---------- */

.mc-bell { position: relative; }

.mc-bell-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
}

.mc-notif-list { width: min(380px, 92vw); max-height: 420px; overflow-y: auto; padding: 0; }

.mc-notif { display: flex; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid #F1F5F9; color: var(--mc-body); }
.mc-notif:hover { background: var(--mc-primary-wash); text-decoration: none; }
.mc-notif.is-unread { background: var(--mc-info-wash); }
.mc-notif-title { font-weight: 700; font-size: .88rem; color: var(--mc-ink); }
.mc-notif-text { font-size: .82rem; color: var(--mc-muted); }
.mc-notif-time { font-size: .72rem; color: var(--mc-faint); }

/* ---------- video consultation ---------- */

.mc-call { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }

.mc-stage {
    position: relative;
    background: #0B1120;
    border-radius: var(--mc-radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: var(--mc-shadow-lg);
}

.mc-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B1120; }

.mc-stage-self {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    width: clamp(120px, 24%, 210px);
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .35);
    box-shadow: var(--mc-shadow);
    z-index: 3;
    background: #0B1120;
}

.mc-stage-status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    color: #CBD5E1;
    padding: 2rem;
    z-index: 2;
}

.mc-stage-status i { font-size: 2.8rem; color: var(--mc-primary-light); }

.mc-call-controls { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

.mc-call-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--mc-line);
    background: var(--mc-surface);
    color: var(--mc-ink);
    font-size: 1.15rem;
    display: grid;
    place-items: center;
    transition: all .15s ease;
}

.mc-call-btn:hover { background: var(--mc-primary-wash); border-color: var(--mc-primary-border); }
.mc-call-btn.is-off { background: var(--mc-danger-wash); border-color: #FECACA; color: var(--mc-danger); }
.mc-call-btn.is-end { background: var(--mc-danger); border-color: var(--mc-danger); color: #fff; width: 62px; }

.mc-chat { display: flex; flex-direction: column; height: 520px; }
.mc-chat-log { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }

.mc-chat-msg { max-width: 85%; padding: .55rem .8rem; border-radius: 12px; font-size: .88rem; background: #F1F5F9; color: var(--mc-ink); }
.mc-chat-msg.is-self { align-self: flex-end; background: var(--mc-primary); color: #fff; }
.mc-chat-msg-meta { font-size: .68rem; opacity: .75; margin-top: .15rem; }
.mc-chat-form { border-top: 1px solid var(--mc-line); padding: .75rem; display: flex; gap: .5rem; }

/* ---------- alerts, charts, misc ---------- */

.mc-alert {
    display: flex;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-radius: var(--mc-radius-sm);
    border: 1px solid;
    font-size: .92rem;
    align-items: flex-start;
}

.mc-alert i { font-size: 1.1rem; flex: 0 0 auto; margin-top: .05rem; }
.mc-alert-success { background: var(--mc-success-wash); border-color: #A7F3D0; color: #065F46; }
.mc-alert-danger  { background: var(--mc-danger-wash);  border-color: #FECACA; color: #991B1B; }
.mc-alert-warning { background: var(--mc-warning-wash); border-color: #FDE68A; color: #92400E; }
.mc-alert-info    { background: var(--mc-info-wash);    border-color: #BAE6FD; color: #075985; }

.mc-toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(360px, calc(100vw - 2rem));
}

.mc-rating { color: var(--mc-accent); letter-spacing: .06em; }

.mc-bar { height: 8px; border-radius: var(--mc-radius-pill); background: #F1F5F9; overflow: hidden; }
.mc-bar span { display: block; height: 100%; background: var(--mc-primary); border-radius: inherit; }

.mc-chart { display: flex; align-items: flex-end; gap: .5rem; height: 168px; padding-top: .5rem; }
.mc-chart-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; }
.mc-chart-stack { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.mc-chart-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; }
.mc-chart-bar.is-online { background: var(--mc-primary); }
.mc-chart-bar.is-physical { background: var(--mc-primary-light); }
.mc-chart-label { font-size: .68rem; color: var(--mc-muted); white-space: nowrap; font-weight: 600; }

.mc-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--mc-muted); font-weight: 600; }
.mc-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.mc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.mc-accordion .accordion-button { font-weight: 600; color: var(--mc-ink); }
.mc-accordion .accordion-button:not(.collapsed) { background: var(--mc-primary-wash); color: var(--mc-primary-dark); }
.mc-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(20, 184, 166, .16); }
.mc-accordion .accordion-item { border: 1px solid var(--mc-line); border-radius: var(--mc-radius-sm); margin-bottom: .6rem; overflow: hidden; }

.mc-countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mc-primary-dark); }

.mc-rx-sheet { background: #fff; padding: 2rem; border: 1px solid var(--mc-line); border-radius: var(--mc-radius); }
.mc-rx-head { border-bottom: 2px solid var(--mc-primary); padding-bottom: 1rem; margin-bottom: 1.25rem; }

/* ---------- print ---------- */

@media print {
    .mc-sidebar, .mc-topbar, .mc-header, .mc-footer, .mc-no-print, .btn { display: none !important; }
    .mc-main { margin-left: 0; }
    .mc-content { padding: 0; }
    body { background: #fff; }
    .mc-card, .mc-rx-sheet { border: 0; box-shadow: none; padding: 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 1199.98px) {
    .mc-call { grid-template-columns: minmax(0, 1fr); }
    .mc-chat { height: 340px; }
}

@media (max-width: 991.98px) {
    .mc-sidebar { transform: translateX(-100%); }
    .mc-sidebar.is-open { transform: translateX(0); box-shadow: var(--mc-shadow-lg); }
    .mc-sidebar-backdrop.is-open { display: block; }
    .mc-main { margin-left: 0; }
}

@media (max-width: 575.98px) {
    :root { --mc-header-h: 64px; }
    .mc-content { padding: 1rem; }
    .mc-card-body { padding: 1.1rem; }
    .mc-slot-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    /* On a phone the card's own padding is inset inside the container's, so trim it back and
       let the booking buttons run the full width rather than sit half-empty side by side. */
    .mc-hero-card { padding: 1.25rem 1.1rem; }
    .mc-hero-actions { margin: 1.25rem 0 1.4rem; }
    .mc-hero-actions .btn { flex: 1 1 100%; }
    /* Match the tighter card padding the phone breakpoint uses everywhere else. */
    .mc-doctor-card { padding: 1.25rem 1.1rem; }
    .mc-fee-card .mc-card-body { padding: .25rem 1.1rem; }
    .mc-fee-note { padding: .85rem 1.1rem; }
}