/* Shared visual modes: default dark, optional light. No DB changes required. */
:root { --clinic-ui-surface:#fff; --clinic-ui-text:#20313a; }
html[data-theme="dark"] {
 color-scheme:dark;
 --primary:#49a5c4; --primary-dark:#3186a6; --navy:#101e2d;
 --background:#0f1724; --surface:#172435; --soft:#1d2d40;
 --border:#34485b; --text:#ecf3fa; --muted:#b3c2d2; --secondary:#9ebac6;
 --bs-body-bg:#0f1724; --bs-body-color:#ecf3fa;
 --bs-border-color:#34485b; --bs-emphasis-color:#fff;
 --bs-secondary-color:#b3c2d2;
}
html[data-theme="light"] { color-scheme:light; }
.clinic-preferences {
 position:fixed; inset-inline-end:max(12px,env(safe-area-inset-right));
 top:calc(var(--clinic-navigation-height, 104px) + 10px); bottom:auto;
 z-index:1038; display:flex; gap:6px; padding:5px; border-radius:999px;
 background:#13273a; box-shadow:0 7px 30px #0005; border:1px solid #7892a770;
 font:600 13px 'Cairo',system-ui,sans-serif;
}
.clinic-pref-button { display:flex; align-items:center; justify-content:center; gap:6px;
 min-height:40px; border:0; border-radius:999px; padding:7px 12px;
 color:#fff; background:transparent; cursor:pointer; white-space:nowrap; }
.clinic-pref-button:hover,.clinic-pref-button:focus-visible{background:#ffffff2b;color:#fff}
.clinic-pref-button i {font-size:16px}
html[data-theme="light"] .clinic-preferences {background:#fff;border-color:#b5ccd3;box-shadow:0 6px 25px #0002}
html[data-theme="light"] .clinic-pref-button{color:#203947}
html[data-theme="light"] .clinic-pref-button:hover{background:#eaf3f5}
body{padding-bottom:0}
html[data-theme="dark"] body,html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white,html[data-theme="dark"] .main-header,
html[data-theme="dark"] .page-card,html[data-theme="dark"] .settings-page,
html[data-theme="dark"] .dashboard-content,html[data-theme="dark"] .auth-form {
 background:#0f1724!important;color:#ecf3fa!important;
}
html[data-theme="dark"] :is(.card:not([style*="linear-gradient"]),.list-group-item,.dropdown-menu,.modal-content,.offcanvas,.settings-card,.settings-tabs,.settings-panel,.tab-panel,.form-select,.form-control,.settings-input,.settings-select,.accordion-item,.input-group-text,.alert-light) {
 background:#1a2a3d!important; color:#edf3fa!important; border-color:#405365!important;
}
html[data-theme="dark"] :is(.card-header,.card-footer,.modal-header,.modal-footer,.accordion-button) {
 background:#1a2a3d!important;color:#edf3fa!important;border-color:#405365!important;
}
html[data-theme="dark"] :is(.table,.dashboard-content .table) {
 --bs-table-bg:#192839!important;--bs-table-striped-bg:#1d3245!important;
 --bs-table-hover-bg:#254259!important;--bs-table-color:#edf3fa!important;
 --bs-table-border-color:#3b5064!important;
 background:#192839!important;color:#edf3fa!important;
}
html[data-theme="dark"] :is(.table th,.table td,.dashboard-content .table th,.dashboard-content .table td){background-color:#192839!important;color:#edf3fa!important;border-color:#405365!important}
html[data-theme="dark"] :is(h1,h2,h3,h4,h5,h6,p,label,legend,.card-title,.settings-card h3,.settings-title,.settings-field label,.nav-link,.navbar-brand strong,.dropdown-item,.form-label){color:#edf3fa!important}
html[data-theme="dark"] :is(.text-dark,.text-body,.text-muted,.text-secondary,.navbar-brand small,.settings-field label){color:#b6c8d8!important}
html[data-theme="dark"] a:not(.btn):not(.sidebar-menu a):not(.text-white):not(.text-danger){color:#91d4ef}
html[data-theme="dark"] .nav-link:hover {color:#a5def0!important}
html[data-theme="dark"] .main-header{border-color:#34495c!important}
html[data-theme="dark"] .navbar-toggler{filter:invert(1) grayscale(1)}
html[data-theme="dark"] .btn-outline-primary {color:#94d7f0;border-color:#74bdd8}
html[data-theme="dark"] .btn-outline-primary:hover{color:#071b2b}
html[data-theme="dark"] .btn-primary{background-color:#28688a;border-color:#4594b6;color:#fff!important}
html[data-theme="dark"] .btn-primary:hover{background-color:#327fa3}
html[data-theme="dark"] :is(.form-control,.form-select,.settings-input)::placeholder{color:#b2c2d2!important;opacity:1}
html[data-theme="dark"] :is(.form-control,.form-select,.settings-input):focus{border-color:#8bbbd6!important;box-shadow:0 0 0 3px #70b9e033}
html[data-theme="dark"] .hero-visual {background:#1a2a3d!important}
html[data-theme="dark"] .clinic-hero-overlay{background:linear-gradient(90deg,rgba(10,23,35,.1) 18%,rgba(10,23,35,.96) 80%)!important}
html[data-theme="dark"] .settings-tab{color:#e1eef7!important}
html[data-theme="dark"] .settings-tab.active{background:#31516a!important;color:#fff!important}
html[data-theme="dark"] .alert-success{background:#1d423c!important;color:#c8f6e7!important;border-color:#376c64}
html[data-theme="dark"] .alert-danger{background:#51272d!important;color:#ffe1e4!important;border-color:#a2525d}
html[data-theme="dark"] .badge.text-bg-info {color:#0e2235!important}
html[dir="ltr"] body,html[dir="ltr"] .settings-page{direction:ltr!important}
html[dir="ltr"] .admin-topbar{inset-inline-start:0;inset-inline-end:auto}
html[dir="ltr"] .sidebar-menu a:hover{transform:translateX(4px)}
html[dir="ltr"] .bi-arrow-left {transform:scaleX(-1)}
html[dir="ltr"] .skip-to-content{right:auto;left:14px}
.clinic-site-editor .clinic-editor-preview{width:100%;height:150px;object-fit:cover;background:#eaf1f3}
.clinic-site-editor .card {overflow:hidden}
@media (max-width:767.98px){
 .clinic-preferences {inset-inline-end:8px;top:calc(var(--clinic-navigation-height, 88px) + 8px);bottom:auto;}
 .clinic-pref-button{padding:7px 9px;font-size:12px;min-height:40px}
 .clinic-site-editor .clinic-editor-preview{height:180px}
 .floating-whatsapp{bottom:72px!important}
}
@media print {.clinic-preferences{display:none!important}}

/* Floating pill, not a separate full-width utility bar. */
body[data-notification-role="admin"] .clinic-preferences,
body[data-notification-role="patient"] .clinic-preferences {
  /* Dashboard sidebar occupies 280px on the right on large screens. */
  inset-inline-end:auto;
  right:calc(280px + 14px);
  top:calc(var(--clinic-navigation-height, 76px) + 10px);
}
@media (max-width:991.98px) {
  body[data-notification-role="admin"] .admin-topbar,
  body[data-notification-role="patient"] .admin-topbar {
    position:sticky!important; top:0!important; z-index:1040!important;
    width:100%!important;
  }
  body[data-notification-role="admin"] .clinic-preferences,
  body[data-notification-role="patient"] .clinic-preferences {
    right:12px; top:calc(var(--clinic-navigation-height, 68px) + 8px);
  }
}
@media (max-width:420px) {
  .clinic-preferences { padding:3px; gap:3px; }
  .clinic-pref-button { min-height:38px; padding:6px 9px; }
}
@media print { .clinic-preferences {display:none!important;} }

/* Language-aware images: English hero is an explicitly uploaded alternative.
   A photographed sign's lettering is physically part of the bitmap: CSS cannot
   invert the scene while retaining that lettering. For safety, do not mirror
   the hero bitmap; render the alternate English asset if uploaded instead.
   The doctor's image contains no burned-in writing, so it can mirror normally. */
.clinic-language-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-image: var(--clinic-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: none;
  pointer-events: none;
  z-index: 0;
}
.clinic-language-hero > .clinic-hero-overlay { z-index: 1; }
/* The copy and buttons remain readable in both RTL and LTR. */
html[lang="en"] .clinic-language-hero::before,
html[dir="ltr"] .clinic-language-hero::before {
  /* English artwork: correct composition AND readable baked-in writing. */
  background-image: var(--clinic-hero-image-en, var(--clinic-hero-image));
}
/* Keep the text-side fade on the same side as the text when the locale changes. */
html[lang="en"] .clinic-language-hero > .clinic-hero-overlay,
html[dir="ltr"] .clinic-language-hero > .clinic-hero-overlay {
  transform: scaleX(-1);
}
.clinic-lang-flip-image { transform: scaleX(1); transition: transform .24s ease; }
html[lang="en"] .clinic-lang-flip-image,
html[dir="ltr"] .clinic-lang-flip-image { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .clinic-lang-flip-image { transition: none; }
}

/* Home hero: solid emergency CTA in both light and dark themes.
   Preserve the existing .btn-lg size, spacing and border-radius.
   Hover only lightens the red; it does not scale, move or invert the button. */
.clinic-language-hero a.btn.btn-outline-danger {
  color: #fff !important;
  background-color: #dc3545;
  border-color: #dc3545;
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e65d6a;
  --bs-btn-hover-border-color: #e65d6a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c9303f;
  --bs-btn-active-border-color: #c9303f;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.clinic-language-hero a.btn.btn-outline-danger:hover,
.clinic-language-hero a.btn.btn-outline-danger:focus-visible {
  color: #fff !important;
  background-color: #e65d6a;
  border-color: #e65d6a;
}
.clinic-language-hero a.btn.btn-outline-danger:active {
  color: #fff !important;
  background-color: #c9303f;
  border-color: #c9303f;
}
@media (prefers-reduced-motion: reduce) {
  .clinic-language-hero a.btn.btn-outline-danger { transition: none; }
}

/* FIX 2026-10-29: The cyan hero eyebrow must retain dark ink in dark mode.
   Previously the generic .text-dark override changed its ink to pale gray,
   lowering contrast against Bootstrap's cyan bg-info background. */
html[data-theme="dark"] .clinic-language-hero .badge.bg-info.text-dark {
  color: #092737 !important;
}
html[data-theme="dark"] .clinic-language-hero .badge.bg-info.text-dark i {
  color: inherit !important;
}

/* 2026-10-29: user controls are part of the header, never a floating bar. */
.clinic-preferences,
body[data-notification-role="admin"] .clinic-preferences,
body[data-notification-role="patient"] .clinic-preferences {
  position:static !important; inset:auto !important; right:auto !important; top:auto !important;
  bottom:auto !important; z-index:auto; flex:0 0 auto;
  background:transparent; box-shadow:none; border:1px solid rgba(140,164,183,.25);
  margin-inline:8px; padding:3px; gap:2px;
}
.main-header .clinic-pref-button { color:#213849; }
html[data-theme="dark"] .main-header .clinic-pref-button,
.admin-topbar .clinic-pref-button { color:#fff; }
html[data-theme="light"] .admin-topbar .clinic-pref-button { color:#fff; }
html[data-theme="light"] .main-header .clinic-preferences { border-color:#b4c5d0; }
@media (max-width:575px) {
 .main-header .navbar { gap:4px; padding-inline:10px!important; }
 .main-header .navbar-brand {gap:5px!important; max-width:none!important; flex:1 1 60px; min-width:40px;}
 .main-header .navbar-brand img {width:37px!important;height:37px!important;}
 .main-header .navbar-brand > span:last-child {max-width:115px; overflow:hidden;}
 .main-header .navbar-brand small {display:none!important;}
 .main-header .clinic-preferences { margin-inline:3px; }
 .clinic-pref-button {min-height:36px!important;padding:5px 7px!important;}
 .main-header .clinic-pref-button span, .admin-topbar .clinic-pref-button span {display:none;}
 .admin-topbar .clinic-preferences {margin-inline:0;}
 .admin-topbar .px-4 {padding-inline:12px!important;}
}
@media (max-width:360px) {
 .main-header .navbar-brand strong {font-size:.66rem!important;}
 .main-header .clinic-preferences {margin:0;}
 .main-header .navbar-toggler {min-width:38px!important;}
}
/* Complete image, uncut on phones. Photo is in document flow; caption follows it. */
.clinic-language-hero { background:#ecf2f4; }
.clinic-language-hero::before { content:none!important;display:none!important; }
.clinic-hero-media {position:absolute;inset:0;z-index:0;background:#ecf2f4;display:block;overflow:hidden;}
.clinic-hero-media-image {width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
.clinic-hero-image-en {display:none;}
html[lang="en"] .clinic-hero-image-ar {display:none;}
html[lang="en"] .clinic-hero-image-en {display:block;}
.clinic-doctor-full-image {display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center;}
.clinic-hero-content {z-index:2;}
@media (max-width:767.98px) {
 .clinic-language-hero {min-height:0!important;overflow:visible!important;}
 .clinic-hero-media {position:relative;inset:auto;height:auto;overflow:visible;}
 .clinic-hero-media-image {width:100%;height:auto;max-height:none;object-fit:contain;}
 .clinic-language-hero>.clinic-hero-overlay {display:none!important;}
 .clinic-hero-copy-row {min-height:0!important;padding-block:20px 28px;}
 .clinic-hero-content {background:var(--bs-body-bg,#fff);padding-inline:16px;}
 html[data-theme="dark"] .clinic-hero-content {background:#0f1724;}
 .clinic-hero-copy-row .col-lg-5 {margin-inline:0!important;}
 .clinic-hero-copy-row h1 {font-size:clamp(1.5rem,5.8vw,2.5rem);}
}
/* Unified guest login and inline patient onboarding. */
.clinic-auth-page {min-height:calc(100vh - 120px);background:var(--bs-body-bg,#f6f9fa)}
.clinic-unified-auth-card {max-width:700px;background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#e0e5eb);border-radius:22px;overflow:hidden;box-shadow:0 12px 40px rgba(10,22,39,.09)}
.clinic-unified-auth-heading {background:linear-gradient(110deg,#16394c,#2e7993);color:#fff;padding:26px 20px}
.clinic-unified-auth-heading h1,.clinic-unified-auth-heading p,.clinic-unified-auth-heading i {color:#fff!important}
.clinic-unified-auth-card .form-control,.clinic-unified-auth-card .form-select{min-height:46px}
html[data-theme="dark"] .clinic-unified-auth-card {background:#1a2a3d}
html[data-theme="dark"] .clinic-hero-media {background:#0f1724;}
html[data-theme="light"] .clinic-hero-media {background:#eff4f7;}


/* ===================================================================
   PUBLIC WEBSITE HEADER + HERO ONLY — 2026-10-29
   Dashboard topbar intentionally unchanged.
   Desktop: one horizontal row, no wrapped link labels, preferences last.
   Mobile: brand, persistent preferences, menu button; collapsed navigation below.
   =================================================================== */
.main-header.clinic-public-header .clinic-public-navbar {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:clamp(6px,.8vw,14px);
    min-height:74px;
    padding:9px clamp(12px,1.35vw,25px)!important;
}
.main-header.clinic-public-header .navbar-brand {
    flex:0 1 auto;
    max-width:clamp(155px,17vw,224px);
    min-width:0;
    margin:0!important;
    gap:8px!important;
    line-height:1.25;
}
.main-header.clinic-public-header .navbar-brand > span:last-child {min-width:0}
.main-header.clinic-public-header .navbar-brand strong {
    font-size:clamp(11px,1vw,14px)!important;
    line-height:1.45;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.main-header.clinic-public-header .navbar-brand small {
    font-size:11px;
    line-height:1.3;
    white-space:nowrap;
}
.main-header.clinic-public-header .navbar-brand img {
    width:42px!important; height:42px!important; flex:0 0 42px;
}
.main-header.clinic-public-header .clinic-preferences {
    flex:0 0 auto;
    order:3;
    margin:0!important;
    padding:2px;
    gap:2px;
    white-space:nowrap;
    border-radius:999px;
}
.main-header.clinic-public-header .clinic-pref-button {
    min-height:35px;
    padding:5px clamp(5px,.55vw,10px);
    font-size:clamp(11px,.84vw,12px);
    gap:4px;
    white-space:nowrap;
}
.main-header.clinic-public-header .navbar-toggler {
    order:2;
    flex:0 0 auto;
    margin:0;
}
.main-header.clinic-public-header #mainNavigation {order:2; min-width:0}
@media (min-width:1200px) {
    .main-header.clinic-public-header #mainNavigation {
        flex:1 1 auto;
        display:flex!important;
        flex-wrap:nowrap;
        align-items:center;
        gap:clamp(7px,.85vw,15px);
    }
    .main-header.clinic-public-header .navbar-nav {
        flex:1 1 auto;
        min-width:0;
        margin:0!important;
        display:flex;
        justify-content:space-evenly;
        align-items:center;
        gap:0;
        flex-wrap:nowrap;
    }
    .main-header.clinic-public-header .nav-item {flex:0 1 auto; min-width:0}
    .main-header.clinic-public-header .nav-link {
        font-size:clamp(11px,.93vw,14px);
        line-height:1.35;
        white-space:nowrap!important;
        padding:9px clamp(3px,.48vw,8px)!important;
    }
    .main-header.clinic-public-header .clinic-public-account {
        flex:0 0 auto;
        white-space:nowrap;
        margin:0!important;
    }
    .main-header.clinic-public-header .clinic-public-account .btn {
        font-size:clamp(11px,.93vw,14px);
        line-height:1.4;
        padding:9px clamp(8px,.75vw,13px);
        white-space:nowrap;
    }
    .main-header.clinic-public-header .navbar-toggler {display:none!important}
}
@media (min-width:1200px) and (max-width:1330px) {
    .main-header.clinic-public-header .navbar-brand {max-width:218px}
    .main-header.clinic-public-header .navbar-brand small {display:none!important}
    .main-header.clinic-public-header .clinic-pref-button {padding-inline:5px}
    .main-header.clinic-public-header .clinic-preferences {gap:0}
}
@media (max-width:1199.98px) {
    .main-header.clinic-public-header .clinic-public-navbar {flex-wrap:wrap;gap:8px;}
    .main-header.clinic-public-header .navbar-brand {flex:1 1 auto; max-width:calc(100% - 148px)}
    .main-header.clinic-public-header .clinic-preferences {order:2;}
    .main-header.clinic-public-header .navbar-toggler {order:3;}
    .main-header.clinic-public-header #mainNavigation {
        order:4;
        flex:0 0 100%;
        width:100%;
    }
    .main-header.clinic-public-header #mainNavigation:not(.show):not(.collapsing){display:none!important}
    .main-header.clinic-public-header #mainNavigation .nav-link {white-space:normal}
    .main-header.clinic-public-header .clinic-public-account {padding-block:8px}
}
@media (max-width:575.98px) {
    .main-header.clinic-public-header .clinic-public-navbar {padding:8px 10px!important;gap:4px}
    .main-header.clinic-public-header .navbar-brand {
        max-width:calc(100% - 132px)!important;
        flex:1 1 auto!important;
    }
    .main-header.clinic-public-header .navbar-brand strong {font-size:clamp(10px,2.7vw,13px)!important}
    .main-header.clinic-public-header .clinic-pref-button {padding:5px 6px!important;min-height:36px!important}
    .main-header.clinic-public-header .clinic-pref-button span {display:none!important}
    .main-header.clinic-public-header .navbar-toggler {padding:5px 7px;min-width:40px!important;min-height:40px}
}
/* The hero image spans the entire viewport width with its ORIGINAL ratio.
   Height grows naturally: unlike cover, there are no cropped edges or side bands. */
.clinic-language-hero {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    position:relative;
    min-height:0!important;
    width:100%;
    overflow:hidden;
    isolation:isolate;
}
.clinic-language-hero > .clinic-hero-media {
    grid-area:1 / 1;
    position:relative!important;
    inset:auto!important;
    display:block;
    width:100%;
    min-height:0;
    height:auto;
    overflow:hidden;
    z-index:0;
}
.clinic-language-hero .clinic-hero-media-image {
    display:block;
    width:100%!important;
    max-width:none;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center;
}
.clinic-language-hero .clinic-hero-image-en {display:none}
html[lang="en"] .clinic-language-hero .clinic-hero-image-ar {display:none}
html[lang="en"] .clinic-language-hero .clinic-hero-image-en {display:block}
.clinic-language-hero > .clinic-hero-overlay {
    grid-area:1 / 1;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    z-index:1;
    pointer-events:none;
    align-self:stretch;
}
.clinic-language-hero > .clinic-hero-content {
    grid-area:1 / 1;
    position:relative!important;
    z-index:2;
    align-self:center;
    width:100%;
}
.clinic-language-hero .clinic-hero-copy-row {
    min-height:0!important;
    padding-block:clamp(20px,3vw,46px);
}
@media (max-width:767.98px) {
    .clinic-language-hero {display:block}
    .clinic-language-hero > .clinic-hero-media {position:relative!important;height:auto!important}
    .clinic-language-hero > .clinic-hero-overlay {display:none!important}
    .clinic-language-hero > .clinic-hero-content {background:var(--bs-body-bg,#fff);padding-inline:16px}
    html[data-theme="dark"] .clinic-language-hero > .clinic-hero-content {background:#0f1724}
    .clinic-language-hero .clinic-hero-copy-row {padding-block:20px 28px}
}

/* Global mobile container padding must not indent the full-width homepage banner. */
.clinic-public-header ~ main > section:first-of-type > .container-fluid.px-0:has(.clinic-language-hero) {
    padding-inline:0!important;
}
/* Old browsers without :has: the dedicated hero image can span edge to edge. */
@media (max-width:575.98px) {
    .clinic-public-header ~ main > section:first-of-type > .container-fluid.px-0 {padding-left:0!important;padding-right:0!important}
}


/* =============================================================
   Public header typography refinement - 2026-10-29
   Slightly larger, balanced labels with compact spacing.
   Scoped to the public header, never admin / patient headers.
   ============================================================= */
@media (min-width:1200px) {
  .main-header.clinic-public-header .clinic-public-navbar {
    gap:clamp(4px,.5vw,9px);
    padding-inline:clamp(10px,1vw,20px)!important;
  }
  .main-header.clinic-public-header .navbar-brand {
    max-width:clamp(160px,16vw,216px);
    gap:6px!important;
  }
  .main-header.clinic-public-header .navbar-brand strong {
    font-size:clamp(13px,1.05vw,15px)!important;
  }
  .main-header.clinic-public-header #mainNavigation {
    gap:clamp(4px,.45vw,8px);
  }
  .main-header.clinic-public-header .navbar-nav {justify-content:space-between;}
  .main-header.clinic-public-header .nav-link {
    font-size:clamp(13px,1.03vw,15px)!important;
    font-weight:600;
    line-height:1.55;
    padding:9px clamp(2px,.25vw,5px)!important;
  }
  .main-header.clinic-public-header .clinic-public-account .btn {
    font-size:clamp(13px,1vw,14.5px)!important;
    padding:9px clamp(6px,.55vw,11px);
  }
  .main-header.clinic-public-header .clinic-pref-button {
    font-size:clamp(12px,.94vw,13.5px)!important;
    padding-inline:clamp(4px,.5vw,9px);
  }
}
@media (min-width:1200px) and (max-width:1350px) {
  .main-header.clinic-public-header .navbar-brand img {
    width:38px!important;
    height:38px!important;
    flex-basis:38px;
  }
  .main-header.clinic-public-header .navbar-brand {max-width:185px;}
  .main-header.clinic-public-header .clinic-pref-button {padding-inline:4px;}
  .main-header.clinic-public-header #mainNavigation {gap:3px;}
}

/* =========================================================
   Public header links: tighter spacing + clearer medium-size text.
   Only the public website header; admin/patient headers untouched.
   Add after existing clinic-theme.css rules.
   ========================================================= */
@media (min-width:1200px) {
  .main-header.clinic-public-header .clinic-public-navbar {
    gap:clamp(7px,.65vw,11px) !important;
    padding-inline:clamp(10px,1.05vw,20px) !important;
  }
  .main-header.clinic-public-header #mainNavigation {
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-end;
    gap:clamp(8px,.8vw,14px) !important;
  }
  .main-header.clinic-public-header .navbar-nav {
    flex:0 1 auto !important;
    margin:0 !important;
    justify-content:flex-start !important;
    gap:clamp(8px,.75vw,13px) !important;
    flex-wrap:nowrap;
  }
  .main-header.clinic-public-header .nav-item {
    flex:0 0 auto !important;
  }
  .main-header.clinic-public-header .nav-link {
    font-size:clamp(14px,1.12vw,16px) !important;
    font-weight:700 !important;
    line-height:1.45;
    padding:9px clamp(1px,.18vw,3px) !important;
    white-space:nowrap !important;
  }
  .main-header.clinic-public-header .clinic-public-account {
    flex:0 0 auto;
    margin:0 !important;
  }
  .main-header.clinic-public-header .clinic-public-account .btn {
    font-size:clamp(13px,1.04vw,15px) !important;
    padding:9px clamp(7px,.7vw,12px) !important;
  }
  .main-header.clinic-public-header .clinic-pref-button {
    font-size:clamp(12px,.95vw,14px) !important;
  }
}
/* Moderately compact on 1200–1360px screens, also in English. */
@media (min-width:1200px) and (max-width:1360px) {
  .main-header.clinic-public-header .navbar-brand {max-width:185px !important;}
  .main-header.clinic-public-header .navbar-nav {gap:9px !important;}
  .main-header.clinic-public-header #mainNavigation {gap:7px !important;}
  .main-header.clinic-public-header .nav-link {font-size:clamp(14.5px,1.16vw,15.75px) !important;padding-inline:1px !important;}
  .main-header.clinic-public-header .clinic-pref-button {padding-inline:4px !important;}
}


/* ====================================================================
   FINAL PUBLIC HEADER LAYOUT | 2026-10-29
   Purpose: Full clinic title + properly aligned RTL/LTR navigation,
   readable medium text, balanced gaps, and no desktop wrapping.
   Scoped to PUBLIC header. Admin / patient dashboard remain unchanged.
   Paste at the VERY END of assets/css/clinic-theme.css
   ==================================================================== */

/* The clinic title must never be replaced by dots on any screen. */
.main-header.clinic-public-header .navbar-brand strong,
.main-header.clinic-public-header .navbar-brand > span:last-child {
  overflow: visible !important;
  text-overflow: clip !important;
}
.main-header.clinic-public-header .navbar-brand strong {
  max-width: none !important;
  color: inherit;
}

@media (min-width: 1200px) {
  /* Correct flex START in Arabic (RTL = right) and English (LTR = left).
     Previously justify-content:flex-end moved the links to the wrong side. */
  .main-header.clinic-public-header .clinic-public-navbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(11px, 1vw, 17px) !important;
    padding-inline: clamp(15px, 1.4vw, 25px) !important;
  }

  .main-header.clinic-public-header .navbar-brand {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline-end: clamp(10px, 1vw, 17px) !important;
    border-inline-end: 1px solid rgba(140, 174, 199, .28);
    gap: 8px !important;
    white-space: normal;
  }
  .main-header.clinic-public-header .navbar-brand > span:last-child {
    display: block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: clamp(150px, 17vw, 250px) !important;
  }
  .main-header.clinic-public-header .navbar-brand strong {
    display: block !important;
    font-size: clamp(14px, 1.09vw, 16px) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .main-header.clinic-public-header .navbar-brand small {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }

  .main-header.clinic-public-header #mainNavigation {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(6px, .8vw, 13px) !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }

  .main-header.clinic-public-header #mainNavigation .navbar-nav {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(8px, .8vw, 14px) !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-header.clinic-public-header .nav-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .main-header.clinic-public-header .nav-link {
    display: inline-block !important;
    padding: 9px 2px !important;
    font-size: clamp(14px, 1.13vw, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
  }

  /* Keep login near the left/end controls, not next to the brand. */
  .main-header.clinic-public-header .clinic-public-account {
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    padding-inline-start: 5px;
    white-space: nowrap;
  }
  .main-header.clinic-public-header .clinic-public-account .btn {
    font-size: clamp(13px, 1vw, 15px) !important;
    line-height: 1.4;
    white-space: nowrap;
    padding: 9px clamp(7px, .65vw, 12px) !important;
  }
  .main-header.clinic-public-header .clinic-preferences {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap;
    align-self: center;
  }
  .main-header.clinic-public-header .clinic-pref-button {
    font-size: clamp(12px, .9vw, 13px) !important;
    padding-inline: clamp(5px, .55vw, 9px) !important;
  }
}

/* Compact-but-readable desktop: maintain full title, and slightly tighter
   links instead of clipping the brand or squeezing all links together. */
@media (min-width: 1200px) and (max-width: 1359.98px) {
  .main-header.clinic-public-header .clinic-public-navbar {
    gap: 9px !important;
    padding-inline: 12px !important;
  }
  .main-header.clinic-public-header .navbar-brand {
    padding-inline-end: 9px !important;
    gap: 6px !important;
  }
  .main-header.clinic-public-header .navbar-brand img {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
  .main-header.clinic-public-header .navbar-brand strong {
    font-size: 14px !important;
  }
  .main-header.clinic-public-header .navbar-brand small {font-size: 10px !important;}
  .main-header.clinic-public-header #mainNavigation .navbar-nav {
    gap: 8px !important;
  }
  .main-header.clinic-public-header .nav-link {
    font-size: 14px !important;
    padding-inline: 1px !important;
  }
  .main-header.clinic-public-header .clinic-pref-button {padding-inline: 4px !important;}
}

/* Collapsed menu on tablets/phones: full title can wrap naturally; no dots.
   Mobile menu remains available, with no sideways overflow. */
@media (max-width: 1199.98px) {
  .main-header.clinic-public-header .navbar-brand {
    margin: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 135px) !important;
    gap: 6px !important;
  }
  .main-header.clinic-public-header .navbar-brand > span:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .main-header.clinic-public-header .navbar-brand strong {
    font-size: clamp(12px, 2.5vw, 16px) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .main-header.clinic-public-header #mainNavigation .navbar-nav {
    margin: 0 !important;
    gap: 2px !important;
    align-items: stretch !important;
  }
  .main-header.clinic-public-header #mainNavigation .nav-link {
    white-space: normal !important;
    font-size: 15px !important;
    padding: 9px 12px !important;
  }
}

@media (max-width: 575.98px) {
  .main-header.clinic-public-header .navbar-brand {
    max-width: calc(100% - 120px) !important;
  }
  .main-header.clinic-public-header .navbar-brand strong {
    font-size: clamp(11.5px, 3vw, 14px) !important;
  }
}

/* ==================================================================
   PUBLIC WEBSITE HEADER - balanced spacing between navigation links
   Add at the END of assets/css/clinic-theme.css
   Targets public homepage header only (admin/patient headers unchanged).
   Does not modify font sizes, site title, language/theme buttons or colors.
   ================================================================== */
@media (min-width: 1200px) {
  .main-header.clinic-public-header #mainNavigation .navbar-nav {
    column-gap: clamp(15px, 1.35vw, 21px) !important;
    row-gap: 0 !important;
    justify-content: flex-start !important;
  }
  .main-header.clinic-public-header #mainNavigation .navbar-nav > .nav-item {
    margin-inline: 0 !important;
  }
  .main-header.clinic-public-header #mainNavigation .navbar-nav > .nav-item > .nav-link {
    padding-inline: 3px !important;
    white-space: nowrap !important;
  }
}
/* Slightly tighter gap on narrower desktop screens for a single line */
@media (min-width: 1200px) and (max-width: 1359.98px) {
  .main-header.clinic-public-header #mainNavigation .navbar-nav {
    column-gap: 15px !important;
  }
}
/* Clinic title only — public website header. Place at the end of clinic-theme.css.
   Keeps navigation link sizes, spacing, colors and dashboard headers unchanged. */
@media (min-width: 1360px) {
  .main-header.clinic-public-header .navbar-brand strong {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
}
@media (min-width: 1200px) and (max-width: 1359.98px) {
  .main-header.clinic-public-header .navbar-brand strong {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  .main-header.clinic-public-header .navbar-brand strong {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 575.98px) {
  .main-header.clinic-public-header .navbar-brand strong {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }
}



/* إعدادات الهيدر الرئيسي - الكمبيوتر */
@media (min-width: 1200px) {

  /* 1. حجم اسم العيادة */
  .main-header.clinic-public-header
  .navbar-brand strong {
    font-size: 25px !important;
    font-weight: 800 !important;
  }

  /* 2. حجم خطوط روابط الهيدر */
  .main-header.clinic-public-header
  #mainNavigation .nav-link {
    font-size: 15px !important;
  }

  /* 3. المسافة بين روابط الهيدر */
  .main-header.clinic-public-header
  #mainNavigation .navbar-nav {
    column-gap: 18px !important;
    row-gap: 0 !important;
  }

  /* 4. حجم شعار العيادة */
  .main-header.clinic-public-header
  .navbar-brand img {
    width: 55px !important;
    height: 55px !important;
    flex: 0 0 42px !important;
  }

}

/* Three primary homepage actions: consultation centered under the other two. */
.clinic-language-hero .clinic-hero-ctas {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 100%;
}
.clinic-language-hero .clinic-hero-ctas-top {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
}
.clinic-language-hero .clinic-hero-consultation {
  align-self: center; min-width: 152px; font-weight: 700;
}
@media (max-width: 575px) {
  .clinic-language-hero .clinic-hero-ctas {width: 100%;}
  .clinic-language-hero .clinic-hero-ctas-top {width:100%;gap:8px;flex-wrap:nowrap;}
  .clinic-language-hero .clinic-hero-ctas-top .btn {font-size:.85rem; padding:.55rem .65rem;white-space:nowrap;}
  .clinic-language-hero .clinic-hero-consultation {font-size:.88rem;padding:.55rem 1.2rem;}
}

/* English reading order across all public, doctor, and patient views. */
html[lang="en"] .dashboard-layout,
html[lang="en"] .dashboard-content,
html[lang="en"] .sidebar,
html[lang="en"] .sidebar-menu,
html[lang="en"] .card,
html[lang="en"] .modal,
html[lang="en"] .alert,
html[lang="en"] main,
html[lang="en"] form { direction: ltr; }
html[lang="en"] .dashboard-content input,
html[lang="en"] .dashboard-content textarea { text-align: start; }
/* User authored clinical notes can be Arabic even when the UI is English. */
html[lang="en"] [data-no-translate] { unicode-bidi: plaintext; }