/* Doccure 2.1 licensed fonts, self-hosted (CSP font-src 'self') */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/vendor/doccure/fonts/poppins-light.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/vendor/doccure/fonts/poppins-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/vendor/doccure/fonts/poppins-medium.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/vendor/doccure/fonts/poppins-semibold.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/vendor/doccure/fonts/poppins-bold.woff2") format("woff2");
}

/* Cairo variable font (SIL OFL), self-hosted for Arabic text */
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/cairo/cairo-vf-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/cairo/cairo-vf-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/cairo/cairo-vf-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Doccure 2.1 palette (scss/utils/variables.scss) mapped onto the existing token system */
:root {
    --care-primary: #316dff;

    /* Foreground blue: link text, icons, eyebrows, step numbers. Dark enough to
       read on a light surface, and overridden in dark mode where a near-navy
       foreground would disappear. Never use it as a fill — see
       --care-primary-pressed. */
    --care-primary-dark: #1819c8;

    /* The fill behind a hovered or pressed primary button. It carries white text,
       so unlike --care-primary-dark it has to stay dark in both themes; keeping
       the two apart is what lets the foreground colour follow the theme. */
    --care-primary-pressed: #1819c8;

    /* The brand blue is 4.41:1 against white — just under the 4.5:1 that AA asks
       for at normal text sizes. This is the same blue taken down far enough to
       pass (4.91:1) for the places that fill a shape and print white on it, such
       as a selected tab or a small badge. --care-primary stays untouched, so
       borders, icons and link text keep the exact brand colour. */
    --care-primary-strong: #2f66f0;
    --care-secondary: #02bfff;
    --care-ink: #0f172a;

    /* Was #64748b, which cleared white by only 0.26 (4.76:1) and so failed on every
       tinted surface the design actually puts it on: striped table rows (4.18:1), the
       --care-surface step discs (4.39:1), --care-accent chips (4.25:1). Darkened just
       enough to carry on all of them (4.7-5.3:1) rather than flattening every tint to
       suit the text. Visually near-identical; the dark-mode value is unchanged. */
    --care-muted: #5d6c82;
    --care-surface: #f4f6f8;
    --care-accent: #eaf3ff;
    --care-border: #e2e8f0;

    /* The edge of an input, which is a different job from a separator. A hairline
       between two blocks is decoration and may stay quiet, but the outline of a
       field is the only thing showing where the control starts, so WCAG 1.4.11
       asks 3:1 of it. --care-border is 1.23:1 on a card and Bootstrap's own
       #dee2e6 is 1.30:1, so both fail. 3.35:1 on a white card and 3.03:1 on
       --care-surface — dark enough to trace the field, light enough that a form
       still reads as a form rather than a grid. */
    --care-control-border: #7f8da6;
    --care-success: #04bd6c;
    --care-focus: #316dff;
    --care-surface-soft: #f9fafb;

    /* The surface a card sits on, distinct from the page behind it. It has to be
       a token rather than a literal: a card painted #fff keeps its light colour in
       dark mode while --care-ink correctly turns near-white, and the text
       disappears. */
    --care-card: #fff;

    /* Tinted backing for a success chip, so the "verified" mark reads as a badge
       rather than as coloured text. */
    --care-success-transparent: #e6f9f0;

    /* Bootstrap's danger red as text. It clears white by a hair (4.53:1), so light
       mode keeps it exactly; the dark block lightens it, because on the dark panels it
       drops to 3.4:1 and "Delete" and "Remove" are the labels that carry it. */
    --care-danger-text: #dc3545;

    /* The brand green is a fill colour: as text on white it reaches only 2.47:1,
       which is what made "Verified organization" and "Open now" read as faint
       green smudges. This is the same green darkened until it carries as text
       (5.4:1 on white, 4.9:1 on the chip above). --care-success itself is left
       alone so filled shapes keep the brand colour. */
    --care-success-text: #067a45;

    --care-gradient: linear-gradient(90.08deg, #316dff 0.09%, #02bfff 70.28%);
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    color: var(--care-ink);
    background: #fff;
    font-family: "Poppins", "Segoe UI", Tahoma, Arial, sans-serif;
    text-align: start;
}

html[lang="ar"] body {
    font-family: "Cairo", Tahoma, Arial, "Segoe UI", sans-serif;
}

main {
    min-height: 60vh;
}

a {
    color: var(--care-primary-dark);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

:focus-visible {
    outline: .2rem solid var(--care-focus);
    outline-offset: .2rem;
}

.btn-primary {
    /* Carries a white label, so it takes the filled variant: the plain brand blue
       left every solid primary button at 4.41:1. */
    --bs-btn-bg: var(--care-primary-strong);
    --bs-btn-border-color: var(--care-primary-strong);
    --bs-btn-hover-bg: var(--care-primary-pressed);
    --bs-btn-hover-border-color: var(--care-primary-pressed);
}

.btn {
    min-height: 2.75rem;
    border-radius: 44px;
    font-weight: 600;
    transition: all .4s ease;
}

/* Doccure gradient call-to-action (components/_button.scss) */
.btn-primary-gradient {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    background-image: var(--care-gradient);
    border: 0;
}

.btn-primary-gradient::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background: var(--care-primary);
    opacity: 0;
    transition: opacity .4s ease;
}

.btn-primary-gradient:hover,
.btn-primary-gradient:focus {
    color: #fff;
}

.btn-primary-gradient:hover::before,
.btn-primary-gradient:focus::before {
    opacity: 1;
}

.btn-dark {
    --bs-btn-bg: #000103;
    --bs-btn-border-color: #000103;
    --bs-btn-hover-bg: #252a30;
    --bs-btn-hover-border-color: #252a30;
}

.btn-primary,
.btn-outline-primary {
    --bs-btn-active-bg: var(--care-primary-pressed);
    --bs-btn-active-border-color: var(--care-primary-pressed);
}

.form-control,
.form-select,
.form-check-input {
    /* A token, not #dfe5ec: Bootstrap's dark theme repaints the field itself, and a
       pinned light border left the input outlined in near-white on a dark panel.
       The control token rather than --care-border, because this edge has to be
       findable, not merely present. */
    border-color: var(--care-control-border, #7f8da6);
}

.form-control,
.form-select {
    min-height: 2.9rem;
    border-radius: .7rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(49, 109, 255, .65);
    box-shadow: 0 0 0 .22rem rgba(49, 109, 255, .12);
}

.btn-outline-primary {
    /* The label is text on the panel behind it, so it takes the themed foreground
       blue: --care-primary alone reached only 4.41:1 on white and 3.93:1 on a dark
       card, failing in both themes. The border keeps the exact brand colour — a
       border is non-text and needs 3:1, which it clears either way. */
    --bs-btn-color: var(--care-primary-dark);
    --bs-btn-border-color: var(--care-primary);
    --bs-btn-hover-bg: var(--care-primary-strong);
    --bs-btn-hover-border-color: var(--care-primary-strong);
}

.text-primary {
    color: var(--care-primary-dark) !important;
}

/* Bootstrap 5.3 binds .text-secondary to --bs-secondary-rgb, which is the brand
   grey rather than a text colour, and its dark theme never reassigns it — so the
   utility stays #6c757d and drops to 3.69:1 on a dark card. Pointing it at the
   project's muted token makes it follow the theme like everything else.
   !important is needed only because Bootstrap's own utility declares it. */
.text-secondary {
    color: var(--care-muted) !important;
}

/* .text-danger has the same flaw: it reads --bs-danger-rgb, the brand red, which
   Bootstrap's dark theme leaves alone. */
.text-danger {
    color: var(--care-danger-text) !important;
}

/* The outline variant's label is text on the panel behind it, so it takes the themed
   red. The border stays the brand red — non-text, and it clears 3:1 either way. The
   hover fill is untouched: white on the solid red is 4.5:1. */
.btn-outline-danger {
    --bs-btn-color: var(--care-danger-text);
}

/* Setting the variable is not enough on any page that loads the Doccure template:
   booking.css declares `.btn-outline-danger { color: var(--danger) !important }`,
   which wins over Bootstrap's `color: var(--bs-btn-color)` and pins the label to the
   light-theme red — 3.83:1 on a dark card. The attribute selector raises specificity
   above the template's, so this holds wherever the sheets load in whatever order.

   Only the label is redirected. --danger itself is left alone deliberately: it is also
   the fill behind white text on solid danger buttons, and lightening it there would
   drop that pairing from 4.5:1 to 2.9:1 — fixing one control by breaking another. */
[data-bs-theme="dark"] .btn-outline-danger {
    color: var(--care-danger-text) !important;
}

/* Bootstrap's secondary grey clears white but only reaches 4.0:1 on the dark page, so
   the outline variant's label takes the themed muted colour. The border is left alone:
   it is non-text and clears 3:1 in both themes. */
.btn-outline-secondary {
    --bs-btn-color: var(--care-muted);
}

.site-header {
    min-height: 4.75rem;
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    transition: box-shadow .3s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 .35rem 1.5rem rgba(15, 23, 42, .09);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--care-ink);
    font-weight: 800;
    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--care-primary), #50a7ff);
    border-radius: .75rem;
    font-size: 1.5rem;
    box-shadow: 0 .45rem 1rem rgba(49, 109, 255, .24);
    transform: rotate(-7deg);
}

.brand-mark > span {
    transform: rotate(7deg);
}

.brand-mark-img {
    width: 2.3rem;
    height: 2.3rem;
    filter: drop-shadow(0 .35rem .75rem rgba(49, 109, 255, .28));
}

.brand-name {
    font-size: 1.08rem;
}

.main-navigation {
    gap: .25rem;
}

.main-navigation .nav-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-inline: .8rem !important;
    color: #334155;
    font-weight: 500;
}

.main-navigation .nav-link:hover,
.main-navigation .nav-link:focus {
    color: var(--care-primary-dark);
}

.language-switcher {
    text-decoration: none;
}

.hero {
    overflow: hidden;
    background: linear-gradient(135deg, #f4faf9 0%, #e9f7f5 55%, #fff 100%);
}

.hero-doccure {
    position: relative;
    background:
        radial-gradient(circle at 8% 20%, rgba(0, 184, 148, .12), transparent 23rem),
        radial-gradient(circle at 85% 5%, rgba(49, 109, 255, .16), transparent 28rem),
        linear-gradient(135deg, #f8fcff 0%, #f3f8ff 52%, #ffffff 100%);
}

.py-lg-6 {
    padding-block: 5rem !important;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    color: var(--care-primary-dark);
    background: #fff;
    border: 1px solid rgba(49, 109, 255, .15);
    border-radius: 999px;
    box-shadow: 0 .5rem 1.5rem rgba(31, 41, 55, .06);
    font-size: .85rem;
    font-weight: 750;
}

.trust-pill span {
    display: inline-grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    color: #fff;
    background: var(--care-secondary);
    border-radius: 50%;
}

.hero-copy h1 {
    max-width: 13ch;
    color: #162033;
    font-size: clamp(2.6rem, 5vw, 4.75rem);
    letter-spacing: -.045em;
    line-height: 1.04;
}

.hero-copy .lead {
    max-width: 44rem;
    line-height: 1.75;
}

.eyebrow {
    color: var(--care-primary-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.search-panel {
    max-width: 46rem;
    padding: .6rem;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(49, 109, 255, .12);
    border-radius: 1.1rem;
    box-shadow: 0 1rem 2.5rem rgba(23, 50, 77, .09);
}

.search-input {
    position: relative;
}

.search-input > span {
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inset-inline-start: 1rem;
    color: var(--care-primary);
    font-size: 1.5rem;
    transform: translateY(-55%);
}

.search-input .form-control {
    padding-inline-start: 3rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hero-links a {
    color: var(--care-ink);
    text-decoration: none;
}

.hero-links a:hover {
    color: var(--care-primary);
}

.hero-visual {
    display: grid;
    min-height: 22rem;
    place-items: center;
    align-content: center;
    gap: 1.5rem;
    color: var(--care-primary-dark);
    background: radial-gradient(circle at center, #fff 0 24%, var(--care-accent) 25% 48%, transparent 49%);
    font-size: 1.1rem;
    font-weight: 700;
}

.doccure-hero-visual {
    position: relative;
    min-height: 31rem;
    overflow: visible;
    background: transparent;
    isolation: isolate;
}

.doccure-hero-visual::before {
    position: absolute;
    z-index: -2;
    width: min(25rem, 90%);
    aspect-ratio: 1;
    content: "";
    background: linear-gradient(145deg, #dcecff, #e8fff9);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 47% 53% 58% 42% / 48% 38% 62% 52%;
    box-shadow: inset 0 0 0 1rem rgba(255, 255, 255, .28), 0 2rem 4rem rgba(49, 109, 255, .12);
}

.doccure-hero-visual img {
    width: min(21rem, 72%);
    filter: drop-shadow(0 1.5rem 1.5rem rgba(32, 53, 84, .18));
}

.hero-art-orbit {
    position: absolute;
    z-index: -1;
    width: min(29rem, 100%);
    aspect-ratio: 1;
    border: 1px dashed rgba(49, 109, 255, .25);
    border-radius: 50%;
}

.floating-care-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .65rem;
    max-width: 12rem;
    padding: .8rem 1rem;
    color: var(--care-ink);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: .9rem;
    box-shadow: 0 1rem 2.2rem rgba(31, 41, 55, .12);
    font-size: .78rem;
    backdrop-filter: blur(8px);
}

.floating-care-card strong,
.floating-care-card span {
    display: block;
}

.floating-care-card-top {
    inset-block-start: 17%;
    inset-inline-start: 0;
}

.floating-care-card-top strong {
    color: var(--care-primary);
    font-size: 1.25rem;
}

.floating-care-card-bottom {
    inset-block-end: 18%;
    inset-inline-end: 0;
}

.status-dot {
    width: .65rem;
    height: .65rem;
    flex: 0 0 auto;
    background: var(--care-secondary);
    border: 3px solid #dff9f2;
    border-radius: 50%;
    box-sizing: content-box;
}

.care-steps {
    position: relative;
    z-index: 3;
    margin-top: -2rem;
}

.care-step {
    display: flex;
    min-height: 6.3rem;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    background: #fff;
    border: 1px solid var(--care-border);
    border-radius: 1rem;
    box-shadow: 0 .9rem 2rem rgba(31, 41, 55, .075);
}

.care-step img {
    width: 3rem;
    height: 3rem;
    padding: .7rem;
    background: #f0f6ff;
    border-radius: .8rem;
}

.care-step span {
    color: var(--care-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.pulse-circle {
    display: grid;
    width: 7rem;
    height: 7rem;
    place-items: center;
    color: #fff;
    background: var(--care-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 1.4rem rgba(8, 127, 140, .13);
    font-size: 5rem;
    font-weight: 200;
    line-height: 1;
}

.page-heading {
    background: var(--care-surface);
}

.doctor-card {
    overflow: hidden;
    border: 1px solid var(--care-border) !important;
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(31, 41, 55, .055);
    transition: transform .2s ease, box-shadow .2s ease;
}

.doctor-card:hover {
    transform: translateY(-3px);
    border-color: rgba(49, 109, 255, .22) !important;
    box-shadow: 0 1rem 2.4rem rgba(23, 50, 77, .11) !important;
}

.doctor-avatar {
    display: grid;
    width: 4.25rem;
    height: 4.25rem;
    place-items: center;
    flex: 0 0 auto;
    color: var(--care-primary-dark);
    background: linear-gradient(145deg, #e9f3ff, #eefcf9);
    border: 1px solid rgba(49, 109, 255, .1);
    border-radius: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.doctor-profile-avatar {
    width: 7rem;
    height: 7rem;
    border-radius: 1.5rem;
    font-size: 1.7rem;
}

.review-stars {
    color: #f5a623;
    letter-spacing: .12rem;
}

.verified-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #087a62;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.verified-label span {
    display: inline-grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    color: #fff;
    background: var(--care-secondary);
    border-radius: 50%;
    font-size: .65rem;
}

.specialty-list {
    min-height: 2.6rem;
    font-size: .85rem;
}

.doctor-card-facts {
    padding: .9rem 1rem;
    background: var(--care-surface);
    border-radius: .75rem;
    font-size: .86rem;
}

.doctor-facts {
    display: grid;
    gap: .65rem;
}

.doctor-facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.doctor-facts dt {
    color: var(--care-muted);
    font-weight: 500;
}

.doctor-facts dd {
    margin: 0;
    font-weight: 600;
    text-align: end;
}

.profile-biography {
    max-width: 65ch;
    line-height: 1.9;
}

.booking-card {
    position: sticky;
    top: 6rem;
}

.auth-card {
    max-width: 31rem;
}

/* Doccure 2.1 login layout, adapted for the existing Razor authentication flow. */
.login-content {
    padding-block: 4.5rem;
    background: #fff;
}

.account-content {
    max-width: 64rem;
    margin-inline: auto;
}

.login-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-banner {
    width: 100%;
    max-width: 31rem;
    height: auto;
}

.login-right {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--care-border);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(31, 41, 55, .06);
}

.login-header {
    margin-bottom: 1.25rem;
}

.login-header h1 {
    margin-bottom: 0;
    color: var(--care-ink);
    font-size: 1.35rem;
    font-weight: 600;
}

.login-header h1 span {
    color: var(--care-primary);
}

.login-right .form-label {
    margin-bottom: .55rem;
    color: var(--care-ink);
    font-weight: 500;
}

.login-right .form-control {
    min-height: 3rem;
    padding-inline: .9rem;
}

.login-right .form-check-label {
    color: var(--care-muted);
    font-size: .9rem;
}

.login-validation:not(:empty) {
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .2);
    border-radius: .65rem;
}

.login-validation ul {
    margin-bottom: 0;
    padding-inline-start: 1.25rem;
}

.account-signup {
    margin-top: 1.25rem;
    text-align: center;
}

.account-signup a {
    color: var(--care-primary);
    font-weight: 600;
    text-decoration: none;
}

.account-signup a:hover {
    color: var(--care-primary-dark);
    text-decoration: underline;
}

.account-choice-hero,
.registration-hero,
.verification-shell {
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 125, 104, .1), transparent 22rem),
        radial-gradient(circle at 90% 10%, rgba(8, 102, 198, .12), transparent 25rem),
        linear-gradient(135deg, #f8fcff, var(--care-surface-soft));
}

.account-choice-hero .lead {
    max-width: 44rem;
}

.account-choice-section {
    margin-top: -1.5rem;
}

.account-type-grid {
    display: grid;
    max-width: 46rem;
    margin-inline: auto;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr);
}

.account-type-card {
    display: grid;
    min-height: 7.25rem;
    padding: 1.25rem 1.4rem;
    align-items: center;
    gap: 1.1rem;
    color: var(--care-ink);
    background: #fff;
    border: 1px solid var(--care-border);
    border-radius: 1.1rem;
    box-shadow: 0 .7rem 2rem rgba(31, 41, 55, .07);
    grid-template-columns: auto minmax(0, 1fr) auto;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.account-type-card:hover,
.account-type-card:focus-visible {
    color: var(--care-ink);
    border-color: rgba(49, 109, 255, .45);
    box-shadow: 0 1.1rem 2.6rem rgba(49, 109, 255, .16);
    transform: translateY(-3px);
}

.account-type-card:active {
    transform: translateY(-1px) scale(.99);
}

.account-type-card:focus-visible {
    outline-offset: .25rem;
}

.account-type-card:hover .account-type-icon,
.account-type-card:focus-visible .account-type-icon {
    color: #fff;
    background-image: var(--care-gradient);
    transform: scale(1.06) rotate(-4deg);
}

.account-type-card:hover .account-type-arrow,
.account-type-card:focus-visible .account-type-arrow {
    color: #fff;
    background-color: transparent;
    background-image: var(--care-gradient);
    transform: translateX(4px);
}

html[dir="rtl"] .account-type-card:hover .account-type-arrow,
html[dir="rtl"] .account-type-card:focus-visible .account-type-arrow {
    transform: translateX(-4px);
}

.account-type-icon,
.assurance-icon,
.verification-icon,
.status-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--care-primary-dark);
    background: var(--care-accent);
    border-radius: 1rem;
}

.account-type-icon svg,
.assurance-icon svg,
.verification-icon svg,
.status-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.account-type-content {
    display: grid;
    gap: .3rem;
}

.account-type-content strong {
    font-size: 1.12rem;
}

.account-type-content > span {
    color: var(--care-muted);
    line-height: 1.55;
}

.account-type-icon i {
    font-size: 1.75rem;
}

.account-type-img {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.account-type-icon {
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.account-type-arrow {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: var(--care-ink);
    background-color: var(--care-surface);
    border-radius: 50%;
    font-size: 1.3rem;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.account-choice-login {
    color: var(--care-muted);
}

.registration-back-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .45rem;
    color: var(--care-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.registration-back-arrow {
    flex: 0 0 auto;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.registration-back-text {
    unicode-bidi: isolate;
}

html[dir="rtl"] .registration-back-arrow {
    transform: scaleX(-1);
}

.step-pill,
.status-badge {
    display: inline-flex;
    padding: .42rem .75rem;
    color: var(--care-primary-dark);
    /* Themed, because the label above is: a white chip printed the dark-mode
       foreground blue at 2.16:1. */
    background: var(--care-card, #fff);
    border: 1px solid rgba(8, 102, 198, .2);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

/* The doctor views compose .status-badge with the template's own .badge-green,
   which fills the chip with --teal and supplies no colour of its own. The blue
   foreground above then landed on teal at 1.76:1. White is not the answer either —
   the template's implied white-on-teal is only 3.8:1 at this size. A dark ink
   reaches 4.7:1 and keeps the teal fill the template intends.
   .badge-blue and .badge-grey need nothing: they carry no background of their own
   in dark mode, so the blue foreground sits on the panel at 9:1. */
.badge-green.status-badge {
    color: #0f172a;
}

.required-note {
    padding: .85rem 1rem;
    color: #374151;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--care-border);
    border-radius: .8rem;
}

.registration-form-card,
.registration-assurance-card,
.verification-card {
    padding: clamp(1.35rem, 3vw, 2.25rem);
    /* The worst instance of the hard-coded-panel bug: the organization registration
       form kept a white card while its labels followed the theme, leaving "Email"
       and "Password" at 1.23:1 with dark inputs sitting on a white panel. */
    background: var(--care-card, #fff);
    border: 1px solid var(--care-border);
    border-radius: 1.15rem;
    box-shadow: 0 .8rem 2.5rem rgba(31, 41, 55, .07);
}

.registration-form-card legend {
    float: none;
    width: auto;
}

.form-section-help {
    margin-top: -.25rem;
    color: var(--care-muted);
}

.field-validation-error {
    display: block;
    margin-top: .35rem;
    /* Themed: #b42318 is chosen against white and fell to 2.63:1 on a dark card, so the
       message telling somebody what to correct was the least readable text on the form. */
    color: var(--care-danger-text);
    font-size: .875rem;
}

.input-validation-error {
    border-color: #b42318;
}

.registration-assurance-card {
    position: sticky;
    top: 6.25rem;
}

.registration-assurance-card p,
.registration-assurance-card li {
    color: var(--care-muted);
    line-height: 1.65;
}

.registration-assurance-card ul {
    display: grid;
    margin: 1rem 0 0;
    padding-inline-start: 1.25rem;
    gap: .65rem;
}

.verification-card {
    max-width: 34rem;
}

.verification-icon,
.status-icon {
    width: 4.25rem;
    height: 4.25rem;
    color: var(--care-success);
    background: #ecfdf3;
}

.verification-code-input {
    min-height: 3.6rem;
    font-size: 1.65rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    letter-spacing: .5rem;
    text-align: center;
}

.verification-divider {
    display: flex;
    margin-block: 1.5rem;
    align-items: center;
    gap: .75rem;
    color: var(--care-muted);
    font-size: .875rem;
}

.verification-divider::before,
.verification-divider::after {
    height: 1px;
    flex: 1;
    background: var(--care-border);
    content: "";
}

.resend-code-form {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.verification-security-note {
    margin-top: 1.25rem;
    padding: .85rem 1rem;
    color: #4b5563;
    background: var(--care-surface);
    border-radius: .75rem;
    font-size: .85rem;
    line-height: 1.55;
}

.organization-registration-form {
    max-width: 62rem;
}

.status-icon {
    width: 5rem;
    height: 5rem;
}

html[dir="rtl"] .account-type-arrow i {
    transform: scaleX(-1);
}

.registration-form {
    max-width: 68rem;
}

.confirmation-panel {
    max-width: 44rem;
}

.review-details {
    display: grid;
    gap: .8rem;
}

.review-details div {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) 2fr;
    gap: 1rem;
}

.review-details dt {
    color: var(--care-muted);
}

.review-details dd {
    margin: 0;
}

/* Doccure 2.1 light footer (.footer.inner-footer.footer-info) */
.site-footer {
    color: var(--care-ink);
    background: linear-gradient(180deg, #f9fafb 0%, #eef5ff 100%);
}

.footer-brand {
    color: var(--care-ink);
    font-size: 1.15rem;
}

.footer-brand:hover {
    color: var(--care-ink);
}

.footer-description {
    max-width: 38rem;
    color: var(--care-muted);
    line-height: 1.8;
}

.footer-title {
    margin-bottom: 1.4rem;
    color: var(--care-ink);
    font-size: 1.1rem;
    font-weight: 700;
}

.footer-link {
    display: block;
    margin-top: .65rem;
    color: var(--care-ink);
    text-decoration: none;
    transition: all .4s ease;
}

.footer-link:hover {
    color: var(--care-primary);
    text-decoration: underline;
}

.footer-bottom {
    color: var(--care-ink);
    background: #e6f1fe;
    border-top: 1px solid #fff;
}

.dashboard-hero {
    padding-block: 2.5rem;
    background: linear-gradient(135deg, #eef6ff, #f4fbfa);
}

.dashboard-action-card {
    position: relative;
    overflow: hidden;
    min-height: 12rem;
    border: 1px solid var(--care-border) !important;
    border-radius: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.dashboard-action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(31, 41, 55, .1) !important;
}

.dashboard-action-icon {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    color: var(--care-primary);
    background: var(--care-accent);
    border-radius: .9rem;
    font-size: 1.6rem;
}

.appointment-card {
    border: 1px solid var(--care-border) !important;
    border-radius: 1rem;
}

.appointment-time {
    padding: .8rem 1rem;
    background: var(--care-surface);
    border-radius: .75rem;
}

.account-pill {
    display: inline-flex;
    max-width: 14rem;
    align-items: center;
    gap: .55rem;
    padding: .35rem .75rem .35rem .35rem;
    background: var(--care-surface);
    border: 1px solid var(--care-border);
    border-radius: 999px;
}

.account-avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #fff;
    background: var(--care-primary);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 800;
}

.account-name {
    overflow: hidden;
    font-size: .78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-shell {
    max-width: 76rem;
}

.dashboard-panel,
.appointment-management-card,
.empty-state {
    border: 1px solid var(--care-border) !important;
    border-radius: 1rem;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.panel-kicker {
    color: var(--care-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-table > :not(caption) > * > * {
    padding: 1rem 1.25rem;
    border-color: var(--care-border);
}

.dashboard-table thead th {
    color: var(--care-muted);
    background: var(--care-surface);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.time-chip,
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: .4rem .7rem;
    color: var(--care-primary-dark);
    background: var(--care-accent);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.status-confirmed,
.status-completed {
    color: #087a62;
    background: #e6f8f3;
}

.status-pending {
    color: #8a6116;
    background: #fff6dd;
}

.status-cancelledbypatient,
.status-cancelledbydoctor,
.status-rejected,
.status-noshow {
    color: #a02d35;
    background: #fff0f1;
}

.dashboard-tabs {
    display: inline-flex;
    gap: .35rem;
    padding: .3rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(49, 109, 255, .1);
    border-radius: 999px;
}

.dashboard-tabs .btn {
    border-radius: 999px;
}

.appointment-date-block {
    display: grid;
    min-width: 4rem;
    padding: .65rem;
    color: var(--care-primary-dark);
    background: var(--care-accent);
    border-radius: .9rem;
    text-align: center;
}

.appointment-date-block strong {
    font-size: 1.35rem;
}

.appointment-date-block span {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.action-reason-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .65rem;
}

.back-link {
    color: var(--care-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.appointment-detail-grid {
    display: grid;
    gap: 1px;
    overflow: hidden;
    background: var(--care-border);
    border: 1px solid var(--care-border);
    border-radius: .9rem;
}

.appointment-detail-grid div {
    display: grid;
    grid-template-columns: minmax(9rem, .8fr) 1.5fr;
    gap: 1rem;
    padding: 1rem 1.2rem;
    /* The cells are the panel here — the grid gap shows --care-border through as
       the dividing lines. Pinned white left the appointment reference at 1.3:1. */
    background: var(--care-card, #fff);
}

.appointment-detail-grid span {
    color: var(--care-muted);
}

.reschedule-flow,
.review-form {
    max-width: 52rem;
}

.flow-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.flow-steps li {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--care-muted);
    font-size: .82rem;
    font-weight: 700;
}

.flow-steps span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    background: var(--care-surface);
    border-radius: 50%;
}

.flow-steps .active {
    color: var(--care-primary-dark);
}

.flow-steps .active span {
    color: #fff;
    /* Filled variant: the step number is white on this disc. */
    background: var(--care-primary-strong);
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: .75rem;
}

.slot-option input {
    position: absolute;
    opacity: 0;
}

.slot-option span {
    display: block;
    padding: .85rem;
    color: var(--care-primary-dark);
    /* Every bookable time was a white tile printing the dark-mode foreground blue
       at 2.16:1, so the whole slot grid was unreadable in dark mode. */
    background: var(--care-card, #fff);
    border: 1px solid var(--care-border);
    border-radius: .75rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.slot-option input:focus-visible + span,
.slot-option input:checked + span {
    color: #fff;
    /* Filled variant, because the selected time is printed in white on it. */
    background: var(--care-primary-strong);
    border-color: var(--care-primary-strong);
    box-shadow: 0 0 0 .2rem rgba(49, 109, 255, .18);
}

.rating-select {
    max-width: 18rem;
    color: #ad7414;
}

.review-comment-cell {
    min-width: 18rem;
    max-width: 30rem;
    white-space: normal;
}

.offline-page {
    display: grid;
    min-height: 100vh;
    margin: 0;
    padding: 1.5rem;
    place-items: center;
    color: var(--care-ink);
    background: var(--care-surface);
}

.offline-panel {
    max-width: 32rem;
    padding: 2.5rem;
    /* offline.html ships no theme script, so this resolves to #fff today and the
       change is a no-op. Tokenised anyway because the panel's own text already
       reads --care-ink and --care-muted: if the offline page ever gains the theme,
       the literal would be the one thing left behind. */
    background: var(--care-card, #fff);
    border: 1px solid var(--care-border);
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(31, 41, 55, .08);
    text-align: center;
}

.offline-panel p {
    color: var(--care-muted);
}

.offline-mark {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: auto;
    place-items: center;
    color: #fff;
    background: var(--care-primary);
    border-radius: 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.filter-bar,
.booking-card,
.registration-form .card,
.auth-card,
.clinic-location {
    border: 1px solid var(--care-border) !important;
    border-radius: 1rem !important;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    padding: .75rem 1rem;
    /* A token, not #fff: this sits above the page on focus, and a literal white
       panel kept its light colour in dark mode while the link text followed the
       theme — the first thing a keyboard user reaches would have been unreadable. */
    background: var(--care-card, #fff);
    border: 1px solid var(--care-border, #e2e8f0);
    border-radius: .5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .doctor-card {
        transition: none;
    }

    .account-type-card {
        transition: none;
    }
}

@media (max-width: 991.98px) {
    .py-lg-6 {
        padding-block: 3rem !important;
    }

    .site-header .navbar-collapse {
        padding-top: 1rem;
    }

    .doccure-hero-visual {
        min-height: 24rem;
    }

    .login-content {
        padding-block: 3rem;
    }

    .login-left {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .hero-copy h1 {
        font-size: 2.65rem;
    }

    .doccure-hero-visual {
        min-height: 20rem;
    }

    .floating-care-card-top {
        inset-inline-start: .25rem;
    }

    .floating-care-card-bottom {
        inset-inline-end: .25rem;
    }

    .care-steps {
        margin-top: 1rem;
    }

    .account-pill {
        max-width: 100%;
    }

    .action-reason-row,
    .appointment-detail-grid div {
        grid-template-columns: 1fr;
    }

    .account-choice-section {
        margin-top: -.75rem;
    }

    .account-type-grid {
        grid-template-columns: 1fr;
    }

    .account-type-card {
        min-height: 7.5rem;
        padding: 1.1rem;
    }

    .resend-code-form {
        grid-template-columns: 1fr;
    }

    .verification-code-input {
        font-size: 1.4rem;
        letter-spacing: .35rem;
    }
}

/* ===== Shared Doccure-derived pieces: the section rhythm, the directory
   search box and the sideways carousel ===== */

.section {
    padding-block: 5rem;
}

/* Directory search box: the doctor directory and the organization directory. */
.search-box-one {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    max-width: 44rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--care-border);
    border-radius: 999px;
    box-shadow: 0 1.25rem 2.75rem rgba(15, 23, 42, .08);
}

.search-box-one .search-input {
    flex: 1 1 12rem;
}

.search-box-one .search-grow {
    flex: 2 1 16rem;
}

.search-box-one .search-input > span {
    color: var(--care-ink);
    font-size: 1.125rem;
}

.search-box-one .form-select,
.search-box-one .form-control {
    height: 100%;
    padding-inline-start: 2.75rem;
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

.search-box-one .search-input + .search-input {
    border-inline-start: 1px solid var(--care-border);
}

.form-search-btn {
    flex: 0 0 auto;
    display: flex;
}

.search-box-one .form-search-btn .btn {
    padding: .75rem 1.75rem;
    border-radius: 999px;
}

@media (max-width: 767.98px) {
    .search-box-one {
        border-radius: 1rem;
    }

    .search-box-one .search-input,
    .search-box-one .search-grow {
        flex: 1 1 100%;
    }

    .search-box-one .search-input + .search-input {
        padding-block-start: .75rem;
        border-inline-start: 0;
        border-block-start: 1px solid var(--care-border);
    }

    .search-box-one .form-search-btn {
        flex: 1 1 100%;
    }

    .search-box-one .form-search-btn .btn {
        width: 100%;
    }
}

/* Direction-aware carousel (specialties, featured doctors) */
.care-carousel {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.carousel-track {
    display: flex;
    flex: 1 1 auto;
    gap: 1rem;
    overflow-x: auto;
    padding-block: .5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-cell {
    flex: 0 0 calc((100% - 3rem) / 4);
    min-width: 11rem;
    scroll-snap-align: start;
}

.carousel-cell-wide {
    flex-basis: calc((100% - 2rem) / 3);
    min-width: 17.5rem;
}

.carousel-nav {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--care-ink);
    background: #fff;
    border: 1px solid var(--care-border);
    border-radius: 50%;
    box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08);
    font-size: 1.35rem;
    transition: color .2s ease, background .2s ease;
}

.carousel-nav:hover,
.carousel-nav:focus-visible {
    color: #fff;
    background: var(--care-primary);
    border-color: var(--care-primary);
}

[dir="rtl"] .rtl-flip {
    display: inline-block;
    transform: scaleX(-1);
}

@media (max-width: 575.98px) {
    .carousel-nav {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .section {
        padding-block: 3.25rem;
    }
}

/* ===== Floating tools: theme toggle + back-to-top ===== */

.theme-switch {
    position: fixed;
    inset-block-start: 42%;
    inset-inline-end: 1rem;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--care-border);
    border-radius: 999px;
    box-shadow: 0 .6rem 1.4rem rgba(15, 23, 42, .14);
}

.theme-switch-btn {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: var(--care-ink);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}

.theme-switch-btn:hover {
    transform: scale(1.1);
}

.theme-switch-btn.active {
    color: #fff;
    background: var(--care-primary);
}

/* Below the desktop breakpoint the first row is: brand … notification bell, burger.
   The language switcher moves into the burger menu and the avatar is hidden, so the
   bell is the only action left and sits inline next to the menu button. */
@media (max-width: 991.98px) {
    .site-header .header-actions {
        order: 1;
        width: auto;
        margin-top: 0;
        margin-inline-start: auto;
        justify-content: flex-end;
    }

    .site-header .navbar-toggler {
        order: 2;
        margin-inline-start: .5rem;
    }

    /* Signed-out visitors have no bell, so the burger takes the free space itself. */
    .site-header .header-actions.d-none + .navbar-toggler {
        margin-inline-start: auto;
    }

    .site-header .navbar-collapse {
        order: 3;
    }

    .main-navigation .mobile-language-item {
        padding-block: .35rem;
        padding-inline: .8rem;
    }
}

/* Small screens: keep header actions usable and stop the floating pill
   from covering content — it docks to the bottom corner horizontally. */
@media (max-width: 575.98px) {
    /* The floating pill is hidden here, not repositioned.

       Docking it to a corner was the previous attempt and it did not work: a fixed element
       on a 375px screen has no margin to sit in, so it covers whatever scrolls under it.
       Measured on top of a table row-expander, a filter's Search button and a sort control,
       and reported independently four times.

       The control itself is not lost — _ThemeSwitcherInline puts it in the menu, next to the
       language switcher, which is where a rarely-changed preference belongs on a phone. */
    .theme-switch {
        display: none;
    }

    .header-actions {
        gap: .4rem !important;
    }

    .header-actions .btn {
        min-height: 2.35rem;
        padding: .3rem .7rem;
        font-size: .8rem;
    }

    /* Keep the compact mobile look but reach a comfortable touch target. */
    .header-actions .care-flag-btn,
    .mobile-language-item .care-flag-btn,
    .navbar-toggler {
        min-height: 2.75rem;
        padding-inline: .5rem;
    }

    .header-actions .care-flag-btn > span:not(.feather-chevron-down) {
        display: none;
    }

    .brand-name {
        font-size: .95rem;
    }
}

/* Hamburger like the Doccure header: borderless round button with rounded blue bars. */
.navbar-toggler {
    padding: .55rem;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.navbar-toggler:hover {
    background: var(--care-accent, #eaf3ff);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler .navbar-toggler-icon {
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%232f6bff' stroke-width='2.6' stroke-linecap='round' d='M4 6.5h16M4 12h16M4 17.5h10'/%3E%3C/svg%3E");
}

[dir="rtl"] .navbar-toggler .navbar-toggler-icon {
    transform: scaleX(-1);
}

.back-to-top {
    position: fixed;
    inset-block-end: 1.4rem;
    inset-inline-end: 1rem;
    z-index: 1040;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    padding: 0;
    color: var(--care-primary);
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 .6rem 1.4rem rgba(15, 23, 42, .16);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(.75rem);
    transition: opacity .3s ease, transform .3s ease;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.back-to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.back-to-top-ring circle {
    fill: none;
    stroke-width: 3;
}

.back-to-top-ring .ring-track {
    stroke: var(--care-border);
}

.back-to-top-ring .ring-progress {
    stroke: var(--care-primary);
    stroke-linecap: round;
}

.back-to-top .feather-arrow-up {
    position: relative;
}

/* ===== Scroll-reveal animation ===== */

.reveal-item {
    opacity: 0;
    transform: translateY(1.5rem);
}

.reveal-item.revealed {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s ease;
}

.reveal-item.revealed:nth-child(2) { transition-delay: .1s; }
.reveal-item.revealed:nth-child(3) { transition-delay: .2s; }
.reveal-item.revealed:nth-child(4) { transition-delay: .3s; }
.reveal-item.revealed:nth-child(5) { transition-delay: .4s; }

@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1rem); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .theme-switch-btn,
    .account-type-card,
    .account-type-icon,
    .account-type-arrow,
    .back-to-top {
        transition: none;
    }
}

/* ===== Dark mode ===== */

[data-bs-theme="dark"] {
    --care-ink: #e2e8f0;
    --care-muted: #94a3b8;
    --care-surface: #1e293b;
    --care-accent: #16233f;
    --care-border: #2b3a52;

    /* Same job, inverted: #2b3a52 is 1.51:1 on a dark card and Bootstrap's dark
       #495057 is 2.12:1. This clears 4.25:1 on --care-card and 3.57:1 on
       --care-surface, the lightest surface a field sits on here. */
    --care-control-border: #6f7f96;
    --care-surface-soft: #0f172a;

    /* Raised above the #0b1220 page body, matching the established dark card
       colour used by .login-right. */
    --care-card: #101a30;
    --care-success-transparent: #10301f;

    /* Inverted for the same reason: a green dark enough for white would vanish
       here. 8.1:1 on the chip, 8.3:1 on the lightest dark surface. */
    --care-success-text: #3ddc97;

    /* Same red, lightened until it carries on the dark panels: 5.3-5.9:1. */
    --care-danger-text: #e8737f;

    /* Same hue, inverted lightness. #1819c8 is a foreground colour chosen against
       white; on these surfaces it fell to 1.66:1 and a phone number rendered as a
       link was effectively invisible. This clears 6.8:1 on the lightest dark
       surface (--care-surface) and 8.7:1 on the page itself. Button fills are
       unaffected because they read --care-primary-pressed instead. */
    --care-primary-dark: #8ab0ff;
}

[data-bs-theme="dark"] body {
    color: var(--care-ink);
    background: #0b1220;
}

[data-bs-theme="dark"] .login-content {
    background: #0b1220;
}

[data-bs-theme="dark"] .login-right {
    background: #101a30;
    border-color: var(--care-border);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

[data-bs-theme="dark"] .site-header {
    background: #0f172a;
    border-bottom-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .main-navigation .nav-link {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .brand,
[data-bs-theme="dark"] .footer-brand {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .search-box-one,
[data-bs-theme="dark"] .care-step,
[data-bs-theme="dark"] .theme-switch,
[data-bs-theme="dark"] .back-to-top {
    background: #101a30;
    border-color: var(--care-border);
}

[data-bs-theme="dark"] .theme-switch-btn {
    color: var(--care-ink);
}

[data-bs-theme="dark"] .theme-switch-btn.active {
    color: #fff;
}

[data-bs-theme="dark"] .account-type-card {
    background: #101a30;
    border-color: var(--care-border);
}

[data-bs-theme="dark"] .account-type-arrow {
    color: var(--care-ink);
    background-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .account-type-icon {
    background: rgba(49, 109, 255, .18);
}

[data-bs-theme="dark"] .search-box-one .form-select,
[data-bs-theme="dark"] .search-box-one .form-control {
    color: var(--care-ink);
    background-color: transparent;
}

[data-bs-theme="dark"] .search-box-one .search-input > span {
    color: var(--care-ink);
}

[data-bs-theme="dark"] .carousel-nav {
    background: #101a30;
    border-color: var(--care-border);
}

[data-bs-theme="dark"] .site-footer {
    color: var(--care-ink);
    background: linear-gradient(180deg, #0d1526 0%, #0b1220 100%);
}

[data-bs-theme="dark"] .footer-title,
[data-bs-theme="dark"] .footer-link {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .footer-link:hover {
    color: #7fb7ff;
}

[data-bs-theme="dark"] .footer-bottom {
    color: #94a3b8;
    background: #0d1730;
    border-top-color: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .footer-description {
    color: #94a3b8;
}

[data-bs-theme="dark"] .page-heading,
[data-bs-theme="dark"] .dashboard-hero {
    background: #0d1730;
}

[data-bs-theme="dark"] .account-choice-hero,
[data-bs-theme="dark"] .registration-hero,
[data-bs-theme="dark"] .verification-shell {
    background:
        radial-gradient(circle at 10% 0%, rgba(2, 191, 255, .08), transparent 22rem),
        radial-gradient(circle at 90% 10%, rgba(49, 109, 255, .16), transparent 25rem),
        linear-gradient(135deg, #0d1730, #0b1220);
}

[data-bs-theme="dark"] .account-choice-hero .lead,
[data-bs-theme="dark"] .registration-hero .lead,
[data-bs-theme="dark"] .account-choice-login {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .hero,
[data-bs-theme="dark"] .hero-doccure {
    background: linear-gradient(135deg, #0d1730 0%, #0b1220 100%);
}

/* ===== Header: notification bell, user menu, flag language dropdown ===== */

.header-icon-btn {
    position: relative;
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    color: var(--care-ink);
    background: var(--care-surface);
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    cursor: pointer;
}

.header-icon-btn:hover {
    color: var(--care-primary);
    background: var(--care-accent);
}

.noti-badge {
    position: absolute;
    inset-block-start: -.2rem;
    inset-inline-end: -.2rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: .25rem;
    display: grid;
    place-items: center;
    color: #fff;
    background: #e5252a;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
}

.notifications-dropdown {
    width: min(21rem, 90vw);
    padding: 0;
    border: 1px solid var(--care-border);
    border-radius: .9rem;
    overflow: hidden;
}

.noti-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--care-surface);
}

.noti-dropdown-body {
    max-height: 19rem;
    overflow-y: auto;
}

.noti-dropdown-item {
    display: flex;
    gap: .65rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--care-surface);
}

.noti-dropdown-item.is-unread {
    background: var(--care-accent);
}

.noti-item-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--care-primary);
    background: var(--care-accent);
    border-radius: 50%;
    font-size: 1rem;
}

/* Per-type notification tones (Doccure-style colored icon chips). */
.noti-item-icon.noti-tone-primary { color: #316dff; background: #e7eeff; }
.noti-item-icon.noti-tone-success { color: #04bd6c; background: #e6f8f0; }
.noti-item-icon.noti-tone-danger { color: #dc2626; background: #fdecec; }
.noti-item-icon.noti-tone-warning { color: #b45309; background: #fff5e0; }
.noti-item-icon.noti-tone-purple { color: #6938ef; background: #f2edfe; }
.noti-item-icon.noti-tone-teal { color: #0e9384; background: #e9f5f4; }
.noti-item-icon.noti-tone-neutral { color: #475569; background: #eef2f7; }

.noti-message {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.noti-dropdown-foot {
    padding: .6rem 1rem;
    border-top: 1px solid var(--care-surface);
    text-align: center;
}

.noti-dropdown-foot a {
    font-weight: 600;
    text-decoration: none;
}

.user-menu-btn {
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.care-user-avatar {
    display: inline-grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background-image: var(--care-gradient);
    border-radius: 50%;
    font-size: .95rem;
    font-weight: 700;
}

.user-menu-dropdown {
    width: min(17rem, 90vw);
    border: 1px solid var(--care-border);
    border-radius: .9rem;
}

.user-menu-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 1rem .75rem;
    border-bottom: 1px solid var(--care-surface);
    margin-bottom: .4rem;
}

.care-flag-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    color: var(--care-ink);
    background: transparent;
    border: 1px solid var(--care-border);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
}

.care-flag-img {
    border-radius: .15rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

.language-dropdown {
    min-width: 10rem;
    border: 1px solid var(--care-border);
    border-radius: .9rem;
}

.language-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

[data-bs-theme="dark"] .header-icon-btn {
    color: #cbd5e1;
    background: #16233f;
}

[data-bs-theme="dark"] .care-flag-btn {
    color: #cbd5e1;
    border-color: #2b3a52;
}

[data-bs-theme="dark"] .noti-dropdown-item.is-unread {
    background: #16233f;
}

/* Doctor verification notice
   ---------------------------
   Shown at the top of the doctor sidebar on every page of the workspace while an
   application is being reviewed or after it was rejected.

   Both states carry an icon as well as colour: WCAG 1.4.1 asks that colour never be
   the only thing distinguishing one meaning from another, and "waiting" versus
   "refused" is exactly that distinction. Text colours are the tokens that already
   carry against both themes rather than raw amber and red, which fail on one or the
   other. */
.care-verification-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--care-border);
    border-inline-start: 4px solid var(--care-muted);
    border-radius: .75rem;
    background: var(--care-surface);
    color: var(--care-ink);
}

.care-verification-notice > i {
    flex: 0 0 auto;
    margin-top: .15rem;
    font-size: 1.05rem;
}

.care-verification-notice.is-pending {
    border-inline-start-color: #b8860b;
}

.care-verification-notice.is-pending > i {
    color: #b8860b;
}

[data-bs-theme="dark"] .care-verification-notice.is-pending {
    border-inline-start-color: #e0a83a;
}

[data-bs-theme="dark"] .care-verification-notice.is-pending > i {
    color: #e0a83a;
}

.care-verification-notice.is-rejected {
    border-inline-start-color: var(--care-danger-text);
}

.care-verification-notice.is-rejected > i {
    color: var(--care-danger-text);
}

.care-verification-notice-title {
    margin: 0 0 .25rem;
    font-weight: 600;
    font-size: .95rem;
}

.care-verification-notice-body,
.care-verification-notice-reason {
    margin: 0;
    font-size: .85rem;
    color: var(--care-muted);
    line-height: 1.5;
}

/* The reviewer's own words, set apart from our explanation of them. */
.care-verification-notice-reason {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--care-border);
    color: var(--care-ink);
}

/* Long unbroken text must wrap, not push the page sideways
   -------------------------------------------------------
   A biography, name or address with no spaces in it — which the app's own
   StringLength limits permit, and which real data eventually contains (a pasted
   URL, an identifier, someone holding a key down) — gives the browser nothing to
   break on. The box stays its normal width while the text paints straight past it,
   so the element measures fine and the *document* grows: a 200-character run in one
   doctor's biography made this page 16,453px wide inside a 375px viewport, forty-four
   times over, and no single element was ever wider than the screen.

   `anywhere` rather than `break-word` because only `anywhere` also reduces the
   element's min-content size, which is what stops a flex or grid track being sized
   to the unbreakable word in the first place.

   Applied to text-bearing elements generally, on purpose. It costs nothing for
   ordinary prose — the rule only takes effect when a word genuinely cannot fit — and
   the alternative is naming every container that might one day hold user text and
   discovering the ones that were missed the way this one was found. `min-width: 0`
   is NOT included here: it changes flex and grid sizing, so it is applied only to the
   specific card containers below. */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th, blockquote, figcaption, address {
    overflow-wrap: anywhere;
}

/* The card and profile containers that lay text out in a flex or grid track. Without
   min-width: 0 the track is sized to the longest unbreakable run even when the text
   inside it is allowed to wrap. */
.care-doctor-name,
.care-doctor-section,
.doctor-info-name,
.doctor-details-card,
.care-org-card-name,
.care-org-card-body {
    min-width: 0;
}

/* Light/dark inside the mobile menu
   --------------------------------
   Shown only where the floating pill is hidden. Both sets carry [data-theme-choice], and
   site.js binds all of them, so they stay in sync with no script change. */
.theme-switch-inline {
    display: flex;
    gap: .5rem;
    width: 100%;
    padding: .25rem 0;
}

.theme-switch-inline-btn {
    display: inline-flex;
    flex: 1 1 0;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .4rem .75rem;
    color: var(--care-ink);
    background: transparent;
    border: 1px solid var(--care-control-border);
    border-radius: 999px;
    font-size: .9rem;
    cursor: pointer;
}

.theme-switch-inline-btn.active {
    color: #fff;
    background: var(--care-primary);
    border-color: var(--care-primary);
}

/* Messages the review team has sent an organization. A list rather than a stack of alerts:
   several requests over a few days is a conversation, and five alert boxes in a column reads
   as five separate emergencies. */
.care-review-messages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.care-review-messages li + li {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--care-border);
}

.care-review-messages p {
    overflow-wrap: anywhere;
}

/* The pending state form-pending.js applies to a submitted button: a spinner
   beside the label, and the button stops inviting another press. The state is
   not colour-only — the spinner is a shape, and aria-busy says it aloud. */
.is-submitting {
    position: relative;
    opacity: .8;
    pointer-events: none;
}

.is-submitting::after {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-start: .5em;
    vertical-align: -.15em;
    border: .16em solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: care-submit-spin .7s linear infinite;
    content: "";
}

@keyframes care-submit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .is-submitting::after {
        animation: none;
        border-inline-end-color: currentColor;
        opacity: .45;
    }
}

/* The "not verified" state of the profile badge, shared by the doctor, centre
   and pharmacy pages (all carry data-profile-page). Red text on red ground with
   changed wording — never colour alone — because the page-level badge styles
   are green and scoped per page, and an unverified provider must not wear a
   verified colour anywhere. */
[data-profile-page] .verified-badge.not-verified {
    color: #a02d35;
    background: #fdeef0;
}

[data-profile-page] .verified-badge.not-verified::before {
    background: #cf3f4a;
}

[data-bs-theme="dark"] [data-profile-page] .verified-badge.not-verified {
    color: #ffb3ba;
    background: rgba(160, 45, 53, .2);
}

[data-profile-page] .not-verified-note {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #f1c7cb;
    border-radius: 12px;
    color: #a02d35;
    background: #fdeef0;
    font-size: .85rem;
    font-weight: 650;
}

[data-bs-theme="dark"] [data-profile-page] .not-verified-note {
    color: #ffb3ba;
    background: rgba(160, 45, 53, .18);
    border-color: rgba(160, 45, 53, .45);
}

/* A live Leaflet map inside the profile pages' map panel: the decorative grid
   overlay and pin give way to real tiles, and rounded corners keep clipping. */
.map-card.care-live-map::before {
    content: none;
}

.map-card.care-live-map {
    z-index: 0;
    padding: 0;
}

/* The coordinate picker: a bounded map above the latitude/longitude pair it
   fills. Bounded, because an unbounded Leaflet div has no height at all. */
.care-map-picker {
    height: 260px;
    overflow: hidden;
    border: 1px solid var(--care-border, #dbe4ee);
    border-radius: .8rem;
    z-index: 0;
}