/* ==========================================================================
   Directory pages — ported from the supplied find-doctors template.

   Shared by Find doctors and the organization directory (medical centres and
   pharmacies): the three pages are the same screen with different rows, so they
   are the same stylesheet rather than three copies of it.

   Everything is scoped to .care-directory. The template names its pieces
   .doctor-card, .pagination, .search-form, .filter-panel and .page-button, and
   site.css, Bootstrap and the Doccure vendor sheets all already own some of
   those; the wrapper is what keeps the two sets apart in both directions.
   The template's palette lived on bare :root names, so it lives on the wrapper
   here, and html[data-theme] became [data-bs-theme].

   The header, footer and page background the template also shipped are not
   here — those are the shared chrome, in chrome.css.
   ========================================================================== */

.care-directory {
    --green-950: #033a2d;
    --green-900: #075b45;
    --green-800: #08755a;
    --green-700: #0a8a68;
    --green-100: #dff4eb;
    --green-50: #f1faf6;
    --blue-900: #143e63;
    --gold: #c59b3b;

    --page: #f4f9f7;
    --page-soft: #edf6f2;
    --surface: rgba(255, 255, 255, .94);
    --surface-solid: #fff;
    --surface-muted: #f7fbf9;
    --heading: #0b3d31;
    --ink: #173d32;
    --muted: #687d76;
    --border: rgba(7, 91, 69, .14);
    --border-strong: rgba(7, 91, 69, .28);
    --shadow-lg: 0 22px 54px rgba(4, 65, 50, .13);
    --shadow-md: 0 14px 34px rgba(4, 65, 50, .10);
    --shadow-sm: 0 8px 22px rgba(4, 65, 50, .08);

    --pattern: url("/images/patterns/sihatuna-pure-damascene-pattern.png");
    /* The template's own crop — landmarks and water only. The full poster the
       home hero uses carries the calligraphy and the wordmark, and behind a
       page heading at 15% opacity that reads as a second title showing
       through the first. */
    --landmarks: url("/images/home/sihatuna-home-landmarks.webp");

    position: relative;
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 8%, rgba(19, 162, 124, .08), transparent 25%),
        radial-gradient(circle at 9% 9%, rgba(50, 130, 180, .08), transparent 24%),
        var(--page);
}

[data-bs-theme="dark"] .care-directory {
    --page: #071a15;
    --page-soft: #09231b;
    --surface: rgba(12, 43, 34, .94);
    --surface-solid: #0e2e25;
    --surface-muted: #10372c;
    --heading: #f2fbf7;
    --ink: #e5f4ed;
    --muted: #a8bbb4;
    --border: rgba(150, 216, 188, .14);
    --border-strong: rgba(150, 216, 188, .29);
    --green-100: #173f34;
    --green-50: #10352b;
    --shadow-lg: 0 24px 58px rgba(0, 0, 0, .36);
    --shadow-md: 0 16px 36px rgba(0, 0, 0, .28);
    --shadow-sm: 0 9px 24px rgba(0, 0, 0, .21);
}

.care-directory *,
.care-directory *::before,
.care-directory *::after {
    box-sizing: border-box;
}

.care-directory svg {
    display: block;
}

/* The template's own container: narrower than Bootstrap's and without its
   gutter, which is why it is not the Bootstrap one. */
.care-directory .directory-container {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}

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

.care-directory .page-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 34px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface-solid) 84%, transparent),
        color-mix(in srgb, var(--page-soft) 84%, transparent));
}

.care-directory .page-hero::before {
    content: "";
    position: absolute;
    inset-block: -40px;
    inset-inline-end: -40px;
    width: min(46vw, 620px);
    opacity: .15;
    background-image: var(--landmarks);
    background-size: cover;
    background-position: center 55%;
    filter: saturate(.78);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    pointer-events: none;
}

[dir="ltr"] .care-directory .page-hero::before {
    inset-inline-end: auto;
    inset-inline-start: -40px;
    transform: scaleX(-1);
}

[data-bs-theme="dark"] .care-directory .page-hero::before {
    opacity: .10;
    filter: saturate(.65) brightness(.72);
}

.care-directory .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.care-directory .breadcrumb-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

.care-directory .breadcrumb-line a {
    color: inherit;
    text-decoration: none;
}

.care-directory .breadcrumb-line a:hover {
    color: var(--green-800);
}

.care-directory .breadcrumb-line svg {
    width: 15px;
    height: 15px;
    stroke: var(--green-800);
}

.care-directory .hero-title {
    margin: 12px 0 0;
    color: var(--heading);
    font-size: clamp(2.15rem, 4vw, 3.5rem);
    line-height: 1.07;
    letter-spacing: -.035em;
}

.care-directory .hero-description {
    max-width: 680px;
    margin: 13px auto 0;
    color: var(--muted);
    line-height: 1.75;
}

/* ----- Hero search ----- */

.care-directory .search-shell {
    width: min(940px, 100%);
    margin: 27px auto 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.care-directory .search-grid {
    display: grid;
    grid-template-columns: 1.1fr .85fr .85fr auto;
    gap: 10px;
    align-items: center;
}

.care-directory .search-control {
    position: relative;
    min-width: 0;
}

.care-directory .search-control > svg {
    position: absolute;
    top: 50%;
    inset-inline-start: 15px;
    width: 19px;
    height: 19px;
    color: var(--green-800);
    stroke: currentColor;
    transform: translateY(-50%);
    pointer-events: none;
}

.care-directory .search-control input,
.care-directory .search-control select {
    width: 100%;
    height: 52px;
    padding-inline: 45px 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    outline: none;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface-solid) 90%, transparent);
    font: inherit;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.care-directory .search-control select {
    appearance: none;
    cursor: pointer;
    padding-inline-end: 34px;
}

/* The template strips the native select arrow and puts nothing back, which
   leaves the two dropdowns looking like text boxes. Drawn rather than fetched
   so it follows the field's colour; physical sides so a down chevron stays a
   down chevron in Arabic. */
.care-directory .search-control.is-select::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    inset-inline-end: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.care-directory .search-control input:focus,
.care-directory .search-control select:focus {
    border-color: rgba(8, 116, 90, .56);
    box-shadow: 0 0 0 4px rgba(8, 116, 90, .10);
}

.care-directory .search-submit {
    min-width: 116px;
    height: 52px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--green-900), var(--green-700));
    box-shadow: 0 12px 25px rgba(7, 91, 69, .23);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.care-directory .search-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 31px rgba(7, 91, 69, .28);
}

/* ----- Results layout ----- */

.care-directory .results-section {
    padding: 36px 0 84px;
}

.care-directory .results-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* A sticky element can only travel inside its own parent, and the layout's
   `align-items: start` shrink-wraps this column to the panel's own height —
   leaving exactly zero room to travel, so the panel rode up with the page and
   disappeared under the header. Stretching the column to the full grid row is
   what gives `position: sticky` something to stick within. */
.care-directory .filter-slot {
    min-width: 0;
    align-self: stretch;
}

/* Sticky only holds an element shorter than the viewport: a taller one pins
   its top, then scrolls away with the page once its bottom is reached — and
   this panel runs to nearly two thousand pixels. Capping it to the viewport
   and letting its own contents scroll is what keeps it on screen however far
   the results are scrolled. */
.care-directory .filter-panel {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: 25px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    scrollbar-width: thin;
}

/* The header of a scrolling panel stays put, so "Clear all" is always one
   click away rather than something to scroll back up for. */
.care-directory .filter-panel > .filter-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-solid);
}

.care-directory .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 19px 15px;
    border-bottom: 1px solid var(--border);
}

.care-directory .filter-header h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1rem;
}

.care-directory .clear-button {
    padding: 0;
    border: 0;
    color: var(--green-800);
    background: transparent;
    font-size: .80rem;
    font-weight: 850;
    text-decoration: none;
}

.care-directory .filter-group {
    padding: 17px 19px;
    border-bottom: 1px solid var(--border);
}

.care-directory .filter-group:last-child {
    border-bottom: 0;
}

.care-directory .filter-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    border: 0;
    color: var(--heading);
    background: transparent;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.care-directory .filter-title svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    transition: transform .16s ease;
}

.care-directory .filter-group.is-collapsed .filter-title svg {
    transform: rotate(-90deg);
}

[dir="ltr"] .care-directory .filter-group.is-collapsed .filter-title svg {
    transform: rotate(90deg);
}

.care-directory .filter-content {
    display: grid;
    gap: 10px;
    margin-top: 13px;
}

.care-directory .filter-group.is-collapsed .filter-content {
    display: none;
}

.care-directory .check-row,
.care-directory .radio-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    cursor: pointer;
}

.care-directory .check-row input,
.care-directory .radio-row input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--green-800);
}

.care-directory .count-badge {
    min-width: 23px;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--green-800);
    background: var(--green-50);
    font-size: .67rem;
    font-weight: 850;
    text-align: center;
}

.care-directory .price-values {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--heading);
    font-size: .78rem;
    font-weight: 850;
}

.care-directory .range-wrap {
    display: grid;
    gap: 7px;
}

.care-directory .range-wrap input[type="range"] {
    width: 100%;
    accent-color: var(--green-800);
}

.care-directory .price-caption {
    color: var(--muted);
    font-size: .76rem;
}

.care-directory .apply-filter {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--green-900), var(--green-700));
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

/* ----- Results toolbar ----- */

.care-directory .results-main {
    min-width: 0;
}

.care-directory .results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.care-directory .results-summary h2 {
    margin: 0;
    color: var(--heading);
    font-size: 1.14rem;
}

.care-directory .results-summary p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.care-directory .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.care-directory .sort-select {
    height: 43px;
    padding-inline: 13px 34px;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    outline: none;
    cursor: pointer;
}

.care-directory .view-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.care-directory .view-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.care-directory .view-button.is-active {
    color: #fff;
    background: var(--green-800);
}

.care-directory .view-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.care-directory .mobile-filter-button {
    display: none;
}

.care-directory .active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.care-directory .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--green-800);
    background: var(--surface);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}

.care-directory .filter-chip svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
}

/* ----- Doctor cards ----- */

.care-directory .doctor-list {
    display: grid;
    gap: 16px;
}

.care-directory .doctor-result {
    position: relative;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    transition:
        transform .17s ease,
        border-color .17s ease,
        box-shadow .17s ease;
}

.care-directory .doctor-result:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}

.care-directory .doctor-visual {
    position: relative;
    min-height: 245px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(225, 243, 236, .88), rgba(222, 237, 246, .88));
}

[data-bs-theme="dark"] .care-directory .doctor-visual {
    background: linear-gradient(145deg, rgba(16, 62, 49, .92), rgba(15, 52, 65, .88));
}

.care-directory .doctor-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: var(--pattern);
    background-size: 210px auto;
    pointer-events: none;
}

.care-directory .doctor-avatar {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 6px solid rgba(255, 255, 255, .76);
    border-radius: 34px;
    color: #fff;
    background: linear-gradient(145deg, var(--green-800), #3d94bb);
    box-shadow: 0 18px 40px rgba(6, 88, 67, .23);
    font-size: 1.9rem;
    font-weight: 900;
}

/* The photo covers the initials rather than replacing them: site.js removes an
   image that fails to decode, and the initials underneath show through. It fills
   the whole visual panel edge to edge, so the face reads at a glance. */
.care-directory .doctor-item-photo {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Upper-middle, not the very top: the wide grid/mobile headers crop
       vertically, and a hard top crop showed only the top strip of the photo.
       25% keeps a portrait's face in frame in both the tall list panel and
       the wide grid band. */
    object-position: center 25%;
}

.care-directory .doctor-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    padding: 20px 22px;
}

.care-directory .doctor-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.care-directory .specialty {
    color: var(--green-800);
    font-size: .82rem;
    font-weight: 900;
}

[data-bs-theme="dark"] .care-directory .specialty {
    color: #9bdec2;
}

.care-directory .verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #087154;
    background: var(--green-50);
    font-size: .70rem;
    font-weight: 900;
    white-space: nowrap;
}

[data-bs-theme="dark"] .care-directory .verified-badge {
    color: #a3e5c9;
}

.care-directory .verified-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1aae74;
}

/* The same chip in red for a profile still awaiting verification: colour and
   text change together, so the state never rests on colour alone. */
.care-directory .verified-badge.not-verified {
    color: #a02d35;
    background: #fdeef0;
}

.care-directory .verified-badge.not-verified::before {
    background: #cf3f4a;
}

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

/* The paid placement mark: the same chip shape in the brand's gold, with its
   own word, so it can sit beside the verification badge without borrowing its
   meaning. Colour and text change together — the state never rests on colour
   alone. */
.care-directory .featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--sihatuna-gold-text, #8a6a1c);
    background: var(--sihatuna-gold-soft, #f6eed9);
    font-size: .70rem;
    font-weight: 900;
    white-space: nowrap;
}

.care-directory .featured-badge::before {
    content: "★";
    font-size: .65rem;
    line-height: 1;
}

[data-bs-theme="dark"] .care-directory .featured-badge {
    color: #e8cf8e;
    background: rgba(138, 106, 28, .25);
}

/* An offer mark. Deliberately not the gold of paid placement and not the green
   of verification — an offer is neither of those, and three marks that look
   alike would say the same thing three times. The percentage is in the text, so
   the badge never relies on its colour to be understood. */
.care-directory .discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #8f3d10;
    background: #fdeadd;
    font-size: .70rem;
    font-weight: 900;
    white-space: nowrap;
}

.care-directory .discount-badge::before {
    content: "%";
    font-size: .65rem;
    line-height: 1;
}

[data-bs-theme="dark"] .care-directory .discount-badge {
    color: #ffbf95;
    background: rgba(143, 61, 16, .28);
}

/* Where the book button would be on an unverified profile: the reason, not a
   dead control. */
.care-directory .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"] .care-directory .not-verified-note {
    color: #ffb3ba;
    background: rgba(160, 45, 53, .18);
    border-color: rgba(160, 45, 53, .45);
}

.care-directory .doctor-content {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    gap: 24px;
    padding: 17px 0;
}

.care-directory .doctor-name {
    margin: 0;
    color: var(--heading);
    font-size: 1.23rem;
    overflow-wrap: anywhere;
}

.care-directory .doctor-name a {
    color: inherit;
    text-decoration: none;
}

.care-directory .doctor-name a:hover {
    color: var(--green-800);
}

.care-directory .verified-dot {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-inline-start: 6px;
    border-radius: 50%;
    color: #fff;
    background: var(--green-700);
    vertical-align: -2px;
}

.care-directory .verified-dot svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
}

.care-directory .credentials {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.care-directory .doctor-meta {
    display: grid;
    gap: 9px;
    margin-top: 15px;
    color: var(--muted);
    font-size: .82rem;
}

/* The card's follow icons: compact round links, the platform name in the
   label rather than on the card. */
.care-directory .social-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.care-directory .social-mini a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--muted);
    background: var(--surface);
    font-size: .82rem;
}

.care-directory .social-mini a:hover {
    color: var(--green-800);
    border-color: var(--border-strong);
}

[data-bs-theme="dark"] .care-directory .social-mini a:hover {
    color: #a3e5c9;
}

.care-directory .doctor-meta > span,
.care-directory .doctor-facts > span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.care-directory .doctor-meta svg,
.care-directory .doctor-facts svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    stroke: currentColor;
}

.care-directory .doctor-facts {
    display: grid;
    align-content: start;
    gap: 10px;
    color: var(--muted);
    font-size: .82rem;
}

.care-directory .doctor-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* ----- Service pills -----

   The medical-centre and pharmacy templates list what a place offers as tagged
   pills rather than a run-on line, which is what makes "why did this match?"
   answerable at a glance. */

.care-directory .service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.care-directory .service-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface-muted);
    font-size: .68rem;
    font-weight: 760;
    /* A pill that wraps mid-word reads as broken — "Online consulta / tion". */
    white-space: nowrap;
}

.care-directory .service-tag svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    stroke: var(--green-800);
}

/* ----- Card visual overlays ----- */

.care-directory .favorite-slot {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 2;
}

.care-directory .visual-status {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #087154;
    background: rgba(245, 255, 250, .88);
    box-shadow: 0 9px 24px rgba(4, 65, 50, .10);
    font-size: .71rem;
    font-weight: 900;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-bs-theme="dark"] .care-directory .visual-status {
    color: #a7e4ca;
    background: rgba(7, 45, 35, .88);
}

.care-directory .visual-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1aae74;
    box-shadow: 0 0 0 4px rgba(26, 174, 116, .13);
}

.care-directory .visual-status.is-closed {
    color: #ad5151;
}

.care-directory .visual-status.is-closed::before {
    background: #c25c5c;
    box-shadow: 0 0 0 4px rgba(194, 92, 92, .13);
}

/* ----- Opening hours, where the doctor card puts the fee ----- */

.care-directory .hours-block small {
    display: block;
    color: var(--muted);
    font-size: .72rem;
}

.care-directory .hours-block strong {
    display: block;
    margin-top: 4px;
    color: var(--green-800);
    font-size: 1rem;
}

[data-bs-theme="dark"] .care-directory .hours-block strong {
    color: #a1e1c6;
}

.care-directory .hours-block.is-closed strong {
    color: #b65353;
}

.care-directory .call-button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--heading);
    background: var(--surface);
    font-size: .80rem;
    font-weight: 900;
    text-decoration: none;
}

.care-directory .call-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: currentColor;
}

/* ----- "Open now only" toggle -----

   A switch above the collapsible groups rather than a group of its own: it is
   one binary the reader flips constantly, and burying it behind a disclosure
   made it the only filter you had to open something to reach. */

.care-directory .open-only-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-muted);
}

.care-directory .open-only-box > span {
    color: var(--heading);
    font-size: .82rem;
    font-weight: 850;
}

.care-directory .switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
    margin: 0;
}

.care-directory .switch input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.care-directory .switch-track {
    position: absolute;
    inset: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-solid);
    pointer-events: none;
    transition: background-color .16s ease;
}

.care-directory .switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition:
        transform .16s ease,
        background-color .16s ease;
}

.care-directory .switch input:checked + .switch-track {
    border-color: transparent;
    background: var(--green-800);
}

.care-directory .switch input:checked + .switch-track::after {
    background: #fff;
    transform: translateX(20px);
}

[dir="rtl"] .care-directory .switch input:checked + .switch-track::after {
    transform: translateX(-20px);
}

/* A fact the directory cannot answer yet still gets its row, so the card keeps
   its shape — but it says so rather than showing an invented number. */
.care-directory .fact-pending {
    color: var(--muted);
    font-style: italic;
    opacity: .75;
}

/* The organization directory's footer carries opening status where the doctor
   card carries a fee — the one fact that decides whether to ring now. */
.care-directory .org-status {
    display: grid;
    gap: 4px;
}

.care-directory .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
}

.care-directory .status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.care-directory .status-pill.is-open {
    color: #087154;
    background: var(--green-50);
}

[data-bs-theme="dark"] .care-directory .status-pill.is-open {
    color: #a3e5c9;
}

.care-directory .status-pill.is-closed {
    color: #9a5b4e;
    background: rgba(184, 78, 78, .10);
}

[data-bs-theme="dark"] .care-directory .status-pill.is-closed {
    color: #e6a99c;
}

.care-directory .org-status small {
    color: var(--muted);
    font-size: .74rem;
}

/* The favourite toggle comes from its own component; it only needs to line up
   with the two buttons beside it. */
.care-directory .card-actions .btn {
    min-height: 43px;
    border-radius: 14px;
}

.care-directory .fee small {
    display: block;
    color: var(--muted);
    font-size: .72rem;
}

.care-directory .fee strong {
    display: block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 1.34rem;
}

.care-directory .card-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.care-directory .profile-button,
.care-directory .book-button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 14px;
    font-size: .80rem;
    font-weight: 900;
    text-decoration: none;
}

.care-directory .profile-button {
    border: 1px solid var(--border-strong);
    color: var(--green-900);
    background: var(--surface-muted);
}

[data-bs-theme="dark"] .care-directory .profile-button {
    color: #afe6d0;
}

.care-directory .book-button {
    color: #fff;
    background: linear-gradient(135deg, var(--green-900), var(--green-700));
    box-shadow: 0 10px 22px rgba(7, 91, 69, .20);
}

.care-directory .profile-button svg,
.care-directory .book-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: currentColor;
}

/* ----- Grid view ----- */

.care-directory .doctor-list.grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.care-directory .doctor-list.grid-view .doctor-result {
    display: flex;
    flex-direction: column;
}

.care-directory .doctor-list.grid-view .doctor-visual {
    /* Tall enough to show a real portion of the photo, not a thin strip. */
    min-height: 240px;
}

.care-directory .doctor-list.grid-view .doctor-body {
    padding: 18px;
}

.care-directory .doctor-list.grid-view .doctor-content {
    grid-template-columns: 1fr;
    gap: 13px;
}

.care-directory .doctor-list.grid-view .doctor-facts {
    grid-template-columns: 1fr 1fr;
}

.care-directory .doctor-list.grid-view .doctor-card-footer {
    align-items: flex-start;
    flex-direction: column;
}

.care-directory .doctor-list.grid-view .card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ----- Empty state and pagination ----- */

.care-directory .empty-result {
    padding: 58px 25px;
    border: 1px dashed var(--border-strong);
    border-radius: 26px;
    text-align: center;
    background: var(--surface);
}

.care-directory .empty-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 21px;
    color: var(--green-800);
    background: var(--green-50);
}

.care-directory .empty-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
}

.care-directory .empty-result h3 {
    margin: 0;
    color: var(--heading);
}

.care-directory .empty-result p {
    max-width: 500px;
    margin: 9px auto 0;
    color: var(--muted);
    line-height: 1.7;
}

.care-directory .care-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}

.care-directory .page-gap {
    display: grid;
    place-items: center;
    width: 24px;
    height: 40px;
    color: var(--muted);
}

.care-directory .page-button {
    min-width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding-inline: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--muted);
    background: var(--surface);
    text-decoration: none;
}

.care-directory .page-button.is-active {
    color: #fff;
    border-color: transparent;
    background: var(--green-800);
}

.care-directory .page-button.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.care-directory .page-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* ----- Mobile filter drawer ----- */

.care-directory .filter-drawer-backdrop,
.care-directory .filter-drawer {
    display: none;
}

.care-directory a:focus-visible,
.care-directory button:focus-visible,
.care-directory input:focus-visible,
.care-directory select:focus-visible {
    outline: 3px solid rgba(33, 153, 112, .34);
    outline-offset: 3px;
}

/* ----- Responsive ----- */

@media (max-width: 1100px) {
    .care-directory .results-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 18px;
    }

    .care-directory .doctor-result {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .care-directory .doctor-content {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .care-directory .doctor-facts {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .care-directory .search-grid {
        grid-template-columns: 1fr 1fr;
    }

    .care-directory .search-submit {
        grid-column: 1 / -1;
    }

    .care-directory .filter-slot {
        display: none;
    }

    .care-directory .results-layout {
        display: block;
    }

    .care-directory .mobile-filter-button {
        min-height: 43px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 13px;
        border: 1px solid var(--border);
        border-radius: 13px;
        color: var(--green-900);
        background: var(--surface);
        font: inherit;
        font-weight: 850;
        cursor: pointer;
    }

    [data-bs-theme="dark"] .care-directory .mobile-filter-button {
        color: #afe6d0;
    }

    .care-directory .mobile-filter-button svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }

    .care-directory .results-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .care-directory .toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .care-directory .sort-select {
        flex: 1;
    }

    .care-directory .filter-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: rgba(0, 24, 18, .48);
        backdrop-filter: blur(3px);
    }

    .care-directory .filter-drawer-backdrop.is-open {
        display: block;
    }

    .care-directory .filter-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        z-index: 130;
        width: min(360px, 90vw);
        display: block;
        overflow-y: auto;
        background: var(--surface-solid);
        box-shadow: 0 0 70px rgba(0, 0, 0, .35);
        transform: translateX(105%);
        transition: transform .22s ease;
    }

    [dir="ltr"] .care-directory .filter-drawer {
        transform: translateX(-105%);
    }

    .care-directory .filter-drawer.is-open {
        transform: translateX(0);
    }

    /* In the drawer the panel is not the thing that scrolls — the drawer is. */
    .care-directory .filter-drawer .filter-panel {
        position: static;
        display: block;
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .care-directory .filter-drawer .filter-panel > .filter-header {
        display: none;
    }

    .care-directory .drawer-header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-solid);
    }

    .care-directory .drawer-header h2 {
        margin: 0;
        color: var(--heading);
        font-size: 1rem;
    }

    .care-directory .drawer-close {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: 12px;
        color: var(--ink);
        background: var(--surface);
        cursor: pointer;
    }

    .care-directory .drawer-close svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }
}

@media (max-width: 680px) {
    .care-directory .directory-container {
        width: min(100% - 24px, 1180px);
    }

    .care-directory .page-hero {
        padding: 35px 0 26px;
    }

    .care-directory .page-hero::before {
        width: 100%;
        opacity: .08;
        mask-image: linear-gradient(180deg, transparent, #000 45%, transparent);
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, transparent);
    }

    .care-directory .hero-title {
        font-size: clamp(2rem, 10vw, 2.85rem);
    }

    .care-directory .hero-description {
        font-size: .92rem;
    }

    .care-directory .search-shell {
        padding: 9px;
        border-radius: 19px;
    }

    .care-directory .search-grid {
        grid-template-columns: 1fr;
    }

    .care-directory .search-submit {
        grid-column: auto;
    }

    .care-directory .results-section {
        padding-top: 26px;
    }

    .care-directory .doctor-result,
    .care-directory .doctor-list.grid-view .doctor-result {
        display: flex;
        flex-direction: column;
    }

    .care-directory .doctor-visual {
        min-height: 180px;
    }

    .care-directory .doctor-body {
        padding: 18px;
    }

    .care-directory .doctor-content,
    .care-directory .doctor-facts,
    .care-directory .doctor-list.grid-view .doctor-facts {
        grid-template-columns: 1fr;
    }

    .care-directory .doctor-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .care-directory .card-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .care-directory .doctor-list.grid-view {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Shared-card additions.

   _PublicDoctorCard renders the same card on the directory, the home carousel
   and the landing pages. The two classes below are what the other pages need:
   card-scope neutralizes the directory's page background when the wrapper is
   only a card context, and card-stack is the grid-view stacking without the
   grid-view ancestor.
   ========================================================================== */

.care-directory.card-scope {
    background: none;
}

/* The verification chip's icon replaces the coloured dot — the icon says the
   same thing more clearly, and two marks would say it twice. */
.care-directory .verified-badge.has-icon::before {
    content: none;
}

.care-directory .verified-badge.has-icon svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    stroke: currentColor;
}

/* The favourite heart: end of the badge row on the horizontal card, and up on
   the photo's corner when the card stacks — the badge row is full there. */
.care-directory .doctor-card-head .fav-inline {
    margin-inline-start: auto;
    width: 38px;
    height: 38px;
}

.care-directory .doctor-result.card-stack .doctor-card-head .fav-inline,
.care-directory .doctor-list.grid-view .doctor-result .doctor-card-head .fav-inline {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    margin-inline-start: 0;
}

/* Chips flow to a second line rather than crushing the specialty into a
   one-letter column when the row is full. */
.care-directory .doctor-result.card-stack .doctor-card-head,
.care-directory .doctor-list.grid-view .doctor-result .doctor-card-head {
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Ratings, years and button labels never wrap mid-text. */
.care-directory .doctor-result .doctor-facts > span,
.care-directory .doctor-result .profile-button,
.care-directory .doctor-result .book-button,
.care-directory .doctor-result .call-button {
    white-space: nowrap;
}

/* The opening-status chip's clock icon replaces its coloured dot — one mark,
   not two saying the same thing. */
.care-directory .visual-status.has-icon::before {
    content: none;
}

.care-directory .visual-status.has-icon svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    stroke: currentColor;
}

.care-directory .doctor-result.card-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.care-directory .doctor-result.card-stack .doctor-visual {
    min-height: 170px;
}

.care-directory .doctor-result.card-stack .doctor-body {
    flex: 1 1 auto;
    padding: 14px 16px 16px;
}

.care-directory .doctor-result.card-stack .doctor-card-head {
    padding-bottom: 10px;
}

/* Compact vertical rhythm: a carousel card earns its height with facts, not
   air. Related facts share a row wherever they fit. */
.care-directory .doctor-result.card-stack .doctor-content {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 0;
}

.care-directory .doctor-result.card-stack .doctor-meta {
    margin-top: 8px;
    gap: 6px;
}

.care-directory .doctor-result.card-stack .doctor-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.care-directory .doctor-result.card-stack .doctor-card-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

/* The fee's label and amount share one line instead of stacking. */
.care-directory .doctor-result.card-stack .fee,
.care-directory .doctor-result.card-stack .hours-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.care-directory .doctor-result.card-stack .fee small,
.care-directory .doctor-result.card-stack .fee strong,
.care-directory .doctor-result.card-stack .hours-block small,
.care-directory .doctor-result.card-stack .hours-block strong {
    display: inline;
    margin-top: 0;
}

.care-directory .doctor-result.card-stack .fee strong {
    font-size: 1.15rem;
}

/* One button per row: "Book appointment" stays on a single line whatever the
   language, instead of wrapping inside a half-width column. */
.care-directory .doctor-result.card-stack .card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.care-directory .doctor-result.card-stack .profile-button,
.care-directory .doctor-result.card-stack .book-button,
.care-directory .doctor-result.card-stack .call-button {
    min-height: 40px;
}

/* The verified seal after a name: green, sized to the name's x-height. Both
   organization cards wear it; the chip that used to say the same is gone. */
.care-directory .verified-seal {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-inline-start: 5px;
    color: var(--green-700);
    vertical-align: -4px;
}

[data-bs-theme="dark"] .care-directory .verified-seal {
    color: #3fbf95;
}

.care-directory .verified-seal svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* A footer with no hours block pushes its buttons to the inline end, where
   they sat beside the hours before. */
.care-directory .doctor-card-footer.actions-only {
    justify-content: flex-end;
}

/* ==========================================================================
   Dense grid — the organization directories' grid view.

   _PublicOrganizationCardDense renders three to a row and keeps only what
   decides the next step. The list view and the other directories still use
   the full card, so every rule here is scoped to .card-dense and outranks the
   generic grid-view rules above by specificity rather than by order.
   ========================================================================== */

.care-directory .doctor-list.grid-view.is-dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.care-directory .doctor-result.card-dense {
    border-radius: 20px;
}

/* The band: initials at the inline start, the heart stacked over the opening
   status at the inline end. Both overlays leave their absolute corners and
   sit in the flow of the side column. */
.care-directory .doctor-list.grid-view .doctor-result.card-dense .doctor-visual {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.care-directory .doctor-result.card-dense .doctor-avatar {
    width: 64px;
    height: 64px;
    border-width: 4px;
    border-radius: 20px;
    font-size: 1.4rem;
}

.care-directory .doctor-result.card-dense .visual-side {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.care-directory .doctor-result.card-dense .favorite-slot,
.care-directory .doctor-result.card-dense .visual-status {
    position: relative;
    inset: auto;
}

.care-directory .doctor-result.card-dense .visual-status {
    white-space: nowrap;
}

.care-directory .doctor-list.grid-view .doctor-result.card-dense .doctor-body {
    /* Grows to the row's height, so the action row below sits at the same
       level on every card whether or not the name wrapped or a badge showed. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

/* Two lines of name at most; the details page has the whole of it. */
.care-directory .doctor-result.card-dense .doctor-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.35;
}

.care-directory .doctor-result.card-dense .verified-badge {
    align-self: flex-start;
}

.care-directory .doctor-result.card-dense .credentials,
.care-directory .doctor-result.card-dense .doctor-meta {
    margin: 0;
}

/* Rating at the start of the row, the view count at its end. */
.care-directory .doctor-result.card-dense .credentials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}

.care-directory .doctor-result.card-dense .views-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface-muted);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.care-directory .doctor-result.card-dense .views-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    stroke: currentColor;
}

/* One line of address, trimmed with an ellipsis rather than wrapped. */
.care-directory .doctor-result.card-dense .doctor-meta > span {
    min-width: 0;
}

.care-directory .doctor-result.card-dense .doctor-meta a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Details takes the width; call and directions are 44px icon targets. */
.care-directory .doctor-list.grid-view .doctor-result.card-dense .card-actions {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.care-directory .doctor-result.card-dense .book-button {
    flex: 1 1 auto;
    min-width: 0;
}

.care-directory .doctor-result.card-dense .book-button span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.care-directory .doctor-result.card-dense .icon-button {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
}

@media (max-width: 860px) {
    .care-directory .doctor-list.grid-view.is-dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .care-directory .doctor-list.grid-view.is-dense {
        grid-template-columns: minmax(0, 1fr);
    }
}