/* ============================================================
   SUN TOOLS V3 — FOOTER
   ============================================================
   Pre-footer CTA -> main corporate footer -> legal bar. Built from
   zero — different section rhythm and grid from the old footer.
   ============================================================ */

/* ---------- Pre-footer CTA ---------- */
.st3-pre-footer {
  background: var(--st3-soft-gray);
  border-top: 1px solid var(--st3-border);
}
.st3-pre-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st3-space-6);
  padding-block: var(--st3-space-7);
}
.st3-pre-footer__text h2 {
  font-size: var(--st3-text-xl);
  margin-bottom: var(--st3-space-2);
}
.st3-pre-footer__text p {
  color: var(--st3-body);
  max-width: 52ch;
}
.st3-pre-footer__actions {
  display: flex;
  align-items: center;
  gap: var(--st3-space-5);
  flex-shrink: 0;
}
.st3-pre-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--st3-space-2);
  font-weight: 700;
  font-size: var(--st3-text-md);
  color: var(--st3-ink);
  white-space: nowrap;
}
.st3-pre-footer__phone:hover { color: var(--st3-red); }

/* ---------- Main footer ---------- */
.st3-footer__main {
  background: var(--st3-dark);
  color: var(--st3-on-dark-muted);
  padding-block: var(--st3-space-9);
}
.st3-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--st3-space-7);
}
.st3-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--st3-space-3);
}
.st3-footer__col a,
.st3-footer__col span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--st3-on-dark-muted);
  font-size: var(--st3-text-sm);
  transition: color var(--st3-fast) var(--st3-ease);
}
.st3-footer__col a:hover { color: var(--st3-white); }
.st3-footer__col svg { width: 15px; height: 15px; flex-shrink: 0; }
.st3-footer__heading {
  color: var(--st3-white);
  font-size: var(--st3-text-base);
  margin-bottom: var(--st3-space-1);
}

.st3-footer__col--brand { gap: var(--st3-space-4); }
.st3-logo--footer img { height: 40px; filter: brightness(0) invert(1); }
.st3-footer__col--brand p {
  color: var(--st3-on-dark-muted);
  font-size: var(--st3-text-sm);
  line-height: var(--st3-leading-loose);
  max-width: 34ch;
}
.st3-footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px var(--st3-space-3);
  border: 1px solid var(--st3-on-dark-border);
  border-radius: var(--st3-radius);
  color: var(--st3-white) !important;
  font-size: var(--st3-text-sm);
  font-weight: 600;
}
.st3-footer__whatsapp:hover { border-color: var(--st3-red); color: var(--st3-red) !important; }
.st3-footer__address { align-items: flex-start; }

/* ---------- Payment methods ----------
   One unified row: COD as a labeled badge (no product-photo-style
   icon needed, it's the only text-based one) plus real official logo
   marks — sourced from Wikimedia Commons (public domain / CC BY-SA,
   see brand-assets/clients note in ASSET-REQUESTS.md) for Vodafone
   Cash, Orange Cash, Etisalat Cash, InstaPay, and WooCommerce core's
   own bundled Visa/Mastercard marks — each on a small white chip so
   every logo's own colour scheme stays legible against the dark
   footer regardless of what's in the source file. */
.st3-footer__payments { background: var(--st3-dark); border-top: 1px solid var(--st3-on-dark-border); }
.st3-footer__payments-inner {
  padding-block: var(--st3-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st3-space-3) var(--st3-space-5);
}
.st3-footer__payments-label {
  font-size: var(--st3-text-xs);
  font-weight: 600;
  color: var(--st3-on-dark-muted);
  white-space: nowrap;
}
.st3-payment-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st3-space-3); }
.st3-payment-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--st3-radius);
  background: var(--st3-white);
}
.st3-payment-badge--cod {
  gap: var(--st3-space-2);
  padding: var(--st3-space-2) var(--st3-space-4);
  border-radius: var(--st3-radius-full, 999px);
  background: transparent;
  border: 1px solid var(--st3-red);
  color: var(--st3-on-dark);
  font-size: var(--st3-text-sm);
  font-weight: 600;
}
.st3-payment-badge__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--st3-red); }
/* Every logo badge shares one fixed OUTER box (same width, same
   height, same padding) regardless of which logo is inside — the
   image itself is what scales to fill it, via object-fit:contain, so
   badges never look inconsistent even though the source logos have
   very different native aspect ratios. InstaPay's old oversized
   render was fixed by cropping its source PNG to its real content
   bounding box (it had ~40% empty transparent padding baked in) —
   not by enlarging its badge. */
.st3-payment-badge--logo {
  width: 90px;
  height: 48px;
  padding: var(--st3-space-2);
}
.st3-payment-badge--logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Vodafone Cash's real mark (778x445) is a comparatively "tall"
   rectangle next to this row's very flat 74x32 content box (90x48
   badge minus the shared 8px padding) — under the shared padding it
   was height-bound to a small render (~56x32) well short of the
   other logos' visual weight. The outer badge stays 90x48 like every
   other one; this only reduces THIS image's own vertical padding so
   more of the fixed box is real logo instead of margin. */
.st3-payment-badge--logo img[alt="فودافون كاش"] {
  max-height: 40px;
  max-width: 82px;
}

/* ---------- Legal bar ---------- */
.st3-footer__legal {
  background: var(--st3-charcoal);
  border-top: 1px solid var(--st3-on-dark-border);
}
.st3-footer__legal-inner {
  padding-block: var(--st3-space-3);
  font-size: var(--st3-text-xs);
  color: var(--st3-on-dark-muted);
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .st3-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .st3-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .st3-pre-footer__inner { flex-direction: column; align-items: flex-start; }
  .st3-pre-footer__actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 430px) {
  .st3-footer__grid { grid-template-columns: 1fr; gap: var(--st3-space-6); }
}

/* ---------- Payment methods — mobile grid ----------
   7 items (COD + 6 logos) of mismatched shapes (a wide pill next to
   fixed 90x48 rectangles) wrapped unevenly at narrow widths, leaving
   Mastercard stranded alone. A real 2-column grid with one shared
   outer badge size (COD included, no longer pill-shaped) fixes both
   the inconsistency and the wrapping — the one structurally-odd
   leftover (7 items in 2 columns) is centered on its own row instead
   of reading as an accident. */
@media (max-width: 600px) {
  .st3-footer__payments-inner { flex-direction: column; align-items: flex-start; gap: var(--st3-space-3); }
  .st3-payment-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--st3-space-3);
    width: 100%;
  }
  .st3-payment-badge {
    width: 100%;
    height: 52px;
  }
  .st3-payment-badge--cod {
    /* Same rectangular card family as the logo badges now, not a
       pill — still instantly recognizable as COD via its red border,
       truck icon, and label, just no longer a visually different
       shape among the others. */
    border-radius: var(--st3-radius);
    justify-content: center;
    padding-inline: var(--st3-space-3);
  }
  .st3-payment-badge--logo { width: 100%; height: 52px; }
  /* True only when the total badge count is odd — the last child's
     own position IS the total count, so this needs no hardcoded
     number and keeps working if a payment method is ever added or
     removed. */
  .st3-payment-badges > .st3-payment-badge:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - (var(--st3-space-3) / 2));
    margin-inline: auto;
  }
}

/* ---------- Mobile input font-size (iOS Safari zoom fix) ----------
   iOS Safari zooms the whole page in on focus of any text input whose
   EFFECTIVE font-size is under 16px — the site's base body size is
   15px (--st3-text-base), and none of these inputs set their own
   font-size, so they inherit it. Fixed here, mobile-only, rather than
   raising the global 15px base or touching the viewport meta tag
   (which would be an accessibility regression — real user pinch-zoom
   must keep working). Desktop is intentionally untouched. Covers the
   header search field, the theme's generic input/select/textarea
   primitives, and every WooCommerce form (checkout, login, register,
   my account, lost password all reuse these same core classes).
   Deliberately placed in footer.css, not base.css: it's enqueued last
   among the core stylesheet bundle (tokens/base/layout/components/
   header/footer), so this reliably wins the cascade against
   header.css's own unconditional `.st3-header-search__input`
   font-size rule — an identical-specificity override placed earlier
   in the load order (verified: it was silently losing there). */
@media (max-width: 768px) {
  .st3-header-search__input,
  .st3-input,
  .st3-select,
  .st3-textarea,
  .woocommerce form .woocommerce-Input,
  .woocommerce-checkout .input-text,
  .woocommerce-checkout select {
    font-size: 16px;
  }
}