/* ============================================================
   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; }

/* 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. */