/* ══════════════════════════════════════════════════════════════════════════
   Site footer — the VIP Valet band.

   One copy for both public layouts (layouts/public_ar and layouts/public_en),
   which is the point: the footer used to be pasted into each of them and the
   two had already drifted apart. The markup lives in partials/site-footer.

   The band is the same one vip.test renders in valet brand mode -see
   viptickets' resources/js/Components/store/SiteFooter.vue and its .v-foot
   rules. Every measurement below is that component's Tailwind value resolved
   to px; if the flagship band changes, this file is what follows it.

   Loaded with a <link> from each layout's head rather than an inline <style>,
   the way home.css and auth-split.css already are. Tailwind and Vite are not
   involved: the public pages never load the app bundle.
   ══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  background: #000000;
  color: #d3d3d3;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* The layouts hardcode the direction and language on <html> (ar/rtl and
   en/ltr), so the per-locale face is picked here instead of duplicating the
   whole file. The links, the blurb and the list items all inherit this one,
   which is what the flagship band does; the only run that opts out is the latin
   one that must not be set in the Arabic face -see .footer-num.

   The headings are named a second time purely to outrank the theme's own
   h1-h6 rule in main.css, which otherwise puts the Arabic column headings in
   Roboto. It is the band's family either way, not a face of their own. */
html[lang="ar"] .site-footer,
html[lang="ar"] .site-footer .footer-heading { font-family: "DINNextLTArabic", sans-serif; }
html[lang="en"] .site-footer,
html[lang="en"] .site-footer .footer-heading { font-family: "Roboto", sans-serif; }

/* Latin numerals and the wordmark token: always Lato, in either language. */
.site-footer .footer-num { font-family: "Lato", sans-serif; }

.site-footer .footer-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 72px 24px 32px;
}

/* ── Columns ──
   Brand cell, one track per link column, contact. The breakpoints are spelled
   out rather than borrowed from Bootstrap on purpose: Bootstrap's lg starts at
   992px and the flagship band's four-track layout starts at 1024px. */
.site-footer .footer-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

/* ── Brand cell ── */
.site-footer .footer-logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
}
.site-footer .footer-desc {
  margin: 18px 0 0;
  max-width: 280px;
  font-size: 13.5px;
  line-height: 28px;
  color: #d3d3d3;
}
/* The VIP.SA in the blurb. It inherits the band's ink rather than setting its
   own, so only the weight and the hover underline mark it as a link. */
.site-footer .footer-desc a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 2px;
}
.site-footer .footer-desc a:hover { text-decoration: underline; }

/* ── Authority marks ──
   Two fixed-width cells so the pair reads as one row however wide either mark
   is. Opacity is the only thing that moves on hover: these are issued marks and
   nothing may tint or scale them. */
.site-footer .footer-marks {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.site-footer .footer-mark {
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.site-footer .footer-mark > a { display: block; width: 100%; }
.site-footer .footer-mark img {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-footer .footer-mark > a:hover img { opacity: 1; }
.site-footer .footer-mark-no {
  font-size: 11.5px;
  line-height: 1;
  color: #d3d3d3;
}

/* ── Link and contact columns ──
   The contact block is the same list as the link columns -city and country are
   plain items in it, not a paragraph of their own- so a single rule sizes all
   four columns alike. */
.site-footer .footer-heading {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px;
}
.site-footer .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
}
.site-footer .footer-links li { color: #d3d3d3; }
.site-footer .footer-links a {
  color: #d3d3d3;
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-footer .footer-links a:hover { color: #ffffff; }

/* ── Social row ── */
.site-footer .footer-social {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}
.site-footer .footer-social a {
  width: 38px;
  height: 38px;
  background: #2c2c35;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background 0.15s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.15s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-footer .footer-social a:hover {
  background: #3c3c46;
  color: #ffffff;
  transform: translateY(-2px);
}
.site-footer .footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* The X mark fills its viewBox corner to corner, so at 16px it reads a size
   bigger than the others. It has always been drawn a notch smaller. */
.site-footer .footer-social a[data-net="x"] svg { width: 15px; height: 15px; }

/* ── Bottom bar: copyright · app badges · payment marks ──
   Inside .footer-inner, so it lines up with the columns above it. */
.site-footer .footer-bottom {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer .footer-copy {
  margin: 0;
  font-size: 13px;
  color: #d3d3d3;
}
.site-footer .footer-copy a {
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
}
.site-footer .footer-copy a:hover { text-decoration: underline; }

.site-footer .footer-app-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-footer .footer-app-badges img {
  height: 36px;
  width: auto;
  display: block;
}

/* No filter here. The marks are issued as white art already -the same files the
   flagship band draws with nothing but an opacity on them- so the brightness()
   this rule used to carry was doing nothing. */
.site-footer .footer-payment-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.site-footer .footer-payment-icons img {
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}
/* visa/amex are square logo tiles with padding -> render larger so the glyph
   matches the wide badges */
.site-footer .pay-visa,
.site-footer .pay-amex { height: 44px; }
.site-footer .pay-mastercard,
.site-footer .pay-mada,
.site-footer .pay-applepay { height: 28px; }

/* ── reCAPTCHA attribution ──
   Not part of the flagship band. It is here because Google requires the notice
   wherever the badge itself is hidden, and its own hairline keeps it reading as
   fine print under the footer rather than as part of it. */
.site-footer .footer-recaptcha {
  text-align: center;
  padding: 8px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.site-footer .footer-recaptcha p {
  margin: 0;
  font-size: 9px;
  line-height: 1;
  color: rgba(180, 180, 180, 0.4);
}
.site-footer .footer-recaptcha a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 767px) {
  .site-footer .footer-bottom { justify-content: center; text-align: center; }
  .site-footer .footer-desc { max-width: 100%; }
}
