/* ============================================================
   Asia Hospital — design system
   Mobile-first, trilingual (LTR/RTL), soft-modern medical look
   ============================================================ */

/* ---- Typography: Manrope for Latin, Cairo for Kurdish/Arabic ---- */
@font-face {
    font-family: 'Manrope';
    src: url('/lib/fonts/manrope-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Cairo';
    src: url('/lib/fonts/cairo-arabic.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011;
}
@font-face {
    font-family: 'Cairo';
    src: url('/lib/fonts/cairo-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
/* NRT — the Kurdish typeface used across Kurdish media; one weight, so the
   browser synthesises bold and Cairo covers anything NRT is missing. */
@font-face {
    font-family: 'NRT';
    src: url('/lib/fonts/nrt-reg.woff') format('woff');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
/* Rabar — widely used Kurdish typefaces. Chosen in Settings → Appearance.
   font-display: swap means text stays readable in the fallback font while the
   file loads, and stays in the fallback if it never arrives. */
@font-face {
    font-family: 'Rabar 21';
    src: url('/lib/fonts/rabar-21.ttf') format('truetype');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rabar 22';
    src: url('/lib/fonts/rabar-22.ttf') format('truetype');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand palette taken from the Asia Hospital logo (cyan mark + grey wordmark) */
    --hx-primary: #0F9FBA;
    --hx-primary-2: #19B6D0;
    --hx-primary-soft: #dff5fa;
    --hx-primary-ink: #0B6E82;
    --hx-brand-deep: #17849B;
    --hx-navy: #0A3A46;
    --hx-accent: #F5A623;          /* warm highlight, keeps the cyan from feeling cold */
    --hx-accent-soft: #fff3dc;
    --hx-ink: #16232b;
    --hx-ink-2: #3d5059;
    --hx-muted: #6b8089;
    --hx-bg: #f4f8fa;
    --hx-surface: #ffffff;
    --hx-line: #e1ebef;
    --hx-danger: #dc2626;
    --hx-radius: 18px;
    --hx-radius-sm: 12px;
    --hx-shadow: 0 6px 28px rgba(10, 58, 70, .07);
    --hx-shadow-lg: 0 16px 48px rgba(10, 58, 70, .14);
    --hx-grad: linear-gradient(135deg, #0B6E82 0%, #0F9FBA 45%, #35C6DC 100%);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Manrope', 'Cairo', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--hx-bg);
    color: var(--hx-ink);
    -webkit-font-smoothing: antialiased;
}

/* Kurdish leads with NRT, Arabic with Cairo — system fonts render Sorani badly */
html[lang="ku"] body,
html[lang="ku"] .hx-btn,
html[lang="ku"] .form-control,
html[lang="ku"] .form-select,
html[lang="ku"] .btn,
html[lang="ku"] input,
html[lang="ku"] textarea,
html[lang="ku"] select {
    font-family: var(--hx-font-ku, 'NRT'), 'Cairo', 'Manrope', system-ui, "Segoe UI", Arial, sans-serif;
}
html[lang="ar"] body,
html[lang="ar"] .hx-btn,
html[lang="ar"] .form-control,
html[lang="ar"] .form-select,
html[lang="ar"] .btn,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    font-family: var(--hx-font-ar, 'Cairo'), 'Manrope', system-ui, "Segoe UI", Arial, sans-serif;
}
[dir="rtl"] { line-height: 1.85; }
/* NRT ships a single weight — let the browser fake the heavier ones */
html[lang="ku"] { font-synthesis: weight style; }
/* NRT sits small on the line; nudge Kurdish up a touch for even colour */
html[lang="ku"] body { font-size: 1.03rem; }

a { color: var(--hx-primary); text-decoration: none; }
a:hover { color: var(--hx-primary-ink); }

img { max-width: 100%; }

::selection { background: var(--hx-primary-soft); }

/* ---------- top info bar ---------- */
.hx-topbar {
    background: var(--hx-primary-ink);
    color: #d7f5f0;
    font-size: .82rem;
    padding: .35rem 0;
}
.hx-topbar a { color: #d7f5f0; font-weight: 600; }
.hx-topbar a:hover { color: #fff; }
.hx-topbar .bi { margin-inline-end: .35rem; }

/* ---------- navbar ---------- */
.hx-navbar {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, .8);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.hx-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    color: var(--hx-ink);
    font-size: 1.05rem;
    line-height: 1.1;
}
.hx-brand:hover { color: var(--hx-ink); }
.hx-brand-mark {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--hx-grad);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 14px rgba(15, 159, 186, .35);
    flex-shrink: 0;
}
.hx-brand small { display: block; font-size: .68rem; font-weight: 600; color: var(--hx-muted); }
/* tagline next to the logo — separated by a hairline rule */
.hx-brand-tag {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hx-muted);
    padding-inline-start: .75rem;
    margin-inline-start: .15rem;
    border-inline-start: 1px solid var(--hx-line);
    line-height: 1.4;
    max-width: 15rem;
}
html[lang="ku"] .hx-brand-tag, html[lang="ar"] .hx-brand-tag { font-size: .86rem; line-height: 1.7; }
.hx-nav-link {
    font-weight: 600;
    color: var(--hx-ink-2) !important;
    border-radius: 10px;
    padding: .5rem .85rem !important;
    transition: all .15s;
}
.hx-nav-link:hover { background: var(--hx-primary-soft); color: var(--hx-primary-ink) !important; }
.hx-nav-link.active { color: var(--hx-primary) !important; background: #eff9fc; }

.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .62rem 1.35rem;
    border: 2px solid transparent;
    transition: all .18s;
    line-height: 1.2;
}
.hx-btn-primary {
    background: var(--hx-grad);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(15, 159, 186, .35);
}
.hx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 159, 186, .45); }
.hx-btn-outline {
    border-color: var(--hx-primary);
    color: var(--hx-primary) !important;
    background: transparent;
}
.hx-btn-outline:hover { background: var(--hx-primary-soft); }
.hx-btn-light {
    background: #fff;
    color: var(--hx-primary-ink) !important;
    box-shadow: var(--hx-shadow);
}
.hx-btn-light:hover { transform: translateY(-2px); }
.hx-btn-sm { padding: .4rem 1rem; font-size: .86rem; }

/* ---------- hero ---------- */
.hx-hero {
    position: relative;
    background: var(--hx-grad);
    color: #fff;
    overflow: hidden;
    padding: 4.2rem 0 7.5rem;
}
.hx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 300px at 85% 10%, rgba(255, 255, 255, .14), transparent 60%),
        radial-gradient(500px 260px at 10% 90%, rgba(255, 255, 255, .10), transparent 60%);
}
.hx-hero-grid { position: relative; z-index: 1; }
.hx-eyebrow-light {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: .32rem .95rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.hx-hero h1 {
    font-weight: 800;
    font-size: clamp(1.9rem, 5.5vw, 3.3rem);
    line-height: 1.15;
    margin: 1rem 0 .9rem;
}
.hx-hero .lead { color: #e6fffB; opacity: .95; font-size: clamp(1rem, 2.4vw, 1.15rem); max-width: 34rem; }
.hx-hero-badge247 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
}
.hx-hero-badge247 .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 5px rgba(74, 222, 128, .25);
    animation: hx-blink 1.8s ease-in-out infinite;
}
@keyframes hx-blink { 50% { opacity: .5; } }

/* hero visual — pure CSS tile collage, no photos needed */
.hx-hero-visual { position: relative; min-height: 320px; }
.hx-hv-card {
    position: absolute;
    background: rgba(255, 255, 255, .95);
    color: var(--hx-ink);
    border-radius: var(--hx-radius);
    box-shadow: var(--hx-shadow-lg);
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    animation: hx-float 5.5s ease-in-out infinite;
}
.hx-hv-card .ic {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    flex-shrink: 0;
}
.hx-hv-card b { font-size: .95rem; display: block; }
.hx-hv-card span { font-size: .78rem; color: var(--hx-muted); }
.hx-hv-1 { top: 6%; inset-inline-start: 4%; animation-delay: 0s; }
.hx-hv-2 { top: 38%; inset-inline-end: 2%; animation-delay: 1.2s; }
.hx-hv-3 { bottom: 4%; inset-inline-start: 14%; animation-delay: 2.4s; }
.hx-hv-ring {
    position: absolute;
    inset-inline-end: 12%;
    top: 2%;
    width: 210px; height: 210px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .35);
    animation: hx-spin 40s linear infinite;
}
@keyframes hx-float { 50% { transform: translateY(-10px); } }
@keyframes hx-spin { to { transform: rotate(360deg); } }

/* heartbeat line under hero */
.hx-hero-pulse {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: .5;
}

/* ---------- quick action cards ---------- */
.hx-quick { margin-top: -4.6rem; position: relative; z-index: 5; }
.hx-quick-card {
    background: var(--hx-surface);
    border-radius: var(--hx-radius);
    box-shadow: var(--hx-shadow-lg);
    padding: 1.25rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    border: 1px solid rgba(226, 232, 240, .6);
    transition: transform .18s, box-shadow .18s;
    color: var(--hx-ink);
}
.hx-quick-card:hover { transform: translateY(-4px); color: var(--hx-ink); }
.hx-quick-card .ic {
    width: 54px; height: 54px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: var(--hx-grad);
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(15, 159, 186, .3);
}
.hx-quick-card.danger .ic { background: linear-gradient(135deg, #dc2626, #f87171); box-shadow: 0 6px 16px rgba(220, 38, 38, .3); }
.hx-quick-card b { display: block; font-size: 1.02rem; }
.hx-quick-card span { font-size: .82rem; color: var(--hx-muted); }

/* ---------- brand logo ---------- */
.hx-logo { height: 46px; width: auto; display: block; flex-shrink: 0; }
.hx-footer .hx-logo { height: 52px; filter: brightness(0) invert(1) opacity(.92); }
@media (max-width: 575px) { .hx-logo { height: 38px; } }

/* ---------- announcement bar (news-portal style, from xendan) ---------- */
.hx-announce {
    background: var(--hx-accent);
    color: #4a2f00;
    font-weight: 700;
    font-size: .85rem;
    padding: .4rem 0;
    overflow: hidden;
}
.hx-announce .tag {
    background: #4a2f00;
    color: var(--hx-accent);
    border-radius: 4px;
    padding: .1rem .55rem;
    font-size: .74rem;
    margin-inline-end: .6rem;
    white-space: nowrap;
}

/* ---------- sections ---------- */
.hx-section { padding: 4.2rem 0; }
.hx-section.tight { padding: 3rem 0; }
.hx-eyebrow {
    display: inline-block;
    color: var(--hx-primary);
    background: var(--hx-primary-soft);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .3rem .9rem;
    margin-bottom: .8rem;
}
/* editorial section heading with a brand accent bar (xendan-inspired) */
.hx-title {
    position: relative;
    padding-inline-start: .85rem;
}
.hx-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .18em;
    bottom: .18em;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(var(--hx-primary-2), var(--hx-primary));
}
.text-center .hx-title { padding-inline-start: 0; }
.text-center .hx-title::before { display: none; }
.hx-title { font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.hx-sub { color: var(--hx-muted); max-width: 40rem; }

/* ---------- generic cards ---------- */
.hx-card {
    background: var(--hx-surface);
    border-radius: var(--hx-radius);
    border: 1px solid rgba(226, 232, 240, .7);
    box-shadow: var(--hx-shadow);
    transition: transform .18s, box-shadow .18s;
}
.hx-card:hover { transform: translateY(-5px); box-shadow: var(--hx-shadow-lg); }

.hx-dept-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.25rem;
    color: var(--hx-ink);
    position: relative;
    overflow: hidden;
    min-height: 220px;
}
.hx-dept-card:hover { color: var(--hx-ink); }
/* soft tint that grows on hover, tinted with the department colour */
.hx-dept-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -55px;
    top: -55px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: var(--dept-color, var(--hx-primary));
    opacity: .10;
    transition: transform .35s ease;
}
.hx-dept-card:hover::after { transform: scale(1.45); }
.hx-dept-card .ic {
    width: 54px; height: 54px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: var(--dept-color, var(--hx-primary));
    margin-bottom: .9rem;
    box-shadow: 0 8px 18px rgba(10, 58, 70, .18);
    position: relative;
    transition: transform .25s ease;
}
.hx-dept-card:hover .ic { transform: translateY(-3px) scale(1.04); }
.hx-dept-card b {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .35rem;
    position: relative;
}
.hx-dept-card p {
    font-size: .87rem;
    line-height: 1.65;
    color: var(--hx-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}
.hx-dept-card .go {
    font-size: .82rem;
    font-weight: 700;
    color: var(--hx-primary);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    padding-top: .9rem;
    position: relative;
}
.hx-dept-card .go .bi { transition: transform .25s ease; }
.hx-dept-card:hover .go .bi { transform: translateX(4px); }
[dir="rtl"] .hx-dept-card:hover .go .bi { transform: translateX(-4px); }
/* Kurdish/Arabic names need a little more room and leading */
[dir="rtl"] .hx-dept-card b { font-size: 1.1rem; line-height: 1.6; }
[dir="rtl"] .hx-dept-card p { font-size: .92rem; line-height: 1.85; -webkit-line-clamp: 2; }
[dir="rtl"] .hx-doc-body b { line-height: 1.6; }
[dir="rtl"] .hx-doc-body .spec { line-height: 1.7; }

/* doctor + service + news cards: keep long trilingual text tidy */
.hx-doc-body b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hx-doc-body .spec {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hx-svc-card b, .hx-news-body b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hx-svc-card p, .hx-news-body p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hx-evt-card .t {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* doctor card */
.hx-doc-card { overflow: hidden; display: block; color: var(--hx-ink); }
.hx-doc-card:hover { color: var(--hx-ink); }
.hx-doc-photo {
    aspect-ratio: 1 / .9;
    background: linear-gradient(160deg, #e6f7f5, #eff9fc);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
}
.hx-doc-photo img { width: 100%; height: 100%; object-fit: cover; }
.hx-doc-initials {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: var(--hx-grad);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(15, 159, 186, .35);
}
.hx-doc-body { padding: 1.05rem 1.15rem 1.25rem; }
.hx-doc-body b { font-size: 1.02rem; display: block; }
.hx-doc-body .spec { color: var(--hx-primary); font-size: .84rem; font-weight: 600; }
.hx-doc-body .dept {
    display: inline-block;
    font-size: .74rem;
    background: var(--hx-bg);
    border: 1px solid var(--hx-line);
    color: var(--hx-muted);
    padding: .18rem .6rem;
    border-radius: 999px;
    margin-top: .55rem;
}

/* service card */
.hx-svc-card { display: flex; gap: 1rem; padding: 1.3rem; color: var(--hx-ink); }
.hx-svc-card:hover { color: var(--hx-ink); }
.hx-svc-card .ic {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: var(--hx-primary-soft);
    color: var(--hx-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.hx-svc-card b { display: block; margin-bottom: .25rem; }
.hx-svc-card p { font-size: .85rem; color: var(--hx-muted); margin: 0; }

/* news card */
.hx-news-card { overflow: hidden; display: flex; flex-direction: column; color: var(--hx-ink); }
.hx-news-card:hover { color: var(--hx-ink); }
.hx-news-cover {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #0B6E82, #0F9FBA 55%, #19B6D0);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .8);
    font-size: 2.4rem;
    overflow: hidden;
}
.hx-news-cover img { width: 100%; height: 100%; object-fit: cover; }
.hx-news-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.hx-news-date { font-size: .76rem; color: var(--hx-muted); font-weight: 600; margin-bottom: .4rem; }
.hx-news-body b { font-size: 1rem; line-height: 1.4; }
.hx-news-body p { font-size: .85rem; color: var(--hx-muted); margin: .5rem 0 0; }

/* ---------- why + stats ---------- */
.hx-why-item { display: flex; gap: 1rem; align-items: flex-start; }
.hx-why-item .ic {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: var(--hx-primary-soft);
    color: var(--hx-primary);
    font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hx-why-item b { display: block; margin-bottom: .2rem; }
.hx-why-item p { font-size: .87rem; color: var(--hx-muted); margin: 0; }

.hx-stats {
    background: var(--hx-grad);
    border-radius: calc(var(--hx-radius) + 6px);
    color: #fff;
    padding: 2.2rem 1rem;
    box-shadow: var(--hx-shadow-lg);
}
.hx-stat { text-align: center; }
.hx-stat .num { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.hx-stat .lbl { font-size: .85rem; opacity: .9; font-weight: 600; }

/* ---------- CTA band ---------- */
.hx-cta {
    background: linear-gradient(135deg, #0B6E82, #0F9FBA);
    border-radius: calc(var(--hx-radius) + 6px);
    color: #fff;
    padding: 2.6rem 2rem;
    position: relative;
    overflow: hidden;
}
.hx-cta::after {
    content: "\F30F";
    font-family: "bootstrap-icons";
    position: absolute;
    inset-inline-end: -20px;
    bottom: -38px;
    font-size: 11rem;
    opacity: .08;
    pointer-events: none;   /* decoration only — it was swallowing clicks on the button */
}
.hx-cta .row { position: relative; z-index: 1; }

/* ---------- inner page hero ---------- */
.hx-pagehero {
    background: var(--hx-grad);
    color: #fff;
    padding: 3rem 0 3.4rem;
    position: relative;
    overflow: hidden;
}
.hx-pagehero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(500px 240px at 88% 0%, rgba(255, 255, 255, .15), transparent 60%);
}
.hx-pagehero h1 { font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); position: relative; }
.hx-pagehero p { color: #d9fffa; margin: 0; position: relative; max-width: 44rem; }

/* ---------- forms ---------- */
.hx-form-card {
    background: var(--hx-surface);
    border-radius: var(--hx-radius);
    box-shadow: var(--hx-shadow);
    border: 1px solid rgba(226, 232, 240, .7);
    padding: 1.8rem;
}
.form-control, .form-select {
    border-radius: 12px;
    border-color: var(--hx-line);
    padding: .6rem .9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--hx-primary-2);
    box-shadow: 0 0 0 .2rem rgba(25, 182, 208, .15);
}
.form-label { font-weight: 600; font-size: .88rem; }

.hx-success {
    text-align: center;
    padding: 3rem 1rem;
}
.hx-success .ic {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 2.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    animation: hx-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes hx-pop { 0% { transform: scale(.4); opacity: 0; } }

/* ---------- footer ---------- */
.hx-footer {
    background: #0A3A46;
    color: #b9e5e0;
    padding: 3.4rem 0 1.2rem;
    margin-top: 4rem;
}
.hx-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.hx-footer a { color: #b9e5e0; display: block; padding: .22rem 0; font-size: .9rem; }
.hx-footer a:hover { color: #fff; }
.hx-footer .brandline { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; margin-bottom: .8rem; }
.hx-footer .copy { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.4rem; padding-top: 1.1rem; font-size: .82rem; color: #8cc9c2; }
.hx-social a {
    display: inline-flex;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    align-items: center; justify-content: center;
    font-size: 1.05rem;
    margin-inline-end: .5rem;
    padding: 0;
}
.hx-social a:hover { background: rgba(255, 255, 255, .2); }

/* ---------- mobile emergency bar ---------- */
.hx-emgbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--hx-line);
    display: flex;
    z-index: 1040;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .08);
}
.hx-emgbar a {
    flex: 1;
    text-align: center;
    padding: .55rem 0 .5rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--hx-ink-2);
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.hx-emgbar a .bi { font-size: 1.25rem; }
.hx-emgbar a.call { color: var(--hx-danger); }
.hx-emgbar a.book { color: var(--hx-primary); }
@media (min-width: 992px) { .hx-emgbar { display: none; } }
body.has-emgbar { padding-bottom: 66px; }
@media (min-width: 992px) { body.has-emgbar { padding-bottom: 0; } }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hx-hv-card, .hx-hv-ring, .hx-hero-badge247 .dot { animation: none; }
}

/* ---------- misc ---------- */
.hx-avatar-sm {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--hx-grad);
    color: #fff; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.hx-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- rich content (admin editor + imported HTML) ---------- */
.hx-prose {
    line-height: 1.85;
    color: var(--hx-ink-2);
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}
.hx-prose > :first-child { margin-top: 0; }
.hx-prose > :last-child { margin-bottom: 0; }
.hx-prose p { margin: 0 0 1.05rem; }
.hx-prose strong, .hx-prose b { color: var(--hx-ink); font-weight: 700; }
/* imported content wraps every line in <h3><strong> — bring those back to body size */
.hx-prose h1, .hx-prose h2, .hx-prose h3,
.hx-prose h4, .hx-prose h5, .hx-prose h6 {
    color: var(--hx-ink);
    font-weight: 700;
    line-height: 1.5;
    margin: 1.5rem 0 .7rem;
}
.hx-prose h1 { font-size: 1.5rem; }
.hx-prose h2 { font-size: 1.32rem; }
.hx-prose h3 { font-size: 1.14rem; }
.hx-prose h4, .hx-prose h5, .hx-prose h6 { font-size: 1.04rem; }
.hx-prose h1 strong, .hx-prose h2 strong, .hx-prose h3 strong,
.hx-prose h4 strong, .hx-prose h5 strong, .hx-prose h6 strong { font-weight: 700; }
.hx-prose ul, .hx-prose ol { margin: 0 0 1.05rem; padding-inline-start: 1.4rem; }
.hx-prose li { margin-bottom: .4rem; }
.hx-prose a { color: var(--hx-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hx-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 1.2rem auto;
    box-shadow: var(--hx-shadow);
}
.hx-prose figure { margin: 1.2rem 0; }
.hx-prose figcaption { font-size: .85rem; color: var(--hx-muted); text-align: center; margin-top: .4rem; }
.hx-prose iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; margin: 1.2rem 0; }
.hx-prose blockquote {
    margin: 1.2rem 0;
    padding: .7rem 1.1rem;
    border-inline-start: 4px solid var(--hx-primary-2);
    background: var(--hx-primary-soft);
    border-radius: 0 12px 12px 0;
    color: var(--hx-ink);
}
[dir="rtl"] .hx-prose blockquote { border-radius: 12px 0 0 12px; }
.hx-prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.hx-prose th, .hx-prose td { border: 1px solid var(--hx-line); padding: .55rem .7rem; text-align: start; }
.hx-prose th { background: var(--hx-bg); font-weight: 700; color: var(--hx-ink); }
.hx-prose hr { border: 0; border-top: 1px solid var(--hx-line); margin: 1.6rem 0; }

/* Kurdish / Arabic: Cairo needs more leading and a slightly larger size to read well */
[dir="rtl"] .hx-prose {
    font-size: 1.1rem;
    line-height: 2.05;
    letter-spacing: 0;          /* letter-spacing breaks Arabic joining */
    text-align: start;
}
[dir="rtl"] .hx-prose h1 { font-size: 1.6rem; }
[dir="rtl"] .hx-prose h2 { font-size: 1.42rem; }
[dir="rtl"] .hx-prose h3 { font-size: 1.22rem; }
[dir="rtl"] .hx-prose h1, [dir="rtl"] .hx-prose h2, [dir="rtl"] .hx-prose h3,
[dir="rtl"] .hx-prose h4, [dir="rtl"] .hx-prose h5, [dir="rtl"] .hx-prose h6 { line-height: 1.7; }
[dir="rtl"] .hx-prose p { margin-bottom: 1.15rem; }
[dir="rtl"] .hx-title, [dir="rtl"] .hx-play-q,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] .hx-hero h1, [dir="rtl"] .hx-slide-box h2 { line-height: 1.45; }
[dir="rtl"] .hx-pagehero h1 { line-height: 1.55; }
[dir="rtl"] .hx-sub, [dir="rtl"] .hx-pagehero p { line-height: 1.9; }

.hx-filter-pill {
    display: inline-block;
    border: 1.5px solid var(--hx-line);
    background: #fff;
    border-radius: 999px;
    padding: .38rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--hx-ink-2);
    margin: 0 .25rem .5rem 0;
    transition: all .15s;
}
.hx-filter-pill:hover { border-color: var(--hx-primary-2); color: var(--hx-primary); }
.hx-filter-pill.active { background: var(--hx-primary); border-color: var(--hx-primary); color: #fff; }

.hx-breadcrumb { font-size: .82rem; color: #cdeeea; position: relative; }
.hx-breadcrumb a { color: #fff; font-weight: 600; }

/* ---- hero image slider (admin-managed) ---- */
.hx-slider { position: relative; }
.hx-slider .carousel-item {
    height: clamp(400px, 58vh, 620px);
    position: relative;
    overflow: hidden;
}
.hx-slide-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    animation: hx-kenburns 9s ease-out forwards;
}
@keyframes hx-kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.09); }
}
.hx-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8, 40, 38, .72) 0%, rgba(8, 40, 38, .35) 55%, rgba(8, 40, 38, .05) 100%);
}
[dir="rtl"] .hx-slide-overlay {
    background: linear-gradient(-90deg, rgba(8, 40, 38, .72) 0%, rgba(8, 40, 38, .35) 55%, rgba(8, 40, 38, .05) 100%);
}
.hx-slide-caption {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
}
.hx-slide-box { max-width: 620px; color: #fff; padding-bottom: 2.5rem; }
.hx-slide-box h2 {
    font-weight: 800;
    font-size: clamp(1.7rem, 4.6vw, 3rem);
    line-height: 1.15;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hx-slide-box p {
    color: #e7fffb;
    font-size: clamp(.95rem, 2.2vw, 1.15rem);
    margin: .7rem 0 1.3rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.carousel-item.active .hx-slide-box h2 { animation: hx-cap-up .7s ease .15s backwards; }
.carousel-item.active .hx-slide-box p { animation: hx-cap-up .7s ease .3s backwards; }
.carousel-item.active .hx-slide-box .hx-btn { animation: hx-cap-up .7s ease .45s backwards; }
@keyframes hx-cap-up {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: none; }
}
.hx-slider .carousel-indicators { margin-bottom: 4.6rem; z-index: 5; }
.hx-slider .carousel-indicators button {
    width: 26px; height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    border: 0;
    transition: width .25s;
}
.hx-slider .carousel-indicators button.active { width: 44px; background: #fff; }
.hx-slider .carousel-control-prev, .hx-slider .carousel-control-next {
    width: 52px; height: 52px;
    top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    margin: 0 1rem;
    opacity: .85;
    transition: background .2s;
}
.hx-slider .carousel-control-prev:hover, .hx-slider .carousel-control-next:hover { background: rgba(255, 255, 255, .32); }
@media (max-width: 767px) {
    .hx-slider .carousel-control-prev, .hx-slider .carousel-control-next { display: none; }
}

/* ---- partners marquee ---- */
.hx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hx-marquee-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: hx-marquee 28s linear infinite;
    will-change: transform;
}
.hx-marquee:hover .hx-marquee-track { animation-play-state: paused; }
@keyframes hx-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hx-marquee-track { animation: none; }
    .hx-slide-img { animation: none; }
}

/* ---- navbar scroll state + back to top ---- */
.hx-navbar.scrolled { box-shadow: 0 8px 28px rgba(15, 23, 42, .1); background: rgba(255, 255, 255, .97); }
.hx-totop {
    position: fixed;
    bottom: 84px;
    inset-inline-end: 18px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--hx-primary);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 8px 22px rgba(15, 159, 186, .4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all .25s;
    z-index: 1045;
}
.hx-totop.show { opacity: 1; pointer-events: auto; transform: none; }
@media (min-width: 992px) { .hx-totop { bottom: 24px; inset-inline-end: 92px; } }

/* ---- event cards ---- */
.hx-evt-card { display: flex; flex-direction: column; padding: 0; color: var(--hx-ink); overflow: hidden; }
.hx-evt-card:hover { color: var(--hx-ink); }
.hx-evt-inner { display: flex; gap: 1rem; padding: 1.15rem 1.2rem; align-items: flex-start; flex: 1; }
.hx-evt-photo { display: block; width: 100%; aspect-ratio: 16 / 9; }
.hx-evt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-evt-date {
    flex-shrink: 0;
    width: 62px;
    border-radius: 14px;
    background: var(--hx-grad);
    color: #fff;
    text-align: center;
    padding: .5rem 0 .6rem;
    box-shadow: 0 6px 16px rgba(15, 159, 186,.3);
}
.hx-evt-date b { display: block; font-size: 1.4rem; line-height: 1.1; }
.hx-evt-date span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hx-evt-card .t { font-weight: 700; display: block; margin-bottom: .2rem; }
.hx-evt-card .meta { font-size: .8rem; color: var(--hx-muted); }
.hx-evt-card .meta .bi { margin-inline-end: .25rem; }
.hx-evt-featured {
    display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
    background: #fef3c7; color: #b45309; border-radius: 999px; padding: .15rem .6rem; margin-bottom: .3rem;
}

/* ---- checkup package (pricing) cards ---- */
.hx-pkg-card { position: relative; padding: 1.6rem 1.5rem; display: flex; flex-direction: column; }
.hx-pkg-card.popular { border: 2px solid var(--hx-primary); box-shadow: 0 14px 44px rgba(15, 159, 186,.18); }
.hx-pkg-pop {
    position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(-50%);
    background: var(--hx-grad); color: #fff; font-size: .72rem; font-weight: 800;
    border-radius: 999px; padding: .25rem .9rem; white-space: nowrap;
}
[dir="rtl"] .hx-pkg-pop { transform: translateX(50%); }
.hx-pkg-card .ic {
    width: 52px; height: 52px; border-radius: 14px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .9rem;
}
.hx-pkg-price { font-size: 1.9rem; font-weight: 800; color: var(--hx-primary-ink); }
.hx-pkg-price small { font-size: .9rem; color: var(--hx-muted); font-weight: 600; }
.hx-pkg-list { list-style: none; padding: 0; margin: 1rem 0 1.4rem; flex: 1; }
.hx-pkg-list li {
    padding: .32rem 0; font-size: .9rem; color: var(--hx-ink-2);
    display: flex; gap: .5rem; align-items: flex-start;
}
.hx-pkg-list li::before {
    content: "\F26E"; font-family: "bootstrap-icons";
    color: var(--hx-primary); font-size: 1rem; line-height: 1.4;
}

/* ---- testimonials (scroll-snap row) ---- */
.hx-ts-row {
    display: flex; gap: 1rem; overflow-x: auto; padding: .4rem .2rem 1rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hx-ts-row::-webkit-scrollbar { height: 6px; }
.hx-ts-row::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.hx-ts-card {
    scroll-snap-align: start;
    flex: 0 0 320px; max-width: 86vw;
    background: #fff; border: 1px solid rgba(226,232,240,.7);
    border-radius: var(--hx-radius); box-shadow: var(--hx-shadow);
    padding: 1.3rem 1.4rem;
}
.hx-ts-stars { color: #f59e0b; margin-bottom: .5rem; }
.hx-ts-card p { font-size: .92rem; color: var(--hx-ink-2); }
.hx-ts-who { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; }
.hx-ts-who b { display: block; font-size: .92rem; }
.hx-ts-who span { font-size: .78rem; color: var(--hx-muted); }

/* ---- partners strip ---- */
.hx-partner-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--hx-line); border-radius: 12px;
    padding: .6rem 1.1rem; font-weight: 700; color: var(--hx-ink-2); margin: .3rem;
}
.hx-partner-chip img { height: 28px; }

/* ---- FAQ accordion theming ---- */
.hx-faq .accordion-item {
    border: 1px solid rgba(226,232,240,.8); border-radius: 14px !important;
    margin-bottom: .7rem; overflow: hidden; box-shadow: var(--hx-shadow);
}
.hx-faq .accordion-button { font-weight: 700; background: #fff; }
.hx-faq .accordion-button:not(.collapsed) { background: var(--hx-primary-soft); color: var(--hx-primary-ink); box-shadow: none; }
.hx-faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(25, 182, 208,.15); }

/* RTL niceties: flip the "go" arrow */
[dir="rtl"] .bi-arrow-right::before { content: "\F12C"; } /* arrow-left glyph */

@media print {
    .hx-emgbar, .hx-navbar, .hx-topbar, .hx-footer { display: none !important; }
}

/* ============================================================
   Mobile refinements — most visitors arrive on a phone
   ============================================================ */
/* Sideways drift is clipped, but with "clip" rather than "hidden": "hidden" turns the
   page into a scroll container, which silently stops the sticky header from sticking.
   "hidden" stays first as the fallback for older browsers. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}
img, video, iframe, table { max-width: 100%; }

@media (max-width: 767px) {
    /* tighter vertical rhythm so pages aren't endless */
    .hx-section { padding: 2.6rem 0; }
    .hx-section.tight { padding: 2rem 0; }
    .hx-title { font-size: 1.35rem; }
    .hx-sub { font-size: .92rem; }

    /* hero / slider */
    .hx-hero { padding: 2.6rem 0 5.5rem; }
    .hx-slider .carousel-item { height: clamp(320px, 62vh, 430px); }
    .hx-slide-box { padding-bottom: 3.2rem; }
    .hx-slide-box p { margin: .5rem 0 1rem; }
    .hx-slider .carousel-indicators { margin-bottom: 3.4rem; }

    /* quick actions */
    .hx-quick { margin-top: -3.2rem; }
    .hx-quick-card { padding: 1rem 1.05rem; }
    .hx-quick-card .ic { width: 46px; height: 46px; font-size: 1.25rem; border-radius: 13px; }

    /* cards */
    .hx-dept-card { min-height: 0; padding: 1.15rem 1rem 1rem; }
    .hx-dept-card .ic { width: 46px; height: 46px; font-size: 1.25rem; margin-bottom: .7rem; }
    .hx-dept-card b { font-size: .97rem; }
    .hx-dept-card p { -webkit-line-clamp: 2; font-size: .82rem; }
    .hx-dept-card .go { padding-top: .7rem; }
    .hx-svc-card { padding: 1rem; gap: .8rem; }
    .hx-evt-inner { padding: 1rem; }
    .hx-news-body, .hx-doc-body { padding: .85rem .9rem 1rem; }

    /* pricing + testimonials */
    .hx-pkg-card { padding: 1.3rem 1.15rem; }
    .hx-pkg-price { font-size: 1.6rem; }
    .hx-ts-card { flex-basis: 84vw; padding: 1.1rem 1.15rem; }

    /* inner page headers */
    .hx-pagehero { padding: 2rem 0 2.2rem; }
    .hx-pagehero h1 { font-size: 1.45rem; }
    .hx-pagehero p { font-size: .92rem; }

    /* forms are the main mobile task */
    .hx-form-card { padding: 1.15rem 1rem; border-radius: 16px; }
    .form-control, .form-select,
    .form-control-lg, .form-select-lg { font-size: 16px; }  /* stops iOS zooming on focus */
    .form-control-lg, .form-select-lg { padding: .7rem .9rem; }
    .hx-btn { padding: .7rem 1.2rem; }

    /* rich content */
    .hx-prose { font-size: .98rem; }
    .hx-prose img { border-radius: 10px; margin: .9rem auto; }
    .hx-prose h1 { font-size: 1.3rem; }
    .hx-prose h2 { font-size: 1.2rem; }
    .hx-prose h3 { font-size: 1.08rem; }
    [dir="rtl"] .hx-prose { font-size: 1.04rem; line-height: 1.95; }

    /* CTA + stats */
    .hx-cta { padding: 1.6rem 1.2rem; }
    .hx-cta::after { font-size: 7rem; bottom: -22px; }
    .hx-stats { padding: 1.4rem .5rem; }
    .hx-stat .num { font-size: 1.5rem; }
    .hx-stat .lbl { font-size: .76rem; }

    /* brand + chrome */
    .hx-logo { height: 34px; }
    .hx-footer { padding: 2.4rem 0 1rem; margin-top: 2.5rem; }
    .hx-announce { font-size: .78rem; }
    .hx-announce .tag { display: none; }
    .hx-totop { bottom: 78px; }
}

/* very small phones */
@media (max-width: 400px) {
    .hx-title { font-size: 1.22rem; }
    .hx-dept-card p { display: none; }
    .hx-quick-card span span { font-size: .76rem; }
}

/* admin tables scroll instead of breaking the layout on a phone */
@media (max-width: 767px) {
    .adm-main { padding: 1rem .8rem; }
    .adm-card { padding: 1rem .9rem; border-radius: 14px; }
    .adm-top { flex-wrap: wrap; gap: .6rem; }
    .rich-host .ql-editor { min-height: 150px; }
}

/* ---- department card with photo ---- */
.hx-dept-card.has-photo { padding: 0; overflow: hidden; }
.hx-dept-card .hx-dept-photo {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--hx-primary-soft);
}
.hx-dept-card .hx-dept-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.hx-dept-card:hover .hx-dept-photo img { transform: scale(1.06); }
.hx-dept-card .hx-dept-count {
    position: absolute;
    inset-inline-end: .55rem;
    bottom: .55rem;
    background: rgba(10, 58, 70, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .15rem .6rem;
    backdrop-filter: blur(4px);
}
.hx-dept-card.has-photo .hx-dept-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* bottom padding matches the plain card's 1.25rem so the "Details" link
       lands on the same line whether or not the department has a photo */
    padding: 1.15rem 1.2rem 1.25rem;
    position: relative;
}
/* the icon overlaps the photo edge on photo cards */
.hx-dept-card.has-photo .ic {
    position: absolute;
    top: -26px;
    inset-inline-start: 1.2rem;
    width: 48px; height: 48px;
    font-size: 1.3rem;
    border: 3px solid #fff;
    margin: 0;
}
.hx-dept-card.has-photo b { margin-top: 1.5rem; }
.hx-dept-card:not(.has-photo) .hx-dept-body { display: flex; flex-direction: column; flex: 1; }
@media (max-width: 767px) {
    .hx-dept-card.has-photo .hx-dept-body { padding: .95rem 1rem 1rem; }
    .hx-dept-card.has-photo .ic { width: 42px; height: 42px; font-size: 1.15rem; top: -22px; }
    .hx-dept-card.has-photo b { margin-top: 1.25rem; }
}

/* ---- department gallery on the detail page ---- */
.hx-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.hx-gallery a {
    display: block; aspect-ratio: 4/3; overflow: hidden;
    border-radius: 14px; box-shadow: var(--hx-shadow);
}
.hx-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hx-gallery a:hover img { transform: scale(1.05); }

/* ============================================================
   Searchable select (combo box) — used for long lists such as
   the 37 clinics on the doctors page. Becomes a bottom sheet on
   phones so it stays usable with one thumb.
   ============================================================ */
.hx-filterbar { position: relative; }

.hx-combo { position: relative; }

.hx-combo-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; text-align: start; background: #fff; cursor: pointer;
    border: 1px solid var(--hx-line, #dbe4e8); font-size: .95rem;
}
.hx-combo-toggle:focus { outline: 2px solid var(--hx-primary, #0F9FBA); outline-offset: 1px; }
.hx-combo-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-combo.open .hx-combo-toggle { border-color: var(--hx-primary, #0F9FBA); }
.hx-combo.open .hx-combo-toggle .bi-chevron-down { transform: rotate(180deg); }
.hx-combo-toggle .bi-chevron-down { transition: transform .2s ease; flex-shrink: 0; opacity: .6; }

.hx-combo-menu {
    position: absolute; z-index: 60; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + .35rem);
    background: #fff; border: 1px solid var(--hx-line, #dbe4e8); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(10, 58, 70, .18); padding: .5rem; overflow: hidden;
}
.hx-combo-search { margin-bottom: .4rem; border-radius: 9px; }
.hx-combo-list { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* not enough room under the field — combo.js flips the menu above it */
.hx-combo.drop-up .hx-combo-menu { top: auto; bottom: calc(100% + .35rem); }

.hx-combo-item {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    background: none; border: 0; border-radius: 10px; padding: .6rem .7rem;
    font-size: .92rem; font-weight: 600; color: var(--hx-ink, #0A3A46); text-align: start;
}
.hx-combo-item:hover, .hx-combo-item:focus { background: rgba(15, 159, 186, .09); }
.hx-combo-item.active { background: var(--hx-primary, #0F9FBA); color: #fff; }
.hx-combo-item.active i, .hx-combo-item.active small { color: #fff !important; }
.hx-combo-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-combo-item small {
    background: rgba(10, 58, 70, .08); border-radius: 20px; padding: .05rem .45rem;
    font-size: .72rem; flex-shrink: 0;
}

/* active filter chips */
.hx-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(15, 159, 186, .12); color: var(--hx-deep, #0B6E82);
    border-radius: 20px; padding: .3rem .75rem; font-size: .84rem; font-weight: 700;
}
.hx-chip-clear {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--hx-line, #dbe4e8); color: #64748b;
    border-radius: 20px; padding: .3rem .75rem; font-size: .84rem; font-weight: 700;
}
.hx-chip-clear:hover { background: #f1f5f9; color: var(--hx-ink, #0A3A46); }

@media (max-width: 767.98px) {
    body.hx-combo-open { overflow: hidden; }
    .hx-combo.open .hx-combo-menu {
        position: fixed; inset: auto 0 0 0; top: auto; max-height: 72vh;
        border-radius: 20px 20px 0 0; padding: .8rem .7rem calc(.8rem + env(safe-area-inset-bottom));
        box-shadow: 0 -14px 50px rgba(10, 58, 70, .3); animation: hxSheetUp .22s ease;
    }
    .hx-combo.open .hx-combo-list { max-height: 56vh; }
    .hx-combo.open::after {
        content: ""; position: fixed; inset: 0; background: rgba(10, 58, 70, .45); z-index: 55;
    }
    .hx-combo.open .hx-combo-menu { z-index: 56; }
    .hx-combo-item { padding: .75rem .7rem; font-size: .95rem; }
}

@keyframes hxSheetUp { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---- service card with a photo (admin-uploaded) ---- */
.hx-svc-card.has-photo {
    display: block; padding: 0; overflow: hidden; position: relative;
}
.hx-svc-photo { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--hx-primary-soft); }
.hx-svc-photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.hx-svc-card.has-photo:hover .hx-svc-photo img { transform: scale(1.06); }
.hx-svc-card.has-photo .ic {
    position: absolute; inset-inline-start: 1rem; top: calc(56.25% - 25px);
    background: #fff; color: var(--hx-primary);
    box-shadow: 0 6px 18px rgba(10, 58, 70, .18);
}
.hx-svc-card.has-photo .hx-svc-body { display: block; padding: 1.6rem 1.15rem 1.2rem; }
.hx-svc-card.has-photo .hx-svc-body b { font-size: 1rem; }

/* ============================================================
   Find-a-doctor bar — sits under the hero on the homepage.
   ============================================================ */
.hx-findbar { position: relative; z-index: 4; padding: 2.4rem 0 .3rem; }
.hx-findbox {
    background: #fff; border-radius: 20px; padding: 1.15rem 1.25rem;
    box-shadow: 0 14px 44px rgba(10, 58, 70, .14); border: 1px solid var(--hx-line, #e6eef1);
}
.hx-findbox-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.hx-findbox-head .ic {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    background: var(--hx-grad, linear-gradient(135deg, #0F9FBA, #19B6D0)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.hx-findbox-head b { display: block; font-size: 1.02rem; line-height: 1.2; }
.hx-findbox-head small { color: var(--hx-muted, #64748b); font-size: .84rem; }
.hx-findbox-fields { display: grid; grid-template-columns: 1.4fr 1.1fr auto; gap: .6rem; }
.hx-findbox-fields .hx-btn { padding-inline: 1.4rem; }

@media (max-width: 767.98px) {
    .hx-findbar { padding-top: 1.5rem; }
    .hx-findbox { padding: 1rem; border-radius: 16px; }
    .hx-findbox-fields { grid-template-columns: 1fr; }
    .hx-findbox-fields .hx-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Health-library category tiles
   ============================================================ */
.hx-cat-grid {
    display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.hx-cat-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
    background: #fff; border: 1px solid var(--hx-line, #e6eef1); border-radius: 16px;
    padding: 1.1rem .7rem; color: var(--hx-ink, #0A3A46); position: relative; overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.hx-cat-tile::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cat, #0F9FBA);
    transform: scaleX(0); transform-origin: center; transition: transform .3s ease;
}
.hx-cat-tile:hover {
    transform: translateY(-4px); border-color: var(--cat, #0F9FBA);
    box-shadow: 0 12px 28px rgba(10, 58, 70, .12); color: var(--hx-ink, #0A3A46);
}
.hx-cat-tile:hover::before { transform: scaleX(1); }
.hx-cat-tile .ic {
    width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--cat, #0F9FBA); background: color-mix(in srgb, var(--cat, #0F9FBA) 12%, #fff);
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.hx-cat-tile:hover .ic { transform: scale(1.08) rotate(-4deg); }
.hx-cat-tile b { font-size: .88rem; line-height: 1.3; }
.hx-cat-tile small {
    font-size: .72rem; color: var(--hx-muted, #64748b);
    background: rgba(10, 58, 70, .06); border-radius: 20px; padding: .05rem .5rem;
}

/* category badge on news cards */
.hx-news-cover { position: relative; }
.hx-news-cat {
    position: absolute; inset-inline-start: .7rem; bottom: .7rem;
    display: inline-flex; align-items: center; gap: .3rem;
    color: #fff; font-size: .72rem; font-weight: 700;
    border-radius: 20px; padding: .2rem .6rem;
    box-shadow: 0 4px 12px rgba(10, 58, 70, .25);
}

/* ============================================================
   Feedback form: star rating + choice chips
   ============================================================ */
.hx-stars { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.hx-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.hx-stars label {
    font-size: 1.9rem; color: #dbe4e8; cursor: pointer; line-height: 1;
    transition: transform .15s ease, color .15s ease;
}
.hx-stars label:hover, .hx-stars label:hover ~ label,
.hx-stars input:checked ~ label { color: #F5A623; }
.hx-stars label:hover { transform: scale(1.15); }
.hx-stars input:focus-visible + label { outline: 2px solid var(--hx-primary, #0F9FBA); border-radius: 4px; }

.hx-choice { cursor: pointer; }
.hx-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.hx-choice span {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--hx-line, #dbe4e8); border-radius: 30px;
    padding: .5rem 1rem; font-size: .9rem; font-weight: 600;
    color: var(--hx-ink, #0A3A46); background: #fff; transition: all .18s ease;
}
.hx-choice input:checked + span {
    background: var(--hx-primary, #0F9FBA); border-color: var(--hx-primary, #0F9FBA); color: #fff;
}
.hx-choice input:focus-visible + span { outline: 2px solid var(--hx-primary, #0F9FBA); outline-offset: 2px; }

/* side links used on custom pages */
.hx-sidelink {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .7rem; border-radius: 11px; font-weight: 600; font-size: .9rem;
    color: var(--hx-ink, #0A3A46); transition: background .18s ease, color .18s ease;
}
.hx-sidelink:hover { background: rgba(15, 159, 186, .1); color: var(--hx-primary, #0F9FBA); }
.hx-sidelink i { color: var(--hx-primary, #0F9FBA); flex-shrink: 0; }
.hx-sidelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- richer doctor profile ---- */
.hx-doc-card .quals {
    display: block; font-size: .76rem; color: var(--hx-muted, #64748b);
    margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-doc-quals {
    font-size: .82rem; font-weight: 700; color: var(--hx-deep, #0B6E82);
    background: rgba(15, 159, 186, .1); border-radius: 8px;
    padding: .3rem .55rem; margin-bottom: .5rem; line-height: 1.4;
}
.hx-doc-meta {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .88rem; padding: .5rem 0; border-bottom: 1px solid var(--hx-line, #eef3f5);
}
.hx-doc-meta:last-child { border-bottom: 0; }
.hx-doc-meta i { color: var(--hx-primary, #0F9FBA); font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.hx-doc-meta b { font-size: .78rem; color: var(--hx-muted, #64748b); font-weight: 700; }

/* checklist used for special interests and package contents */
.hx-check-list { list-style: none; padding: 0; margin: 0; }
.hx-check-list li {
    position: relative; padding-inline-start: 1.6rem; margin-bottom: .45rem; font-size: .92rem;
}
.hx-check-list li::before {
    content: "\F26E"; font-family: "bootstrap-icons"; position: absolute;
    inset-inline-start: 0; color: var(--hx-primary, #0F9FBA); font-size: .95rem;
}

/* patient photo inside testimonial avatars */
.hx-avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* optional package photo */
.hx-pkg-photo {
    display: block; margin: -1.6rem -1.5rem 1rem; overflow: hidden;
    border-radius: var(--hx-radius, 18px) var(--hx-radius, 18px) 0 0; aspect-ratio: 16/9;
}
.hx-pkg-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Design blocks (dz-*) — content built with the admin page
   designer. Fully responsive; RTL-safe via logical properties.
   ============================================================ */
.dz-b { margin: 0 0 1.4rem; }
.dz-b:last-child { margin-bottom: 0; }

.dz-heading h3 {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 800; font-size: 1.25rem; margin: 0;
    padding-bottom: .5rem; border-bottom: 2px solid rgba(15, 159, 186, .18);
}
.dz-heading i { color: var(--hx-primary, #0F9FBA); }

.dz-image { margin-inline: auto; text-align: center; }
.dz-image img { max-width: 100%; border-radius: 14px; }
.dz-image.dz-w-70 { max-width: 70%; }
.dz-image.dz-w-50 { max-width: 50%; }
.dz-image figcaption { font-size: .82rem; color: var(--hx-muted, #64748b); margin-top: .4rem; }

.dz-imagetext { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.3rem; align-items: center; }
.dz-imagetext.dz-media-end { grid-template-columns: 1.25fr 1fr; }
.dz-imagetext.dz-media-end .dz-media { order: 2; }
.dz-imagetext .dz-media img { width: 100%; border-radius: 14px; }

.dz-gallery { display: grid; gap: .7rem; grid-template-columns: repeat(3, 1fr); }
.dz-gallery.dz-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dz-gallery.dz-cols-4 { grid-template-columns: repeat(4, 1fr); }
.dz-gallery .dz-g { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.dz-gallery img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.dz-gallery .dz-g:hover img { transform: scale(1.06); }

.dz-slider .carousel { border-radius: 14px; overflow: hidden; }
.dz-slider .carousel-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

.dz-video .dz-frame {
    position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #0f172a;
}
.dz-video iframe, .dz-video video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.dz-features { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }
.dz-features.dz-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dz-features.dz-cols-4 { grid-template-columns: repeat(4, 1fr); }
.dz-feat {
    background: #fff; border: 1px solid var(--hx-line, #e6eef1); border-radius: 14px;
    padding: 1rem .9rem; text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.dz-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(10, 58, 70, .1); }
.dz-feat .ic {
    width: 46px; height: 46px; border-radius: 13px; margin: 0 auto .5rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: var(--hx-primary-soft, rgba(15,159,186,.12)); color: var(--hx-primary, #0F9FBA);
}
.dz-feat b { display: block; font-size: .92rem; margin-bottom: .25rem; }
.dz-feat p { font-size: .82rem; color: var(--hx-muted, #64748b); margin: 0; }

.dz-btnrow { display: flex; }
.dz-btnrow.dz-align-center { justify-content: center; }
.dz-btnrow.dz-align-end { justify-content: flex-end; }

.dz-highlight {
    display: flex; gap: .8rem; align-items: flex-start;
    border-radius: 14px; padding: 1rem 1.1rem;
    background: rgba(15, 159, 186, .08); border-inline-start: 4px solid var(--hx-primary, #0F9FBA);
}
.dz-highlight .ic { font-size: 1.3rem; color: var(--hx-primary, #0F9FBA); flex-shrink: 0; margin-top: .1rem; }
.dz-highlight .dz-body p:last-child { margin-bottom: 0; }
.dz-highlight.dz-hl-success { background: rgba(34, 197, 94, .09); border-color: #16a34a; }
.dz-highlight.dz-hl-success .ic { color: #16a34a; }
.dz-highlight.dz-hl-warn { background: rgba(245, 166, 35, .12); border-color: #F5A623; }
.dz-highlight.dz-hl-warn .ic { color: #d97706; }

.dz-divider { display: flex; align-items: center; justify-content: center; }
.dz-divider.dz-d-line { border-top: 2px solid var(--hx-line, #e6eef1); }
.dz-divider.dz-d-dots { letter-spacing: .8rem; color: var(--hx-primary, #0F9FBA); }
.dz-divider.dz-d-dots::before { content: "• • •"; }
.dz-divider.dz-d-icon span {
    background: #fff; border: 1px solid var(--hx-line, #e6eef1); color: var(--hx-primary, #0F9FBA);
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 767.98px) {
    .dz-imagetext, .dz-imagetext.dz-media-end { grid-template-columns: 1fr; }
    .dz-imagetext.dz-media-end .dz-media { order: 0; }
    .dz-gallery, .dz-gallery.dz-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .dz-features, .dz-features.dz-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .dz-image.dz-w-70, .dz-image.dz-w-50 { max-width: 100%; }
}
@media (max-width: 420px) {
    .dz-features, .dz-features.dz-cols-2, .dz-features.dz-cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Appearance options (Admin → Settings → Appearance).
   Colours and radii arrive as CSS variables; the choices below
   react to classes placed on <body>.
   ============================================================ */
body { font-size: calc(1rem * var(--hx-font-scale, 1)); }

/* --- card style --- */
body.cards-border .hx-card,
body.cards-border .hx-form-card,
body.cards-border .dz-feat {
    box-shadow: none !important;
    border: 1px solid var(--hx-line, #e6eef1);
}
body.cards-flat .hx-card,
body.cards-flat .hx-form-card,
body.cards-flat .dz-feat {
    box-shadow: none !important;
    border: 0;
    background: #f6fafb;
}
body.cards-flat .hx-card:hover { box-shadow: none !important; }

/* --- spacing --- */
body.density-compact .hx-section { padding-block: 2.4rem; }
body.density-compact .hx-card { padding: 1rem; }
body.density-compact .hx-pagehero { padding: 2rem 0 2.2rem; }
body.density-compact .dz-b { margin-bottom: 1rem; }

/* --- animations --- */
body.anim-reduced .reveal { transition-duration: .25s !important; transition-delay: 0ms !important; }
body.anim-reduced .hx-card:hover,
body.anim-reduced .hx-dept-card:hover,
body.anim-reduced .dz-feat:hover { transform: none !important; }
body.anim-off .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body.anim-off .hx-card:hover,
body.anim-off .hx-dept-card:hover,
body.anim-off .dz-feat:hover,
body.anim-off .hx-cat-tile:hover { transform: none !important; }
body.anim-off .hx-marquee-track { animation: none !important; }
body.anim-off .hx-slider .carousel-item img { animation: none !important; }

/* --- heading accent bar --- */
body.heads-plain .hx-title::before,
body.heads-plain .hx-eyebrow::before { display: none !important; }
body.heads-plain .hx-title { padding-inline-start: 0 !important; }

/* --- button shape --- */
.hx-btn { border-radius: var(--hx-btn-radius, 999px); }

/* ============================================================
   Site search + careers
   ============================================================ */
.hx-iconbtn {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hx-primary-soft, rgba(15,159,186,.12)); color: var(--hx-primary, #0F9FBA);
    font-size: 1.05rem; transition: background .18s ease, color .18s ease;
}
.hx-iconbtn:hover { background: var(--hx-primary, #0F9FBA); color: #fff; }

.hx-navsearch { position: relative; }
.hx-navsearch i {
    position: absolute; inset-inline-start: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--hx-muted, #94a3b8); pointer-events: none;
}
.hx-navsearch input {
    width: 100%; border: 1px solid var(--hx-line, #e2e8f0); border-radius: 12px;
    padding: .6rem .8rem; padding-inline-start: 2.2rem; font-size: .92rem;
}
.hx-navsearch input:focus { outline: 2px solid var(--hx-primary, #0F9FBA); border-color: transparent; }

.hx-searchbig {
    display: flex; align-items: center; gap: .5rem; position: relative;
    background: #fff; border-radius: 16px; padding: .45rem .5rem;
    box-shadow: 0 12px 34px rgba(10, 58, 70, .18); max-width: 700px;
}
.hx-searchbig i { color: var(--hx-muted, #94a3b8); margin-inline-start: .6rem; }
.hx-searchbig input {
    flex: 1; border: 0; outline: none; font-size: 1rem; padding: .6rem .3rem; min-width: 0;
    background: transparent; color: var(--hx-ink, #0A3A46);
}

.hx-searchhit {
    display: flex; align-items: center; gap: .75rem;
    background: #fff; border: 1px solid var(--hx-line, #e6eef1); border-radius: 14px;
    padding: .7rem .85rem; color: var(--hx-ink, #0A3A46); height: 100%;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hx-searchhit:hover {
    border-color: var(--hx-primary, #0F9FBA); color: var(--hx-ink, #0A3A46);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 58, 70, .1);
}
.hx-searchhit .ic {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    background: var(--hx-primary-soft, rgba(15,159,186,.12)); color: var(--hx-primary, #0F9FBA);
}
.hx-searchhit img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.hx-searchhit > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hx-searchhit b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-searchhit small { font-size: .78rem; color: var(--hx-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-searchhit .go { color: var(--hx-muted, #cbd5e1); flex-shrink: 0; }

.hx-job-card {
    display: block; height: 100%; background: #fff;
    border: 1px solid var(--hx-line, #e6eef1); border-radius: var(--hx-radius, 18px);
    padding: 1.2rem 1.15rem; color: var(--hx-ink, #0A3A46);
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.hx-job-card:hover {
    transform: translateY(-4px); border-color: var(--hx-primary, #0F9FBA);
    box-shadow: 0 14px 32px rgba(10, 58, 70, .12); color: var(--hx-ink, #0A3A46);
}
.hx-job-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.hx-job-top .ic {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: var(--hx-grad, linear-gradient(135deg,#0F9FBA,#19B6D0)); color: #fff;
}
.hx-job-type {
    font-size: .74rem; font-weight: 700; border-radius: 20px; padding: .2rem .6rem;
    background: rgba(34, 197, 94, .12); color: #15803d;
}
.hx-job-card b { display: block; font-size: 1rem; margin-bottom: .3rem; }
.hx-job-card p { font-size: .86rem; color: var(--hx-muted, #64748b); margin-bottom: .7rem; }
.hx-job-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .78rem; color: var(--hx-muted, #64748b); }
.hx-job-meta i { color: var(--hx-primary, #0F9FBA); }

/* child pages listed on a parent page */
.hx-subpages { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 767.98px) {
    .hx-searchbig { padding: .35rem .4rem; }
    .hx-searchbig input { font-size: 16px; }
    .hx-searchbig .hx-btn { padding-inline: .9rem; }
}

/* ============================================================
   Dark mode. Enabled from Admin → Settings → Appearance:
     auto   → follows the visitor's device
     toggle → adds a switch in the header (choice kept per browser)
   The palette only remaps the neutral tokens; the brand colour
   chosen by the admin stays exactly as it is.
   ============================================================ */
html[data-theme="dark"] {
    --hx-bg: #0d1b20;
    --hx-surface: #13272e;
    --hx-surface-2: #173038;
    --hx-ink: #e6f1f4;
    --hx-muted: #93aab2;
    --hx-line: #23414a;
    --hx-shadow-lg: 0 14px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--hx-bg); color: var(--hx-ink); }
html[data-theme="dark"] .hx-card,
html[data-theme="dark"] .hx-form-card,
html[data-theme="dark"] .dz-feat,
html[data-theme="dark"] .hx-searchhit,
html[data-theme="dark"] .hx-job-card,
html[data-theme="dark"] .hx-cat-tile,
html[data-theme="dark"] .hx-ts-card,
html[data-theme="dark"] .hx-combo-menu,
html[data-theme="dark"] .hx-findbox {
    background: var(--hx-surface);
    border-color: var(--hx-line);
    color: var(--hx-ink);
}
html[data-theme="dark"] .hx-section[style*="background:#fff"],
html[data-theme="dark"] section[style*="background:#fff"] { background: var(--hx-surface-2) !important; }
html[data-theme="dark"] .hx-navbar { background: rgba(19, 39, 46, .92); }
html[data-theme="dark"] .hx-nav-link { color: var(--hx-ink) !important; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .hx-combo-toggle,
html[data-theme="dark"] .hx-searchbig {
    background: var(--hx-surface-2); border-color: var(--hx-line); color: var(--hx-ink);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--hx-muted); }
html[data-theme="dark"] .hx-combo-item { color: var(--hx-ink); }
html[data-theme="dark"] .hx-mobilebar { background: rgba(19, 39, 46, .96); border-color: var(--hx-line); }
html[data-theme="dark"] .hx-prose, html[data-theme="dark"] .hx-prose * { color: var(--hx-ink); }
html[data-theme="dark"] .text-muted { color: var(--hx-muted) !important; }
html[data-theme="dark"] img.hx-logo { filter: brightness(0) invert(1); }

/* theme switch in the header */
.hx-themebtn { display: none; }
body.dark-toggle .hx-themebtn { display: inline-flex; }
.hx-themebtn .bi-moon-stars { display: inline; }
.hx-themebtn .bi-sun { display: none; }
html[data-theme="dark"] .hx-themebtn .bi-moon-stars { display: none; }
html[data-theme="dark"] .hx-themebtn .bi-sun { display: inline; }

/* --- optional chrome, switched off from settings --- */
body.hdr-static .hx-navbar { position: static !important; }
body.no-topbar .hx-topbar { display: none !important; }
body.no-bottombar .hx-mobilebar { display: none !important; }
body.no-bottombar { padding-bottom: 0 !important; }
body.no-totop .hx-totop { display: none !important; }
body.no-crumbs .hx-breadcrumb { display: none !important; }

/* cookie notice */
.hx-cookie {
    position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 1080;
    max-width: 560px; margin-inline: auto;
    background: var(--hx-surface, #fff); color: var(--hx-ink, #0A3A46);
    border: 1px solid var(--hx-line, #e6eef1); border-radius: 16px;
    box-shadow: 0 16px 44px rgba(10, 58, 70, .22);
    padding: 1rem 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    animation: hxSheetUp .3s ease;
}
.hx-cookie p { margin: 0; font-size: .88rem; flex: 1 1 240px; }
@media (max-width: 575px) { .hx-cookie { inset-inline: .6rem; bottom: 78px; } }
body.no-bottombar .hx-cookie { bottom: 1rem; }

/* ============================================================
   Equal-height cards with bottom-aligned footers.
   Trilingual names/summaries wrap to a different number of lines
   per card, which used to leave the clinic badge, the "Details"
   link and the meta rows floating at different heights across a
   row. Each card now fills its grid cell and its last element is
   pushed to the bottom, so those elements line up.
   ============================================================ */
/* Only a card that is the sole occupant of its grid cell stretches to the row
   height. Blanket height:100% made every card in a multi-card column (e.g. the
   doctor sidebar) stretch, leaving large empty gaps. */
.row > [class*="col-"] > *:only-child { flex: 1 1 auto; }

/* doctor card — was display:block, so nothing could pin the badge */
.hx-doc-card { display: flex; flex-direction: column; }
.hx-doc-body { display: flex; flex-direction: column; flex: 1; }
.hx-doc-body .spec { margin-bottom: .35rem; }
.hx-doc-body .dept { margin-top: auto; align-self: flex-start; }

/* department card — "Details →" sits on the bottom line */
.hx-dept-card .go { margin-top: auto; padding-top: .6rem; }
.hx-dept-card .hx-dept-body { display: flex; flex-direction: column; flex: 1; }

/* service card — summary grows, so cards with short text still match */
.hx-svc-card.has-photo .hx-svc-body { display: flex; flex-direction: column; flex: 1; }
.hx-svc-card.has-photo .hx-svc-body p { margin-bottom: 0; }

/* news card — text block already flexes; keep the summary from stretching */
.hx-news-body p { margin-top: .5rem; }

/* checkup package — the price/button block stays at the bottom */
.hx-pkg-card .hx-pkg-foot { margin-top: auto; }

/* job card — meta row (department / location / closing date) aligns */
.hx-job-card { display: flex; flex-direction: column; }
.hx-job-meta { margin-top: auto; padding-top: .5rem; }

/* The grid cell must stretch for height:100% to mean anything. Column direction,
   otherwise a cell holding several cards (e.g. the doctor sidebar) would lay them
   out side by side instead of stacking them. */
.row > [class*="col-"] { display: flex; flex-direction: column; }
.row > [class*="col-"] > .hx-card,
.row > [class*="col-"] > a,
.row > [class*="col-"] > .hx-job-card { width: 100%; }

/* Clinic badge on doctor cards: keep it to one line so every badge is the same
   height and sits on exactly the same row — long clinic names ellipsize. */
.hx-doc-body .dept {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- doctor weekly clinic times ---- */
.hx-sched { list-style: none; padding: 0; margin: 0; }
.hx-sched li {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
    padding: .45rem 0; border-bottom: 1px solid var(--hx-line, #eef3f5); font-size: .87rem;
}
.hx-sched li:last-child { border-bottom: 0; }
.hx-sched .d { font-weight: 700; color: var(--hx-ink, #0A3A46); flex-shrink: 0; }
.hx-sched .t { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.hx-sched .t span { color: var(--hx-primary, #0F9FBA); font-weight: 600; }
.hx-sched .t small { color: var(--hx-muted, #64748b); font-size: .76rem; }
.hx-sched .closed { color: var(--hx-muted, #94a3b8) !important; font-weight: 500 !important; }
.hx-sched li.off .d { color: var(--hx-muted, #94a3b8); font-weight: 600; }
.hx-sched li.today {
    background: var(--hx-primary-soft, rgba(15,159,186,.1));
    border-radius: 8px; padding-inline: .5rem; margin-inline: -.5rem;
}

/* opening summary on the booking form */
.hx-openinfo {
    display: flex; align-items: center; gap: .7rem;
    background: var(--hx-primary-soft, rgba(15,159,186,.1));
    border-radius: 12px; padding: .7rem .9rem;
}
.hx-openinfo i { font-size: 1.2rem; color: var(--hx-primary, #0F9FBA); flex-shrink: 0; }
.hx-openinfo b { display: block; font-size: .9rem; }
.hx-openinfo small { color: var(--hx-muted, #64748b); font-size: .82rem; }

/* ---- Columns block: 2, 3 or 4 columns, each with an image and/or text ---- */
.dz-cols { display: grid; gap: 1.2rem; }
.dz-cols.dz-n-2 { grid-template-columns: repeat(2, 1fr); }
.dz-cols.dz-n-3 { grid-template-columns: repeat(3, 1fr); }
.dz-cols.dz-n-4 { grid-template-columns: repeat(4, 1fr); }
.dz-cols.dz-v-middle { align-items: center; }
.dz-col img { width: 100%; border-radius: 12px; display: block; margin-bottom: .6rem; }
.dz-col-body p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .dz-cols.dz-n-3, .dz-cols.dz-n-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .dz-cols, .dz-cols.dz-n-2, .dz-cols.dz-n-3, .dz-cols.dz-n-4 { grid-template-columns: 1fr; }
}

/* ---- contact chips: a phone number must never break across lines ---- */
.hx-contact-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hx-contact-chip {
    display: inline-block; white-space: nowrap;
    background: var(--hx-primary-soft, rgba(15,159,186,.12));
    color: var(--hx-deep, #0B6E82);
    border-radius: 20px; padding: .18rem .6rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.hx-contact-chip:hover { background: var(--hx-primary, #0F9FBA); color: #fff; }

/* clinic times must stay on one line too */
.hx-sched .t span { white-space: nowrap; }
.hx-sched li { gap: .8rem; }
.hx-sched .d { white-space: nowrap; }

/* the doctor sidebar is narrow — keep its text from splitting awkwardly */
.hx-doc-meta span { min-width: 0; }
.hx-doc-meta a { word-break: keep-all; }

/* Imported bodies contain empty paragraphs that leave big gaps — collapse them. */
.hx-prose p:empty,
.hx-prose div:empty,
.dz-b p:empty { display: none; }
.hx-prose p:has(> br:only-child) { display: none; }

/* Header behaviour, chosen in Admin → Settings → Appearance.
   "hide-on-scroll" slides the bar away while reading and brings it back the
   moment the visitor scrolls up — more room for content on a phone. */
body.hdr-hide-on-scroll .hx-navbar {
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
}
body.hdr-hide-on-scroll.nav-hidden .hx-navbar { transform: translateY(-100%); }
body.anim-off.hdr-hide-on-scroll .hx-navbar { transition: none; }

/* ---- portraits: keep the face, crop from the bottom ----
   object-fit: cover centres the crop, which cut the top of people's heads on the
   tall card ratios. Anchoring to the top keeps the face and trims the chest. */
.hx-doc-photo img,
.hx-searchhit img,
.sort-thumb {
    object-position: top center;
}
/* the detail page has room for the whole portrait, so show it uncropped */
.hx-doc-detail-photo {
    aspect-ratio: auto;
    background: linear-gradient(160deg, #e6f7f5, #eff9fc);
}
.hx-doc-detail-photo img {
    width: 100%; height: auto; max-height: 420px;
    object-fit: contain; object-position: center;
}

/* ============================================================
   Appearance extras (Admin → Settings → Appearance)
   ============================================================ */

/* --- hero background video --- */
.hx-videohero { position: relative; overflow: hidden; min-height: min(70vh, 560px); display: flex; }
.hx-videohero video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.hx-videohero .hx-slide-overlay { z-index: 1; }
.hx-videohero .hx-slide-caption {
    position: relative; z-index: 2;
    display: flex; align-items: center; width: 100%;
}
@media (max-width: 767.98px) { .hx-videohero { min-height: 60vh; } }

/* --- loading screen --- */
.hx-preloader {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--hx-grad, linear-gradient(135deg, #0B6E82, #0F9FBA));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
    transition: opacity .4s ease;
}
.hx-preloader img { max-height: 74px; max-width: 65vw; filter: brightness(0) invert(1); }
.hx-preloader .ring {
    width: 42px; height: 42px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff;
    animation: hxSpin 1s linear infinite;
}
.hx-preloader.done { opacity: 0; pointer-events: none; }
@keyframes hxSpin { to { transform: rotate(360deg); } }

/* --- reading progress bar --- */
.hx-scrollprogress {
    position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0;
    background: var(--hx-grad, linear-gradient(90deg, #0B6E82, #19B6D0));
    z-index: 2000; pointer-events: none;
    transition: width .1s linear;
}

/* --- reveal animation styles --- */
body.reveal-fade .reveal { transform: none; }
body.reveal-zoom .reveal { transform: scale(.94); }
body.reveal-zoom .reveal.in { transform: scale(1); }
body.reveal-none .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* --- gentle pulse on the emergency quick card --- */
body.anim-on .hx-quick-card.danger .ic { animation: hxPulse 2.4s ease-in-out infinite; }
@keyframes hxPulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(220, 38, 38, .3); }
    50% { box-shadow: 0 6px 16px rgba(220, 38, 38, .3), 0 0 0 9px rgba(220, 38, 38, .12); }
}
@media (prefers-reduced-motion: reduce) { .hx-quick-card.danger .ic { animation: none !important; } }

/* --- homepage card grids become swipeable rows on phones --- */
@media (max-width: 575.98px) {
    body.is-home.mrows-scroll .hx-section .row.g-3 {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; scrollbar-width: none;
        /* bleed exactly to the container's edge (12px padding) — anything more
           pushed the whole page 4px sideways on phones */
        padding-bottom: .4rem; margin-inline: -.75rem; padding-inline: .75rem;
    }
    body.is-home.mrows-scroll .hx-section .row.g-3::-webkit-scrollbar { display: none; }
    body.is-home.mrows-scroll .hx-section .row.g-3 > [class*="col-"] {
        flex: 0 0 76%; max-width: 76%; scroll-snap-align: start;
    }
    /* doctors are narrower cards — two fit nicely */
    body.is-home.mrows-scroll .hx-section .row.g-3 > .col-6.col-md-3 {
        flex: 0 0 58%; max-width: 58%;
    }
}

/* --- image lightbox --- */
body.hx-lb-open { overflow: hidden; }
.hx-lb {
    position: fixed; inset: 0; z-index: 2500;
    background: rgba(8, 25, 31, .93);
    display: flex; align-items: center; justify-content: center;
    animation: hxLbIn .2s ease;
}
@keyframes hxLbIn { from { opacity: 0; } to { opacity: 1; } }
.hx-lb figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.hx-lb img {
    max-width: 92vw; max-height: 80vh; border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.hx-lb figcaption { color: #cbe6ec; font-size: .9rem; margin-top: .7rem; }
.hx-lb-close {
    position: absolute; top: .8rem; inset-inline-end: 1rem;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.6rem; line-height: 1;
}
.hx-lb-prev, .hx-lb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.hx-lb-prev { inset-inline-start: .8rem; }
.hx-lb-next { inset-inline-end: .8rem; }
.hx-lb-close:hover, .hx-lb-prev:hover, .hx-lb-next:hover { background: var(--hx-primary, #0F9FBA); }
@media (max-width: 575.98px) {
    .hx-lb-prev, .hx-lb-next { width: 40px; height: 40px; bottom: 1rem; top: auto; transform: none; }
}

/* ============================================================
   Designer: new blocks + alignment options
   ============================================================ */
.dz-heading.dz-align-center h3 { justify-content: center; }
.dz-heading.dz-align-end h3 { justify-content: flex-end; }
.dz-image.dz-al-start { margin-inline-start: 0; }
.dz-image.dz-al-end { margin-inline-end: 0; }
.dz-image.dz-w-33 { max-width: 33%; }

.dz-imagetext.dz-mw-lg { grid-template-columns: 1.35fr 1fr; }
.dz-imagetext.dz-mw-lg.dz-media-end { grid-template-columns: 1fr 1.35fr; }
.dz-imagetext.dz-mw-sm { grid-template-columns: .65fr 1.7fr; }
.dz-imagetext.dz-mw-sm.dz-media-end { grid-template-columns: 1.7fr .65fr; }

.dz-cols.dz-n-2.dz-l-wide-start { grid-template-columns: 1.8fr 1fr; }
.dz-cols.dz-n-2.dz-l-wide-end { grid-template-columns: 1fr 1.8fr; }
.dz-cols.dz-n-3.dz-l-wide-mid { grid-template-columns: 1fr 1.7fr 1fr; }
.dz-col.dz-ca-center { text-align: center; }
.dz-col.dz-ca-center img { margin-inline: auto; }
.dz-col.dz-ca-end { text-align: end; }

/* text alignment picked in the rich-text editor */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* quote */
.dz-quote {
    padding: 1rem 1.25rem;
    background: var(--hx-primary-soft, rgba(15,159,186,.08));
    border-inline-start: 4px solid var(--hx-primary, #0F9FBA);
    border-radius: 12px;
}
.dz-quote p { font-size: 1.05rem; font-style: italic; margin: 0; color: var(--hx-ink, #0A3A46); }
.dz-quote-by { display: block; margin-top: .5rem; font-size: .85rem; font-weight: 700; color: var(--hx-primary, #0F9FBA); }

/* files / downloads */
.dz-files { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.dz-file {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .8rem; border: 1px solid var(--hx-line, #e6eef1); border-radius: 12px;
    background: var(--hx-card, #fff); color: var(--hx-ink, #0A3A46); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.dz-file:hover { border-color: var(--hx-primary, #0F9FBA); box-shadow: 0 6px 18px rgba(15,159,186,.12); color: var(--hx-ink, #0A3A46); }
.dz-file .ic { font-size: 1.35rem; color: var(--hx-primary, #0F9FBA); flex-shrink: 0; }
.dz-file-n { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dz-file-dl { color: var(--hx-muted, #64748b); flex-shrink: 0; }

/* document / PDF shown inside the page (Drive link or an uploaded file) */
.dz-doc { margin-block: 1.1rem; }
.dz-doc-t { font-weight: 700; margin-bottom: .5rem; color: var(--hx-ink, #0A3A46); }
.dz-doc-frame {
    position: relative; border: 1px solid var(--hx-line, #e6eef1); border-radius: 14px;
    overflow: hidden; background: #f6f9fb;
}
.dz-doc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dz-doc-h420 { height: 420px; }
.dz-doc-h560 { height: 560px; }
.dz-doc-h720 { height: 720px; }
.dz-doc-h900 { height: 900px; }
/* A phone cannot usefully read a document in a small frame — and iOS renders only the
   first page of a framed PDF — so below lg the frame is short and the button leads. */
@media (max-width: 991.98px) {
    .dz-doc-frame { height: 320px !important; }
}
/* The selector carries .hx-prose because the article link colour is set there and
   would otherwise paint the label the same cyan as this button's own background. */
.dz-doc-open,
.hx-prose a.dz-doc-open {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem;
    padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600;
    font-size: .9rem; background: var(--hx-primary, #0F9FBA); color: #fff;
}
.dz-doc-open:hover,
.hx-prose a.dz-doc-open:hover { color: #fff; filter: brightness(1.06); }
@media print { .dz-doc-frame { display: none; } }

/* "Opening…" veil over a Google/Office frame, so a slow line never looks broken */
.dz-doc-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .7rem;
    background: #f6f9fb; color: var(--hx-muted, #64748b); font-size: .9rem;
}
.dz-doc-spin {
    width: 30px; height: 30px; border-radius: 50%;
    border: 3px solid rgba(15, 159, 186, .25); border-top-color: var(--hx-primary, #0F9FBA);
    animation: dz-spin .8s linear infinite;
}
@keyframes dz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dz-doc-spin { animation-duration: 2.4s; } }

/* page-by-page PDF reader (files we host: pdf.js draws page 1 as it arrives) */
/* min-height keeps the box visible before the first page is drawn — and an element
   with no height is never "visible", so the loader would never start */
.dz-pdf { margin-block: .4rem; min-height: 120px; }
.dz-pdf-status {
    border: 1px solid var(--hx-line, #e6eef1); border-radius: 14px; padding: 1.4rem 1rem;
    text-align: center; color: var(--hx-muted, #64748b); font-size: .9rem; background: #f6f9fb;
}
.dz-pdf-status.is-error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.dz-pdf-bar {
    display: block; height: 5px; border-radius: 999px; background: rgba(15, 159, 186, .18);
    margin: .7rem auto 0; max-width: 260px; overflow: hidden;
}
.dz-pdf-bar span {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: var(--hx-primary, #0F9FBA); transition: width .2s;
}
.dz-pdf-page {
    border: 1px solid var(--hx-line, #e6eef1); border-radius: 12px; overflow: hidden;
    background: #fff; margin-bottom: .6rem; line-height: 0;
}
.dz-pdf-page canvas { display: block; width: 100%; height: auto; }
.dz-pdf-foot { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.dz-pdf-count { font-size: .85rem; color: var(--hx-muted, #64748b); }
.dz-pdf-more {
    display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--hx-primary, #0F9FBA);
    background: transparent; color: var(--hx-primary, #0F9FBA); border-radius: 999px;
    padding: .45rem 1rem; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.dz-pdf-more:hover { background: var(--hx-primary, #0F9FBA); color: #fff; }
.dz-pdf-more:disabled { opacity: .55; cursor: default; }
@media print { .dz-pdf-foot, .dz-pdf-status { display: none; } }

/* accordion */
.dz-acc { border: 1px solid var(--hx-line, #e6eef1); border-radius: 14px; overflow: hidden; }
.dz-acc-item + .dz-acc-item { border-top: 1px solid var(--hx-line, #e6eef1); }
.dz-acc-q {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    width: 100%; text-align: start; background: none; border: 0;
    padding: .85rem 1rem; font-weight: 700; color: var(--hx-ink, #0A3A46); cursor: pointer;
}
.dz-acc-q:not(.collapsed) { color: var(--hx-primary, #0F9FBA); background: var(--hx-primary-soft, rgba(15,159,186,.06)); }
.dz-acc-q i { transition: transform .2s; flex-shrink: 0; }
.dz-acc-q:not(.collapsed) i { transform: rotate(180deg); }
.dz-acc-a { padding: .3rem 1rem 1rem; color: var(--hx-muted, #475569); }
.dz-acc-a p:last-child { margin-bottom: 0; }

/* map embed */
.dz-map { border-radius: 14px; overflow: hidden; border: 1px solid var(--hx-line, #e6eef1); }
.dz-map iframe { width: 100%; border: 0; display: block; height: 350px; }
.dz-map.dz-mh-250 iframe { height: 250px; }
.dz-map.dz-mh-450 iframe { height: 450px; }

/* spacer (an hr so the empty-paragraph cleaner leaves it alone) */
hr.dz-spacer { border: 0; margin: 0 0 1.4rem; opacity: 1; background: none; }
hr.dz-spacer.dz-sp-s { height: .75rem; }
hr.dz-spacer.dz-sp-m { height: 2rem; }
hr.dz-spacer.dz-sp-l { height: 4rem; }

@media (max-width: 576px) {
    .dz-files { grid-template-columns: 1fr; }
    .dz-cols.dz-n-2.dz-l-wide-start, .dz-cols.dz-n-2.dz-l-wide-end,
    .dz-cols.dz-n-3.dz-l-wide-mid { grid-template-columns: 1fr; }
    .dz-imagetext.dz-mw-lg, .dz-imagetext.dz-mw-sm,
    .dz-imagetext.dz-mw-lg.dz-media-end, .dz-imagetext.dz-mw-sm.dz-media-end { grid-template-columns: 1fr; }
    .dz-image.dz-w-33 { max-width: 60%; }
}

/* ============================================================
   Homepage animation suite — every effect is a Settings choice
   (Appearance tab) and respects Animations on/reduced/off.
   ============================================================ */

/* ---- ambient hero layer (theme_hero_fx) ---- */
.hx-hfx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hx-slide-caption { z-index: 2; }

/* heartbeat line drawing itself along the bottom */
.hx-hfx-ecg svg { position: absolute; inset-inline: 0; bottom: 6px; width: 100%; height: 110px; opacity: .6; }
.hx-hfx-ecg .line {
    fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.85));
    stroke-dasharray: 260 3000;
    animation: hxEcgRun 7s linear infinite;
}
@keyframes hxEcgRun { from { stroke-dashoffset: 260; } to { stroke-dashoffset: -3000; } }
.hx-hero:has(.hx-hfx-ecg) .hx-hero-pulse { display: none; }

/* floating medical shapes: soft plus signs and dots rising */
.hx-hfx-particles span { position: absolute; bottom: -60px; display: block; opacity: 0; }
.hx-hfx-particles .pl { width: 26px; height: 26px; }
.hx-hfx-particles .pl::before, .hx-hfx-particles .pl::after {
    content: ""; position: absolute; background: rgba(255,255,255,.5); border-radius: 4px;
}
.hx-hfx-particles .pl::before { inset-inline-start: 40%; top: 0; width: 20%; height: 100%; }
.hx-hfx-particles .pl::after { top: 40%; inset-inline-start: 0; height: 20%; width: 100%; }
.hx-hfx-particles .dt {
    width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 72%);
}
.hx-hfx-particles span { animation: hxFloatUp 12s linear infinite; }
.hx-hfx-particles span:nth-child(1)  { inset-inline-start: 6%;  animation-duration: 13s; animation-delay: 0s; transform: scale(.8); }
.hx-hfx-particles span:nth-child(2)  { inset-inline-start: 14%; animation-duration: 10s; animation-delay: 3s; }
.hx-hfx-particles span:nth-child(3)  { inset-inline-start: 24%; animation-duration: 15s; animation-delay: 6s; transform: scale(1.2); }
.hx-hfx-particles span:nth-child(4)  { inset-inline-start: 33%; animation-duration: 11s; animation-delay: 1.5s; }
.hx-hfx-particles span:nth-child(5)  { inset-inline-start: 42%; animation-duration: 14s; animation-delay: 8s; transform: scale(.7); }
.hx-hfx-particles span:nth-child(6)  { inset-inline-start: 51%; animation-duration: 9s;  animation-delay: 4.5s; }
.hx-hfx-particles span:nth-child(7)  { inset-inline-start: 60%; animation-duration: 16s; animation-delay: 2s; }
.hx-hfx-particles span:nth-child(8)  { inset-inline-start: 68%; animation-duration: 12s; animation-delay: 7s; transform: scale(1.3); }
.hx-hfx-particles span:nth-child(9)  { inset-inline-start: 76%; animation-duration: 13s; animation-delay: 5s; transform: scale(.85); }
.hx-hfx-particles span:nth-child(10) { inset-inline-start: 84%; animation-duration: 10s; animation-delay: 9s; }
.hx-hfx-particles span:nth-child(11) { inset-inline-start: 91%; animation-duration: 15s; animation-delay: 1s; transform: scale(1.1); }
.hx-hfx-particles span:nth-child(12) { inset-inline-start: 97%; animation-duration: 11s; animation-delay: 6.5s; transform: scale(.75); }
@keyframes hxFloatUp {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: .8; }
    85%  { opacity: .35; }
    100% { transform: translateY(-115vh) rotate(160deg); opacity: 0; }
}

/* aurora: soft light blobs drifting behind the caption */
.hx-hfx-aurora span {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: soft-light;
}
.hx-hfx-aurora span:nth-child(1) {
    width: 46vw; height: 46vw; inset-inline-start: -12%; top: -30%;
    background: radial-gradient(circle, #ffffff, transparent 65%);
    animation: hxAur1 17s ease-in-out infinite alternate;
}
.hx-hfx-aurora span:nth-child(2) {
    width: 38vw; height: 38vw; inset-inline-end: -10%; bottom: -35%;
    background: radial-gradient(circle, var(--hx-accent, #F5A623), transparent 66%);
    animation: hxAur2 21s ease-in-out infinite alternate;
}
.hx-hfx-aurora span:nth-child(3) {
    width: 30vw; height: 30vw; inset-inline-start: 38%; top: 8%;
    background: radial-gradient(circle, var(--hx-primary, #0F9FBA), transparent 62%);
    animation: hxAur1 25s ease-in-out infinite alternate-reverse;
}
@keyframes hxAur1 { from { transform: translate(0,0) scale(1); } to { transform: translate(9%, 14%) scale(1.18); } }
@keyframes hxAur2 { from { transform: translate(0,0) scale(1.15); } to { transform: translate(-10%, -12%) scale(.92); } }

/* ---- hero photo motion + text entrance switches ---- */
body.kb-off .hx-slide-img { animation: none; }
body.hent-off .carousel-item.active .hx-slide-box h2,
body.hent-off .carousel-item.active .hx-slide-box p,
body.hent-off .carousel-item.active .hx-slide-box .hx-btn,
body.hent-off .hx-videohero .hx-slide-box h2,
body.hent-off .hx-videohero .hx-slide-box p,
body.hent-off .hx-videohero .hx-slide-box .hx-btn { animation: none; }
.hx-videohero .hx-slide-box h2 { animation: hx-cap-up .7s ease .15s backwards; }
.hx-videohero .hx-slide-box p { animation: hx-cap-up .7s ease .3s backwards; }
.hx-videohero .hx-slide-box .hx-btn { animation: hx-cap-up .7s ease .45s backwards; }

/* ---- card hover styles (theme_hover_fx) ---- */
body.hov-tilt .hx-card:hover { transform: translateY(-5px) rotate(.6deg) scale(1.012); }
body.hov-tilt .hx-card { transition: transform .25s ease, box-shadow .25s ease; }
body.hov-glow .hx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--hx-primary, #0F9FBA), 0 14px 38px color-mix(in srgb, var(--hx-primary, #0F9FBA) 35%, transparent);
}

/* ---- button shine (theme_btn_fx) ---- */
body.btnfx-shine .hx-btn { position: relative; overflow: hidden; }
body.btnfx-shine .hx-btn::before {
    content: ""; position: absolute; top: 0; height: 100%; width: 40%;
    inset-inline-start: -60%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); pointer-events: none;
}
body.btnfx-shine .hx-btn:hover::before { animation: hxShine .85s ease; }
@keyframes hxShine { to { inset-inline-start: 130%; } }

/* ---- extra reveal styles ---- */
body.reveal-slide .reveal { transform: translateX(-30px); }
body.reveal-slide .reveal.rev-alt { transform: translateX(30px); }
body.reveal-slide .reveal.in { transform: none; }
[dir="rtl"] body.reveal-slide .reveal { transform: translateX(30px); }
[dir="rtl"] body.reveal-slide .reveal.rev-alt { transform: translateX(-30px); }
body.reveal-blur .reveal { transform: none; filter: blur(10px); transition: opacity .6s ease, filter .7s ease; }
body.reveal-blur .reveal.in { filter: none; }

/* ---- every new effect obeys the Animations setting + reduced motion ---- */
body.anim-off .hx-hfx, body.anim-reduced .hx-hfx { display: none; }
body.anim-off .hx-slide-img,
body.anim-off .carousel-item.active .hx-slide-box h2,
body.anim-off .carousel-item.active .hx-slide-box p,
body.anim-off .carousel-item.active .hx-slide-box .hx-btn,
body.anim-off .hx-videohero .hx-slide-box h2,
body.anim-off .hx-videohero .hx-slide-box p,
body.anim-off .hx-videohero .hx-slide-box .hx-btn,
body.anim-off .hx-btn::before { animation: none !important; }
body.anim-off.hov-tilt .hx-card:hover, body.anim-off.hov-glow .hx-card:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    .hx-hfx { display: none; }
    .hx-slide-img, .hx-slide-box h2, .hx-slide-box p, .hx-slide-box .hx-btn, .hx-btn::before { animation: none !important; }
    body.reveal-blur .reveal { filter: none; }
}
@media (max-width: 576px) {
    .hx-hfx-ecg svg { height: 70px; bottom: 40px; }
    .hx-hfx-aurora span { filter: blur(45px); }
}

/* ============================================================
   No-crop media. Uploads are often square posts or tall posters;
   cropping them to 16:9 cut up to half the picture. Instead the
   whole image shows on a blurred copy of itself as the backdrop.
   ============================================================ */
.hx-blurfill {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    filter: blur(18px) saturate(1.05); transform: scale(1.2); opacity: .55;
    pointer-events: none;
}
.hx-evt-photo, .hx-svc-photo, .hx-pkg-photo { position: relative; }
.hx-news-cover img, .hx-evt-photo img, .hx-svc-photo img, .hx-pkg-photo img {
    object-fit: contain; position: relative; z-index: 1;
}
.hx-news-cat { z-index: 2; }

/* details pages: same idea in a bounded frame */
.hx-media-frame {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16 / 9; max-height: 420px;
    border-radius: 16px; overflow: hidden;
    background: var(--hx-primary-soft, #eef7fa);
    margin-bottom: 1.2rem;
}
.hx-media-frame img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: contain;
    border-radius: 0;
}

/* If the hero video file is missing or still loading, the brand gradient shows
   behind the caption instead of a black rectangle. */
.hx-videohero { background: var(--hx-grad); }

/* Card photo frames hold their 16:9 shape no matter how tall the upload is.
   (As flex items their aspect-ratio could be stretched by a tall image's
   intrinsic height — absolutely positioned imgs cannot push the frame.) */
.hx-news-cover, .hx-evt-photo, .hx-svc-photo, .hx-pkg-photo, .hx-media-frame { min-height: 0; overflow: hidden; }
.hx-news-cover img, .hx-evt-photo img, .hx-svc-photo img, .hx-pkg-photo img, .hx-media-frame img {
    position: absolute; inset: 0; width: 100%; height: 100%;
}

/* Card image style (Settings → Appearance): full = whole photo on a blurred
   backdrop; fill = crop the photo to fill the frame. */
body.media-fill .hx-news-cover img, body.media-fill .hx-evt-photo img,
body.media-fill .hx-svc-photo img, body.media-fill .hx-pkg-photo img,
body.media-fill .hx-media-frame img { object-fit: cover; }
body.media-fill .hx-blurfill { display: none; }

/* ============================================================
   Modern footer: brand-aware colours (follow the chosen style),
   CTA banner, split link columns, accent headings.
   ============================================================ */
.hx-footer {
    background: color-mix(in srgb, var(--hx-ink, #0A3A46) 92%, #000);
    color: rgba(255,255,255,.72);
    position: relative; overflow: hidden;
}
.hx-footer::before {
    content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px;
    background: var(--hx-grad);
}
.hx-footer::after {
    content: ""; position: absolute; top: -35%; inset-inline-end: -12%;
    width: 46vw; height: 46vw; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--hx-primary, #0F9FBA) 22%, transparent), transparent 70%);
}
.hx-footer .container { position: relative; z-index: 1; }
.hx-footer a { color: rgba(255,255,255,.72); }
.hx-footer a:hover { color: #fff; }
.hx-footer .f-tag { color: color-mix(in srgb, var(--hx-primary, #0F9FBA) 45%, #fff); }
.hx-footer h6 { position: relative; padding-bottom: .45rem; }
.hx-footer h6::after {
    content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
    width: 26px; height: 2.5px; border-radius: 2px; background: var(--hx-accent, #F5A623);
}
.hx-footer .flnk { transition: color .15s, translate .15s; }
.hx-footer .flnk:hover { translate: 4px 0; }
[dir="rtl"] .hx-footer .flnk:hover { translate: -4px 0; }
.hx-footer .f-contact a { display: flex; align-items: center; gap: .55rem; padding: .24rem 0; }
.hx-footer .f-contact i { color: var(--hx-accent, #F5A623); flex-shrink: 0; }
.hx-footer .copy { color: rgba(255,255,255,.5); }

.hx-footer-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--hx-grad); color: #fff;
    border-radius: var(--hx-radius, 18px);
    padding: 1.15rem 1.5rem; margin-bottom: 2.6rem;
    box-shadow: 0 16px 44px color-mix(in srgb, var(--hx-primary, #0F9FBA) 35%, transparent);
}
.hx-footer-cta b { display: block; font-size: 1.08rem; }
.hx-footer-cta span { opacity: .88; font-size: .86rem; }
@media (max-width: 575px) {
    .hx-footer-cta { justify-content: center; text-align: center; padding: 1rem; margin-bottom: 1.8rem; }
    .hx-footer-cta .hx-btn { width: 100%; justify-content: center; }
}

/* booking ticket number on the confirmation page */
.hx-ticket {
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
    background: var(--hx-primary-soft, #dff5fa); border: 2px dashed var(--hx-primary, #0F9FBA);
    border-radius: 16px; padding: .7rem 1.6rem; margin: 0 auto 1rem;
}
.hx-ticket span { font-size: .78rem; font-weight: 700; color: var(--hx-primary-ink, #0B6E82); letter-spacing: .03em; }
.hx-ticket b { font-size: 2.2rem; line-height: 1.1; color: var(--hx-primary, #0F9FBA); }

/* ============================================================
   Appointment form: tap-friendly time chips and doctor picker
   ============================================================ */
.hx-times {
    display: flex; flex-wrap: wrap; gap: .4rem;
    max-height: 190px; overflow-y: auto; padding: .15rem;
}
.hx-time {
    border: 1.5px solid var(--hx-line, #e1ebef); background: #fff;
    color: var(--hx-ink, #16232b); font-weight: 700; font-size: .92rem;
    border-radius: 12px; padding: .5rem .8rem; min-width: 72px; cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.hx-time:hover { border-color: var(--hx-primary, #0F9FBA); }
.hx-time.active {
    background: var(--hx-primary, #0F9FBA); border-color: var(--hx-primary, #0F9FBA); color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--hx-primary, #0F9FBA) 35%, transparent);
}

/* doctor picker rows: name on top, specialty underneath */
.hx-docpick .hx-combo-item { flex-direction: column; align-items: flex-start; gap: .1rem; }
.hx-docpick .hx-combo-item span { font-weight: 700; }
.hx-docpick .hx-combo-item small { color: var(--hx-muted, #6b8089); font-size: .78rem; }
.hx-docpick .hx-combo-item.in-dept { background: var(--hx-primary-soft, #dff5fa); }
.hx-docpick .hx-combo-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: start; }
.hx-docpick .hx-combo-toggle span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Nothing inside the booking form may reach past the screen edge on a phone. */
.hx-form-card { max-width: 100%; overflow-x: clip; }
.hx-form-card .form-control,
.hx-form-card .form-select,
.hx-form-card .hx-combo,
.hx-form-card .hx-combo-toggle { max-width: 100%; }
.hx-form-card input[type="date"] { min-width: 0; }

@media (max-width: 576px) {
    .hx-time { flex: 1 1 auto; min-width: 84px; padding: .6rem .5rem; }   /* bigger tap targets */
    .hx-times { max-height: 240px; }
}

/* available-day chips under the date field */
.hx-days { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem .15rem .15rem; scroll-snap-type: x proximity; }
.hx-day {
    flex: 0 0 auto; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; line-height: 1.15;
    border: 1.5px solid var(--hx-line, #e1ebef); background: #fff; color: var(--hx-ink, #16232b);
    border-radius: 12px; padding: .4rem .55rem; min-width: 56px; cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.hx-day span { font-size: .68rem; font-weight: 700; color: var(--hx-muted, #6b8089); text-transform: uppercase; }
.hx-day b { font-size: 1.05rem; }
.hx-day small { font-size: .64rem; color: var(--hx-muted, #6b8089); }
.hx-day:hover { border-color: var(--hx-primary, #0F9FBA); }
.hx-day.active { background: var(--hx-primary, #0F9FBA); border-color: var(--hx-primary, #0F9FBA); color: #fff; }
.hx-day.active span, .hx-day.active small { color: rgba(255,255,255,.85); }

/* ============================================================
   Booking calendar — only bookable days can be tapped
   ============================================================ */
.hx-cal {
    border: 1.5px solid var(--hx-line, #e1ebef); border-radius: 16px;
    padding: .6rem .65rem .5rem; background: #fff; max-width: 100%;
}
.hx-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.hx-cal-head b { font-size: .95rem; font-weight: 800; color: var(--hx-ink, #16232b); }
.hx-cal-nav {
    border: 1px solid var(--hx-line, #e1ebef); background: #fff; color: var(--hx-ink-2, #3d5059);
    width: 34px; height: 34px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer;
}
.hx-cal-nav:hover:not(:disabled) { border-color: var(--hx-primary, #0F9FBA); color: var(--hx-primary, #0F9FBA); }
.hx-cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.hx-cal-dows, .hx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.hx-cal-dows span {
    text-align: center; font-size: .68rem; font-weight: 700; padding: .2rem 0;
    color: var(--hx-muted, #6b8089); text-transform: uppercase;
}
.hx-cal-cell {
    aspect-ratio: 1; min-height: 38px; border-radius: 10px; border: 1.5px solid transparent;
    background: none; font-size: .88rem; font-weight: 700; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.hx-cal-cell.empty { visibility: hidden; }
/* a day that can be booked */
.hx-cal-cell.free {
    background: var(--hx-primary-soft, #dff5fa); color: var(--hx-primary-ink, #0B6E82); cursor: pointer;
}
.hx-cal-cell.free:hover { border-color: var(--hx-primary, #0F9FBA); }
/* a day that cannot */
.hx-cal-cell.off { color: #c3ced4; cursor: not-allowed; text-decoration: line-through; }
.hx-cal-cell.active {
    background: var(--hx-primary, #0F9FBA); color: #fff; border-color: var(--hx-primary, #0F9FBA);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--hx-primary, #0F9FBA) 35%, transparent);
}
.hx-cal-foot { display: flex; gap: .9rem; justify-content: center; margin-top: .5rem; }
.hx-cal-key { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--hx-muted, #6b8089); }
.hx-cal-key .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hx-cal-key .dot.free { background: var(--hx-primary-soft, #dff5fa); border: 1.5px solid var(--hx-primary, #0F9FBA); }
.hx-cal-key .dot.off { background: #eef2f4; }

@media (max-width: 576px) {
    /* The cell is square, so a fixed min-height also fixes its WIDTH: 42px each
       made seven cells + gaps need 294px, more than the ~279px a 360px Android
       screen offers, and the whole page could be dragged sideways. Let the width
       come from the column and the height follow it — on a 360px screen that is
       still a ~38px tap target. */
    .hx-cal-dows, .hx-cal-grid { gap: 2px; }
    .hx-cal-cell { min-height: 0; font-size: .92rem; }
}

/* confirmation page: appointment time and the admin's own note */
.hx-when {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--hx-surface, #fff); border: 1.5px solid var(--hx-line, #e1ebef);
    border-radius: 14px; padding: .55rem 1.1rem; margin: 0 auto 1rem;
    font-size: 1.05rem; color: var(--hx-ink, #16232b);
}
.hx-when i { color: var(--hx-primary, #0F9FBA); }
.hx-when b { font-weight: 800; }
.hx-when b + b { margin-inline-start: .35rem; }
.hx-success-note {
    max-width: 30rem; margin: 0 auto 1.3rem; padding: .6rem .9rem;
    background: var(--hx-accent-soft, #fff3dc); border-radius: 12px;
    font-size: .9rem; color: var(--hx-ink-2, #3d5059);
}

/* ============================================================
   Checkup packages: discounts, department chip, homepage strip
   ============================================================ */
/* discount badge, opposite corner from the Popular ribbon */
.hx-pkg-off {
    position: absolute; top: -13px; inset-inline-end: 14px;
    background: var(--hx-danger, #dc2626); color: #fff;
    font-size: .78rem; font-weight: 800; letter-spacing: .02em;
    border-radius: 999px; padding: .2rem .65rem;
    box-shadow: 0 6px 16px rgba(220, 38, 38, .35);
}
.hx-pkg-old {
    color: var(--hx-muted, #6b8089); font-size: .95rem; font-weight: 600;
    margin-inline-end: .4rem;
}
.hx-pkg-dept {
    display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start;
    background: var(--hx-primary-soft, #dff5fa); color: var(--hx-primary-ink, #0B6E82);
    font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem;
    margin-bottom: .35rem;
}
.hx-pkg-count {
    color: var(--hx-muted, #6b8089); font-size: .82rem; font-weight: 600;
    margin: .4rem 0 .8rem;
}
.hx-pkg-count i { color: var(--hx-primary, #0F9FBA); margin-inline-end: .25rem; }
.hx-pkg-card.compact { padding: 1.3rem 1.2rem; }
.hx-pkg-card.compact .hx-pkg-price { margin-top: .1rem; }

/* homepage auto-slide: full-width glide of compact cards */
.hx-pkg-marquee .hx-marquee-track { align-items: stretch; animation-duration: 45s; }
.hx-pkg-mcard {
    flex: 0 0 auto; width: 300px; white-space: normal;
    margin-inline-end: 1rem; display: flex;
}
.hx-pkg-mcard .hx-pkg-card { width: 100%; }
@media (max-width: 576px) { .hx-pkg-mcard { width: 260px; } }

/* cards inside a continuously-sliding marquee must never wait for scroll-reveal
   (the duplicated clones are never observed, so they would stay invisible) */
.hx-marquee .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   Mobile polish: always-visible language switch + overflow guards
   ============================================================ */
/* segmented language pills - in the phone navbar and at the top of the menu */
.hx-langbar {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--hx-bg, #f2f7f9); border: 1px solid var(--hx-line, #e1ebef);
    border-radius: 999px; padding: 3px;
}
.hx-langbar a, .hx-langbar strong {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; padding: .22rem .6rem;
    font-size: .8rem; font-weight: 700; line-height: 1.2;
    color: var(--hx-ink-2, #3d5059); text-decoration: none; white-space: nowrap;
}
.hx-langbar strong { background: var(--hx-primary, #0F9FBA); color: #fff; }
.hx-langbar a:active { background: var(--hx-primary-soft, #dff5fa); }
.hx-navbar .hx-langbar { margin-inline-end: .6rem; }
.hx-langbar-menu { align-self: stretch; justify-content: center; }
.hx-langbar-menu a, .hx-langbar-menu strong { flex: 1 1 0; font-size: .88rem; padding: .38rem .6rem; }

/* the booking calendar must always shrink to its column - 1fr tracks cannot
   go below the content minimum without an explicit minmax(0, ...) */
.hx-cal-dows, .hx-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hx-cal-cell { min-width: 0; }
.hx-cal { overflow: hidden; }

/* embedded frames (maps, videos) can carry fixed width attributes - never
   let them push a phone page sideways */
.hx-prose iframe, .dz-map iframe, .dz-video iframe, main iframe { max-width: 100%; }
.hx-prose video, .hx-prose embed, .hx-prose object { max-width: 100%; }

/* long unbroken strings (links, codes) inside content must wrap on phones */
@media (max-width: 576px) {
    .hx-prose { overflow-wrap: break-word; }
    .hx-form-card { min-width: 0; }
}

/* ============================================================
   Share bar + social embeds + package gallery
   ============================================================ */
.hx-share {
    display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
    margin-top: 1.2rem;
}
.hx-share-lbl {
    font-size: .82rem; font-weight: 700; color: var(--hx-muted, #6b8089);
    display: inline-flex; align-items: center; gap: .35rem; margin-inline-end: .2rem;
}
.hx-share-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--hx-line, #e1ebef); background: #fff;
    color: var(--hx-ink-2, #3d5059); font-size: 1.05rem; cursor: pointer;
    transition: transform .12s, color .12s, border-color .12s, background .12s;
    text-decoration: none;
}
.hx-share-btn:hover { transform: translateY(-2px); color: #fff; }
.hx-share-btn.wa:hover { background: #25d366; border-color: #25d366; }
.hx-share-btn.fb:hover { background: #1877f2; border-color: #1877f2; }
.hx-share-btn.tg:hover { background: #229ed9; border-color: #229ed9; }
.hx-share-btn.tw:hover { background: #111; border-color: #111; }
.hx-share-btn.cp:hover, .hx-share-btn.native:hover { background: var(--hx-primary, #0F9FBA); border-color: var(--hx-primary, #0F9FBA); }
.hx-share-done { font-size: .78rem; font-weight: 700; color: var(--hx-primary, #0F9FBA); }

/* social post embeds (designer block) */
.dz-social { margin: 1.4rem auto; max-width: 540px; }
.dz-social .dz-sframe { border-radius: 14px; overflow: hidden; background: var(--hx-bg, #f2f7f9); }
.dz-social iframe { display: block; width: 100%; border: 0; }
.dz-social-youtube .dz-sframe { aspect-ratio: 16 / 9; }
.dz-social-youtube iframe { height: 100%; }
.dz-social-facebook iframe { height: 640px; }
.dz-social-instagram iframe { height: 620px; }
.dz-social-tiktok { max-width: 340px; }
.dz-social-tiktok iframe { height: 740px; }
.dz-social-twitter iframe { height: 620px; }
.dz-social-cap {
    text-align: center; color: var(--hx-muted, #6b8089);
    font-size: .85rem; margin: .5rem 0 0;
}

/* package details extras */
.hx-pkg-title { color: inherit; text-decoration: none; }
.hx-pkg-title:hover { color: var(--hx-primary, #0F9FBA); }
.hx-pkg-photo { position: relative; display: block; }
.hx-pkg-imgcount {
    position: absolute; bottom: 8px; inset-inline-end: 8px; z-index: 2;
    background: rgba(10, 58, 70, .78); color: #fff; font-size: .72rem; font-weight: 700;
    border-radius: 999px; padding: .15rem .55rem;
    display: inline-flex; align-items: center; gap: .3rem;
}
.hx-pkg-gallery a { display: block; }

/* A transformed ancestor (e.g. a mid-reveal card) becomes the containing block
   for position:fixed, which threw the combo bottom-sheet off the screen on
   phones. While any combo is open, neutralise reveal transforms entirely. */
body.hx-combo-open .reveal { transform: none !important; transition: none !important; }

/* ============================================================
   Embedded videos and posts inside article text
   Editors paste embed code straight from Facebook/YouTube/TikTok, and that
   code carries fixed width/height attributes (e.g. a vertical Reel inside a
   700px-tall box). These rules ignore those attributes and give every embed
   the right shape for its platform, on any screen.
   ============================================================ */
.hx-prose iframe {
    max-width: 100%;
    border: 0;
    border-radius: 14px;
    display: block;
    margin-inline: auto;
}
.hx-prose video, .hx-prose embed, .hx-prose object { max-width: 100%; height: auto; border-radius: 14px; }

/* landscape players fill the column at 16:9 */
.hx-prose iframe[src*="youtube.com/embed"],
.hx-prose iframe[src*="youtube-nocookie.com/embed"],
.hx-prose iframe[src*="player.vimeo.com"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* maps */
.hx-prose iframe[src*="google.com/maps"] { width: 100%; aspect-ratio: 16 / 10; height: auto; }

/* Facebook posts and landscape videos: readable column width, not full bleed */
.hx-prose iframe[src*="facebook.com/plugins"] { width: 100%; max-width: 520px; }

/* Vertical formats (Reels, Shorts, TikTok, Instagram) — a 9:16 clip must not
   sit inside a wide black letterbox. Listed last so they win over the rules
   above when both match. */
.hx-prose iframe[src*="instagram.com"],
.hx-prose iframe[src*="tiktok.com/embed"],
.hx-prose iframe[src*="%2Freel%2F"],
.hx-prose iframe[src*="/reel/"],
.hx-prose iframe[src*="%2Fshorts%2F"] {
    width: 100%; max-width: 360px; aspect-ratio: 9 / 16; height: auto;
}
/* Instagram's own frame carries its caption below the picture — it needs a
   taller box than a bare reel. */
.hx-prose iframe[src*="instagram.com"] { max-width: 400px; aspect-ratio: 4 / 5; }

@media (max-width: 480px) {
    .hx-prose iframe[src*="facebook.com/plugins"],
    .hx-prose iframe[src*="instagram.com"],
    .hx-prose iframe[src*="tiktok.com/embed"] { max-width: 100%; }
}

/* empty-section panel (shared _Empty partial) */
.hx-empty { text-align: center; padding: 3rem 1rem; color: var(--hx-muted, #6b8089); }
.hx-empty .ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--hx-primary-soft, #dff5fa); color: var(--hx-primary, #0F9FBA);
    font-size: 1.8rem; margin-bottom: .8rem;
}
.hx-empty p { margin: 0; font-size: .95rem; font-weight: 600; }

/* ============================================================
   Phone overflow guards (360px Android and narrower)
   A Bootstrap .row pulls 12px outwards on each side; a container with less
   side padding lets it escape, and the whole page can then be dragged
   sideways. These containers hold rows directly, so they must absorb it.
   The padding is cancelled by the row's negative margin - nothing moves.
   ============================================================ */
@media (max-width: 767px) {
    .hx-stats { padding-inline: .75rem; }
    .hx-filterbar { padding-inline: .75rem; }
}
/* NOTE: do not "fix" overflow by putting overflow:clip/hidden on sections —
   that makes the section the containing block for position:fixed children and
   throws the doctor picker's bottom sheet off the screen. Fix the source. */

/* ============================================================
   Accessibility helper (Appearance → Accessibility helper)
   ============================================================ */
.hx-a11y { position: fixed; bottom: 24px; inset-inline-start: 24px; z-index: 1051; }
.hx-a11y-btn {
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--hx-primary, #0F9FBA); color: #fff; font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(15, 159, 186, .45);
    transition: transform .15s;
}
.hx-a11y-btn:hover { transform: scale(1.06); }
.hx-a11y-btn:focus-visible { outline: 3px solid var(--hx-accent, #F5A623); outline-offset: 3px; }
.hx-a11y-panel {
    position: absolute; bottom: 62px; inset-inline-start: 0;
    background: #fff; border: 1px solid var(--hx-line, #e1ebef); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(10, 58, 70, .22); padding: .6rem; min-width: 210px;
    display: flex; flex-direction: column; gap: .25rem;
}
.hx-a11y-panel b { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--hx-muted, #6b8089); padding: .1rem .4rem .3rem; }
.hx-a11y-panel button {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    background: none; border: 0; border-radius: 9px; padding: .5rem .6rem;
    font-size: .9rem; font-weight: 600; color: var(--hx-ink, #0A3A46); text-align: start; cursor: pointer;
}
.hx-a11y-panel button:hover { background: var(--hx-primary-soft, #dff5fa); }
.hx-a11y-panel button[aria-pressed="true"] { background: var(--hx-primary, #0F9FBA); color: #fff; }
@media (max-width: 991.98px) { .hx-a11y { bottom: 78px; inset-inline-start: 12px; } .hx-a11y-btn { width: 44px; height: 44px; font-size: 1.3rem; } }

/* the three text steps the visitor can choose */
html.a11y-t1 { font-size: 108%; }
html.a11y-t2 { font-size: 118%; }
html.a11y-t3 { font-size: 130%; }

/* high contrast: solid backgrounds, darker text, visible edges */
/* Light surfaces become plain white with black text… */
html.a11y-contrast body { background: #fff; }
html.a11y-contrast .hx-card, html.a11y-contrast .hx-form-card,
html.a11y-contrast .hx-section, html.a11y-contrast main { background: #fff !important; color: #000 !important; }
html.a11y-contrast .hx-card, html.a11y-contrast .hx-form-card { border: 2px solid #000 !important; box-shadow: none !important; }
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span,
html.a11y-contrast b, html.a11y-contrast h1, html.a11y-contrast h2,
html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast h5 { color: #000 !important; }
html.a11y-contrast .text-muted, html.a11y-contrast small { color: #222 !important; }
/* the label inside a filled button must stay white — the blanket black-text rule
   above would otherwise put black words on the dark button */
html.a11y-contrast .hx-btn-primary, html.a11y-contrast .hx-btn-primary *,
html.a11y-contrast button[type="submit"].hx-btn-primary * {
    background-color: transparent; color: #fff !important;
}
html.a11y-contrast .hx-btn-primary { background: #00404d !important; border-color: #00404d !important; color: #fff !important; }
html.a11y-contrast .hx-btn-outline { border-color: #000 !important; color: #000 !important; }
html.a11y-contrast .form-control, html.a11y-contrast .form-select,
html.a11y-contrast .hx-combo-toggle { border: 2px solid #000 !important; color: #000 !important; }

/* …but the brand-coloured blocks are DARK and carry white text. Left to the rules
   above their words would turn black on a dark background — unreadable. They are
   forced to solid black with white text instead, which is the strongest contrast
   pair. Must stay after the rules above so it wins. */
html.a11y-contrast .hx-pagehero, html.a11y-contrast .hx-slider,
html.a11y-contrast .hx-cta, html.a11y-contrast .hx-stats,
html.a11y-contrast .hx-footer, html.a11y-contrast .hx-footer-cta,
html.a11y-contrast .hx-topbar, html.a11y-contrast .hx-announce,
html.a11y-contrast .hx-videohero, html.a11y-contrast .carousel-item {
    background: #000 !important; background-image: none !important; color: #fff !important;
}
html.a11y-contrast :is(.hx-pagehero, .hx-slider, .hx-cta, .hx-stats, .hx-footer,
    .hx-topbar, .hx-announce, .hx-videohero, .carousel-item) :is(p, li, span, b, small, a, h1, h2, h3, h4, h5, .num, .lbl) {
    color: #fff !important;
}
html.a11y-contrast :is(.hx-cta, .hx-footer, .hx-stats) .hx-btn-light,
html.a11y-contrast :is(.hx-pagehero, .hx-slider) .hx-btn {
    background: #fff !important; color: #000 !important; border-color: #fff !important;
}
/* Slide photos are painted as background images with a soft tint over them, so the
   caption sits on a picture. In high contrast the tint becomes near-solid black and
   the photo is dimmed, which guarantees the white caption stays readable. */
html.a11y-contrast .carousel-item img, html.a11y-contrast .hx-slider img { opacity: .35; }
html.a11y-contrast .hx-slide-overlay { background: rgba(0, 0, 0, .88) !important; }
html.a11y-contrast .hx-slide-img { opacity: .3 !important; filter: grayscale(1); }
html.a11y-contrast .hx-videohero video { opacity: .3; }
html.a11y-contrast .hx-hfx { display: none !important; }   /* ambient effect layer */

/* underline every link so they are impossible to miss */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-links a:focus-visible { outline: 3px solid var(--hx-accent, #F5A623); outline-offset: 2px; }

@media print { .hx-a11y { display: none !important; } }

/* ============================================================
   Printing a public page (booking confirmation, doctor, department…)
   Patients print or save the confirmation with their ticket number.
   ============================================================ */
.print-only { display: none; }
@media print {
    @page { size: A4 portrait; margin: 16mm; }
    .hx-navbar, .hx-topbar, .hx-announce, .hx-footer, .hx-emgbar, .hx-totop,
    .hx-a11y, .hx-share, .offcanvas, .hx-cookie, .no-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; font-size: 12pt; }
    .print-only { display: block; }
    main, .hx-section, .container { padding: 0 !important; margin: 0 !important; background: #fff !important; }
    .hx-card, .hx-form-card, .hx-success {
        box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid;
    }
    .hx-success .ic { border: 2px solid #000; background: #fff !important; color: #000 !important; }
    .hx-ticket { border: 2px solid #000 !important; background: #fff !important; }
    .hx-ticket b, .hx-when b { color: #000 !important; }
    .print-slip {
        margin-top: 1.2rem; padding-top: .6rem; border-top: 1px dashed #666;
        text-align: center; font-size: 10pt; color: #000;
    }
    .print-slip b { display: block; font-size: 12pt; }
    .print-slip span { display: block; }
    a[href]::after { content: ""; }          /* never print raw URLs after links */
    img { max-width: 60mm !important; height: auto !important; }
}

/* ============================================================
   Homepage rows that glide (Appearance → "Homepage cards that glide")
   Reuses the marquee: the track is duplicated in site.js, pauses on hover,
   and stops completely when animations are off or the visitor asked for
   reduced motion.
   ============================================================ */
.hx-slide-row .hx-marquee-track { align-items: stretch; animation-duration: 52s; }
.hx-slide-card {
    flex: 0 0 auto; width: 300px; margin-inline-end: 1rem;
    white-space: normal; display: flex;
}
.hx-slide-card > * { width: 100%; }
.hx-slide-card.narrow { width: 220px; }
.hx-slide-card.wide { width: 340px; }
@media (max-width: 576px) {
    .hx-slide-card { width: 250px; }
    .hx-slide-card.narrow { width: 185px; }
    .hx-slide-card.wide { width: 275px; }
}

/* ============================================================
   Package card looks — picked per package in the admin
   ============================================================ */
.hx-pkg-card { position: relative; }

/* gift / offer: dashed edge, warm tint and a ribbon corner */
.hx-pkg-card.pkg-gift {
    border: 2px dashed var(--hx-accent, #F5A623);
    background: linear-gradient(180deg, #fffaf1, #fff);
}
.hx-pkg-ribbon {
    position: absolute; top: 0; inset-inline-start: 0; z-index: 3;
    width: 46px; height: 46px; border-start-start-radius: inherit;
    background: var(--hx-accent, #F5A623); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    padding-inline-end: 14px; padding-bottom: 14px;
}
[dir="rtl"] .hx-pkg-ribbon { clip-path: polygon(100% 0, 100% 100%, 0 0); padding-inline: 0 0; }

/* premium: dark card with a gold rim */
.hx-pkg-card.pkg-gold {
    background: linear-gradient(160deg, #0A3A46, #06232b);
    border: 2px solid #d4af37;
    color: #fff;
}
.pkg-gold h5, .pkg-gold .hx-pkg-price, .pkg-gold .hx-pkg-list li { color: #fff !important; }
.pkg-gold .hx-pkg-list li::before { color: #d4af37 !important; }
.pkg-gold .hx-pkg-count, .pkg-gold .text-muted { color: #cfe3e8 !important; }
.pkg-gold .hx-pkg-old { color: #b9c7cc !important; }
.pkg-gold .hx-btn-outline { border-color: #d4af37; color: #d4af37; }
.pkg-gold .hx-btn-outline:hover { background: #d4af37; color: #06232b; }

/* coloured: filled with the package's own colour */
.hx-pkg-card.pkg-gradient {
    background: linear-gradient(160deg, var(--pkg-color, #0F9FBA), color-mix(in srgb, var(--pkg-color, #0F9FBA) 55%, #04222a));
    color: #fff; border: 0;
}
.pkg-gradient h5, .pkg-gradient .hx-pkg-price, .pkg-gradient .hx-pkg-list li { color: #fff !important; }
.pkg-gradient .hx-pkg-count, .pkg-gradient .text-muted, .pkg-gradient .hx-pkg-old { color: rgba(255,255,255,.85) !important; }
.pkg-gradient .ic { background: rgba(255,255,255,.2) !important; }
.pkg-gradient .hx-btn-outline { border-color: #fff; color: #fff; }
.pkg-gradient .hx-btn-outline:hover { background: #fff; color: var(--pkg-color, #0F9FBA); }

/* outlined and minimal */
.hx-pkg-card.pkg-outline { border: 2px solid var(--pkg-color, #0F9FBA); box-shadow: none; }
.hx-pkg-card.pkg-minimal { box-shadow: none; border: 1px solid var(--hx-line, #e1ebef); }

/* ---- admin: choosing the look ---- */
.pkg-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pkg-style {
    border: 2px solid #e2e8f0; border-radius: 12px; padding: .6rem; cursor: pointer;
    display: flex; flex-direction: column; gap: .15rem; background: #fff; margin: 0;
}
.pkg-style:hover { border-color: #94a3b8; }
.pkg-style.on { border-color: #0F9FBA; box-shadow: 0 0 0 3px rgba(15,159,186,.15); }
.pkg-style b { font-size: .85rem; }
.pkg-style small { font-size: .68rem; color: #64748b; line-height: 1.3; }
.pkg-style .prev { height: 38px; border-radius: 8px; margin-bottom: .3rem; display: block; }
.prev-classic { background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 2px 6px rgba(15,23,42,.12); }
.prev-gift { background: linear-gradient(180deg,#fffaf1,#fff); border: 2px dashed #F5A623; }
.prev-gold { background: linear-gradient(160deg,#0A3A46,#06232b); border: 2px solid #d4af37; }
.prev-gradient { background: linear-gradient(160deg, var(--c, #0F9FBA), #06232b); }
.prev-outline { background: #fff; border: 2px solid var(--c, #0F9FBA); }
.prev-minimal { background: #fff; border: 1px solid #e2e8f0; }

/* ---- keeping the layout sound at the larger text sizes ----
   At 118%/130% the full desktop menu no longer fits on one line and used to push
   the whole page sideways. From that size on, the menu collapses to the button —
   which is also easier to use for someone who needed bigger text in the first place. */
html.a11y-t2 .hx-navbar .navbar-collapse,
html.a11y-t3 .hx-navbar .navbar-collapse { display: none !important; }
html.a11y-t2 .hx-navbar .navbar-toggler,
html.a11y-t3 .hx-navbar .navbar-toggler { display: inline-flex !important; }
html.a11y-t2 .hx-navbar .hx-langbar,
html.a11y-t3 .hx-navbar .hx-langbar { display: inline-flex !important; }
html.a11y-t2 .hx-topbar .container,
html.a11y-t3 .hx-topbar .container { flex-wrap: wrap; row-gap: .2rem; }
/* long words in headings must break rather than widen the page */
html.a11y-t2 h1, html.a11y-t2 h2, html.a11y-t3 h1, html.a11y-t3 h2 { overflow-wrap: break-word; }

/* Unavailable days in the booking calendar are deliberately faint; in high
   contrast they must still be readable while staying obviously unavailable. */
html.a11y-contrast .hx-cal-cell.off { color: #555 !important; text-decoration: line-through; }
html.a11y-contrast .hx-cal-cell.free { background: #fff !important; border: 2px solid #000 !important; color: #000 !important; }
html.a11y-contrast .hx-cal-cell.active { background: #000 !important; color: #fff !important; border-color: #000 !important; }
html.a11y-contrast .hx-time, html.a11y-contrast .hx-day { border: 2px solid #000 !important; color: #000 !important; }
html.a11y-contrast .hx-time.on, html.a11y-contrast .hx-day.on { background: #000 !important; color: #fff !important; }

/* ---- role permission grid ---------------------------------------------- */
/* One row per section, one column per action. A row whose "Open" box is off
   is dimmed so it reads as switched off without hiding what it could do. */
.adm-perms th { vertical-align: top; }
.adm-perms th .btn-link { font-size: .7rem; text-decoration: none; }
.adm-perms td, .adm-perms th { padding-block: .5rem; }
.adm-perms .form-check-input { width: 1.1rem; height: 1.1rem; margin: 0; cursor: pointer; }
.adm-perms .rowall { font-size: .7rem; text-decoration: none; padding: 0; }
.adm-perms tr.off { opacity: .45; }
.adm-perms tr.off .form-check-input:not(.perm-view) { pointer-events: none; }
.adm-perms tbody tr:hover { background: rgba(15,159,186,.05); }

/* ---- install-as-an-app card + update notice ---------------------------- */
/* Sits above the phone's emergency bar, never over the page content, and is
   dismissible — a hospital site must not nag a worried visitor. */
.hx-install {
    position: fixed; z-index: 1080; inset-inline: .75rem; bottom: .75rem;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    background: var(--hx-card, #fff); color: var(--hx-body, #0f172a);
    border: 1px solid rgba(15, 23, 42, .1); border-radius: 16px;
    padding: .85rem 1rem; box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
    max-width: 520px; margin-inline: auto;
    opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .25s;
}
.hx-install.in { opacity: 1; transform: none; }
.hx-install-ic { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; object-fit: contain; }
.hx-install-body { flex: 1 1 190px; min-width: 0; line-height: 1.35; }
.hx-install-body b { display: block; font-size: .95rem; }
.hx-install-body span { font-size: .82rem; opacity: .75; }
.hx-install-actions { display: flex; gap: .4rem; margin-inline-start: auto; }
.hx-install-go {
    border: 0; border-radius: 999px; padding: .5rem 1.1rem; font-weight: 700; font-size: .88rem;
    background: var(--hx-primary, #0F9FBA); color: #fff; cursor: pointer;
}
.hx-install-later {
    border: 0; background: transparent; color: inherit; opacity: .6;
    font-size: .82rem; padding: .5rem .6rem; cursor: pointer;
}
.hx-ios-share { display: inline-block; font-weight: 800; color: var(--hx-primary, #0F9FBA); }

.hx-pwa-toast {
    position: fixed; z-index: 1085; inset-inline: .75rem; bottom: .75rem;
    display: flex; align-items: center; gap: .6rem; max-width: 460px; margin-inline: auto;
    background: var(--hx-ink, #0A3A46); color: #fff; border-radius: 14px;
    padding: .7rem .9rem; font-size: .88rem; box-shadow: 0 12px 40px rgba(15, 23, 42, .25);
    opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .25s;
}
.hx-pwa-toast.in { opacity: 1; transform: none; }
.hx-pwa-go {
    border: 0; border-radius: 999px; padding: .35rem .9rem; font-weight: 700; font-size: .82rem;
    background: #fff; color: var(--hx-ink, #0A3A46); cursor: pointer; margin-inline-start: auto;
}
.hx-pwa-x { border: 0; background: transparent; color: #fff; opacity: .7; font-size: 1.2rem;
            line-height: 1; cursor: pointer; padding: 0 .2rem; }

/* keep both clear of the fixed emergency bar, which shows below lg like .d-lg-none */
@media (max-width: 991.98px) {
    .hx-install, .hx-pwa-toast { bottom: 4.6rem; }
}
/* While the card is up it would otherwise bury the accessibility button, which is
   exactly the control a visitor who struggles with the page needs to reach. The
   offset is the card's measured height (pwa.js sets it), because the card grows
   with the language and with the "bigger text" setting. */
body.hx-install-open .hx-a11y {
    bottom: calc(var(--hx-install-h, 170px) + 5.9rem);
    transition: bottom .25s;
}
@media (min-width: 992px) {
    body.hx-install-open .hx-a11y { bottom: calc(var(--hx-install-h, 170px) + 2.5rem); }
}
@media print { .hx-install, .hx-pwa-toast { display: none !important; } }

/* ---- supplier quotations ------------------------------------------------ */
/* The supplier page stands alone: it is opened from a WhatsApp message on a
   cheap phone by someone who has never seen the site. Big targets, one column,
   nothing clever. */
.sup-page { background: #f4f8fa; color: #0f172a; }
.sup-head { background: var(--hx-primary, #0F9FBA); color: #fff; padding: .7rem 0; }
.sup-head b { line-height: 1.15; }
.sup-langs { display: flex; gap: .25rem; }
.sup-langs a {
    color: #fff; text-decoration: none; font-size: .8rem; padding: .2rem .6rem;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45);
}
.sup-langs a.on { background: #fff; color: var(--hx-primary, #0F9FBA); font-weight: 700; }

.sup-intro {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem;
}

.sup-items { display: flex; flex-direction: column; gap: .5rem; }
.sup-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.sup-item.on { border-color: var(--hx-primary, #0F9FBA); box-shadow: 0 2px 12px rgba(15, 159, 186, .12); }
.sup-item-head {
    display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .9rem;
    margin: 0; cursor: pointer; width: 100%;
}
.sup-item-head .form-check-input { width: 1.3rem; height: 1.3rem; margin: 0; flex: 0 0 auto; }
.sup-fields { padding: 0 .9rem .9rem; border-top: 1px dashed #e2e8f0; padding-top: .8rem; }
.sup-lbl { font-size: .78rem; font-weight: 600; margin-bottom: .15rem; }

.sup-you { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; }

/* the send bar stays in reach on a phone without hiding the last field */
.sup-send {
    position: sticky; bottom: 0; margin-top: 1rem; padding: .75rem 0;
    background: linear-gradient(to top, #f4f8fa 70%, rgba(244, 248, 250, 0));
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}

.sup-done { background: #fff; border-radius: 18px; padding: 2.4rem 1.6rem; box-shadow: 0 10px 40px rgba(15, 23, 42, .08); }
.sup-done .ic {
    width: 72px; height: 72px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 2rem; margin-bottom: .8rem;
    background: #dcfce7; color: #16a34a;
}
.sup-done .ic.closed { background: #f1f5f9; color: #64748b; }
.sup-ref {
    display: inline-block; margin-top: .8rem; padding: .5rem 1.2rem;
    background: #f1f5f9; border-radius: 10px;
}
.sup-ref small { display: block; font-size: .7rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.sup-ref b { font-size: 1.3rem; letter-spacing: .08em; }

/* ---- admin: the question designer and the comparison ---- */
.sup-types { display: flex; flex-wrap: wrap; gap: .4rem; }
.sup-type {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    border: 1px solid #e2e8f0; border-radius: 10px; padding: .5rem .7rem;
    cursor: pointer; min-width: 88px; text-align: center; background: #fff;
}
.sup-type i { font-size: 1.15rem; color: #64748b; }
.sup-type b { font-size: .72rem; font-weight: 600; }
.sup-type.on { border-color: var(--hx-primary, #0F9FBA); background: rgba(15, 159, 186, .07); }
.sup-type.on i { color: var(--hx-primary, #0F9FBA); }

.adm-offers tbody tr.sup-best { background: rgba(22, 163, 74, .07); }
.adm-offers tbody tr.sup-best td:first-child { box-shadow: inset 3px 0 0 #16a34a; }

@media (max-width: 575.98px) {
    .sup-fields .col-6 { flex: 0 0 100%; max-width: 100%; }
}
@media print {
    .no-print { display: none !important; }
    .sup-group { break-inside: avoid; }
}

/* the offer chosen for an item — stronger than the "cheapest" hint */
.adm-offers tbody tr.sup-won { background: rgba(22, 163, 74, .14); }
.adm-offers tbody tr.sup-won td:first-child { box-shadow: inset 3px 0 0 #16a34a; }

/* ===== supplier offer comparison =========================================== */
/* The buyer always asks the same two things — which is cheapest, and is it dearer
   than last time — so the price is the loudest thing on a row and the change
   against earlier rounds sits right beside it. */

.sup-kpis { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1rem; }
.sup-kpi {
    display: flex; align-items: center; gap: .7rem; background: var(--adm-card, #fff);
    border: 1px solid var(--adm-line, #e6eef1); border-radius: 14px; padding: .8rem .9rem;
}
.sup-kpi .ic {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: linear-gradient(135deg, #0F9FBA, #35C6DC);
}
.sup-kpi b { display: block; font-size: 1.05rem; line-height: 1.2; }
.sup-kpi small { color: var(--adm-muted, #64748b); font-size: .74rem; }
.sup-kpi.is-warn { border-color: #fecaca; background: #fef2f2; }

.sup-toolbar .sup-views {
    display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;
    border-top: 1px solid var(--adm-line, #e6eef1); padding-top: .75rem;
}
.sup-tabs { display: inline-flex; background: #eef4f7; border-radius: 999px; padding: 3px; gap: 2px; }
.sup-tab {
    border: 0; background: transparent; border-radius: 999px; padding: .35rem .85rem;
    font-size: .82rem; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap;
}
.sup-tab.active { background: #fff; color: var(--hx-primary, #0F9FBA); box-shadow: 0 1px 4px rgba(15,23,42,.12); }
.sup-live { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; flex-wrap: wrap; }
.sup-live > i { color: var(--adm-muted, #94a3b8); }
.sup-live input { min-width: 190px; }
.sup-search { position: relative; }
.sup-search > i { position: absolute; inset-inline-start: .6rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.sup-search input { padding-inline-start: 1.9rem; }

.sup-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.sup-qty { font-size: .78rem; font-weight: 600; color: var(--adm-muted, #64748b); margin-inline-start: .4rem; }

/* the "compare with before" chip */
.sup-hist-btn {
    display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--adm-line, #e6eef1);
    background: #fff; border-radius: 999px; padding: .25rem .7rem; font-size: .78rem;
    font-weight: 700; cursor: pointer; color: #475569;
}
.sup-hist-btn.is-up { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.sup-hist-btn.is-down { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.sup-hist-btn:hover { filter: brightness(.97); }

.sup-offers { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.sup-offer {
    display: grid; align-items: center; gap: .5rem .8rem;
    grid-template-columns: 30px minmax(150px, 1.4fr) minmax(120px, .8fr) minmax(120px, 1fr) auto;
    border: 1px solid var(--adm-line, #e6eef1); border-radius: 12px; padding: .6rem .75rem;
    background: var(--adm-card, #fff);
}
.sup-offer.is-best { border-color: #86efac; background: rgba(22, 163, 74, .06); }
.sup-offer.is-won { border-color: #16a34a; background: rgba(22, 163, 74, .12); }
.sup-offer.is-out { opacity: .5; }
.sup-rank {
    width: 26px; height: 26px; border-radius: 50%; background: #eef4f7; color: #475569;
    display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800;
}
.sup-offer.is-best .sup-rank, .sup-offer.is-won .sup-rank { background: #16a34a; color: #fff; }
.sup-co b { font-size: .95rem; }
.sup-price b { font-size: 1.25rem; font-weight: 800; display: block; line-height: 1.1; white-space: nowrap; }
.sup-delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 700; }
.sup-delta.up { color: #b91c1c; }
.sup-delta.down { color: #15803d; }
.sup-mini { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .78rem; color: var(--adm-muted, #64748b); }
.sup-mini b { color: var(--adm-ink, #0A3A46); font-weight: 600; }
.sup-acts { display: flex; gap: .25rem; justify-self: end; flex-wrap: wrap; }
.sup-badge-best { background: #16a34a; color: #fff; }

.sup-matrix .sup-sticky { position: sticky; inset-inline-start: 0; background: var(--adm-card, #fff); z-index: 1; }
.sup-cell-best { background: rgba(22, 163, 74, .09); font-weight: 700; }
.sup-cell-won { background: rgba(22, 163, 74, .18); font-weight: 800; }

/* the sheet that slides up from the bottom */
.sup-sheet { position: fixed; inset: 0; z-index: 1090; }
.sup-sheet-back { position: absolute; inset: 0; background: rgba(10, 23, 34, .5); opacity: 0; transition: opacity .2s; }
.sup-sheet.in .sup-sheet-back { opacity: 1; }
.sup-sheet-body {
    position: absolute; inset-inline: 0; bottom: 0; max-height: 88vh; overflow: auto;
    background: var(--adm-card, #fff); border-radius: 18px 18px 0 0; padding: 1.1rem 1.1rem 1.6rem;
    transform: translateY(100%); transition: transform .22s ease-out;
    max-width: 780px; margin-inline: auto;
}
.sup-sheet.in .sup-sheet-body { transform: none; }
.sup-sheet-x {
    position: absolute; top: .6rem; inset-inline-end: .8rem; border: 0; background: transparent;
    font-size: 1.6rem; line-height: 1; color: #94a3b8; cursor: pointer;
}
body.sup-sheet-open { overflow: hidden; }
.sup-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.sup-sheet-price { font-size: 1.35rem; font-weight: 800; white-space: nowrap; }
.sup-sheet-price small { display: block; font-size: .7rem; font-weight: 500; color: var(--adm-muted, #64748b); text-align: end; }
.sup-dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .35rem .9rem; margin: 0; font-size: .88rem; }
.sup-dl dt { color: var(--adm-muted, #64748b); font-weight: 600; }
.sup-dl dd { margin: 0; font-weight: 600; }
.sup-dl dd a { margin-inline-end: .5rem; }
.sup-files { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .9rem; }
.sup-files img { height: 78px; border-radius: 8px; border: 1px solid var(--adm-line, #e6eef1); }

.sup-hist-sum { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: .9rem; }
.sup-hist-sum > div { border: 1px solid var(--adm-line, #e6eef1); border-radius: 12px; padding: .6rem .7rem; }
.sup-hist-sum small { display: block; font-size: .7rem; color: var(--adm-muted, #64748b); text-transform: uppercase; letter-spacing: .03em; }
.sup-hist-sum b { font-size: 1.05rem; }
.sup-hist-sum span { display: block; font-size: .74rem; color: var(--adm-muted, #64748b); }
.sup-hist-sum .is-up { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.sup-hist-sum .is-down { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.sup-hist-table tbody tr.sup-hist-best { background: rgba(22, 163, 74, .08); }

/* phones: the grid becomes stacked rows, and the price stays the loudest thing */
@media (max-width: 767.98px) {
    .sup-offer { grid-template-columns: 30px 1fr; row-gap: .4rem; }
    .sup-co { grid-column: 2; }
    .sup-price, .sup-mini, .sup-acts { grid-column: 1 / -1; }
    .sup-price { display: flex; align-items: baseline; gap: .5rem; }
    .sup-price b { font-size: 1.35rem; }
    .sup-acts { justify-self: stretch; }
    .sup-acts .btn { flex: 1 1 auto; }
    .sup-live { margin-inline-start: 0; width: 100%; }
    .sup-live input { flex: 1 1 auto; min-width: 0; }
    .sup-tabs { width: 100%; justify-content: space-between; }
    .sup-tab { flex: 1 1 auto; text-align: center; padding-inline: .4rem; }
}
@media print {
    .sup-kpis, .sup-toolbar, .sup-acts, .sup-sheet, .sup-hist-btn { display: none !important; }
    .sup-offer { break-inside: avoid; border-color: #ccc; }
}


/* ---- the rounds list ------------------------------------------------------ */
.ord-toolbar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.ord-card { gap: .55rem; }
.ord-card.is-closed { opacity: .82; }
.ord-head { display: flex; align-items: flex-start; gap: .6rem; }
.ord-ref {
    flex: 0 0 auto; font-size: .72rem; font-weight: 800; color: var(--hx-primary, #0F9FBA);
    background: rgba(15, 159, 186, .1); border-radius: 8px; padding: .2rem .45rem; margin-top: .1rem;
}
.min-w-0 { min-width: 0; }

.ord-items { display: flex; flex-wrap: wrap; gap: .3rem; }
.ord-chip {
    font-size: .74rem; background: #eef4f7; color: #334155; border-radius: 999px;
    padding: .18rem .55rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ord-chip.is-more { background: transparent; border: 1px dashed var(--adm-line, #cbd5e1); color: #64748b; }

.ord-stats { display: flex; gap: 1.1rem; }
.ord-stats b { font-size: 1.05rem; display: block; line-height: 1.1; }
.ord-stats small { font-size: .72rem; color: var(--adm-muted, #64748b); }

.ord-bar { height: 6px; border-radius: 999px; background: #e6eef1; overflow: hidden; }
.ord-bar span { display: block; height: 100%; background: #16a34a; border-radius: 999px; }

.ord-cos { font-size: .78rem; color: var(--adm-muted, #64748b); display: flex; gap: .35rem; align-items: baseline; }
.ord-due { font-size: .78rem; font-weight: 600; color: #475569; display: flex; gap: .35rem; align-items: center; }
.ord-due.is-soon { color: #b45309; }

.ord-acts { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .2rem; }

@media (max-width: 575.98px) {
    .ord-acts .btn { flex: 1 1 auto; }
    .ord-toolbar .sup-tabs { width: 100%; }
    .ord-toolbar .sup-tab { flex: 1 1 auto; text-align: center; }
    .ord-stats { justify-content: space-between; gap: .5rem; }
}


/* ---- supplier form: validity picker + items they add themselves ----------- */
.sup-valid { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sup-valid-picks { display: flex; gap: .3rem; flex-wrap: wrap; }
.sup-valid-pick {
    border: 1px solid var(--hx-line, #d7e3e8); background: #fff; border-radius: 999px;
    padding: .25rem .8rem; font-size: .82rem; font-weight: 600; color: #475569; cursor: pointer;
}
.sup-valid-pick.on { background: var(--hx-primary, #0F9FBA); border-color: var(--hx-primary, #0F9FBA); color: #fff; }
.sup-valid input[type=date] { max-width: 190px; }

.sup-own-row { margin-bottom: .6rem; }
.sup-own-row .sup-item-head { display: flex; gap: .5rem; align-items: center; }
.sup-own-name { font-weight: 600; }
.sup-own-x { flex: 0 0 auto; line-height: 1; font-size: 1.1rem; padding-inline: .55rem; }

@media (max-width: 575.98px) {
    .sup-valid { flex-direction: column; align-items: stretch; }
    .sup-valid input[type=date] { max-width: none; }
    .sup-valid-picks { justify-content: space-between; }
    .sup-valid-pick { flex: 1 1 auto; text-align: center; }
}

/* ---- admin: temporary links ---------------------------------------------- */
.sup-invite { border: 1px solid var(--adm-line, #e6eef1); border-radius: 12px; padding: .7rem .8rem; margin-bottom: .5rem; }
.sup-invite.is-dead { opacity: .55; }
.sup-invite-top { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sup-invite code { font-size: .78rem; word-break: break-all; }
.sup-invite-meta { font-size: .76rem; color: var(--adm-muted, #64748b); }

/* ---- admin: items a supplier offered that were not on the list ------------ */
.sup-proposed { border-style: dashed; border-color: #f59e0b; }
.sup-proposed-tag {
    background: #fffbeb; color: #b45309; border: 1px solid #fde68a; border-radius: 999px;
    padding: .15rem .6rem; font-size: .72rem; font-weight: 700;
}


/* ============================================================================
   A department's own packages page — what a QR code on its wall opens.
   Phone first: everything below is written for a 360px screen and only widens
   from there, because a code on a wall is scanned with a phone, never a laptop.
   ========================================================================== */
.pkgd-hero {
    position: relative; overflow: hidden; color: #fff; text-align: center;
    padding: 2.2rem 0 2rem;
    background: linear-gradient(140deg, var(--pkgd, var(--hx-primary)), #10222b 160%);
}
.pkgd-hero-img {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: .22; filter: saturate(.7);
}
.pkgd-hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 50% 0, rgba(255,255,255,.18), transparent 60%);
    pointer-events: none;
}
.pkgd-hero-in { position: relative; z-index: 1; }
.pkgd-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px; padding: .2rem .75rem; font-size: .74rem; font-weight: 700;
    letter-spacing: .02em; margin-bottom: .9rem; backdrop-filter: blur(4px);
}
.pkgd-ic {
    display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; margin: 0 auto .7rem; border-radius: 22px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    font-size: 1.9rem;
}
.pkgd-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.4rem); font-weight: 800; margin: 0 0 .4rem;
    line-height: 1.15; text-wrap: balance;
}
.pkgd-sum {
    max-width: 34rem; margin: 0 auto; opacity: .9; font-size: .96rem; line-height: 1.5;
}
.pkgd-count {
    display: flex; flex-wrap: wrap; gap: .5rem .9rem; justify-content: center;
    margin: 1rem 0 0; font-size: .84rem; font-weight: 600;
}
.pkgd-count span {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.14); border-radius: 999px; padding: .25rem .8rem;
}
.pkgd-body { padding-top: 1.6rem; }

/* the three things somebody standing in the department actually wants next */
.pkgd-actions {
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
    margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--hx-line, #e4edf1);
}
.pkgd-actions .hx-btn { flex: 1 1 14rem; justify-content: center; max-width: 20rem; }

/* the way out, pinned to the bottom of the page rather than the screen so it
   never sits on top of a package card */
.pkgd-exit { padding: 0 0 2.4rem; }
.pkgd-exit a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .95rem 1.15rem; border-radius: 16px; text-decoration: none;
    background: var(--hx-bg, #f4f8fa); border: 1px dashed var(--hx-line, #cfe0e7);
    color: var(--hx-ink, #16232b); transition: background .15s, border-color .15s;
}
.pkgd-exit a:hover { background: #fff; border-color: var(--hx-primary, #0F9FBA); }
.pkgd-exit b { display: block; font-size: .98rem; }
.pkgd-exit small { display: block; color: var(--hx-muted, #6b8089); font-size: .8rem; }
.pkgd-exit i { font-size: 1.5rem; color: var(--hx-primary, #0F9FBA); flex: none; }
[dir="rtl"] .pkgd-exit i { transform: scaleX(-1); }

/* ---- the bar carried through to the list and to a single package ---- */
.pkgf { background: var(--pkgd, var(--hx-primary)); color: #fff; }
.pkgf-in {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .5rem 0; min-height: 52px;
}
.pkgf a { color: #fff; text-decoration: none; }
.pkgf-back { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.pkgf-back i { font-size: 1.3rem; flex: none; }
.pkgf-back small { display: block; font-size: .68rem; opacity: .8; line-height: 1.1; }
.pkgf-back b {
    display: block; font-size: .92rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkgf-out {
    display: inline-flex; align-items: center; gap: .4rem; flex: none;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; font-weight: 600;
}
.pkgf-out:hover { background: rgba(255,255,255,.28); }
@media (max-width: 400px) {
    .pkgf-out span { display: none; }        /* the icon alone on a narrow phone */
    .pkgf-out { padding: .4rem .55rem; }
}
[dir="rtl"] .pkgf-out i { transform: scaleX(-1); }

/* ---- admin: the sheet of codes ---- */
.qr-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.qr-card { display: flex; flex-direction: column; gap: .7rem; text-align: center; }
.qr-head { display: flex; align-items: center; gap: .6rem; text-align: start; }
.qr-ic {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 12px; color: #fff; font-size: 1.1rem;
}
.qr-card.is-off { opacity: .62; }
.qr-box { display: flex; justify-content: center; }
.qr-box img, .qr-box canvas { max-width: 100%; height: auto; }
.qr-url {
    font-size: .68rem; color: var(--hx-muted, #6b8089); word-break: break-all;
    background: var(--hx-bg, #f4f8fa); border-radius: 8px; padding: .35rem .5rem;
}
.qr-acts { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.qr-warn {
    font-size: .78rem; text-align: start; border-radius: 10px; padding: .5rem .65rem;
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}
.qr-warn-soft { background: #e0f2fe; color: #075985; border-color: #bae6fd; }

/* ---- booking a checkup package ---- */
.hx-bookpkg {
    display: flex; align-items: center; gap: .8rem;
    border: 1px solid var(--pkg-color, var(--hx-primary)); border-radius: 14px;
    padding: .7rem .9rem; background: #fff;
}
.hx-bookpkg-ic {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px; color: #fff; font-size: 1.15rem;
    background: var(--pkg-color, var(--hx-primary));
}
.hx-bookpkg-body { min-width: 0; flex: 1; }
.hx-bookpkg-body small { display: block; font-size: .72rem; color: var(--hx-muted, #6b8089); }
.hx-bookpkg-body b { display: block; font-size: 1rem; line-height: 1.25; }
.hx-bookpkg-price { font-size: .84rem; font-weight: 600; color: var(--pkg-color, var(--hx-primary)); }
.hx-bookpkg-x {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: var(--hx-muted, #6b8089);
    text-decoration: none; font-size: .85rem;
}
.hx-bookpkg-x:hover { background: var(--hx-bg, #f4f8fa); color: var(--hx-ink, #16232b); }

/* a time nobody can take any more — off, and plainly so */
.hx-time.is-full {
    opacity: .38; text-decoration: line-through; cursor: not-allowed;
    background: var(--hx-bg, #f4f8fa);
}

/* when a package runs, on its own page */
.hx-pkg-when { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.hx-pkg-when i { font-size: 1.1rem; color: var(--hx-primary, #0F9FBA); }
.hx-pkg-when small { display: block; font-size: .72rem; color: var(--hx-muted, #6b8089); }

/* ---- admin: the booking settings on a package ---- */
.pkg-book-box {
    border: 1px solid var(--hx-line, #e4edf1); border-radius: 14px; padding: 1rem;
    background: var(--hx-bg, #f8fafb);
}
.pkg-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.pkg-day { cursor: pointer; }
.pkg-day input { position: absolute; opacity: 0; pointer-events: none; }
.pkg-day span {
    display: inline-block; padding: .35rem .75rem; border-radius: 999px;
    border: 1px solid var(--hx-line, #cfe0e7); background: #fff;
    font-size: .82rem; font-weight: 600; user-select: none;
}
.pkg-day input:checked + span {
    background: var(--hx-primary, #0F9FBA); border-color: var(--hx-primary, #0F9FBA); color: #fff;
}
.pkg-day input:focus-visible + span { outline: 2px solid var(--hx-primary, #0F9FBA); outline-offset: 2px; }

/* ---- admin: appointment filters and the package cell ---- */
.apt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.apt-filters-lbl {
    font-size: .78rem; font-weight: 700; color: var(--hx-muted, #6b8089);
    text-transform: uppercase; letter-spacing: .03em; margin-inline-end: .3rem;
}
.apt-pkg {
    display: inline-flex; align-items: center; gap: .35rem; font-weight: 600;
    color: var(--pkg-color, var(--hx-primary));
}

/* ---- admin: where an appointment actually went ---- */
.apt-flags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.apt-flag {
    display: inline-flex; align-items: center; gap: .25rem; cursor: help;
    border-radius: 999px; padding: .1rem .45rem; font-size: .68rem; font-weight: 700;
    border: 1px solid transparent; white-space: nowrap;
}
.apt-flag.ok      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.apt-flag.wait    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.apt-flag.bad     { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.apt-flag.unknown { background: #e0f2fe; color: #075985; border-color: #bae6fd; }

/* ============================================================================
   Tables inside page content (designer "Table" block).

   Four looks, all sharing one skeleton, so a price list, an opening-hours grid
   and a specification sheet can each read the way they should without anyone
   touching CSS. Every look scrolls inside its own box rather than pushing the
   page sideways, and can stack into rows on a phone.
   ========================================================================== */
.dz-table { margin: 1.25rem 0; }
.dz-tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
}
.dz-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .94rem;
    background: #fff;
}
/* The older .hx-prose rules put a border on every cell and turn a table into a
   block to make it scroll. Both fight the looks below — each one draws its own
   lines, and scrolling is the wrapper's job — so they are cleared first. These
   sit BEFORE the looks deliberately: same specificity, so whichever comes last
   wins, and the looks must. */
.dz-table table { display: table; overflow: visible; margin: 0; }
.dz-table th, .dz-table td { border: 0; }
.dz-table thead th { background: transparent; }
.dz-table caption {
    caption-side: top;
    text-align: start;
    padding: 0 0 .5rem;
    font-weight: 700;
    color: var(--hx-ink, #16232b);
}
.dz-table th, .dz-table td {
    padding: .7rem .85rem;
    text-align: start;
    vertical-align: top;
}
.dz-table thead th {
    font-weight: 700;
    white-space: nowrap;
    color: var(--hx-ink, #16232b);
}
.dz-table.is-compact th, .dz-table.is-compact td { padding: .42rem .6rem; font-size: .88rem; }
.dz-table.is-zebra tbody tr:nth-child(even) { background: var(--hx-bg, #f6fafb); }

/* ---- 1. simple lines: quiet, for prose ---- */
.dz-tbl-clean thead th { border-bottom: 2px solid var(--hx-primary, #0F9FBA); }
.dz-tbl-clean tbody td { border-bottom: 1px solid var(--hx-line, #e4edf1); }
.dz-tbl-clean tbody tr:last-child td { border-bottom: 0; }

/* ---- 2. full grid: for dense figures, where the eye needs rails ---- */
.dz-tbl-bordered table { border: 1px solid var(--hx-line, #d9e6eb); }
.dz-tbl-bordered th, .dz-tbl-bordered td { border: 1px solid var(--hx-line, #d9e6eb); }
.dz-tbl-bordered thead th { background: var(--hx-bg, #f1f7f9); }

/* ---- 3. card: a coloured header, rounded and lifted ---- */
.dz-tbl-card .dz-tbl-scroll {
    border: 1px solid var(--hx-line, #e4edf1);
    box-shadow: 0 6px 22px rgba(16, 34, 43, .07);
}
.dz-tbl-card thead th {
    background: linear-gradient(135deg, var(--hx-primary, #0F9FBA), var(--hx-primary-2, #19B6D0));
    color: #fff;
}
.dz-tbl-card thead th:first-child { border-start-start-radius: 14px; }
.dz-tbl-card thead th:last-child { border-start-end-radius: 14px; }
.dz-tbl-card tbody td { border-bottom: 1px solid var(--hx-line, #eef4f6); }
.dz-tbl-card tbody tr:last-child td { border-bottom: 0; }

/* ---- 4. label & value: a spec sheet, first column is the question ---- */
.dz-tbl-key table { border: 1px solid var(--hx-line, #e4edf1); }
.dz-tbl-key tbody td { border-bottom: 1px solid var(--hx-line, #eef4f6); }
.dz-tbl-key tbody tr:last-child td { border-bottom: 0; }
.dz-tbl-key tbody td:first-child {
    font-weight: 700;
    color: var(--hx-primary-ink, #0B6E82);
    background: var(--hx-primary-soft, #f0f9fb);
    width: 38%;
    white-space: normal;
}
.dz-tbl-key thead th { background: var(--hx-bg, #f1f7f9); border-bottom: 1px solid var(--hx-line, #d9e6eb); }

/* ---- stacking: a wide table is unreadable squeezed onto a phone ----
   Each row becomes its own small card and every value carries the column
   heading beside it, so nothing has to be scrolled sideways to make sense. */
@media (max-width: 640px) {
    .dz-table.is-stack thead { display: none; }
    /* The cell is deliberately NOT given width:100% — a block already fills its
       parent, and 100% plus its own padding made every cell overflow the row by
       exactly the padding, which is what pushed the values off the edge. */
    .dz-table.is-stack table,
    .dz-table.is-stack tbody,
    .dz-table.is-stack tr { display: block; width: 100%; }
    .dz-table.is-stack table,
    .dz-table.is-stack tbody,
    .dz-table.is-stack tr,
    .dz-table.is-stack td { box-sizing: border-box; }
    .dz-table.is-stack tbody tr {
        border: 1px solid var(--hx-line, #e4edf1);
        border-radius: 12px;
        margin-bottom: .6rem;
        overflow: hidden;
        background: #fff;
    }
    .dz-table.is-stack tbody tr:nth-child(even) { background: #fff; }
    /* nothing to scroll once it has stacked — and the scroller was drawing a
       stray bar under every table */
    .dz-table.is-stack .dz-tbl-scroll { overflow-x: visible; }
    .dz-table.is-stack caption { display: block; }
    .dz-table.is-stack tbody td {
        display: flex; flex-wrap: wrap; gap: .15rem .75rem;
        justify-content: space-between; align-items: baseline;
        border: 0; border-bottom: 1px solid var(--hx-line, #f0f5f7);
        padding: .5rem .75rem;
        /* a long unbroken value must break rather than push the row wide */
        overflow-wrap: anywhere;
    }
    .dz-table.is-stack tbody td:last-child { border-bottom: 0; }
    .dz-table.is-stack tbody td::before {
        content: attr(data-label);
        font-weight: 700; font-size: .78rem; color: var(--hx-muted, #6b8089);
        /* auto, not a fixed share: a flex item never shrinks below its own text,
           so a fixed 42% label left long values hanging off the edge. Wrapping is
           what saves them — the value drops to its own line and wraps there. */
        flex: 0 0 auto;
    }
    .dz-table.is-stack tbody td:empty { display: none; }
    .dz-tbl-key.is-stack tbody td:first-child { width: auto; background: transparent; }
}

/* ---- admin: the grid you type the table into ---- */
.dzr-tbl-edit { overflow-x: auto; margin-bottom: .4rem; }
.dzr-tbl-grid { border-collapse: separate; border-spacing: 4px; width: 100%; }
.dzr-tbl-grid td, .dzr-tbl-grid th { padding: 0; vertical-align: middle; }
.dzr-tbl-grid input { min-width: 120px; }
.dzr-tbl-no {
    font-size: .7rem; font-weight: 700; color: var(--hx-muted, #6b8089);
    text-align: center; width: 26px;
}

/* A wide table that scrolls says so: a soft shadow on whichever edge still has
   something beyond it. Marked by site.js; without JavaScript the table scrolls
   just the same, only without the hint. */
.dz-table { position: relative; }
.dz-table::before,
.dz-table::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 30px;
    pointer-events: none; opacity: 0; transition: opacity .18s ease; z-index: 2;
}
.dz-table::before { left: 0;  background: linear-gradient(to right, rgba(16, 34, 43, .16), transparent); }
.dz-table::after  { right: 0; background: linear-gradient(to left,  rgba(16, 34, 43, .16), transparent); }
/* the edges are physical, so which one means "more this way" flips in Kurdish and Arabic */
.dz-table.has-more-end::after    { opacity: 1; }
.dz-table.has-more-start::before { opacity: 1; }
[dir="rtl"] .dz-table.has-more-end::after    { opacity: 0; }
[dir="rtl"] .dz-table.has-more-start::before { opacity: 0; }
[dir="rtl"] .dz-table.has-more-end::before   { opacity: 1; }
[dir="rtl"] .dz-table.has-more-start::after  { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .dz-table::before, .dz-table::after { transition: none; }
}