/* ============================================================
   AL MOKHTABAR — public site layout
   Topbar · header · hero · sections · cards · footer
   ============================================================ */

/* ---------------- Utility topbar ---------------- */
.topbar {
  background: var(--ink-900);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  height: var(--topbar-h);
}
.topbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar__group { display: flex; align-items: center; gap: 18px; }
.topbar a, .topbar button {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.78); font-size: 12.5px; font-weight: 500;
  transition: color .12s ease;
}
.topbar a:hover, .topbar button:hover { color: #fff; }
.topbar .icon { width: 14px; height: 14px; }
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
.topbar .hotline { font-family: var(--font-mono); letter-spacing: .08em; font-weight: 500; color: var(--gold-300); }

/* Language segmented in topbar */
.lang-seg { display: inline-flex; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.lang-seg button, .lang-seg a {
  height: 22px; padding-inline: 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.66);
}
.lang-seg button.is-active, .lang-seg a.is-active { background: #fff; color: var(--ink-900); }
.lang-seg button[data-lang-btn="ar"], .lang-seg a[data-lang-btn="ar"] { font-family: var(--font-ar); }

/* ---------------- Site header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line-soft);
  transition: box-shadow .2s ease;
}
html.is-scrolled .site-header { box-shadow: var(--sh-sm); }
.site-header__in {
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
  min-width: 0;
}
.site-header > .container { max-width: 1850px; }
.site-header .logo { display: flex; align-items: center; flex: none; }
.site-header .logo img { height: 40px; width: auto; }
/* The Arabic wordmark is a shorter, wider lockup than the English one, so at a shared height it
   reads much smaller. Give the RTL build its own heights across every place the mark appears. */
html[dir="rtl"] .site-header .logo img { height: 58px; }
.drawer__brand { height: 32px; width: auto; }
html[dir="rtl"] .drawer__brand { height: 46px; }

.site-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.site-nav a {
  position: relative;
  padding: 8px 13px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-600);
  border-radius: var(--r-sm);
  transition: color .12s ease, background .12s ease;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink-900); background: var(--wash); }
.site-nav a.is-active { color: var(--ink-900); font-weight: 600; }
.site-nav a.is-active::after {
  content: ""; position: absolute; inset-inline: 13px; inset-block-end: -1px;
  height: 2px; border-radius: 2px; background: var(--red-500);
}

.site-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Signed-in greeting + results shortcut (moved out of the old red strip) */
.site-header__greet {
  font-size: 13.5px; color: var(--ink-600); white-space: nowrap;
  margin-inline-end: 2px;
}
.site-header__greet b { font-weight: 600; color: var(--ink-900); }

/* Logged-in avatar chip */
.user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper);
  transition: border-color .12s ease, box-shadow .12s ease;
}
html[dir="rtl"] .user-chip { padding: 5px 5px 5px 12px; }
.user-chip:hover { border-color: var(--ink-300); box-shadow: var(--sh-xs); }
.user-chip b { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.user-chip .icon { width: 15px; height: 15px; color: var(--ink-400); }

/* Mobile pieces */
.burger { display: none; }
.drawer-veil { display: none; }

/* ---------------- Search overlay panel ---------------- */
.search-pop {
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--sh-md);
  padding-block: 26px 30px;
}
.search-pop .input { height: 56px; font-size: 17px; }
.search-pop__hints { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 14px; align-items: center; }

/* ============================================================
   HERO — variant A: split editorial
   ============================================================ */
.hero-a {
  position: relative;
  background: var(--paper);
  border-block-end: 1px solid var(--line-soft);
  overflow: hidden;
}
.hero-a__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 84px);
}
.hero-a .t-display .u-red { color: var(--red-500); }
.hero-a__sub { font-size: 17px; color: var(--ink-500); max-width: 46ch; margin-block-start: 18px; }
.hero-a__ctas { display: flex; gap: 12px; margin-block-start: 30px; flex-wrap: wrap; }
.hero-a__proof { display: flex; align-items: center; gap: 22px; margin-block-start: 36px; flex-wrap: wrap; }
.hero-a__proof .item { display: flex; flex-direction: column; gap: 2px; }
.hero-a__proof .item b { font-size: 20px; font-weight: 650; letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.hero-a__proof .item span { font-size: 12px; color: var(--ink-500); }
.hero-a__proof .divider-v { height: 30px; align-self: center; }

.hero-a__visual { position: relative; min-height: 420px; }
.hero-a__img { position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden; }
.hero-a__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* floating result card on hero */
.float-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 14px 16px;
}
.float-card--result { inset-inline-start: -34px; inset-block-end: 34px; width: 250px; }
.float-card--points { inset-inline-end: -18px; inset-block-start: 30px; }

/* ============================================================
   HERO — variant B: centered search-first
   ============================================================ */
.hero-b {
  position: relative;
  background:
    radial-gradient(1200px 480px at 50% -180px, var(--red-25) 0%, rgba(253,246,245,0) 70%),
    var(--paper);
  border-block-end: 1px solid var(--line-soft);
  text-align: center;
  overflow: hidden;
}
.hero-b__in { padding-block: clamp(48px, 7vw, 96px); display: flex; flex-direction: column; align-items: center; }
.hero-b__sub { font-size: 17px; color: var(--ink-500); max-width: 56ch; margin-block-start: 16px; }
.hero-b__search { width: min(640px, 100%); margin-block-start: 34px; position: relative; }
.hero-b__search .input { height: 60px; font-size: 16.5px; padding-inline-start: 52px; border-radius: var(--r-md); box-shadow: var(--sh-md); border-color: var(--line); }
.hero-b__search .input-wrap__icon { inset-inline-start: 18px; width: 22px; height: 22px; }
.hero-b__search .btn { position: absolute; inset-inline-end: 7px; inset-block-start: 7px; height: 46px; }
.hero-b__hints { display: flex; gap: 8px; margin-block-start: 16px; flex-wrap: wrap; justify-content: center; align-items: center; }
.hero-b__acts { display: flex; gap: 12px; margin-block-start: 34px; flex-wrap: wrap; justify-content: center; }

/* Registration marks decorating heroes */
.hero-marks { position: absolute; inset: 0; pointer-events: none; color: var(--ink-300); }
.hero-marks .reg-mark { position: absolute; }

/* ============================================================
   Quick action cards (public + logged-in strip)
   ============================================================ */
.qa-band { margin-block-start: -34px; position: relative; z-index: 5; }
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.qa-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 18px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.qa-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--ink-300); color: inherit; }
.qa-card b { display: block; font-size: 15px; font-weight: 600; color: var(--ink-900); letter-spacing: -.008em; }
.qa-card > span:not(.tile) { display: block; }
.qa-card > span:not(.tile) > span { display: block; font-size: 12.5px; color: var(--ink-500); margin-block-start: 2px; }
.qa-card .go { margin-inline-start: auto; color: var(--ink-300); transition: color .15s ease, translate .15s ease; }
.qa-card:hover .go { color: var(--red-500); translate: 3px 0; }
html[dir="rtl"] .qa-card .go { rotate: 180deg; }
html[dir="rtl"] .qa-card:hover .go { translate: -3px 0; }

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: clamp(44px, 6vw, 76px); }
.section--wash { background: var(--paper); border-block: 1px solid var(--line-soft); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-block-end: 28px; }
.section-head .kicker { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; }
.section-head .kicker--large .t-label,
.awareness-label { font-size: 14px; }
.section-head .kicker .dash { width: 22px; height: 2px; background: var(--red-500); border-radius: 2px; }
.section-head p.lead { color: var(--ink-500); font-size: 15px; margin-block-start: 8px; max-width: 60ch; }

/* ============================================================
   Packages catalogue navigation
   ============================================================ */
.catalog-navigation { padding-block: 24px 0; }
.catalog-switch {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--wash);
}
.catalog-switch__item {
  min-height: 44px;
  padding-inline: 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-600);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.catalog-switch__item:hover { color: var(--ink-900); }
.catalog-switch__item.is-active {
  background: var(--paper);
  color: var(--red-600);
  box-shadow: var(--sh-xs);
}
.catalog-switch__item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--red-500) 35%, transparent);
  outline-offset: 2px;
}

/* ============================================================
   Package cards
   ============================================================ */
.pkg-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pkg-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: var(--ink-300); }
.pkg-card__media { position: relative; aspect-ratio: 16/8.5; background: var(--wash); }
.pkg-card__media .ph { border: 0; border-radius: 0; height: 100%; }
.pkg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg-card__off {
  position: absolute; inset-inline-start: 12px; inset-block-start: 12px;
  background: var(--gold-500); color: #4A3700;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(240,180,13,.4);
}
.pkg-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pkg-card__title { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }
.pkg-card__meta { display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: 12.5px; }
.pkg-card__meta .icon { width: 14px; height: 14px; }
.pkg-card__foot { display: flex; align-items: center; justify-content: space-between; margin-block-start: auto; padding-block-start: 12px; border-block-start: 1px dashed var(--line); }
.offer-card:hover { transform: none; box-shadow: var(--sh-xs); border-color: var(--line); }
.offer-card__description {
  margin: 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}
.price { display: flex; align-items: baseline; gap: 7px; }
.price b { font-size: 19px; font-weight: 650; color: var(--ink-900); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price s { font-size: 12.5px; color: var(--ink-400); }
.price .cur { font-size: 11.5px; font-weight: 600; color: var(--ink-500); }

/* ============================================================
   News / article cards
   ============================================================ */
.news-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--line); transition: box-shadow .18s ease, transform .18s ease; }
.news-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.news-card__media { aspect-ratio: 16/9; background: var(--wash); position: relative; }
.news-card__media .ph { border: 0; border-radius: 0; height: 100%; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.008em; color: var(--ink-900); }
.news-card:hover .news-card__title { color: var(--red-600); }
.news-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-400); margin-block-start: auto; }

/* ============================================================
   Test guide rows
   ============================================================ */
.test-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.test-row:hover { border-color: var(--ink-300); box-shadow: var(--sh-sm); }
.test-row__name { font-weight: 600; font-size: 15px; color: var(--ink-900); }
.test-row__desc { font-size: 12.5px; color: var(--ink-500); margin-block-start: 2px; }
.test-row .price { margin-inline-start: auto; }
.test-row--expandable { display: block; padding: 0; overflow: hidden; }
.test-row__summary {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 18px;
  cursor: pointer; list-style: none;
}
.test-row__summary::-webkit-details-marker { display: none; }
.test-row__title { min-width: 0; }
.test-row__toggle {
  display: inline-flex; align-items: center; gap: 7px; margin-inline-start: auto;
  color: var(--red-600); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.test-row__toggle .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.test-row--expandable[open] .test-row__toggle .icon { transform: rotate(180deg); }
.test-row__details { padding: 0 18px 18px; border-block-start: 1px solid var(--line-soft); }
.test-row__detail { padding-block-start: 16px; }
.test-row__detail + .test-row__detail { margin-block-start: 2px; }
.test-row__detail h2 { margin: 0; color: var(--ink-900); font-size: 13px; font-weight: 650; }
.test-row__detail p, .test-row__empty { margin: 5px 0 0; color: var(--ink-600); font-size: 13.5px; line-height: 1.6; white-space: pre-line; }
.test-row__empty { padding-block-start: 16px; }
@media (prefers-reduced-motion: reduce) {
  .test-row__toggle .icon { transition: none; }
}

/* ============================================================
   Locations
   ============================================================ */
.loc-card {
  padding: 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.loc-card:hover { box-shadow: var(--sh-md); border-color: var(--ink-300); }
.loc-card__city { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--red-500); }
.loc-card__name { font-size: 16px; font-weight: 600; color: var(--ink-900); }
.loc-card__addr { font-size: 13px; color: var(--ink-500); line-height: 1.5; }
.loc-card__meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-600); flex-wrap: wrap; }
.loc-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.loc-card__meta .icon { width: 14px; height: 14px; color: var(--ink-400); }

/* Map panel — the live Google branch map, and the grid placeholder used when no Maps key is set */
.branch-map {
  min-height: 380px;
  height: 100%;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--wash);
}
/* Info window: Google supplies the bubble, these are the contents. */
.branch-map__info { display: grid; gap: 4px; max-width: 260px; padding-block-end: 2px; }
.branch-map__info-city { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red-500); }
.branch-map__info-name { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.branch-map__info-addr { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.branch-map__info-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-600); }
.branch-map__info-meta a { color: inherit; text-decoration: none; }
.branch-map__info-status { font-weight: 600; }
.branch-map__info-link { font-size: 12.5px; font-weight: 600; color: var(--red-500); text-decoration: none; margin-block-start: 2px; }
.branch-map__info-link:hover { text-decoration: underline; }

.map-ph {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/34px 34px,
    var(--wash);
  overflow: hidden;
}
.map-pin-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red-500); border: 2.5px solid #fff;
  box-shadow: 0 1px 6px rgba(216,20,28,.5);
}
.map-pin-dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid rgba(216,20,28,.35);
}

/* ============================================================
   App promo band
   ============================================================ */
.app-band {
  background: var(--red-500);
  color: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}
.app-band__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: clamp(32px, 5vw, 60px); }
.app-band h2 { color: #000; }
.app-band p { color: rgba(255,255,255,.66); font-size: 15px; max-width: 44ch; }
.app-band__stores { display: flex; gap: 12px; margin-block-start: 26px; flex-wrap: wrap; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding-inline: 18px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-md);
  color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.store-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }
.store-btn small { display: block; font-size: 10px; opacity: .64; letter-spacing: .04em; text-transform: uppercase; }
.store-btn b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.app-band__shot { display: flex; justify-content: center; align-items: center; }
/* Keep the supplied artwork fully visible at its intrinsic aspect ratio in LTR and RTL. */
.app-band__phone {
  display: block;
  inline-size: min(100%, 420px);
  block-size: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

/* ============================================================
   CTA band (house call)
   ============================================================ */
.cta-band {
  border-radius: var(--r-xl);
  background: var(--red-500);
  color: #fff;
  padding: clamp(30px, 5vw, 52px);
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 52ch; margin-block-start: 8px; }
.cta-band .btn { background: #fff; color: var(--red-600); box-shadow: none; }
.cta-band .btn:hover { background: var(--red-50); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--red-500); color: rgba(0,0,0,.72); margin-block-start: 70px; }
.site-footer a { color: rgba(0,0,0,.72); font-size: 13.5px; }
.site-footer a:hover { color: #000; }
.site-footer__main { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, .75fr)) 1.1fr; gap: 30px; padding-block: 52px 40px; }
.site-footer h5 { color: #000; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-block-end: 14px; }
.site-footer li + li { margin-block-start: 9px; }
.site-footer__brand img { height: 42px; width: auto; background: #fff; padding: 6px 10px; border-radius: var(--r-sm); }
html[dir="rtl"] .site-footer__brand img { height: 60px; }
.site-footer__brand p { font-size: 13px; line-height: 1.6; color: rgba(0,0,0,.62); margin-block-start: 14px; max-width: 30ch; }
.site-footer__bottom {
  border-block-start: 1px solid rgba(0,0,0,.14);
  padding-block: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: rgba(0,0,0,.58);
}
/* An <a href="tel:"> — `display: block` keeps it on its own line under the
   label now that it is no longer a <div>. */
.site-footer .hotline-big {
  display: block;
  font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: .1em;
  color: #000;
}
.site-footer .hotline-big:hover { color: #000; text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   Breadcrumbs & page hero (inner public pages)
   ============================================================ */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-400); flex-wrap: wrap; }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--red-600); }
.crumbs .icon { width: 13px; height: 13px; }
html[dir="rtl"] .crumbs .icon { rotate: 180deg; }

.page-hero { background: var(--paper); border-block-end: 1px solid var(--line-soft); padding-block: 36px 40px; }
.page-hero h1 { margin-block-start: 14px; }
.page-hero p.lead { color: var(--ink-500); font-size: 16px; margin-block-start: 10px; max-width: 64ch; }

/* ============================================================
   About
   ============================================================ */
.about-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
}
.about-copy { display: grid; gap: 16px; color: var(--ink-600); font-size: 16px; line-height: 1.7; }
.about-copy .lead { color: var(--ink-900); font-size: 19px; line-height: 1.55; }
.about-foundation { display: grid; gap: 16px; align-content: start; }
.about-foundation p { color: var(--ink-600); line-height: 1.65; }
.about-pillars { align-items: stretch; }
.about-pillar { display: grid; gap: 18px; }
.about-pillar__title { display: flex; align-items: center; gap: 14px; }
.about-pillar__title p { color: var(--ink-600); line-height: 1.65; margin-block-start: 6px; }
.about-list { display: grid; gap: 12px; }
.about-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-600); line-height: 1.55; }
.about-list .icon { width: 18px; height: 18px; color: var(--green-600); flex: none; margin-block-start: 3px; }
.about-values { align-items: stretch; }
.about-value { display: grid; align-content: start; gap: 14px; }
.about-value h3 { font-size: 17px; }
.about-value p { color: var(--ink-600); line-height: 1.6; }
@media (max-width: 860px) {
  .about-overview { grid-template-columns: 1fr; }
}

/* ============================================================
   Corporate social responsibility
   ============================================================ */
.csr-programs { align-items: stretch; }
.csr-section-content { max-width: 1400px; }
.csr-program {
  display: grid;
  align-content: start;
  gap: 18px;
}
.csr-program__head { display: flex; align-items: center; gap: 14px; }
.csr-program__head h3 { font-size: 18px; }
.csr-program__list { display: grid; gap: 11px; }
.csr-program__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-600);
  font-size: 14.5px;
  line-height: 1.55;
}
.csr-program__list .icon { width: 18px; height: 18px; flex: none; color: var(--red-500); margin-block-start: 2px; }
.csr-program--link {
  color: inherit;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.csr-program--link:hover { color: inherit; border-color: var(--ink-300); box-shadow: var(--sh-md); transform: translateY(-2px); }
.csr-program--link:focus-visible { outline: 3px solid color-mix(in srgb, var(--red-500) 35%, transparent); outline-offset: 3px; }
.csr-program__action { color: var(--red-600); font-size: 14px; font-weight: 600; margin-block-start: auto; }
.csr-detail-item { display: grid; align-content: start; overflow: hidden; }
.csr-detail-item__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.csr-detail-item__content { display: grid; align-content: start; gap: 18px; }
.csr-detail-item__copy { color: var(--ink-600); font-size: 15px; line-height: 1.7; }
.csr-detail-item__details { display: grid; gap: 12px; color: var(--ink-600); font-size: 15px; line-height: 1.7; }
.csr-detail-grid + .link-more { margin-block-start: 32px; }
.csr-partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.csr-partner { display: grid; place-items: center; min-height: 118px; padding: 18px; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg); }
.csr-partner img { display: block; width: 100%; max-width: 180px; max-height: 82px; object-fit: contain; }

@media (max-width: 640px) {
  .csr-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .csr-partner { min-height: 96px; padding: 14px; }
}

/* ============================================================
   Corporate services
   ============================================================ */
.corporate-service { max-width: 1080px; }
.corporate-service__intro { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 16px 22px; margin-block-end: 54px; }
.corporate-service__intro .tile { grid-row: span 2; }
.corporate-service__intro p { color: var(--ink-600); font-size: 16px; line-height: 1.75; }
.corporate-service__offerings { align-items: stretch; }
.corporate-service__offering { display: grid; align-content: start; gap: 14px; }
.corporate-service__offering p, .corporate-service__closing p { color: var(--ink-600); font-size: 15px; line-height: 1.7; }
.corporate-service__closing { display: grid; gap: 16px; margin-block: 42px; padding: 26px 28px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.corporate-service__certifications { margin-block-start: 42px; padding-block-start: 32px; border-block-start: 1px solid var(--line-soft); }
.corporate-service__certifications ul { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.corporate-service__certifications li { padding: 8px 12px; color: var(--ink-700); background: var(--paper); border-radius: var(--r-sm); font-size: 14px; }

@media (max-width: 640px) {
  .corporate-service__intro { grid-template-columns: 1fr; }
  .corporate-service__intro .tile { grid-row: auto; }
}

/* ============================================================
   Direct-share information pages
   ============================================================ */
.information-page { max-width: 940px; }
.information-page__icon { margin-block-end: 30px; }
.information-page__section { display: grid; gap: 14px; padding-block: 30px; border-block-end: 1px solid var(--line-soft); }
.information-page__section:first-of-type { padding-block-start: 0; }
.information-page__section p { color: var(--ink-600); font-size: 15.5px; line-height: 1.75; }
.information-page__section ul { display: grid; gap: 10px; padding-inline-start: 22px; color: var(--ink-600); font-size: 15px; line-height: 1.65; }
.information-page__section li::marker { color: var(--red-500); }
.information-page__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-block-start: 32px; }
.information-page__gallery img { width: 100%; border: 1px solid var(--line-soft); border-radius: var(--r-lg); object-fit: cover; }
.information-page__gallery:has(img:only-child) { grid-template-columns: minmax(0, 620px); }

@media (max-width: 640px) {
  .information-page__gallery { grid-template-columns: 1fr; }
}

/* ============================================================
   Toasts
   ============================================================ */
.toast-holder { position: fixed; inset-block-end: 24px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--ink-900); color: #fff;
  font-size: 13.5px; font-weight: 500;
  padding: 11px 18px; border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  opacity: 0; translate: 0 10px;
  transition: opacity .25s ease, translate .25s ease;
}
.toast .icon { color: var(--gold-300); }
.toast--danger .icon { color: var(--red-400); }
.toast.is-in { opacity: 1; translate: 0 0; }

/* ============================================================
   Gold tweak: richer gold moments
   ============================================================ */
html[data-gold="rich"] .pkg-card__off { background: linear-gradient(120deg, var(--gold-300), var(--gold-500)); }
html[data-gold="rich"] .section-head .kicker .dash { background: var(--gold-500); }
html[data-gold="rich"] .hero-a .u-red { background: linear-gradient(100deg, var(--red-500) 55%, var(--gold-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   Responsive — public
   ============================================================ */
/* The full eight-item navigation needs more room than the standard content container.
   Below this width, use the existing drawer instead of allowing the header row to overflow. */
@media (max-width: 1800px) {
  .site-nav { display: none; }
  .burger { display: inline-grid; }
  .site-header__actions { margin-inline-start: auto; }
}
@media (max-width: 1080px) {
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-a__grid { grid-template-columns: 1fr; }
  .hero-a__visual { min-height: 340px; }
  .float-card--result { inset-inline-start: 12px; }
  .float-card--points { inset-inline-end: 12px; }
  .app-band__grid { grid-template-columns: 1fr; }
  .site-footer__main { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  /* Greeting and results shortcut live in the drawer below this width */
  .site-header__greet, .site-header__results { display: none; }
}
@media (max-width: 680px) {
  :root { --header-h: 62px; }
  .topbar__group--links { display: none; }
  /* The brand mark and "Log in" both STAY on phones — portrait is where most visitors arrive, and a
     header with no logo and the only sign-in route buried in the drawer reads as a broken page. They
     fit because the action buttons go compact below and the header search collapses further down. */
  .site-header__in { gap: 10px; }
  .site-header .logo img { height: 30px; }
  html[dir="rtl"] .site-header .logo img { height: 42px; }
  .site-header__logout { display: none; }
  /* Compact actions: the default 46px / 22px-padding / 15px button is desktop-sized. */
  .site-header__actions { gap: 6px; }
  .site-header__actions .btn { height: 38px; padding-inline: 12px; font-size: 13px; gap: 5px; }
  .site-header__actions .btn-icon { width: 38px; height: 38px; }
  /* ONE auth action on a phone. "Create account" leaves the bar — the login page already offers it
     ("No account? Register now"), and so does the drawer — which buys the room the logo and the
     search icon need. The survivor takes the primary treatment: it is the bar's only call to action,
     so it should not read as a secondary outline button. */
  .site-header__register { display: none; }
  .site-header__login { background: var(--red-500); color: #fff; border-color: var(--red-500); box-shadow: var(--sh-red); }
  .site-header__login:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; }
  .qa-grid { grid-template-columns: 1fr; }
  .qa-band { margin-block-start: -20px; }
  .hero-a__ctas .btn, .hero-b__acts .btn { flex: 1 1 auto; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer__main { grid-template-columns: 1fr; gap: 28px; }
  .hero-b__search .btn { position: static; width: 100%; margin-block-start: 10px; }
  .hero-b__search .input { height: 54px; }
  .test-row__summary { gap: 12px; padding-inline: 14px; }
  .test-row__toggle span { display: none; }
  .test-row__details { padding-inline: 14px; }
  .catalog-navigation { padding-block-start: 16px; }
  .catalog-switch { display: flex; width: 100%; }
  .catalog-switch__item { flex: 1; padding-inline: 12px; }
}

/* 360 px phones (Galaxy S-series portrait, iPhone SE): burger + logo + search + Log in still fit,
   but only with a few pixels back from the mark and the button. */
@media (max-width: 400px) {
  .site-header__in { gap: 8px; }
  .site-header .logo img { height: 27px; }
  html[dir="rtl"] .site-header .logo img { height: 38px; }
  .site-header__actions { gap: 4px; }
  .site-header__actions .btn { padding-inline: 11px; font-size: 12.5px; }
}

/* ============================================================
   Mobile drawer
   ============================================================ */
.drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 100;
  width: min(320px, 86vw);
  background: var(--paper);
  box-shadow: var(--sh-lg);
  translate: -105% 0;
  transition: translate .28s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}
html[dir="rtl"] .drawer { translate: 105% 0; }
html.drawer-open .drawer { translate: 0 0; }
.drawer-veil {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(23,24,28,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
html.drawer-open .drawer-veil { display: block; opacity: 1; pointer-events: auto; }
.drawer__nav { display: flex; flex-direction: column; gap: 2px; margin-block-start: 18px; }
.drawer__nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--ink-700);
}
.drawer__nav a:hover, .drawer__nav a.is-active { background: var(--red-25); color: var(--red-600); }
.drawer__nav .icon { width: 19px; height: 19px; color: var(--ink-400); }
.drawer__nav a.is-active .icon { color: var(--red-500); }


/* ============================================================
   PUBLIC CAMPAIGN PAGE  (/campaign/{formRef})

   This namespace previously had NO stylesheet at all — the template shipped ~25 `campaign-public__*` classes and
   nothing defined them, which is why the page had no card, no field rhythm, an unstyled drop zone and validation
   messages in body-text grey. Everything below is built from the existing tokens and mirrors the shapes base.css
   already establishes (`.card`, `.input`, `.field__error`, `.btn`) so the page belongs to the same design system
   rather than looking like a second one.

   DIRECTION: logical properties throughout (margin-block / padding-inline), so Arabic RTL is correct by
   construction. The only [dir="rtl"] rules are for things logical properties cannot flip — a glyph rotation.

   STATE CLASSES are the contract campaign-form.js already toggles, and are NOT renamed here:
     .is-invalid    on an input, and on a .campaign-public__group fieldset
     .is-submitting on the form
     .is-dragging / .is-filled / .is-rejected on .campaign-public__upload
   ============================================================ */

/* Tighter than the generic .section: this page is one column of content, and the stock section rhythm left a
   large empty band above a card that is already visually separated from the chrome. */
.campaign-section { padding-block: clamp(28px, 4vw, 56px); }

.campaign-public { max-width: 760px; }

.campaign-public__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;                      /* clips the full-bleed image to the card radius */
}

/* ---- Campaign image -------------------------------------------------------
   A fixed ratio rather than the image's own: campaign artwork is uploaded at whatever size marketing had, and
   letting that drive the card meant a tall portrait image pushed the form entirely below the fold. `cover` fills
   the ratio without distorting — the alternative, `contain`, letterboxes with dead bands on both sides. */
.campaign-public__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: center;
  background: var(--wash);               /* visible only while the lazy image loads */
  border-block-end: 1px solid var(--line-soft);
}

.campaign-public__body {
  padding: var(--cp-pad);
  /* The ORDERING CONTAINER. Its children are the page's movable blocks — image, head, form — plus the two
     notices, and a layout preset arranges them by setting `order` rather than by the template emitting a
     different DOM. See WebsiteCampaignLayout for why the markup is shared. */
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* One source for the body's inset, because the full-bleed rules below have to cancel exactly this much. Two
   copies of a clamp() drift the moment one is tuned, and the failure is a hairline of background down one edge
   of the image that only shows at some viewport widths. */
.campaign-public__card { --cp-pad: clamp(22px, 4vw, 40px); }

/* Replaces `.campaign-public__head + *`, which spaced siblings by adjacency — meaningless once `order` can put
   any block next to any other. The gap above spaces them by position instead. */

/* ---- Full bleed ------------------------------------------------------------
   Pulls a block out over the body's padding so it meets the card's edges. Used by the image in the layouts
   that lead with it, and by the head in HERO_BANNER, where the banner IS the full-width band. */
.campaign-public__bleed,
.campaign-public__card--classic > .campaign-public__body > .campaign-public__image,
.campaign-public__card--hero-banner > .campaign-public__body > .campaign-public__image,
.campaign-public__card--hero-banner > .campaign-public__body > .campaign-public__head {
  margin-inline: calc(-1 * var(--cp-pad));
  width: calc(100% + 2 * var(--cp-pad));
  max-width: none;
}

/* The block that leads its layout also meets the card's TOP edge.

   Stated per layout rather than with `:first-child`, which was wrong and looked right: `:first-child` matches
   DOM order, and `order` does not change DOM order — the image is the first child in every layout, so the hero
   banner (visually first, DOM-second) never matched and sat below a strip of card padding.
   
   For CLASSIC the leading block is the image, and `:not(:only-child)` is not needed: a campaign with no image
   simply has no rule to apply and its head starts at the normal inset. */
.campaign-public__card--classic > .campaign-public__body > .campaign-public__image,
.campaign-public__card--hero-banner > .campaign-public__body > .campaign-public__head {
  margin-block-start: calc(-1 * var(--cp-pad));
}

/* ---- CLASSIC ---------------------------------------------------------------
   Image, head, form — the arrangement the page had before presets existed, and what every campaign is
   backfilled to. It is written out rather than left to source order so that changing the DOM order later
   cannot silently restyle every live campaign. */
.campaign-public__card--classic > .campaign-public__body > .campaign-public__image { order: 1; }
.campaign-public__card--classic > .campaign-public__body > .campaign-public__head  { order: 2; }
.campaign-public__card--classic > .campaign-public__body > #campaign-repeat        { order: 3; }
.campaign-public__card--classic > .campaign-public__body > #campaign-success       { order: 4; }
.campaign-public__card--classic > .campaign-public__body > #campaign-form          { order: 5; }

/* ---- HERO BANNER -----------------------------------------------------------
   The offer leads, in a tinted band of its own; the picture follows it. For a campaign whose headline IS the
   proposition — a price, a discount, a deadline — where an image above the fold pushes that headline down. */
.campaign-public__card--hero-banner > .campaign-public__body > .campaign-public__head    { order: 1; }
.campaign-public__card--hero-banner > .campaign-public__body > .campaign-public__image   { order: 2; }
.campaign-public__card--hero-banner > .campaign-public__body > #campaign-repeat          { order: 3; }
.campaign-public__card--hero-banner > .campaign-public__body > #campaign-success         { order: 4; }
.campaign-public__card--hero-banner > .campaign-public__body > #campaign-form            { order: 5; }

.campaign-public__card--hero-banner .campaign-public__head {
  padding: clamp(26px, 4vw, 44px) var(--cp-pad);
  background: var(--wash);
  text-align: center;
}

/* No bottom border on the banner. It had one, and with the body's gap below it the border read as a stray line
   floating above a white strip rather than as the edge of anything. The tint delimits the band on its own. */

/* The image is no longer the card's top edge here, so it loses the flat top the classic layout gives it. */
.campaign-public__card--hero-banner .campaign-public__image { border-block-start: 0; }

/* ---- SPLIT -----------------------------------------------------------------
   Copy in one column, the form beside it in the other and sticky, so a visitor reading a long description
   never has the form scroll away from them.

   Grid areas rather than `order`: two columns of different heights is what grid is for, and expressing it with
   flex would mean fixing a wrap point in pixels. */
.campaign-public--split { max-width: 1060px; }

@media (min-width: 900px) {
  .campaign-public__card--split > .campaign-public__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "media   form"
      "head    form"
      "repeat  form"
      "success form";
    align-items: start;
    column-gap: clamp(24px, 3vw, 40px);
  }

  .campaign-public__card--split > .campaign-public__body > .campaign-public__image { grid-area: media; }
  .campaign-public__card--split > .campaign-public__body > .campaign-public__head  { grid-area: head; }
  .campaign-public__card--split > .campaign-public__body > #campaign-repeat        { grid-area: repeat; }
  .campaign-public__card--split > .campaign-public__body > #campaign-success       { grid-area: success; }

  .campaign-public__card--split > .campaign-public__body > #campaign-form {
    grid-area: form;
    position: sticky;
    /* Clear of the site header, which is sticky too. */
    top: 84px;
  }

  /* The picture is a supporting element in this layout, not a billboard, so it takes a squarer ratio that
     suits half the width. */
  .campaign-public__card--split .campaign-public__image {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-soft);
  }
}

/* ---- FORM FIRST ------------------------------------------------------------
   Title and copy, then the form, then the image. For paid traffic that arrived already knowing the offer: the
   only job left is to put the form in front of them without a scroll. */
.campaign-public__card--form-first > .campaign-public__body > .campaign-public__head  { order: 1; }
.campaign-public__card--form-first > .campaign-public__body > #campaign-repeat        { order: 2; }
.campaign-public__card--form-first > .campaign-public__body > #campaign-success       { order: 3; }
.campaign-public__card--form-first > .campaign-public__body > #campaign-form          { order: 4; }
.campaign-public__card--form-first > .campaign-public__body > .campaign-public__image { order: 5; }

/* The image is inset here rather than full-bleed, so it keeps its border and radius at every width. The ratio
   is the DESKTOP one only — the responsive block at the foot of this file overrides it on phones, and is
   written to outrank this selector. */
.campaign-public__card--form-first .campaign-public__image {
  aspect-ratio: 16 / 7;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  border-block-start: 1px solid var(--line-soft);
}

.campaign-public__title {
  font-size: clamp(25px, 3.4vw, 34px);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.campaign-public__lead {
  margin-block-start: 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 60ch;                       /* a comfortable measure, not the full card width */
  white-space: pre-line;                 /* honours paragraph breaks the operator typed */
}

/* ---- "Customer information" divider ----
   A rule above rather than a box around: it separates the pitch from the ask without adding another nested
   container to a card that already has one. */
.campaign-public__section-title {
  margin-block: 30px 20px;
  padding-block-start: 26px;
  border-block-start: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.campaign-public__error + .campaign-public__section-title { margin-block-start: 22px; }

/* ---- Fields -------------------------------------------------------------- */
.campaign-public__field { margin-block-end: 20px; }
/* `field__label` already carries its own margin and flex layout from base.css; only the required marker's
   spacing is this page's business. */

/* The required marker. Set apart from the label text so "First Name *" does not read as one crowded string, and
   colour-coded but never colour-ONLY — the input keeps its own `required` attribute for assistive tech. */
/* No inline margin: `field__label` is a flex row with its own 6px gap, and adding to it pushed the marker far
   enough from the label to read as a separate word. */
.campaign-public__req {
  color: var(--red-500);
  font-weight: 700;
  line-height: 1;
}

.campaign-public__help {
  display: block;
  margin-block-start: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* ---- Validation ----------------------------------------------------------
   RED, and matched to base.css's own `.field__error` so a campaign form and a portal form report a bad value the
   same way. The leading glyph means the message does not depend on colour alone. */
.campaign-public__fielderror,
.campaign-public__multi-empty {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-block-start: 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--red-600);
}
.campaign-public__fielderror::before,
.campaign-public__multi-empty::before {
  content: "!";
  flex: none;
  width: 15px; height: 15px;
  margin-block-start: 1px;
  border-radius: 50%;
  background: var(--red-600);
  color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 15px;
  text-align: center;
}
/* `hidden` must win over the flex display above, or an empty error slot occupies space on every field. */
.campaign-public__fielderror[hidden],
.campaign-public__multi-empty[hidden] { display: none; }

/* The whole-submission error (duplicate mobile, promo generation failed, server error). */
.campaign-public__error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-block-end: 20px;
  padding: 13px 16px;
  border: 1px solid rgba(216,20,28,.22);
  border-radius: var(--r-md);
  background: var(--red-50);
  color: var(--red-700);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
}
.campaign-public__error::before {
  content: "!";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--red-600);
  color: #fff;
  font-size: 12px; font-weight: 700; line-height: 18px;
  text-align: center;
}
.campaign-public__error[hidden] { display: none; }

/* ---- Invalid field state ----
   Same treatment as base.css's `.input--error`, keyed on the `.is-invalid` class the script actually sets.
   Deliberately restrained: a red border and a softer focus ring, no shake and no filled background. */
.campaign-public .is-invalid,
.campaign-public .is-invalid:hover { border-color: var(--red-500); }
.campaign-public .is-invalid:focus { box-shadow: 0 0 0 3px rgba(216,20,28,.12); }

/* ---- Choice groups: radio, checkbox, multi-select ---- */
.campaign-public__group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
  background: var(--paper);
}
.campaign-public__group.is-invalid { border-color: var(--red-500); }

.campaign-public__choice {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-800);
  cursor: pointer;
  transition: background .12s ease;
}
.campaign-public__choice[hidden] { display: none; }
.campaign-public__choice:hover { background: var(--wash); }
.campaign-public__choice input { flex: none; width: 17px; height: 17px; accent-color: var(--red-500); cursor: pointer; }
/* The row, not just the box, shows keyboard focus — the input itself is only 17px of a full-width target. */
.campaign-public__choice:has(input:focus-visible) { background: var(--red-25); box-shadow: var(--focus-ring); }
.campaign-public__choice:has(input:checked) { background: var(--red-25); color: var(--ink-900); font-weight: 500; }

.campaign-public__multi-search { padding: 6px 6px 10px; }
.campaign-public__multi-options { max-height: 264px; overflow-y: auto; }
.campaign-public__multi-count {
  margin: 2px 12px 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-500);
}
.campaign-public__multi-count:empty { display: none; }
.campaign-public__multi-empty { margin: 2px 12px 10px; }

/* ---- File / image upload ------------------------------------------------- */
.campaign-public__upload-input {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.campaign-public__dropzone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
  border: 1.5px dashed var(--ink-300);
  border-radius: var(--r-md);
  background: var(--wash);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.campaign-public__dropzone[hidden] { display: none; }
.campaign-public__dropzone:hover { border-color: var(--red-400); background: var(--red-25); }
/* The zone is the file input's <label>, so focus lands on the hidden input — surface it on the zone. */
.campaign-public__upload-input:focus-visible + .campaign-public__dropzone {
  border-color: var(--red-500);
  box-shadow: var(--focus-ring);
}
.campaign-public__upload.is-dragging .campaign-public__dropzone {
  border-color: var(--red-500);
  border-style: solid;
  background: var(--red-50);
}
.campaign-public__upload.is-rejected .campaign-public__dropzone { border-color: var(--red-500); background: var(--red-25); }

.campaign-public__dropzone-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--red-500);
  font-size: 16px;
}
.campaign-public__dropzone-text { display: grid; gap: 3px; }
.campaign-public__dropzone-text strong { font-size: 14.5px; font-weight: 600; color: var(--ink-800); }
.campaign-public__dropzone-text small { font-size: 12px; color: var(--ink-500); }

/* The chosen-file state. Replaces the zone, so a picked file never sits beside a "drag a file here" prompt. */
.campaign-public__file {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.campaign-public__file[hidden] { display: none; }
.campaign-public__file-preview {
  flex: none;
  width: 54px; height: 54px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--wash);
  border: 1px solid var(--line-soft);
}
.campaign-public__file-preview[hidden] { display: none; }
.campaign-public__file-meta { display: grid; gap: 2px; min-width: 0; flex: 1; }
.campaign-public__file-meta strong {
  font-size: 14px; font-weight: 600; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* a long filename must not widen the row */
}
.campaign-public__file-meta small { font-size: 12px; color: var(--ink-500); }
.campaign-public__file-status { color: var(--green-600); font-weight: 500; }
.campaign-public__file-status:empty { display: none; }
.campaign-public__file-actions { display: flex; gap: 6px; flex: none; }

/* ---- Notice and success -------------------------------------------------- */
.campaign-public__notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-block-end: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(58,109,174,.22);
  border-radius: var(--r-md);
  background: var(--blue-50);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-800);
}
.campaign-public__notice[hidden] { display: none; }
.campaign-public__notice-icon {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px;
  text-align: center;
}
.campaign-public__notice strong { display: block; font-weight: 600; color: var(--ink-900); }
.campaign-public__notice p { margin-block-start: 3px; color: var(--ink-600); }

/* GREEN, and deliberately nothing like the error styling above — a visitor must never read a success as a
   failure. Centred because it replaces the form entirely and has no fields to align to. */
.campaign-public__success {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 10px 0 4px;
  text-align: center;
}
.campaign-public__success[hidden] { display: none; }
.campaign-public__success-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  font-size: 26px;
  border: 1px solid rgba(26,138,77,.25);
}
.campaign-public__success h2 { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.3; color: var(--ink-900); }
.campaign-public__success-note {
  max-width: 48ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-600);
}
.campaign-public__success .btn { margin-block-start: 6px; }

/* ---- Submit -------------------------------------------------------------- */
.campaign-public__submit {
  width: 100%;
  height: 52px;
  margin-block-start: 28px;
  font-size: 15.5px;
}
.campaign-public__submit[disabled] { opacity: .72; cursor: not-allowed; box-shadow: none; }
.campaign-public__submit[disabled]:active { transform: none; }

/* Reuses base.css's mk-spin so there is one spin animation in the system. */
.campaign-public__spinner {
  width: 17px; height: 17px; flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.42);
  border-block-start-color: #fff;
  animation: mk-spin .7s linear infinite;
}
.campaign-public__spinner[hidden] { display: none; }
/* While submitting, the form stops responding to pointer input — belt and braces alongside the script's own
   disabled button, so a double-click cannot start a second request. */
.campaign-public__form.is-submitting { pointer-events: none; }

/* ---- Terms & conditions gate --------------------------------------------- */
/* Present only on a campaign the CMS switched the gate on for, so nothing here affects a campaign without one.

   The text sits in its own bordered, scrollable box rather than flowing into the page: terms run to several
   paragraphs, and letting them push the submit button below three screens of legal text is how a visitor decides
   the form is broken. A capped, scrollable box keeps the ask and the action visible together. */
.campaign-public__terms-text {
  max-height: 220px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--wash);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-700);
  /* The operator authors these in a plain CMS textarea, so their line breaks and blank lines ARE the formatting.
     The text is escaped on render (it is text, not markup), which leaves this as the only thing that keeps the
     paragraphs they typed from collapsing into one block. */
  white-space: pre-wrap;
  /* Focusable so a keyboard user can scroll it; the ring is what tells them the box took focus. */
  outline: none;
}
.campaign-public__terms-text:focus-visible { box-shadow: var(--focus-ring); border-color: var(--red-400); }

/* Pulled flush with the box above it, so the box and the sentence agreeing to it read as one unit rather than as
   two unrelated blocks. Inherits the choice row's hit area, focus ring and checked state. */
.campaign-public__terms-accept { margin-block-start: 10px; }

.campaign-public__privacy {
  margin-block-start: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-500);
  text-align: center;
}

/* Visually hidden but read aloud — the <legend> that names each choice group. */
.campaign-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- RTL ----
   No mirroring is needed: every rule above uses logical properties, and the upload glyph is a VERTICAL arrow —
   flipping it in Arabic would point it downwards, the opposite instruction.

   TRACKING is the one thing that must change. Arabic is cursive and its letters join; both positive and negative
   letter-spacing pull those joins apart, so the display title's tight tracking and the section label's wide
   tracking are both reset to normal. `text-transform: uppercase` is left in place only because it is a no-op on
   Arabic script. */
html[dir="rtl"] .campaign-public__title,
html[dir="rtl"] .campaign-public__section-title { letter-spacing: normal; }

@media (prefers-reduced-motion: reduce) {
  .campaign-public__spinner { animation-duration: 2.4s; }
  .campaign-public__choice,
  .campaign-public__dropzone { transition: none; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
  /* A small gutter rather than full bleed: a rounded card with a wide margin wastes room the fields need, but an
     edge-to-edge card loses the sense of a contained document. */
  .campaign-section { padding-block: 18px 32px; }
  .campaign-public__card { border-radius: var(--r-lg); }
  /* Squarer than the desktop 16/6 — at phone width that ratio is a thin strip — but not as tall as 4/3, which
     ate most of the first screen and pushed the title and the first field below the fold. The vh cap is the
     backstop on a short landscape viewport.

     Selected through the card AND the body — three classes — on purpose. A layout preset that sets its own
     ratio does so with two (`.campaign-public__card--form-first .campaign-public__image`), and a media query
     adds no specificity of its own: written as the bare `.campaign-public__image` this rule LOST to the
     preset, and FORM_FIRST kept its 16/7 desktop strip on a phone with no vh cap at all. Beating it on
     specificity rather than on source order means moving these blocks around the file cannot bring that back. */
  .campaign-public__card .campaign-public__body .campaign-public__image {
    aspect-ratio: 16 / 10;
    max-height: 38vh;
  }
  .campaign-public__multi-options { max-height: 300px; }
  .campaign-public__file { flex-wrap: wrap; }
  .campaign-public__file-actions { width: 100%; }
  .campaign-public__file-actions .btn { flex: 1; }
  /* Comfortable touch target on the choice rows. */
  .campaign-public__choice { padding-block: 12px; }
}

@media (max-width: 420px) {
  /* Narrowest phones: a touch shorter again, so the title is visible without scrolling. Carries the same
     three-class selector as the rule above, and for the same reason. */
  .campaign-public__card .campaign-public__body .campaign-public__image { aspect-ratio: 16 / 11; }
}