/* ═══════════════════════════════════════════════════════════
   Almabsat — Brand Stylesheet
   ═══════════════════════════════════════════════════════════ */

:root {
  --primary-blue: #415FAA;
  --primary-cyan: #60C1D4;
  --primary-gray: #929396;
  --secondary-gold: #F9AE40;
  --secondary-bright-blue: #00ACED;
  --secondary-black: #221F1F;
  --header-height: 72px;
  --surface: #FAFBFC;
  --surface-alt: #F0F4F8;
  --border-light: #E5E8ED;
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', 'IBM Plex Sans Arabic', 'Noto Sans SC', system-ui, sans-serif;
  color: var(--secondary-black);
  background: var(--surface);
  line-height: 1.6;
  overflow-x: hidden;
}

[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}

[lang="zh"] body {
  font-family: 'Noto Sans SC', 'Inter', system-ui, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.2s; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 700; }

.text-gradient {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: 5rem 0; }
.section-alt { background: var(--surface); }

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--secondary-black);
}

.section-header p {
  font-size: 1.1rem;
  color: var(--primary-gray);
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-blue);
  flex-shrink: 0;
}

.logo svg { width: 36px; height: 36px; }
.logo img { height: 48px; width: auto; }
/* Arabic logo carries the full brand lockup (icon + wordmark) with no companion
   text, so it is shown larger than the small English/Chinese logo for legibility. */
[dir="rtl"] .logo img { height: 88px; }
.logo { font-size: 1rem; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--secondary-black);
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover { color: var(--primary-blue); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Header WhatsApp stays a compact icon button at every size — the icon is
   universally recognized, and keeping it icon-only frees horizontal room so
   the primary "Order Another Way" CTA always reads as clear text, and the
   header lines up consistently across Arabic, English and Chinese. */
.header-actions .btn-whatsapp {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 0;
  gap: 0;
  justify-content: center;
  flex-shrink: 0;
}
.header-actions .btn-whatsapp svg { width: 20px; height: 20px; }

/* Language switcher dropdown */
.lang-switcher {
  position: relative;
}

.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.lang-toggle svg {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lang-toggle:hover {
  background: var(--border-light);
}

.lang-toggle:hover svg {
  opacity: 1;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
}

[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
  transform-origin: top left;
}

.lang-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  transition: background 0.15s;
}

.lang-dropdown a:hover {
  background: var(--surface);
}

.lang-dropdown a.active {
  background: var(--surface);
  font-weight: 600;
  color: var(--primary-blue);
}

.lang-dropdown a img {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

/* Mobile menu toggle */
.mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--secondary-black);
}

.mobile-toggle svg { width: 24px; height: 24px; }

/* Mobile nav — hidden by default, shown only on mobile via media query */
.mobile-nav { display: none; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary {
  background: var(--primary-blue);
  color: #fff;
}

.btn-primary:hover {
  background: #364f94;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(65, 95, 170, 0.3);
}

.btn-secondary {
  background: var(--surface);
  color: var(--primary-blue);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover {
  background: #fff;
  border-color: var(--primary-blue);
  transform: translateY(-1px);
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
}

.btn-whatsapp:hover {
  background: #1fb855;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-outline:hover {
  background: var(--primary-blue);
  color: #fff;
}

/* Quiet secondary button — minimal weight, defers focus to the primary CTA. */
.btn-ghost {
  background: transparent;
  color: var(--secondary-black);
  border: 1.5px solid rgba(34, 31, 31, 0.14);
}

.btn-ghost:hover {
  background: rgba(65, 95, 170, 0.06);
  border-color: rgba(65, 95, 170, 0.55);
  color: var(--primary-blue);
  transform: translateY(-1px);
}

.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: 10px; }
.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; border-radius: 14px; }
.btn-icon { padding: 0.5rem; line-height: 0; }
.btn-icon svg { width: 18px; height: 18px; display: block; }
.btn-xl {
  padding: 1.05rem 2.25rem;
  font-size: 1.05rem;
  border-radius: 16px;
  gap: 0.6rem;
}
.btn-xl svg { width: 22px; height: 22px; }

/* Blog article CTAs (in-article "Browse Building Materials" + the 3-button
   end-of-article group). Sized to content on desktop; on mobile they all
   become uniform full-width blocks so they don't look ragged. */
.blog-inline-cta { width: fit-content; }
@media (max-width: 640px) {
  .blog-cta-group { flex-direction: column; align-items: stretch; }
  .blog-cta-group .btn { width: 100%; }
  .blog-inline-cta { width: 100%; }
}

/* Pulse glow on the primary WhatsApp hero CTA */
.btn-whatsapp.btn-xl {
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.32);
  position: relative;
}
.btn-whatsapp.btn-xl:hover {
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.42);
}
@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(37, 211, 102, 0.32); }
  50%      { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn-whatsapp.btn-xl { animation: whatsapp-pulse 2.6s ease-in-out infinite; }
}

/* ── Latest Deals — scrolling card carousel ─────────────── */
/* When the bar is present, push the whole page down so the bar sits below
   the fixed header instead of behind it — keeps the header readable. */
body.has-deals-bar { padding-top: var(--header-height); }

.announcement-bar {
  position: relative;
  background: var(--surface);
  color: var(--secondary-black);
  padding: 0.7rem 0;
  overflow: hidden;
  isolation: isolate;
}

.announcement-header {
  position: relative;
  padding: 0 1rem 0.4rem;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 1.7rem;
}
/* Prev/next arrows — small, side by side, pinned to the physical left of the
   strip in both LTR and RTL. */
.announcement-nav {
  position: absolute;
  left: 1rem;
  top: 0;
  display: inline-flex;
  /* Force the same RTL ordering of the two arrows in every language so the
     pair always reads "‹ ›" (prev on the left pointing left, next on the
     right pointing right) — matching the correct Arabic layout. Without this
     the LTR pages (en/zh) inherit LTR and render the pair reversed. */
  direction: rtl;
  gap: 0.35rem;
  z-index: 3;
}
/* Rectangular, clearly visible prev/next buttons. */
.announcement-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 1.6rem;
  padding: 0;
  border: 1.5px solid var(--primary-blue);
  border-radius: 7px;
  background: #fff;
  color: var(--primary-blue);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(20, 35, 75, 0.10);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.announcement-nav-btn:hover,
.announcement-nav-btn:focus-visible {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}
.announcement-nav-btn svg { width: 1.05rem; height: 1.05rem; }
/* Reserve room on the physical left for the arrows so the title never sits
   under them. The arrows are pinned to the physical left in every language,
   so we reserve in both LTR and RTL. The extra-specific selector also keeps
   this winning over the smaller mobile padding override below. */
.announcement-bar .announcement-header { padding-left: 6.1rem; }
.announcement-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.08em;
  color: #000;
  text-transform: uppercase;
}
.announcement-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary-gold);
  box-shadow: 0 0 0 0 rgba(249, 174, 64, 0.55);
  animation: deal-dot 1.8s ease-in-out infinite;
}

/* Footer block — subtitle + disclaimer, centered, both in white. */
.announcement-footer {
  text-align: center;
  padding: 0.55rem 1rem 0;
  max-width: 1280px;
  margin: 0 auto;
  color: var(--secondary-black);
  line-height: 1.4;
}
.announcement-footer .announcement-subtitle {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--secondary-black);
  margin-bottom: 0.18rem;
  letter-spacing: 0.005em;
}
.announcement-footer .announcement-disclaimer {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--primary-gray);
  letter-spacing: 0.005em;
}

/* ── Price disclaimer: always-visible summary line + expandable details ──
   Reused on the homepage ticker strip (light surface) and inside the deals
   page hero (add .price-note--on-dark for the blue background). Built on the
   native <details>/<summary> element — toggles with no JS and no reload. */
.price-note {
  font-size: 0.66rem;
  color: var(--primary-gray);
  max-width: 680px;
  margin: 0.45rem auto 0;
  text-align: start;
  line-height: 1.5;
}
.price-note-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
}
/* Hide the default disclosure triangle (WebKit + the rest). */
.price-note-summary::-webkit-details-marker { display: none; }
.price-note-summary::marker { content: ''; }
.price-note-line { color: var(--primary-gray); }
.price-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--primary-blue);
  font-weight: 700;
  white-space: nowrap;
}
.price-note-chevron {
  width: 0.9em;
  height: 0.9em;
  transition: transform 0.2s ease;
}
.price-note[open] .price-note-chevron { transform: rotate(180deg); }
.price-note-card {
  margin-top: 0.55rem;
  padding: 0.85rem 1rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}
.price-note-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--secondary-black);
  margin-bottom: 0.4rem;
}
.price-note-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-note-list li {
  line-height: 1.85;
  color: var(--primary-gray);
}
/* On-dark variant — sits on the deals hero's blue gradient. */
.price-note--on-dark { color: rgba(255, 255, 255, 0.6); }
.price-note--on-dark .price-note-line { color: rgba(255, 255, 255, 0.6); }
.price-note--on-dark .price-note-toggle { color: rgba(255, 255, 255, 0.9); }
.price-note--on-dark .price-note-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.price-note--on-dark .price-note-title { color: rgba(255, 255, 255, 0.85); }
.price-note--on-dark .price-note-list li { color: rgba(255, 255, 255, 0.65); }
@keyframes deal-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 174, 64, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(249, 174, 64, 0); }
}

.announcement-viewport {
  overflow: hidden;
  position: relative;
  /* Force inner layout to LTR so transforms are predictable; flip direction in RTL via animation-direction. */
  direction: ltr;
}
.announcement-viewport::before,
.announcement-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.announcement-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface), rgba(250, 251, 252, 0));
}
.announcement-viewport::after {
  right: 0;
  background: linear-gradient(-90deg, var(--surface), rgba(250, 251, 252, 0));
}

.announcement-track {
  display: inline-flex;
  align-items: stretch;
  /* No flex gap — using margin-inline-end on each card so the trailing space
     after the last card matches the inter-card space. This is what makes the
     loop math perfect (translate by 1/N of total width lands the next copy
     exactly where the previous one started). */
  padding: 0.2rem 0;
  width: max-content;
  animation: announcement-marquee 95s linear infinite;
  will-change: transform;
}
[dir="rtl"] .announcement-track { animation-direction: reverse; }
.announcement-viewport:hover .announcement-track,
.announcement-viewport:focus-within .announcement-track {
  animation-play-state: paused;
}
@keyframes announcement-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

.announcement-deal {
  flex: 0 0 auto;
  width: 188px;
  /* Margin (not flex gap) so the spacing AFTER the last card matches the
     spacing between cards — required for the seamless marquee loop. */
  margin-inline-end: 0.55rem;
  background: #FFFFFF;
  color: var(--secondary-black);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.55rem 0.7rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(20, 35, 75, 0.06), 0 2px 8px rgba(20, 35, 75, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  direction: inherit;
}
[dir="rtl"] .announcement-deal { direction: rtl; }
.announcement-deal:hover {
  box-shadow: 0 4px 12px rgba(20, 35, 75, 0.12);
  transform: translateY(-1px);
}

.announcement-deal-head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.announcement-deal-icon {
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}
.announcement-deal-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #000;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.announcement-deal-location {
  font-size: 0.58rem;
  color: var(--primary-gray);
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  line-height: 1.45;
  min-height: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announcement-deal-location-pin {
  width: 0.72rem;
  height: 0.72rem;
  flex-shrink: 0;
  color: var(--primary-blue);
}
.announcement-deal-location-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-deal-prices {
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0 0.2rem;
  border-top: 1px solid rgba(65, 95, 170, 0.10);
  /* Fixed block height (hero row + incl row are each a single line) so the
     CTA pinned below always lands on the exact same line in every card. */
  min-height: 2.7rem;
}

/* Hero price — EXCL tax (the row WITHOUT .is-incl). Big bold value with
   caption below. Rendered first in DOM so it appears on top. */
.announcement-deal-price-row:not(.is-incl) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.announcement-deal-price-row:not(.is-incl) .announcement-deal-price-value {
  color: #0d6e3a;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  order: 1;
  text-align: start;
}
.announcement-deal-price-row:not(.is-incl) .announcement-deal-price-label {
  font-size: 0.47rem;
  color: var(--primary-gray);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  order: 2;
  margin-top: 0.08rem;
  text-align: start;
  /* Full VAT phrase ("غير شامل ضريبة القيمة المضافة") stays on one line; the
     font above is sized to fit it — ellipsis is only a safety net for an
     unusually wide device font, it should not trigger in practice. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Secondary price — INCL VAT (.is-incl). Small supporting line:
   "<range> شامل ضريبة القيمة المضافة" — value first, then label. */
.announcement-deal-price-row.is-incl {
  display: flex;
  flex-direction: row;
  /* Keep the value + full VAT phrase on one line so the incl row is always
     exactly one line tall in every card. Fonts below are sized to fit. */
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.2rem;
  margin-top: 0.22rem;
  overflow: hidden;
}
.announcement-deal-price-row.is-incl .announcement-deal-price-label {
  font-size: 0.46rem;
  color: var(--primary-gray);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announcement-deal-price-row.is-incl .announcement-deal-price-value {
  font-size: 0.53rem;
  color: var(--primary-gray);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Currency word ("ريال" / "SAR" / etc.) — lighter weight inside any price value. */
.announcement-deal-price-currency {
  font-weight: 500;
  opacity: 0.85;
}
/* Riyal glyph (﷼) — small breathing room before the number. */
.announcement-deal-price-currency { margin-inline-start: 0.1em; }

/* Unit suffix (e.g. "/ كيس") — smaller and faded inside any price value. */
.announcement-deal-price-unit {
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.7;
  margin-inline-start: 0.18rem;
}

.announcement-deal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 0.6rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(37, 211, 102, 0.35);
  /* Push to bottom (margin-top:auto) AND to the inline-end of the card
     (align-self:flex-end) — small square pill anchored at the corner. */
  margin-top: auto;
  align-self: flex-end;
}
.announcement-deal-cta:hover { background: #1fb855; box-shadow: 0 2px 7px rgba(37, 211, 102, 0.45); }
.announcement-deal-cta svg { width: 11px; height: 11px; fill: currentColor; }

/* Fallback for any .announcement-disclaimer rendered outside .announcement-footer. */
.announcement-disclaimer {
  text-align: center;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--primary-gray);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .announcement-track { animation: none; }
}

/* ── Hero ───────────────────────────────────────────────── */
/* When the deals bar is present, the hero is no longer the page opener,
   so we ease its full-viewport height to keep the spacing harmonious. */
body.has-deals-bar .hero {
  min-height: auto;
  padding: 3.5rem 0 4rem;
}

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--surface);
}

.hero::before, .hero::after { display: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content { max-width: 560px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(65, 95, 170, 0.08);
  border: 1px solid rgba(65, 95, 170, 0.15);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 1.5rem;
}

.hero-badge svg { width: 16px; height: 16px; }

.hero h1 {
  font-size: 3.25rem;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.hero p {
  font-size: 1.15rem;
  color: var(--primary-gray);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.hero-secondary-ctas {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--primary-gray);
}

.hero-secondary-ctas a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--primary-blue);
  transition: color 0.2s;
}

.hero-secondary-ctas a:hover { color: var(--primary-cyan); }
.hero-secondary-ctas a svg { width: 16px; height: 16px; }

/* Hero visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-visual-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(65, 95, 170, 0.1), 0 1px 3px rgba(0,0,0,0.04);
  padding: 2rem;
  overflow: hidden;
}

.hero-visual-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-cyan));
}

.visual-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.visual-stat {
  padding: 1.25rem;
  background: var(--surface);
  border-radius: 16px;
  text-align: center;
}

.visual-stat-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 0.75rem;
  background: rgba(65, 95, 170, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
}

.visual-stat-icon svg { width: 22px; height: 22px; }

.visual-stat h4 { font-size: 1.5rem; color: var(--primary-blue); margin-bottom: 0.25rem; }
.visual-stat p { font-size: 0.8rem; color: var(--primary-gray); }

/* ── Quick Actions ──────────────────────────────────────── */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  transition: all 0.25s;
  cursor: pointer;
}

.action-card:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 8px 24px rgba(65, 95, 170, 0.1);
  transform: translateY(-4px);
}

.action-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #fff;
}

.action-icon svg { width: 24px; height: 24px; }

.action-icon-blue { background: var(--primary-blue); }
.action-icon-cyan { background: var(--primary-cyan); }
.action-icon-gold { background: var(--secondary-gold); }
.action-icon-orange { background: #EF7A3D; }
.action-icon-bright { background: var(--secondary-bright-blue); }

.action-card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.action-card p { font-size: 0.78rem; color: var(--primary-gray); line-height: 1.5; }

/* ── Materials Preview ──────────────────────────────────── */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.material-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.25s;
}

.material-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

.material-card-visual {
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.material-card-visual.cement,
.material-card-visual.sand,
.material-card-visual.blocks { background: #fff; }

.material-card-visual svg {
  width: 64px;
  height: 64px;
  opacity: 0.6;
}

.material-card-visual img,
.material-detail-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.material-card-body { padding: 1.5rem; }
.material-card-body h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.material-card-body p { font-size: 0.9rem; color: var(--primary-gray); margin-bottom: 0.75rem; line-height: 1.6; }

.material-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.material-tag {
  padding: 0.25rem 0.65rem;
  background: var(--surface);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--primary-gray);
  font-weight: 500;
}

/* ── How It Works ───────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-cyan));
  opacity: 0.2;
}

.step-card { text-align: center; position: relative; z-index: 1; }

.step-number {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-cyan));
  box-shadow: 0 6px 20px rgba(65, 95, 170, 0.25);
}

.step-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.step-card p { font-size: 0.88rem; color: var(--primary-gray); line-height: 1.6; }

/* ── Trust Section ──────────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.trust-card {
  text-align: center;
  padding: 2rem 1.25rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.trust-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--primary-blue);
}

.trust-icon svg { width: 100%; height: 100%; }

.trust-card h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.trust-card p { font-size: 0.82rem; color: var(--primary-gray); line-height: 1.6; }

/* ── Final CTA ──────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #364f94 100%);
  padding: 4.5rem 0;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(96, 193, 212, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 { font-size: 2rem; margin-bottom: 0.75rem; }
.cta-section p { font-size: 1.1rem; opacity: 0.85; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta-section .btn-primary {
  background: #fff;
  color: var(--primary-blue);
}

.cta-section .btn-primary:hover {
  background: #f0f4ff;
  box-shadow: 0 4px 12px rgba(255,255,255,0.2);
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--secondary-black);
  color: #fff;
  padding: 3.5rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.footer-brand p { font-size: 0.9rem; opacity: 0.65; margin-top: 0.75rem; line-height: 1.6; }

.footer-col h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.footer-col a:hover { opacity: 1; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  opacity: 0.5;
}

.footer-legal { display: flex; gap: 0.5rem; }

/* ── Floating WhatsApp ──────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

[dir="rtl"] .whatsapp-float { right: auto; left: 1.5rem; }

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
}

.whatsapp-float svg { width: 28px; height: 28px; }

/* ── Page Hero (inner pages) ────────────────────────────── */
.page-hero {
  padding: 8rem 0 3rem;
  background: var(--surface);
  text-align: center;
}

.page-hero h1 { font-size: 2.5rem; margin-bottom: 0.75rem; }
.page-hero p { font-size: 1.1rem; color: var(--primary-gray); max-width: 560px; margin: 0 auto; }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--secondary-black);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: var(--secondary-black);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(65, 95, 170, 0.1);
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.file-upload {
  border: 2px dashed var(--border-light);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.file-upload:hover {
  border-color: var(--primary-blue);
  background: rgba(65, 95, 170, 0.02);
}

.file-upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--primary-blue);
  opacity: 0.6;
}

.file-upload-icon svg { width: 100%; height: 100%; }
.file-upload h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.file-upload p { font-size: 0.82rem; color: var(--primary-gray); }

/* File list (multi-file preview) */
.file-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 0.85rem;
}
.file-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #dc2626;
  transition: background 0.2s;
}
.file-item-remove:hover { background: #fef2f2; }

/* ── Contact Grid ───────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-methods {
  display: grid;
  gap: 1rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  transition: all 0.2s;
}

.contact-method:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.contact-method-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.contact-method h4 { font-size: 0.9rem; margin-bottom: 0.15rem; }
.contact-method p { font-size: 0.82rem; color: var(--primary-gray); }

/* ── Card (generic) ─────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 2rem;
}

/* ── Supplier Benefits ──────────────────────────────────── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.benefit-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.benefit-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  background: rgba(65, 95, 170, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
}

.benefit-icon svg { width: 24px; height: 24px; }
.benefit-card h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.benefit-card p { font-size: 0.85rem; color: var(--primary-gray); line-height: 1.6; }

/* ── Materials Page ─────────────────────────────────────── */
.material-detail {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
}

.material-detail:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.material-detail:nth-child(even) { direction: ltr; }
[dir="rtl"] .material-detail:nth-child(even) { direction: rtl; }

.material-detail-visual {
  height: 460px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-detail-visual svg { width: 80px; height: 80px; opacity: 0.5; }

.material-detail-content h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.material-detail-content p { font-size: 0.95rem; color: var(--primary-gray); line-height: 1.7; margin-bottom: 1rem; }

.product-list { margin-bottom: 1.5rem; }
.product-list li {
  padding: 0.4rem 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-cyan);
  flex-shrink: 0;
}

/* ═══ Responsive ═══════════════════════════════════════════ */
/* The English nav is wider than Arabic/Chinese; collapse the inline nav to the
   hamburger menu before it can crowd the header. Below this width the menu
   lives in the slide-out panel, so the header stays clean and consistent in
   every language. The WhatsApp icon + "Order Another Way" CTA stay in place. */
@media (max-width: 1199px) {
  .nav-links { display: none; }
  .mobile-toggle { display: flex; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero-ctas { justify-content: center; }
  .hero-secondary-ctas { justify-content: center; }
  .hero-visual { display: none; }
  .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  /* Single-column stack on tablet/mobile. Force visual on top regardless of
     DOM order, because some cards (e.g. sand) intentionally put content
     before the image in the source to create an alternating zig-zag layout
     on desktop — that flip must not leak into the mobile stack. */
  .material-detail { grid-template-columns: 1fr; }
  .material-detail-visual { order: 1; }
  .material-detail-content { order: 2; }
}

@media (max-width: 768px) {
  :root { --header-height: 60px; }
  .nav-links { display: none; }
  .mobile-toggle { display: flex; }

  /* Hide desktop header "Order Another Way" CTA on mobile — the WhatsApp
     icon button below is the primary mobile entry point. */
  .header-actions .btn-primary { display: none; }

  /* Mobile: WhatsApp shrinks to a high-visibility icon button in the header
     so visitors see the primary order channel before any scrolling. */
  .header-actions .btn-whatsapp {
    padding: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
  }
  .header-actions .btn-whatsapp svg { width: 18px; height: 18px; }

  .header-inner { height: 60px; gap: 0.75rem; }

  /* Mobile nav overlay */
  .mobile-nav {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 200;
    padding: 1.5rem;
    display: none;
    flex-direction: column;
  }

  .mobile-nav.open { display: flex; }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
  }

  .mobile-nav a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border-light);
  }

  .mobile-nav-ctas {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.5rem;
  }

  .section { padding: 3rem 0; }
  .hero { min-height: 80vh; }
  .hero h1 { font-size: 2.25rem; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .materials-grid { grid-template-columns: 1fr; }
  /* Mobile: bulletproof stack — flex column with explicit order so neither RTL,
     a browser quirk, nor missing aspect-ratio support can ever flip the image
     and body. Image always order:1 (top), body always order:2 (bottom). */
  .material-card {
    display: flex !important;
    flex-direction: column !important;
  }
  .material-card-visual {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    /* Fallback if aspect-ratio isn't supported (older Android browsers): */
    min-height: 260px;
  }
  .material-card-body {
    order: 2 !important;
    width: 100% !important;
  }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .steps-grid::before { display: none; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
  .section-header h2 { font-size: 1.6rem; }
  .form-row { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }

  /* Page hero — reduce top padding (shorter fixed header) */
  .page-hero { padding: 6rem 0 2rem; }
  .page-hero h1 { font-size: 1.75rem; }
  .page-hero p { font-size: 0.95rem; }

  /* Order form lines ��� wrap on mobile */
  .order-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .order-line .order-line-title {
    align-self: center;
  }

  .order-line .remove-line-btn {
    align-self: center;
  }

  .order-line .form-group:first-of-type {
    width: 100%;
  }

  /* Material detail — stack and fix direction hack */
  .material-detail { gap: 1.5rem; }
  .material-detail:nth-child(even) { direction: inherit; }
  .material-detail-visual { height: 320px; }

  /* Contact method — prevent text overflow */
  .contact-method { gap: 0.75rem; }
  .contact-method p { word-break: break-word; }

  /* CTA section — tighter on mobile */
  .cta-section { padding: 3rem 0; }
  .cta-section h2 { font-size: 1.5rem; }
  .cta-section p { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  :root { --header-height: 56px; }
  .container { padding: 0 1rem; }
  /* Tightened so the primary WhatsApp CTA sits above the fold on common
     mobile viewports (iPhone SE / 12 / 13). */
  .hero { min-height: auto; padding: 3.5rem 0 2.5rem; }
  .hero-badge { font-size: 0.74rem; padding: 0.28rem 0.7rem; margin-bottom: 0.85rem; }
  .hero h1 { font-size: 1.65rem; margin-bottom: 0.75rem; }
  .hero p { font-size: 0.95rem; margin-bottom: 1.1rem; }
  .hero-ctas { flex-direction: column; margin-bottom: 1.1rem; gap: 0.6rem; }
  .hero-ctas .btn { width: 100%; }
  .hero-secondary-ctas { flex-direction: column; gap: 0.75rem; }
  .quick-actions-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .section-header h2 { font-size: 1.4rem; }

  /* Header — compact */
  .header-inner { height: 56px; }
  .logo img { height: 36px; }
  [dir="rtl"] .logo img { height: 64px; }
  .lang-flag { padding: 0.2rem 0.4rem; font-size: 1rem; }

  /* Latest deals — tighter on mobile */
  .announcement-bar { padding: 0.6rem 0; }
  .announcement-header { padding: 0 1rem 0.3rem; }
  .announcement-title { font-size: 0.66rem; }
  .announcement-footer { padding: 0.45rem 1rem 0; }
  .announcement-footer .announcement-subtitle { font-size: 0.6rem; }
  .announcement-footer .announcement-disclaimer { font-size: 0.56rem; }
  .announcement-deal { width: 178px; padding: 0.5rem 0.6rem 0.55rem; margin-inline-end: 0.45rem; }
  .announcement-deal-name { font-size: 0.72rem; }
  /* Mobile: keep the hero size compact */
  .announcement-deal-price-row:not(.is-incl) .announcement-deal-price-value { font-size: 0.84rem; }
  .announcement-deal-cta { font-size: 0.58rem; padding: 0.28rem 0.5rem; }
  .announcement-track { padding: 0.18rem 0; }

  /* Page hero */
  .page-hero { padding: 5rem 0 1.5rem; }
  .page-hero h1 { font-size: 1.5rem; }

  /* Cards — less padding */
  .card { padding: 1.25rem; }
  .action-card { padding: 1.25rem 0.75rem; }

  /* CTA buttons stack */
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 320px; }

  /* Floating WhatsApp — smaller and tighter to edge */
  .whatsapp-float { width: 48px; height: 48px; bottom: 1rem; right: 1rem; }
  [dir="rtl"] .whatsapp-float { right: auto; left: 1rem; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ── Form Feedback ──────────────────────────────────────── */
.form-feedback {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  animation: fadeIn 0.3s ease;
}

.form-feedback-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.form-feedback-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Field-level validation errors */
.field-error {
  border-color: #E53935 !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1) !important;
}
.field-error-msg {
  color: #E53935;
  font-size: 0.8rem;
  margin-top: 0.3rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Customer Type Toggle ─────────────────────────────── */
.customer-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface);
  color: var(--primary-gray);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.customer-type-btn:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.customer-type-btn.active {
  border-color: var(--primary-blue);
  background: rgba(65,95,170,0.06);
  color: var(--primary-blue);
}

/* ── Order Form (Alpine.js) ─────────────────────────────── */
.order-line-block {
  background: var(--surface);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.order-line-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary-gray);
  white-space: nowrap;
  align-self: center;
}

.order-line {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 0.75rem;
  align-items: end;
  position: relative;
  padding: 1rem;
}

.order-line.order-line-active {
  z-index: 50;
}

.order-line-block:has(.order-line-active) {
  z-index: 50;
}

.order-line .form-group { margin-bottom: 0; }

.product-search-wrapper {
  position: relative;
}

/* Product dropdown — anchored to its input, scrollable */
.product-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 60;
  overscroll-behavior: contain;
}

.product-dropdown::-webkit-scrollbar { width: 5px; }
.product-dropdown::-webkit-scrollbar-track { background: transparent; }
.product-dropdown::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

/* Category header */
.pdd-cat {
  padding: 0.7rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary-blue);
  position: sticky;
  top: 0;
  z-index: 1;
  user-select: none;
  transition: background 0.15s;
}

.pdd-cat:hover { background: var(--surface-alt); }

.pdd-cat svg {
  transition: transform 0.2s;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Product item */
.pdd-item {
  padding: 0.6rem 1rem 0.6rem 1.6rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--secondary-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.15s, color 0.15s;
}

.pdd-item:last-child { border-bottom: none; }

.pdd-item:hover {
  background: #f4f7fb;
  color: var(--primary-blue);
}

/* Selected product */
.pdd-item-active {
  background: #eef2fa;
  color: var(--primary-blue);
  font-weight: 600;
}

.pdd-item-active:hover {
  background: #e4eaf5;
}

/* Checkmark */
.pdd-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  color: var(--primary-blue);
  transition: opacity 0.15s;
}

.pdd-item-active .pdd-check { opacity: 1; }

/* Empty state */
.product-dropdown-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--primary-gray);
  font-size: 0.88rem;
}

.remove-line-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.remove-line-btn:hover { background: #fef2f2; }
.remove-line-btn svg { width: 18px; height: 18px; }

.add-line-btn {
  width: 100%;
  padding: 0.65rem;
  border: 2px dashed var(--border-light);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary-gray);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.add-line-btn:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.order-success {
  text-align: center;
  padding: 3rem 1.5rem;
}

.order-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ecfdf5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #059669;
}

.order-success-icon svg { width: 36px; height: 36px; }
.order-success h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.order-success p { color: var(--primary-gray); margin-bottom: 1.5rem; }

.order-id-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--surface);
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* ── Animations ─────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════
   TEMP — Hide "Latest Deals" (أحدث الصفقات) before production launch.
   Hides every nav link / button / lang-switcher entry that points to
   the deals page, across all pages site-wide. The ticker strip is
   turned off separately in announcements.js (active:false) and the
   deal pages themselves are redirected in _redirects.
   TO RESTORE: delete this whole block.
   ════════════════════════════════════════════════════════════════ */
a[href*="احدث-الاسعار"],
a[href*="latest-prices"] { display: none !important; }