:root{
  --ink:#003f5f;
  --ink2:rgba(0,63,95,.88);
  --glass:rgba(255,255,255,.55);
  --glass2:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.72);
  --shadow:0 14px 30px rgba(0,0,0,.14);
  --radius:22px;

  /* set by JS (kept; harmless) */
  --topbarH: 52px;
  --headerH: 120px;

  /* header divider */
  --hdrDivider: rgba(212, 20, 90, .55);
}

*{
  box-sizing:border-box;
  font-family:'Cairo', sans-serif;
  font-weight: 500;
}

html, body{
  height: auto;
  overflow: auto; /* ✅ page scroll normal */
}

body.oc-branches-page{
  margin:0;
  width:100%;
  min-height: 100vh;
  color: var(--ink);
  background:#e9f3f7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Background ===== */
.bg-fixed{
  position: fixed;
  inset: 0;
  z-index: -3;
  background-color:#e9f3f7;
  background-image: url("/assets/media/bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: translateZ(0);
  will-change: transform;
}
.bg-overlay{
  position: fixed;
  inset: 0;
  z-index: -2;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .bg-overlay{ background: rgba(255,255,255,.28); }
}

/* ===== Container ===== */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Glass helper */
.glass{
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ===== TOPBAR (NOT fixed) ===== */
.oc-topbar{
  position: relative;
  top:auto;
  left:auto;
  right:auto;
  z-index: 80;
  padding: 10px 0 0;
  pointer-events: none;
}
.oc-topbar .container{
  display:flex;
  gap: 10px;
  pointer-events: auto;
}
html[dir="rtl"] .oc-topbar .container{ justify-content: flex-end; }
html[dir="ltr"] .oc-topbar .container{ justify-content: flex-start; }

.lang-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  cursor:pointer;
  user-select:none;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.langDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, #066A9C, #7CD253);
}

/* ===== HEADER (NOT fixed) ===== */
.oc-header{
  position: relative;
  left:auto;
  right:auto;
  top:auto;
  z-index: 70;
  padding: 0;
  margin-top: 10px;
}

/* disable glass effect on header only */
.oc-header .glass{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.headerInner{
  padding: 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;

  position: relative;
  padding-bottom: 18px;
}
.headerInner::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--hdrDivider), transparent);
  opacity: .95;
  pointer-events:none;
}

/* actions */
.hdrActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:flex-start;

  align-self: flex-end;
  margin-top: 10px;
  padding-top: 14px;
}
html[dir="ltr"] .hdrActions{ justify-content:flex-start; }

.brand{
  display:grid;
  column-gap: 14px;
  align-items:start;
  min-width: 280px;
}
html[dir="ltr"] .brand{ grid-template-columns: auto 1fr; }
html[dir="rtl"] .brand{ grid-template-columns: auto 1fr; }

html[dir="ltr"] .brandLogo{ justify-self: start; }
html[dir="rtl"] .brandLogo{ justify-self: end; }

html[dir="ltr"] .brandText{ text-align:left; }
html[dir="rtl"] .brandText{ text-align:right; justify-self: start; }

html[dir="ltr"] .socials{ justify-content:flex-start; }
html[dir="rtl"] .socials{ justify-content:flex-end; }
html[dir="rtl"] .hdrActions{ justify-content:flex-end; }

.brandLogo{
  width: 140px;
  height:auto;
  display:block;
}

.brandText{
  min-width:0;
  display:flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-inline-start: 0;
}
.brandText::before{
  content:"";
  position:absolute;
  top: 6px;
  bottom: 6px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--hdrDivider), transparent);
  opacity: .95;
  pointer-events:none;
  transform: translateX(-10px);
}
html[dir="rtl"] .brandText::before{ transform: translateX(10px); }

html[dir="ltr"] .brandText{ align-items: flex-start; }
html[dir="rtl"] .brandText{ align-items: flex-end; }

.brandNameWrap,
.brandSubWrap{
  width: 100%;
}
.brandName{
  margin:0;
  font-weight: 900;
  font-size: 1.18rem;
  line-height: 1.2;
}
.brandSub{
  margin: 6px 0 10px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink2);
  line-height: 1.5;
}

.socials{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.soc{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.soc img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display:block;
}

/* buttons */
.btnTop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  text-decoration:none;
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;

  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .15s ease, filter .15s ease;
}
.btnTop:hover{ transform: translateY(-1px); }
.btnTop:active{ transform: translateY(0); filter: brightness(.98); }

.btnTop-primary{
  background: linear-gradient(135deg,#D4145A 0%,#FFD66B 100%);
  border:none;
  color:#fff;
}

.btnStoreWide{
  min-width: 220px;
  flex: 1 1 260px;
  max-width: 520px;
}
@media (min-width: 980px){
  .btnStoreWide{ min-width: 260px; }
}
#contactBtn{
  flex: 0 0 auto;
  min-width: 120px;
}
html[dir="ltr"] .btnStoreWide{ order: 1; }
html[dir="ltr"] #contactBtn{ order: 2; }

html[dir="rtl"] .hdrActions{
  direction: rtl;
  flex-direction: row-reverse;
}
html[dir="rtl"] .btnStoreWide{ order: 1 !important; }
html[dir="rtl"] #contactBtn{ order: 2 !important; }

/* ===== MAIN (normal flow) ===== */
.oc-main{
  position: static;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;

  overflow: visible;
  padding-bottom: 40px;
}

/* HERO */
.hero{ margin-top: 14px; padding: 16px; }
.heroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.heroText{ min-width: 240px; }
.hero h2{
  margin: 0 0 6px;
  font-size: 1.10rem;
  font-weight: 900;
}
.hero p{
  margin:0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink2);
  line-height: 1.75;
}
.heroBtn{ min-width: 140px; }

/* ===============================
   CITY PILLS (Swipe Buttons)
   =============================== */
.cityPills{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  margin-top: 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cityPills::-webkit-scrollbar{ display:none; }

.cityPill{
  flex: 0 0 auto;
  scroll-snap-align: start;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.cityPill:active{ transform: translateY(0); filter: brightness(.98); }
.cityPill.active{
  background: linear-gradient(135deg,#D4145A 0%,#FFD66B 100%);
  border: none;
  color: #fff;
}

/* FILTERS */
.filters{
  margin-top: 14px;
  padding: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.input, .select{
  flex: 1 1 220px;
  min-width: 200px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  outline:none;
  font-weight: 900;
}
.select option{ color:#111; }

/* GRID */
.grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 980px){
  .grid{ grid-template-columns: 1.25fr .85fr; }
}

/* cards */
.card{ overflow:hidden; }
.cardHead{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.35);
  font-weight: 900;
}

/* MAP */
.map{
  width:100%;
  height: 360px;
  background: rgba(255,255,255,.35);
  position: relative;
}
@media (min-width: 980px){
  .map{ height: 520px; }
}
.mapFallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  text-align:center;
  color: var(--ink2);
  font-weight: 800;
}

/* LIST */
.listCard{
  display:flex;
  flex-direction: column;
}
.list{
  padding: 14px;
  display:grid;
  gap: 12px;
}
.listScroll{
  overflow: visible; /* page scroll only (mobile handles its own) */
}

/* branch */
.branch{
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  cursor:pointer;
  height: auto; /* ✅ responsive to content */
}
.branch:hover{ transform: translateY(-1px); }
.branch.highlight{
  border-color: rgba(6,106,156,.55);
  box-shadow: 0 14px 28px rgba(6,106,156,.10);
}
.branch.hide{ display:none !important; }

.branchTop{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}
.bIcon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.80);
  background: rgba(255,255,255,.78);
  overflow:hidden;
  flex: 0 0 auto;
  cursor: zoom-in;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bIcon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bTitle{
  margin:0;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.2;

  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.meta{
  margin:0;
  font-weight: 600;
  color: var(--ink2);
  line-height: 1.7;
  font-size: .92rem;

  word-break: break-word;
  overflow-wrap: anywhere; /* ✅ long address safe */
}

/* HQ badge */
.bBadge{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(135deg,#D4145A 0%,#FFD66B 100%);
  color: #fff;
  border: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* KM badge */
.bDist{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.80);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

/* action buttons */
.rowActions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.88);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  text-decoration:none;
  font-weight: 900;
  font-size: .88rem;

  flex: 1 1 150px;
  min-width: 150px;
}
.tagIcon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display:block;
}
html[dir="ltr"] .tag{ flex-direction: row; }
html[dir="rtl"] .tag{ flex-direction: row-reverse; }

/* empty */
.empty{
  margin: 14px;
  padding: 16px;
  text-align:center;
}
.emptyTitle{ font-weight: 900; font-size: 16px; }
.emptySub{ margin-top: 6px; font-weight: 600; color: var(--ink2); }

/* modal */
.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.40);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modal.show{ display:flex; }
.modalCard{
  width: min(920px, 96vw);
  border-radius: 22px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  overflow:hidden;
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.70);
  background: rgba(255,255,255,.65);
}
.modalHead h3{ margin:0; font-weight: 900; font-size: 1rem; }
.closeBtn{
  border: 1px solid rgba(255,255,255,.88);
  background: rgba(255,255,255,.78);
  color: var(--ink);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
}
.modalBody{ padding: 14px; background: rgba(255,255,255,.55); }
.modalBody img{
  width:100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.80);
  background: rgba(255,255,255,.78);
}

/* ===== SMALL SCREEN ===== */
@media (max-width: 820px){
  .headerInner{
    flex-wrap: wrap;
    gap: 12px;
  }

  .brand{ width: 100%; }
  .hdrActions{ width: 100%; gap: 10px; }

  .brandLogo{ width: 120px; }
  .brandName{ font-size: 1.02rem; }
  .brandSub{ font-size: .86rem; }

  .btnTop{
    padding: 9px 10px;
    font-size: 13px;
    border-radius: 12px;
  }

  .btnStoreWide{ min-width: 200px; }

  .brandText::before{ transform: translateX(-8px); }
  html[dir="rtl"] .brandText::before{ transform: translateX(8px); }

  /* hide select on mobile (pills only) */
  .filters .select{ display:none; }

  /* ✅ branches swipe on mobile (responsive card width) */
  #list{
    display:flex !important;
    flex-direction: row !important;
    gap: 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;

    padding: 14px !important;
  }
  #list .branch{
    flex: 0 0 auto !important;
    width: clamp(240px, 84vw, 420px) !important;
    scroll-snap-align: start;
  }
  #list .branch.hide{
    display:none !important;
  }

  html[dir="rtl"] #list{ direction: rtl; }
  html[dir="ltr"] #list{ direction: ltr; }
}

/* RTL safety */
:where(html[dir="rtl"], body[dir="rtl"], [dir="rtl"]) .brandNameWrap,
:where(html[dir="rtl"], body[dir="rtl"], [dir="rtl"]) .brandSubWrap{
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  align-self: stretch;
}
:where(html[dir="rtl"], body[dir="rtl"], [dir="rtl"]) .socials{
  direction: rtl;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
:where(html[dir="rtl"], body[dir="rtl"], [dir="rtl"]) .hdrActions{
  direction: rtl;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ===============================
   DESKTOP: list responsive + scroll if needed (MERGED)
   =============================== */
@media (min-width: 981px){

  /* card layout: grows with content but won’t exceed viewport */
  .listCard{
    display: flex;
    flex-direction: column;
    overflow: hidden;

    height: auto;              /* ✅ responsive to content */
    max-height: 75vh;          /* ✅ prevents huge card */
    min-height: 360px;         /* ✅ keeps layout stable */
  }

  /* header stays fixed */
  .listCard .cardHead{
    flex: 0 0 auto;
  }

  /* ✅ #list is scroll container only if content is long */
  #list.listScroll{
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;

    padding: 14px;
    display: grid;
    gap: 12px;

    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
  }
}

/* =========================================================
   THEME: Dark mode (Your requirements)
   - Text dark blue
   - Social icons white background
   ========================================================= */
html[data-theme="dark"]{
  /* ✅ Dark blue text */
  --ink:#003f5f;
  --ink2:rgba(0,63,95,.85);

  /* ✅ Keep cards light so dark text stays readable */
  --glass:rgba(255,255,255,.72);
  --glass2:rgba(255,255,255,.82);
  --border:rgba(255,255,255,.92);
  --shadow:0 18px 40px rgba(0,0,0,.45);

  --hdrDivider: rgba(212, 20, 90, .42);
}

html[data-theme="dark"] body.oc-branches-page{
  background:#0b1220;
  color: var(--ink);
}

/* Keep SAME image, only darken it */
html[data-theme="dark"] .bg-fixed{
  background-color:#0b1220;
  filter: saturate(.95) contrast(1.05) brightness(.70);
}

/* Dark overlay */
html[data-theme="dark"] .bg-overlay{
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ✅ Social icons MUST stay white background in dark */
html[data-theme="dark"] .soc{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] .soc img{
  filter: none !important;
}

/* ✅ Dark mode: Brand title + subtitle in WHITE */
html[data-theme="dark"] .brandName,
html[data-theme="dark"] #companyName{
  color: #fff !important;
}

html[data-theme="dark"] .brandSub,
html[data-theme="dark"] #companySub{
  color: rgba(255,255,255,.88) !important;
}