/**
 * Almiqat Booking — reservation, program cards, package detail.
 *
 * The reservation rules (.prog-*, .reservation-*, .booking-summary, .form-card,
 * .room-type-*, .travelers-*, .res-sticky-total) are ported from the reference
 * design so the booking page matches it. The theme supplies the tokens they use
 * (--navy, --gold, --border, --radius, --navbar-h, --font-body) plus the shared
 * .form-control / .btn-gold / .packages-grid / .dest-card rules.
 *
 * Everything after the "plugin additions" banner is ours, not the reference's.
 */

/*
 * The reference uses a cool grey-blue token the theme does not define. This site's
 * neutrals are warm — cream #FAFAF7 and gold-pale #FDF8E7 — so the panel fills, the
 * travellers button and the price chips use the theme's own cream instead. A blue-grey
 * patch on a gold page is the sort of thing that reads as "not finished".
 */
:root { --bg: #FAFAF7; }

/* ── Section wrapper ── */
.reservation-section { background: var(--cream); padding: 40px 0 60px; }

/* ── Program Selector ── */
.prog-selector-wrap { margin-bottom: 36px; }
.prog-selector-title {
  text-align: center;
  color: var(--navy);
  font-weight: 900;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  margin-bottom: 6px;
}
.prog-selector-sub {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 24px;
  font-size: .95rem;
}
.prog-cards-grid {
  display: grid;
  /* `min(270px, 100%)`, not a bare 270px: on a phone narrower than ~350px the 270px
     floor is wider than the column itself, and the cards run off the screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 16px;
}

/* ── Program Card ── */
.prog-card {
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
  transition: border-color .22s, box-shadow .22s, transform .18s;
  background: var(--white);
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.prog-card:hover  { border-color: rgba(196,160,80,.55); transform: translateY(-2px); }
.prog-card.selected {
  border-color: var(--gold);
  box-shadow: 0 4px 22px rgba(196,160,80,.22);
}
.prog-card-radio {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color .2s;
}
.prog-card.selected .prog-card-radio { border-color: var(--gold); }
.prog-radio-inner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  transition: background .2s;
}
.prog-card.selected .prog-radio-inner { background: var(--gold); }
.prog-card-header { text-align: center; margin-bottom: 14px; }
/* Matches the theme's .card-badge: gold pill, navy text. White on gold is ~2:1 and looks
   washed out next to every other badge on the site. */
.prog-badge {
  background: var(--gold);
  color: var(--navy);
  border-radius: 50px;
  padding: 3px 14px;
  font-size: .78rem;
  font-weight: 800;
}
.prog-card-name {
  margin: 8px 0 0;
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
}
.prog-hotel-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background: var(--bg);
  border-radius: 10px;
}
.prog-hotel-icon { color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.prog-hotel-city { font-weight: 700; font-size: .8rem; color: var(--text-muted); }
.prog-hotel-name { color: var(--navy); font-weight: 600; font-size: .9rem; }
.prog-hotel-dist { color: var(--text-muted); font-size: .78rem; margin-top: 2px; }
.prog-prices {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.prog-prices-label {
  font-weight: 700;
  font-size: .78rem;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.prog-prices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.prog-price-chip {
  background: var(--bg);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.prog-price-room { color: var(--text-muted); }
.prog-price-val  { color: var(--gold); font-weight: 800; }
.prog-notes {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ── Reservation Layout (2-col desktop, 1-col mobile) ── */
.reservation-layout {
  display: grid;
  /*
   * `minmax(0, 1fr)`, not a bare `1fr` — this is the reservation page's one phone bug.
   *
   * A bare `1fr` track is `minmax(auto, 1fr)`, and that `auto` is the item's own min-content
   * size. A form control's min-content size is its *intrinsic* width, and a `<select>` is as
   * wide as its widest `<option>` — this form's package picker lists whole package names with
   * their prices («باقة العمرة الاقتصادية — 9,800 درهم», ~300px). `min-width: 0` on the
   * control itself (theme.css:595) does not lower the ancestor's min-content contribution, so
   * the floor survived: the single column could never be narrower than the select plus the
   * form card's padding, which is wider than a 360px phone. The grid then ran past the
   * container and `body { overflow-x: hidden }` (theme.css:222) clipped it — the form looked
   * like it walked off the left of the screen, with no scrollbar to reach it.
   *
   * With the floor at 0 the column takes the width it is given, the controls fill it
   * (`width: 100%`), and a long option is clipped inside its own select, where it belongs.
   * The detail page has used this same `minmax(0, …)` idiom since it was written (see
   * `.pkg-detail-body` below); the reservation layout never got it.
   */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
/* The same floor, restated on the two items, so the fix survives a change of track list. */
.res-summary-col,
.res-form-col { min-width: 0; }

@media (min-width: 900px) {
  .reservation-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }
  .res-summary-col { order: 1; }
  .res-form-col    { order: 2; }
}
/* On mobile: form first, summary below */
.res-summary-col { order: 2; }
.res-form-col    { order: 1; }

/* ── Booking Summary ── */
.booking-summary {
  background: var(--navy);
  color: #fff;
  border-radius: 18px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--navbar-h) + 12px);
}
.booking-summary-header {
  background: rgba(212,175,55,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--gold);
  font-size: 1.05rem;
}
.summary-items { padding: 8px 0; }
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .88rem;
}
.summary-item:last-child { border-bottom: none; }
/* The departure row is toggled with the `hidden` attribute. The author-level
   `display: flex` above would otherwise beat the browser's own [hidden] rule and
   leave the row visible no matter what the script sets. */
.summary-item[hidden] { display: none; }
.summary-item .summary-label {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: .75;
  white-space: nowrap;
}
.summary-item .summary-label i { color: var(--gold); font-size: .8rem; }
.summary-item .summary-value {
  font-weight: 700;
  text-align: left;
  max-width: 180px;
  word-break: break-word;
}
.summary-total {
  background: rgba(212,175,55,.08);
  margin-top: 4px;
  padding: 14px 22px !important;
}
.summary-total .summary-label { font-weight: 700; opacity: 1; font-size: .92rem; }
.summary-total .summary-value { color: var(--gold); font-size: 1.15rem; font-weight: 900; }
.summary-note {
  font-size: .8rem;
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .72;
  line-height: 1.6;
}
.summary-wa-link {
  color: #25d366;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* A full-width button inside the dark summary panel. */
.booking-summary .btn-block { border-radius: 0 0 18px 18px; }

/* ── Form Card ── */
.form-card {
  background: var(--white);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(13,22,66,.08);
}
.form-card-title {
  color: var(--navy);
  font-weight: 900;
  margin-bottom: 22px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-card-title i { color: var(--gold); }

/* ── Room Type Section ── */
.room-type-section {
  /* The reference's own first stop, a pale blue (#f0f4ff) that has no token in this
     theme's palette. Its second stop is #FDF8E7, which is exactly --gold-pale. */
  background: linear-gradient(135deg, #f0f4ff 0%, var(--gold-pale) 100%);
  border: 2px solid rgba(212,175,55,.25);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  animation: slideDown .25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.room-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .room-type-grid { grid-template-columns: 1fr; }
}

/* ── Room Type Button ── */
.room-type-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  text-align: right;
  font-family: 'Tajawal', sans-serif;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
.room-type-btn:hover {
  border-color: rgba(212,175,55,.6);
  transform: translateY(-1px);
}
.room-type-btn.selected {
  border-color: var(--gold);
  background: rgba(212,175,55,.07);
  box-shadow: 0 3px 12px rgba(212,175,55,.2);
}
.room-type-icon {
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 2px;
}
.room-type-label {
  font-weight: 700;
  color: var(--navy);
  font-size: .9rem;
  line-height: 1.3;
}
.room-type-price {
  font-weight: 900;
  color: var(--gold);
  font-size: 1rem;
}
.room-type-price small {
  font-weight: 400;
  color: var(--text-muted);
  font-size: .75rem;
}

/* Payment radios reuse the room button look; the radio itself stays out of flow. */
.almiqat-pay-grid .room-type-btn { flex-direction: row; align-items: center; gap: 10px; }
.almiqat-pay-grid .room-type-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.almiqat-pay-grid .room-type-btn { position: relative; }
.almiqat-pay-grid .room-type-icon { margin-bottom: 0; }
.almiqat-pay-grid .room-type-btn:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212,175,55,.07);
  box-shadow: 0 3px 12px rgba(212,175,55,.2);
}

/* ── Departure slots ── */
.departure-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .departure-list { grid-template-columns: 1fr; }
}
.departure-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 15px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.departure-option:hover { border-color: rgba(212,175,55,.6); }
.departure-option.selected,
.departure-option:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212,175,55,.07);
  box-shadow: 0 3px 12px rgba(212,175,55,.2);
}
.departure-option:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Keyboard-reachable, out of the visual layout. */
.departure-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.departure-date { font-weight: 700; color: var(--navy); font-size: .92rem; }
.departure-price { color: var(--gold-dark); font-weight: 800; font-size: .85rem; }
.departure-option--custom .departure-date { color: var(--text-muted); }
.departure-option--custom .departure-price { color: var(--text-muted); font-weight: 600; }

/* ── Travelers input with +/- ── */
.travelers-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  /* White like every other field on the form; the buttons either side sit on cream. */
  background: var(--white);
  overflow: hidden;
  transition: border-color .2s;
}
.travelers-input-wrap:focus-within { border-color: var(--gold); }
.travelers-btn {
  width: 44px;
  height: 46px;
  flex-shrink: 0;
  border: none;
  background: var(--bg);
  color: var(--navy);
  /* A plain +/− character, not a Font Awesome glyph: the theme's icon subset is built
     from the icons its own pages use, and it has no fa-plus / fa-minus, which left the
     two buttons empty. A text character always renders. */
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
  -webkit-tap-highlight-color: transparent;
}
.travelers-btn:hover { background: rgba(212,175,55,.15); color: var(--gold); }
.travelers-btn:active { background: rgba(212,175,55,.25); }
.travelers-num {
  flex: 1;
  min-width: 0;
  width: auto;
  border: none !important;
  border-radius: 0 !important;
  text-align: center;
  box-shadow: none !important;
  padding: 11px 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  -moz-appearance: textfield;
}
.travelers-num:focus { outline: none; }
.travelers-num::-webkit-outer-spin-button,
.travelers-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Misc form helpers ── */
.label-opt { color: var(--text-muted); font-weight: 400; font-size: .82rem; }
.req { color: #dc2626; }
.res-submit-btn { margin-top: 10px; font-size: 1.05rem; padding: 15px 24px; }
.res-submit-note { text-align: center; margin-top: 10px; font-size: .82rem; color: var(--text-muted); }

/* ── Mobile-first form adjustments ── */
@media (max-width: 560px) {
  .form-card { padding: 20px 16px; }
  .form-card-title { font-size: 1.1rem; }
  .booking-summary-header { padding: 13px 16px; }
  .summary-item { padding: 9px 16px; }
  .room-type-section { padding: 14px; }
  .room-type-btn { padding: 12px 14px; }
}

/* ── Collapsible summary on mobile ── */
@media (max-width: 899px) {
  .booking-summary {
    position: static;
    border-radius: 14px;
  }
  .booking-summary-header {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .booking-summary-header::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: auto;
    transition: transform .25s;
  }
  .booking-summary.collapsed .booking-summary-header::after {
    transform: rotate(-90deg);
  }
  .booking-summary.collapsed .summary-items,
  .booking-summary.collapsed .summary-note {
    display: none;
  }
}

/* ── Sticky mobile summary bar at bottom of viewport ── */
/* Hidden at every width unless JS marks it visible with a real total. */
.res-sticky-total { display: none; }

@media (max-width: 899px) {
  .res-sticky-total.is-visible {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--navy);
    color: #fff;
    padding: 10px 20px env(safe-area-inset-bottom, 10px);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 200;
    box-shadow: 0 -4px 20px rgba(13,22,66,.2);
  }
  .res-sticky-total-label { font-size: .82rem; opacity: .75; }
  .res-sticky-total-price { color: var(--gold); font-weight: 900; font-size: 1.1rem; }
  .reservation-section { padding-bottom: 80px; }
}

/* ── Room type grid: 2 cols on ≥400px, 1 col on smaller ── */
@media (min-width: 400px) and (max-width: 600px) {
  .room-type-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PLUGIN ADDITIONS — banners, packages grid, package detail
   ═══════════════════════════════════════════════════════════════════ */

/* Inline notices after a submit. */
.almiqat-alert {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 20px;
  border: 1px solid #fecaca;
  border-right: 4px solid #ef4444;
  background: #fef2f2;
  color: #7f1d1d;
}
.almiqat-alert ul { margin: 0; padding-right: 18px; }
.almiqat-alert p { margin: 0 0 8px; }
.almiqat-alert p:last-child { margin-bottom: 0; }
.almiqat-done { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.almiqat-done .btn { flex: 0 1 auto; }

/* The confirmation page is a banner plus two buttons, nothing else. Centre them in a
   readable column instead of stretching them across the container, and give the closing
   line the weight it deserves — `.summary-note` is written for the dark summary panel,
   where faint white-on-navy is right; on the cream page it is not. */
.almiqat-confirm-page { max-width: 720px; }
.almiqat-confirm-page .almiqat-done { justify-content: center; margin-top: 22px; }
.almiqat-confirm-page .summary-note {
  border-top: none;
  opacity: 1;
  padding: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
}
.almiqat-alert--success {
  border-color: #bbf7d0;
  border-right-color: #16a34a;
  background: #f0fdf4;
  color: #14532d;
}
.almiqat-alert--success i { color: #16a34a; }
.almiqat-rib {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed #86efac;
  border-radius: 10px;
  font-family: inherit;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
  font-size: .88rem;
}

/* Honeypot: present in the DOM, invisible and unfocusable to humans.

   Not `left: -9999px`. That is the usual way to park a field out of view, and in a
   left-to-right document it is free — nothing can scroll to the far left, so the box
   just sits there unheard of. This site is RTL, and RTL reverses which side can be
   scrolled: the scrollable end is the LEFT. A box thrown 9999px left is therefore not
   off-canvas at all, it is ~10,000px of real, scrollable page — the document is that
   wide, and on iOS Safari the theme's `body { overflow-x: hidden }` (theme.css:222)
   does not stop a finger from dragging it. That is the booking form's own piece of the
   sideways-page bug, and it is why the reservation page still panned after the grid
   track above was fixed: only the pages carrying this form have the field.

   Hiding it in place instead costs nothing and cannot widen anything: a 1px box at its
   own static position, clipped away. `clip` only applies to a positioned element, so
   `position: absolute` stays. */
.almiqat-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Packages grid on the packages page. The theme styles .packages-grid itself;
   this only caps the columns when the shortcode asks for a specific count.

   A card's track is `minmax(0, 1fr)`, never a bare `1fr`. A bare `1fr` is `minmax(auto, 1fr)`,
   and that `auto` is the item's min-content size — for a package card that is the intrinsic
   width of its photo, 1024px for this site's images, because a percentage width (the cards'
   `width: 100%`) does not lower a replaced element's min-content contribution. The track would
   then be 1024px wide on a 390px phone and the page would be wider than the screen.
   The `min()` tracks are already safe: their minimum is a length, not `auto`. */
.almiqat-grid--1 { grid-template-columns: minmax(0, 1fr); }
.almiqat-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.almiqat-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.almiqat-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
@media (min-width: 1000px) {
  .almiqat-grid--1 { grid-template-columns: minmax(0, 1fr); }
  .almiqat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .almiqat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .almiqat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card images: the theme expects an <img>; WP may emit srcset with its own sizes. */
.package-card .card-image img,
.dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.package-card .card-image { position: relative; overflow: hidden; }

/* ── Filter bar (the clone theme has no rules for this block) ──
   One compact row above the grid: the fields stay small, and the two controls are the
   reference's own pair — a gold «بحث» and a navy «مسح». Both are `.btn` pills, so they
   get their colours from the buttons block and the `:is()` guards below. */
.filter-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.filter-group { flex: 1 1 130px; min-width: 0; }
.filter-group label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  display: block;
  margin-bottom: 3px;
}
.filter-bar .form-control {
  padding: 8px 10px;
  font-size: .86rem;
  border-width: 1px;
  border-radius: 8px;
}
.filter-group--actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.filter-group--actions .btn {
  padding: 9px 16px;
  font-size: .86rem;
  white-space: nowrap;
}

/* «تم العثور على 5 باقات», the line between the bar and the grid — where the reference
   puts it, instead of squeezing a count into the row of controls. */
.almiqat-count {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: .9rem;
}
.almiqat-count strong { color: var(--navy); font-weight: 800; }

/* The theme styles labels only via `.form-group label`; the shortcodes also use
   bare `.form-label` outside a form-group. */
.form-label {
  display: block;
  font-weight: 700;
  color: var(--navy);
  font-size: .93rem;
  margin-bottom: 6px;
}

.stars { color: var(--gold); font-size: .88rem; letter-spacing: 1px; }

/* A shortcode usually lands inside the theme's own .container — don't double gutters. */
.container .container { padding-left: 0; padding-right: 0; }

/*
 * The theme wraps page content in `.entry-card`: an 860px prose card with 36/32px
 * padding. That is right for paragraphs and wrong for these pages — on a 360px phone
 * it leaves barely 250px for the packages grid and the booking form, and at desktop it
 * makes the grid 2 columns wide instead of 4. When one of our shortcodes is inside the
 * card, the card stops being a card.
 */
.entry-card:has(.almiqat-page) {
  max-width: 1400px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* ...including the theme's `> * + *` rhythm, which would leave a sliver above the
   shortcode's own section background. */
.entry-content > .almiqat-page { margin-top: 0; }

/*
 * Button colours inside page content — the button-text bug.
 *
 * The theme paints links in page content with `.entry-content a { color: var(--gold-dark);
 * text-decoration: underline }`. That selector is more specific (0,1,1) than `.btn-gold`,
 * `.btn-navy`, `.btn-whatsapp` and `.card-share a` (0,1,0), so inside a page — which is
 * where every shortcode lives — the link-buttons lost their own colours: «عرض التفاصيل»
 * came out gold-on-gold, the WhatsApp and Facebook shares put dark gold on green and blue,
 * and all of them were underlined. Nothing in the markup was wrong; this rule was winning.
 * Re-assert the colours from a scope that outranks it. (:is() takes the specificity of its
 * strongest argument, so this is 0,2,1 — above `.entry-content a` and above `.entry-content
 * a:hover`, which is 0,2,1 and printed earlier.)
 */
:is(.entry-content, .almiqat-page) a.btn,
:is(.entry-content, .almiqat-page) a.btn:hover,
:is(.entry-content, .almiqat-page) .card-share a,
:is(.entry-content, .almiqat-page) .card-share a:hover { text-decoration: none; }

:is(.entry-content, .almiqat-page) a.btn-gold,
:is(.entry-content, .almiqat-page) a.btn-gold:hover { color: var(--navy); }

:is(.entry-content, .almiqat-page) a.btn-navy,
:is(.entry-content, .almiqat-page) a.btn-navy:hover,
:is(.entry-content, .almiqat-page) a.btn-whatsapp,
:is(.entry-content, .almiqat-page) a.btn-whatsapp:hover,
:is(.entry-content, .almiqat-page) a.btn-facebook,
:is(.entry-content, .almiqat-page) a.btn-facebook:hover { color: var(--white); }

/* `.btn-outline` — the one `.btn-*` the list above missed, and only the About page's
   closing banner uses it: «تصفح الباقات», the third pill on the navy band. Its own rule
   (theme.css:364) is transparent + white border + white text, but that is 0,1,0 and this
   page is content, so `.entry-content a` (0,1,1, theme.css:861) repainted the word — the
   button sank into the band. Hover has to be re-stated too, and to navy: the theme's own
   hover turns the background white (theme.css:365), where white text would vanish. */
:is(.entry-content, .almiqat-page) a.btn-outline { color: var(--white); }
:is(.entry-content, .almiqat-page) a.btn-outline:hover { color: var(--navy); }

:is(.entry-content, .almiqat-page) .summary-wa-link { color: #25d366; text-decoration: none; }

/* The same problem on the detail page's own links: the share pills, the «استفسر عبر
   واتساب» button and the hero's breadcrumb are anchors that are not `.btn`, so the theme
   would print them underlined and dark gold on green, blue and navy. */
:is(.entry-content, .almiqat-page) .pkg-detail-share__btn,
:is(.entry-content, .almiqat-page) .pkg-detail-share__btn:hover,
:is(.entry-content, .almiqat-page) .pkg-detail-cta__wa,
:is(.entry-content, .almiqat-page) .pkg-detail-cta__wa:hover { color: var(--white); text-decoration: none; }

:is(.entry-content, .almiqat-page) .pkg-detail-hero__crumb a,
:is(.entry-content, .almiqat-page) .pkg-detail-hero__crumb a:hover { color: rgba(255, 255, 255, .7); text-decoration: none; }

/*
 * The same story for headings, and it is the one that makes these pages look «weak».
 *
 * The theme writes prose rules for blog posts: `.entry-content h1 { font-size:1.9rem;
 * margin-top:32px }`, `h2 { 1.6rem }`, `h3 { 1.3rem }`. Those are 0,1,1 and every heading
 * the plugin emits is styled by a single class (0,1,0) — so inside a page the theme won,
 * on all of them: the package hero title was capped at 1.9rem and pushed 32px down from
 * the top of its own navy band, every card title got a 32px gap above it and grew to
 * 1.3rem, and the booking form title to 1.6rem. The reference page has no `.entry-content`
 * around it, which is why the same markup looks right there. Re-assert the design's own
 * values from a scope that outranks `.entry-content h1…h6`.
 */
:is(.entry-content, .almiqat-page) .card-title { font-size: 1.15rem; margin-top: 0; }
:is(.entry-content, .almiqat-page) .prog-selector-title { font-size: clamp(1.3rem, 3.5vw, 2rem); margin-top: 0; }
:is(.entry-content, .almiqat-page) .form-card-title { font-size: 1.3rem; margin-top: 0; }
:is(.entry-content, .almiqat-page) .pkg-detail-hero__title {
  color: var(--white);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin-top: 0;
}
:is(.entry-content, .almiqat-page) .pkg-detail-card__title { font-size: 1.3rem; margin-top: 0; }
:is(.entry-content, .almiqat-page) .pkg-detail-info__title { font-size: 1rem; margin-top: 0; }
:is(.entry-content, .almiqat-page) .summary-note a { color: var(--navy); }

/* Fallback for browsers without :has() — the card stays, but stops eating the width. */
@media (max-width: 768px) {
  .entry-card { padding: 22px 16px; }
}

@media (max-width: 768px) {
  .filter-bar { padding: 16px; }
}
@media (max-width: 600px) {
  .filter-bar { gap: 10px; }
  .filter-group { flex: 1 1 100%; min-width: 0; }
  .filter-group--actions { flex: 1 1 100%; }
  .filter-group--actions .btn { flex: 1; justify-content: center; }
  .almiqat-program { padding: 14px; }
  .almiqat-table th,
  .almiqat-table td { padding: 9px 8px; font-size: .85rem; }
}

/* ── Package detail ──
   The reference page carries no classes for this layout at all: every rule below exists
   as an inline `style=""` attribute on its markup, plus a trailing <style> block for the
   two breakpoints. Same design, moved into the stylesheet — which is why the rules look
   like someone transcribed inline styles. */
.pkg-detail-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 40px 0 0;
  margin-top: var(--navbar-h);
  position: relative;
  overflow: hidden;
}
/*
 * One hero per page, like the reference.
 *
 * The page that carries the shortcode also carries the theme's chrome: a navy `.page-hero`
 * («باقاتنا السياحية» and its breadcrumb) and, below it and above the shortcode, the page's
 * own intro paragraph. Stacked on our hero that reads as one long navy block with two
 * breadcrumbs and two <h1>s, with a stray sentence in front of the second one. The
 * reference's detail page has none of that — its URL is a template of its own, with no page
 * around it — so the theme's hero and the intro line step aside here. Only here: the
 * packages list keeps both, and so does every other page.
 *
 * Hiding the theme's hero takes its navbar clearance with it (`.page-hero` is what carries
 * `calc(var(--navbar-h) + 40px) 0 50px`), and the section's 75px top padding would leave our
 * hero floating in white — so the section gives that up too and the hero picks up the
 * `--navbar-h` offset it already has on the single template. Its own 40px top padding then
 * puts the title at the same 110px the theme hero did.
 *
 * The test is :has() in both places, the same technique the `.entry-card` rule above uses,
 * so a browser without it keeps today's layout instead of clearing the navbar twice.
 */
.page-hero:has(~ .section .pkg-detail-hero) { display: none; }
.entry-content > *:has(~ .almiqat-page .pkg-detail-hero) { display: none; }
.section:has(.pkg-detail-hero) { padding-top: 0; }
.section:has(.pkg-detail-hero) .pkg-detail-hero { margin-top: var(--navbar-h); }

/*
 * ...and the hero still does not reach the edges, because the page route nests it two wrappers
 * deep: `.section > .container` is 1400px with 20px gutters, and `.entry-card` is another
 * 1400px inside that. Those two exist to funnel prose into a column; the detail layout is
 * already container-driven — the hero carries `.pkg-detail-hero__inner` and the body
 * `.pkg-detail-body`, both `.container` — so on this route the wrappers only box the navy in.
 * They get out of the way, and the two containers the design owns keep their gutter: rule
 * `.container .container` above zeroes nested gutters (a shortcode inside the theme's
 * container must not double them), which is wrong here, where both are nested by accident.
 * The gutter is 20px because that is the theme's own and it has no breakpoint override
 * (theme.css:457 is the only `.container` rule).
 *
 * On `/package/<slug>/` none of this matches — there is no `.section` there and the hero is
 * already a child of `#content` — so the single template renders as it always did.
 */
.section:has(.pkg-detail-hero) > .container,
.entry-card:has(.pkg-detail-hero) { max-width: none; margin: 0; padding: 0; }

.section:has(.pkg-detail-hero) .pkg-detail-hero__inner,
.section:has(.pkg-detail-hero) .pkg-detail-body { padding-left: 20px; padding-right: 20px; }

/* The weaker half of the pair above, and the fallback for it: with the theme's hero still
   on screen, clearing the fixed navbar here would double the offset. It stays because that
   is exactly what a browser without :has() needs — the new rule is more specific (0,3,0
   against 0,2,0) and wins wherever it applies. */
.entry-content .pkg-detail-hero { margin-top: 0; }
.pkg-detail-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .13;
}
.pkg-detail-hero__inner { position: relative; z-index: 1; }
.pkg-detail-hero__crumb { margin-bottom: 20px; }
.pkg-detail-hero__crumb a { color: rgba(255, 255, 255, .7); }
.pkg-detail-hero__crumb span { color: rgba(255, 255, 255, .4); }
.pkg-detail-hero__current { color: var(--gold); }
.pkg-detail-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: flex-end;
  padding-bottom: 36px;
}
.pkg-detail-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pkg-detail-badge {
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  padding: 5px 16px;
  border-radius: 30px;
  font-weight: 600;
  font-size: .88rem;
  backdrop-filter: blur(4px);
}
.pkg-detail-badge i { color: var(--gold); }
.pkg-detail-badge--type {
  background: var(--gold);
  color: var(--navy);
  font-weight: 800;
  padding: 5px 18px;
}
.pkg-detail-badge--stars { color: var(--gold); }
.pkg-detail-hero__title {
  color: var(--white);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 12px;
}
.pkg-detail-hero__includes { display: flex; flex-wrap: wrap; gap: 10px; }
.pkg-detail-hero__includes span { color: rgba(255, 255, 255, .8); font-size: .9rem; }
.pkg-detail-hero__includes i { color: var(--gold); }
.pkg-detail-hero__price { text-align: center; min-width: 200px; }
.pkg-detail-hero__price-label,
.pkg-detail-hero__price-unit { color: rgba(255, 255, 255, .6); font-size: .85rem; }
.pkg-detail-hero__price-label { margin-bottom: 4px; }
.pkg-detail-hero__price-value {
  color: var(--gold);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}
.pkg-detail-hero__price-unit { margin-bottom: 18px; }
.pkg-detail-hero__cta { width: 100%; justify-content: center; font-size: 1rem; padding: 13px 24px; }

/* Body: what the customer reads on one side, the booking card on the other. */
.pkg-detail-body { padding-top: 48px; padding-bottom: 64px; }
.pkg-detail-grid {
  display: grid;
  /*
   * Both tracks are `minmax(0, …)`, and the two items below carry `min-width: 0` — this is
   * the detail page's one phone bug, and it is the same trap as the booking form's (see
   * .reservation-layout): a bare `1fr` is `minmax(auto, 1fr)`, and that `auto` is the grid
   * item's MIN-CONTENT size. Here the min-content comes from the package photo: the imported
   * images are 1024px wide and `.pkg-detail-image img` is `width: 100%`, which does NOT lower
   * a replaced element's min-content contribution — the image still answers for its intrinsic
   * width. So on a phone the single `1fr` column was 1024px wide, the page ran ~670px past the
   * screen, and the fixed navbar (100% of the viewport, not of the page) stayed put while the
   * content slid under it: «the header is on the left and the rest of the page on the right».
   * At ≥769px the track was already `minmax(0, 1fr)` — which is exactly why this only ever
   * showed up on mobile and only on the ?id= view.
   */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: flex-start;
}
.pkg-detail-main,
.pkg-detail-side { min-width: 0; }
.pkg-detail-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--shadow-md);
  max-height: 420px;
}
.pkg-detail-image img { width: 100%; height: 420px; object-fit: cover; display: block; }

.pkg-detail-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.pkg-detail-card__title {
  color: var(--navy);
  font-weight: 900;
  font-size: 1.3rem;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pkg-detail-card__icon {
  width: 36px;
  height: 36px;
  background: var(--gold-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pkg-detail-card__icon i { color: var(--gold); }
.pkg-detail-desc { color: var(--text); line-height: 1.95; font-size: 1rem; }
.pkg-detail-desc > *:last-child { margin-bottom: 0; }

.pkg-detail-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pkg-detail-include {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--gold-pale);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.pkg-detail-include__icon {
  width: 38px;
  height: 38px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pkg-detail-include__icon i { color: var(--navy); font-size: .9rem; }
.pkg-detail-include__label { font-weight: 600; color: var(--navy); font-size: .92rem; }

.pkg-detail-share {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pkg-detail-share__label { font-weight: 700; color: var(--navy); margin-left: 4px; }
.pkg-detail-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--white);
}
.pkg-detail-share__btn--wa { background: #25D366; }
.pkg-detail-share__btn--fb { background: #1877F2; }

/* Sticky sidebar: the booking card, then the facts. */
.pkg-detail-side { position: sticky; top: calc(var(--navbar-h) + 20px); }
.pkg-detail-cta {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}
.pkg-detail-cta__label,
.pkg-detail-cta__unit { color: rgba(255, 255, 255, .65); font-size: .85rem; }
.pkg-detail-cta__label { margin-bottom: 4px; }
.pkg-detail-cta__price {
  color: var(--gold);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 2px;
}
.pkg-detail-cta__unit { margin-bottom: 22px; }
.pkg-detail-cta__btn {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 15px;
  margin-bottom: 12px;
}
.pkg-detail-cta__wa {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: var(--white);
  padding: 13px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .95rem;
}
.pkg-detail-info {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.pkg-detail-info__title {
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
  margin: 0 0 16px;
  border-bottom: 2px solid var(--gold-pale);
  padding-bottom: 10px;
}
.pkg-detail-info__title i { color: var(--gold); }
.pkg-detail-info__rows { display: flex; flex-direction: column; gap: 13px; }
.pkg-detail-info__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.pkg-detail-info__row > span { color: var(--text-muted); font-size: .88rem; }
.pkg-detail-info__row > span i { color: var(--gold); width: 16px; }
.pkg-detail-info__row strong { color: var(--navy); font-size: .9rem; }
.pkg-detail-info__stars { color: var(--gold); }

/* The reference hides the hero's price block under 900px — the CTA moves to the sticky
   bar — and stacks the body under 768px. */
@media (max-width: 900px) {
  .pkg-detail-hero__grid { grid-template-columns: 1fr; }
  .pkg-detail-hero__price { display: none; }
}
@media (max-width: 768px) {
  /* `minmax(0, 1fr)`, not `1fr` — see .pkg-detail-grid above: the bare track let the 1024px
     package photo set the column width and pushed the page off the screen. */
  .pkg-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .pkg-detail-side { position: static; }
  .pkg-detail-includes { grid-template-columns: 1fr; }
  .pkg-detail-card { padding: 22px 18px; }
  .pkg-detail-image img { height: 300px; }
}

.almiqat-program {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  background: var(--white);
}
.almiqat-program h3 {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 14px;
}
.almiqat-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 0;
  font-size: .9rem;
}
.almiqat-table th,
.almiqat-table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.almiqat-table th {
  background: var(--gold-pale);
  color: var(--navy);
  font-weight: 700;
}
.almiqat-table tr:last-child td { border-bottom: none; }
.almiqat-table td:last-child { color: var(--gold-dark); font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════════════
   About page — «من نحن»
   ══════════════════════════════════════════════════════════════════════════

   Transcribed from the reference's about.php, whose `.about-*` rules live in main.css:1023-1361.
   The theme kept the stats strip and the cards it shares with the home page (`.stats-*`,
   `.features-*`, `.section-badge`, `.divider` — theme.css:458-537); it dropped every `.about-*`
   rule, so they are restated here, the way the detail page restates its own.

   Every selector is scoped to `.almiqat-about`. That keeps them off the theme's own markup and
   is also the fix for the headings: the theme's `.entry-content h2…h4` rules (0,1,1) beat a
   single class (0,1,0), so an about-page heading would come out at the theme's prose size with
   its 32px gaps. Two classes outrank them.

   Three deliberate departures from the source, all about assets rather than design:
   `.about-visual-card` is the same navy gradient instead of the reference's portrait photo
   under a dark overlay (there is no such photo here), the testimonial cards and the
   partner-logo strip are left out entirely (no quotes or logos to print), and nothing on the
   page states a figure the agency has not supplied — the counters come from the shortcode and
   a figure left empty is simply not printed. */

/* The bands run edge to edge, so the page's wrappers step aside as they do on the detail view,
   and each band's own container keeps the gutter `.container .container` (see above) zeroes. */
.section:has(.almiqat-about) { padding-top: 0; padding-bottom: 0; }
.section:has(.almiqat-about) > .container,
.entry-card:has(.almiqat-about) { max-width: none; margin: 0; padding: 0; }
.almiqat-about .section > .container,
.almiqat-about .stats-strip > .container { padding-left: 20px; padding-right: 20px; }

/* `.fade-in` is `opacity:0` and 18px down until something adds `.visible` (theme.css:656-657).
   The theme's own script does that on the home page and booking.js redoes it for these blocks;
   this animation is the floor under both — if neither runs, the band still appears, just late.

   It animates `opacity` alone, and drops the 18px shift instead of animating it: a
   fill-forwards animation outranks a `:hover` declaration, so animating the shift would freeze
   the cards' lift for the rest of the page's life. Dropping the shift puts the reset at
   `.almiqat-about .fade-in` (0,2,0) — the same weight as the theme's `.feature-card:hover`,
   which loses that tie on order — so the two lifts are restated here to win it back. */
@keyframes almiqat-about-reveal { to { opacity: 1; } }
.almiqat-about .fade-in { transform: none; animation: almiqat-about-reveal .6s ease 3s forwards; }
.almiqat-about .feature-card:hover,
.almiqat-about .about-why-card:hover { transform: translateY(-4px); }

.almiqat-about .about-band-white { background: #fff; }
.almiqat-about .about-band-cream { background: var(--cream); }

/* Headings and dividers: the values the source's own inline styles set. */
.almiqat-about .section-title { font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin: 0 0 14px; }
.almiqat-about .about-h2 { margin: 0 0 20px; }
.almiqat-about .section-title-on-dark { color: #fff; }
.almiqat-about .features-section .section-desc { color: rgba(255, 255, 255, .7); }
.almiqat-about .about-divider { margin: 0 0 24px; }

/* ── The story, beside the navy card ── */
.almiqat-about .about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.almiqat-about .about-p,
.almiqat-about .about-story > p {
  color: var(--text-muted);
  line-height: 2;
  margin-bottom: 16px;
  font-size: 1.02rem;
}
.almiqat-about .about-p:last-of-type,
.almiqat-about .about-story > :last-child { margin-bottom: 0; }

/* The story column can also be the page's own text, typed in wp-admin, so it arrives as
   whatever the editor produced rather than as `.about-p` paragraphs. Style it like the
   design instead of leaving it to the theme's blog-prose rules — `.entry-content h2` is
   1.6rem with a 32px gap above it (theme.css:853-862), which would break the band, and it
   outranks any single class here. */
.almiqat-about .about-story :is(h2, h3, h4) {
  color: var(--navy);
  font-weight: 900;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin: 0 0 14px;
}
.almiqat-about .about-story :is(h2, h3, h4):not(:first-child) { margin-top: 26px; }
.almiqat-about .about-story :is(ul, ol) { margin: 0 0 16px; padding-right: 22px; }
.almiqat-about .about-story li { color: var(--text-muted); line-height: 2; font-size: 1.02rem; }
.almiqat-about .about-cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

.almiqat-about .about-visual-wrap { position: relative; }
.almiqat-about .about-visual-card {
  position: relative;
  background: linear-gradient(160deg, var(--navy), var(--navy-mid));
  border-radius: var(--radius-xl);
  padding: 48px 36px;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-height: 520px;
}
.almiqat-about .about-logo-block { margin-bottom: 22px; }
.almiqat-about .about-logo-name { font-size: 1.4rem; font-weight: 900; color: var(--gold); line-height: 1.2; }
.almiqat-about .about-logo-sub { font-size: .92rem; color: rgba(255, 255, 255, .7); margin-top: 4px; letter-spacing: 1px; }
.almiqat-about .about-visual-desc { opacity: .8; font-size: 1rem; line-height: 1.9; margin-bottom: 28px; }
.almiqat-about .about-visual-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.almiqat-about .about-visual-stat { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 16px 10px; }
.almiqat-about .about-visual-stat-num { font-size: 1.8rem; font-weight: 900; color: var(--gold); line-height: 1.1; }
.almiqat-about .about-visual-stat-label { font-size: .82rem; opacity: .7; margin-top: 4px; }
.almiqat-about .about-float-badge {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(212, 175, 55, .5);
}
.almiqat-about .about-float-badge i { font-size: 1.3rem; margin-bottom: 2px; }

/* ── What sets us apart ── */
.almiqat-about .about-why-text { order: 1; }
.almiqat-about .about-why-visual { order: 2; }
.almiqat-about .about-why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.almiqat-about .about-why-card {
  background: var(--cream);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  transition: all .3s;
}
.almiqat-about .about-why-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.almiqat-about .about-why-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
}
/* The source relies on the UA margins here; state them, or the theme's `.entry-content h4`
   (32px) wins — same reason the theme writes out 1.17em for its own `.form-card-heading`. */
.almiqat-about .about-why-card h4 { color: var(--navy); font-size: .95rem; font-weight: 800; margin: 1.33em 0 6px; }
.almiqat-about .about-why-card p { color: var(--text-muted); font-size: .82rem; line-height: 1.5; }

.almiqat-about .about-adv-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.almiqat-about .about-adv-icon { color: var(--gold); font-size: 1.1rem; flex-shrink: 0; margin-top: 3px; }
.almiqat-about .about-adv-text { color: var(--text); font-size: 1rem; line-height: 1.7; }

/* The values cards are `<h3>` with no class, as in the source; without a size of their own they
   inherit the theme's `.entry-content h3` — 1.3rem with 32px gaps. 1.17em is what the source
   renders at. */
.almiqat-about .feature-card h3 { font-size: 1.17em; margin: 1em 0; }

/* ── Closing call to action (the source writes this one inline) ── */
.almiqat-about .about-cta-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-radius: var(--radius-xl);
  padding: 56px 40px;
  text-align: center;
}
.almiqat-about .about-cta-banner__circle {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(212, 175, 55, .07);
}
.almiqat-about .about-cta-banner__circle--tr { top: -60px; right: -60px; }
.almiqat-about .about-cta-banner__circle--bl { bottom: -60px; left: -60px; width: 200px; height: 200px; }
.almiqat-about .about-cta-banner__inner { position: relative; z-index: 1; }
.almiqat-about .about-cta-banner__emoji { font-size: 3rem; margin-bottom: 16px; }
.almiqat-about .about-cta-banner h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  margin: 0 0 14px;
}
.almiqat-about .about-cta-banner h2 span { color: var(--gold); }
.almiqat-about .about-cta-banner__lead {
  color: rgba(255, 255, 255, .75);
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 520px;
  margin: 0 auto 32px;
}
.almiqat-about .about-cta-banner__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .almiqat-about .about-two-col { grid-template-columns: 1fr; gap: 36px; }
  .almiqat-about .about-visual-card { padding: 32px 22px; min-height: 0; border-radius: var(--radius-lg); }
  .almiqat-about .about-logo-block { margin-bottom: 16px; }
  .almiqat-about .about-logo-name { font-size: 1.15rem; }
  .almiqat-about .about-logo-sub { font-size: .82rem; }
  .almiqat-about .about-visual-desc { font-size: .92rem; margin-bottom: 20px; }
  .almiqat-about .about-visual-stats { gap: 10px; }
  .almiqat-about .about-visual-stat { padding: 12px 8px; }
  .almiqat-about .about-visual-stat-num { font-size: 1.5rem; }
  .almiqat-about .about-visual-stat-label { font-size: .75rem; }
  .almiqat-about .about-float-badge { top: -14px; right: -8px; width: 58px; height: 58px; font-size: .68rem; }
  .almiqat-about .about-float-badge i { font-size: 1rem; }
  .almiqat-about .about-why-cards { gap: 10px; }
  .almiqat-about .about-why-card { padding: 20px 14px; }
  .almiqat-about .about-why-card-icon { width: 42px; height: 42px; font-size: 1.05rem; }
  .almiqat-about .about-adv-row { gap: 10px; margin-bottom: 14px; }
  .almiqat-about .about-adv-text { font-size: .95rem; }
  .almiqat-about .about-cta-banner { padding: 40px 22px; border-radius: var(--radius-lg); }
  .almiqat-about .about-cta-banner__emoji { font-size: 2.4rem; margin-bottom: 10px; }
  .almiqat-about .about-cta-banner__btns .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 380px) {
  .almiqat-about .about-visual-card { padding: 24px 16px; }
  .almiqat-about .about-visual-stat-num { font-size: 1.3rem; }
  .almiqat-about .about-why-card { padding: 16px 10px; }
  .almiqat-about .about-why-card h4 { font-size: .88rem; }
  .almiqat-about .about-why-card p { font-size: .76rem; }
}