/* DUNEUS · Footer
 * Editorial four-column layout with an app card, a payment/region bar, a legal
 * bar, and an oversized wordmark cropped at the viewport edges.
 * Colours come from the footer's own settings, never the page palette.
 * ------------------------------------------------------------------------ */

.dn-footer {
  background: var(--dn-ftr-bg, #FFFFFF);
  color: var(--dn-ftr-text, #111);
  overflow: hidden;
}

.dn-footer__inner {
  width: 100%;
  max-width: var(--d-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--d-gutter, 2rem);
}

/* ===========================================================================
 * Row 1 — link columns + app card
 * ======================================================================== */
/* Controlled from Footer -> Footer layout, so the space above the columns can
   be reduced or removed entirely. It was a fixed clamp with no setting. */
.dn-footer__main { padding-block: var(--ftr-pt-m, 36px) var(--ftr-pb-m, 32px); }
@media (min-width: 768px) {
  .dn-footer__main { padding-block: var(--ftr-pt-d, 64px) var(--ftr-pb-d, 52px); }
}

.dn-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}


.dn-footer__coltitle {
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dn-ftr-text, #111);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[dir='rtl'] .dn-footer__coltitle { letter-spacing: 0; text-transform: none; }

.dn-footer__chev {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.28s ease;
}

.dn-footer__list { list-style: none; margin: 0; padding: 0; }
.dn-footer__list li { margin: 0; }

.dn-footer__list a {
  display: block;
  padding-block: clamp(0.5rem, 1.4vw, 0.85rem);
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--dn-link-size, 14px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--dn-link-track, 0.04em);
  text-transform: var(--dn-link-transform, uppercase);
  color: var(--dn-ftr-muted, #6A6A6A);
  transition: color 0.18s ease, padding-inline-start 0.18s ease;
}
/* Arabic has no case, and tracking breaks its joined letterforms. */
[dir='rtl'] .dn-footer__list a { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; }
.dn-footer__list a:hover {
  color: var(--dn-ftr-text, #111);
  padding-inline-start: 0.3rem;
}

/* ---- App card ---- */
.dn-footer__app {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--dn-ftr-card, #F5F5F5);
  border-radius: 12px;
  margin-block-start: clamp(2rem, 4vw, 0);
}
.dn-footer__appcopy { min-width: 0; }
.dn-footer__appcopy h3 {
  margin: 0 0 0.6rem;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dn-ftr-text, #111);
}
[dir='rtl'] .dn-footer__appcopy h3 { letter-spacing: 0; text-transform: none; }
.dn-footer__appcopy p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--dn-ftr-muted, #6A6A6A);
  max-width: 32ch;
}
.dn-footer__appstores { display: flex; gap: 0.75rem; margin-block-start: 0.85rem; }
.dn-footer__appstores a {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dn-ftr-text, #111);
  border-bottom: 1px solid currentColor;
  padding-block-end: 2px;
}
.dn-footer__qr {
  flex: 0 0 auto;
  width: clamp(84px, 12vw, 116px);
  height: auto;
  border-radius: 4px;
  display: block;
}

/* ===========================================================================
 * Row 2 — payment methods + region
 * ======================================================================== */
.dn-footer__bar { border-top: 1px solid var(--dn-ftr-border, #E5E5E5); }
.dn-footer__barinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-block: clamp(1rem, 2.5vw, 1.5rem);
}

/* Payment marks arrive as third-party logos with wildly different artwork —
   some have a white box baked in, some are full-bleed colour. Framing each one
   in an identical plate with object-fit is what makes the row read as one set;
   filtering alone cannot fix inconsistent source images. */
.dn-footer__pay { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dn-pay-gap, 8px); }

.dn-footer__pay a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease, filter 0.18s ease;
}
.dn-footer__pay img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- plate treatments: identical frame around every mark --- */
.dn-footer__pay--plate-mono a,
.dn-footer__pay--plate-color a {
  width: calc(var(--dn-pay-h, 28px) * var(--dn-pay-w, 1.8));
  height: var(--dn-pay-h, 28px);
  padding: 3px 6px;
  background: var(--dn-pay-plate, #fff);
  border-radius: var(--dn-pay-radius, 4px);
}
.dn-footer__pay--plate-mono img { filter: grayscale(1); }
.dn-footer__pay--plate-mono a:hover img { filter: grayscale(0); }

/* --- flat mono: no plate, marks muted to a single tone --- */
.dn-footer__pay--mono a {
  height: var(--dn-pay-h, 28px);
  opacity: 0.55;
  filter: grayscale(1) brightness(1.9) contrast(0.85);
}
.dn-footer__pay--mono a:hover { opacity: 1; }
.dn-footer__pay--mono img { height: 100%; }

/* --- original: untouched brand artwork --- */
.dn-footer__pay--original a { height: var(--dn-pay-h, 28px); opacity: 0.92; }
.dn-footer__pay--original a:hover { opacity: 1; }
.dn-footer__pay--original img { height: 100%; border-radius: var(--dn-pay-radius, 4px); }

.dn-footer__region { display: flex; align-items: center; gap: var(--dn-region-gap, 32px); }
.dn-footer__regionbtn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--dn-region-size, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dn-ftr-text, #111);
  unicode-bidi: plaintext;
  transition: color 0.18s ease;
}
.dn-footer__regionbtn:hover { color: var(--duneus-accent, #FF5100); }
[dir='rtl'] .dn-footer__regionbtn { letter-spacing: 0; text-transform: none; }
.dn-footer__regionbtn svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===========================================================================
 * Row 3 — legal + copyright
 * ======================================================================== */
.dn-footer__legal { border-top: 1px solid var(--dn-ftr-border, #E5E5E5); }
.dn-footer__legalinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: var(--dn-legal-pad, 18px);
}

.dn-footer__legallinks { display: flex; flex-wrap: wrap; gap: var(--dn-legal-gap, 36px); }
.dn-footer__legallinks a,
.dn-footer__copy {
  font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
  font-size: var(--dn-legal-size, 12px);
  letter-spacing: var(--dn-legal-track, 0.12em);
  text-transform: uppercase;
  color: var(--dn-legal-color, #111);
}
.dn-footer__copy {
  font-size: var(--dn-copy-size, 12px);
  letter-spacing: var(--dn-copy-track, 0.12em);
  color: var(--dn-copy-color, #111);
}
[dir='rtl'] .dn-footer__legallinks a,
[dir='rtl'] .dn-footer__copy { letter-spacing: 0; text-transform: none; font-family: inherit; }
.dn-footer__legallinks a { transition: color 0.18s ease; }
.dn-footer__legallinks a:hover { color: var(--duneus-accent, #FF5100); }
.dn-footer__copy { margin: 0; opacity: 0.85; }

/* ===========================================================================
 * Row 4 — wordmark marquee (text or image)
 * The track is two identical halves. Travelling exactly -50% puts the second
 * half where the first started, so the loop repeats with no seam and never
 * stops. Duration is fixed, so a longer word simply moves faster per glyph.
 * ======================================================================== */
.dn-footer__wordmark {
  border-top: 1px solid var(--dn-ftr-border, #E5E5E5);
  overflow: hidden;
  line-height: 0.8;
  user-select: none;
}

.dn-footer__wmtrack {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: dn-wm-scroll var(--wm-speed, 26s) linear infinite;
}
.dn-footer__wmtrack--end { animation-direction: reverse; }
/* Seamless loop (two halves, -50% travel) needs an LTR track; on RTL pages the
   wordmark scrolled off to the left and disappeared instead of looping. */
[dir='rtl'] .dn-footer__wmtrack { direction: ltr; }

.dn-footer__wmhalf {
  display: flex;
  align-items: center;
  gap: var(--wm-gap, 60px);
  padding-inline-end: var(--wm-gap, 60px);
}

@keyframes dn-wm-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Text mark */
.dn-footer__wmword {
  display: block;
  font-family: var(--wm-font, var(--duneus-font-en-heading, 'Montserrat'), sans-serif);
  font-weight: var(--wm-weight, 900);
  font-size: var(--wm-size-m, 74px);
  letter-spacing: var(--wm-track, -0.03em);
  text-transform: uppercase;
  color: var(--wm-color, #141414);
  white-space: nowrap;
}
[dir='rtl'] .dn-footer__wmword { letter-spacing: 0; text-transform: none; }

/* Image mark — height-matched to the text size so both read the same scale. */
.dn-footer__wmimg {
  display: block;
  height: var(--wm-size-m, 74px);
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .dn-footer__wmword { font-size: var(--wm-size-d, 200px); }
  .dn-footer__wmimg { height: var(--wm-size-d, 200px); }
}

.dn-footer__wordmark.is-pausable:hover .dn-footer__wmtrack { animation-play-state: paused; }

/* A scrolling mark is decoration; hold it still when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .dn-footer__wmtrack { animation: none; }
}

/* ===========================================================================
 * Responsive
 * ======================================================================== */
@media (min-width: 700px) {
  .dn-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
  .dn-footer__app { grid-column: 1 / -1; }
}

/* One row across the full width, divided by however many columns actually
   render. This block must come AFTER the 700px two-column rule: both have the
   same specificity, so source order decides — with it placed earlier, the
   two-column rule won at every width and the columns stacked 2x2. */
@media (min-width: 1000px) {
  .dn-footer__cols {
    grid-template-columns: repeat(var(--ftr-cols, 4), minmax(0, 1fr)) var(--ftr-app, 0px);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .dn-footer__app { grid-column: auto; margin-block-start: 0; align-self: center; }
}

/* Mobile: columns collapse into accordions so the footer stays short. */
@media (max-width: 699.98px) {
  .dn-footer__col { border-bottom: 1px solid var(--dn-ftr-border, #E5E5E5); }
  .dn-footer__coltitle { cursor: pointer; margin: 0; padding-block: 1.1rem; }

  /* The collapse lives on a WRAPPER, not on the list itself.
     `grid-template-rows: 0fr` defines a single track, so when it was applied to
     the <ul> only the first <li> landed in that track — every later item fell
     into an implicit auto row and stayed visible. That is why exactly one link
     disappeared. Collapsing the wrapper animates the whole column. */
  .dn-footer__panel {
    display: grid;
    grid-template-rows: 1fr;                 /* open by default */
    transition: grid-template-rows 0.32s cubic-bezier(.2, .7, .2, 1);
  }
  .dn-footer__list { overflow: hidden; padding-block-end: 0.75rem; }

  .dn-footer__col.is-collapsed .dn-footer__panel { grid-template-rows: 0fr; }
  .dn-footer__col.is-collapsed .dn-footer__chev { transform: rotate(-90deg); }

  .dn-footer__barinner,
  .dn-footer__legalinner { justify-content: flex-start; }
  .dn-footer__region { width: 100%; justify-content: space-between; }
}

@media (min-width: 700px) {
  /* No accordion above mobile — the chevron is meaningless there. */
  .dn-footer__chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dn-footer__list,
  .dn-footer__chev,
  .dn-footer__list a { transition: none; }
}

/* ===========================================================================
 * FOOTER WIDTH
 * `wide` is the default: a footer carrying five or six columns needs more room
 * than the 1440px page container, or the columns crush.
 * ======================================================================== */
.dn-footer__inner { padding-inline: var(--ftr-gutter, 40px); }
.dn-footer--w-contained .dn-footer__inner { max-width: var(--d-max, 1440px); }
.dn-footer--w-wide .dn-footer__inner { max-width: var(--ftr-max, 1680px); }
.dn-footer--w-full .dn-footer__inner { max-width: none; }

/* The old skin sheet put `margin-block-start: var(--d-section)` on `body footer`
   — up to 120px of page background above the footer. Those rules are gone, but
   this makes the intent explicit so no future sheet reintroduces the gap. */
body .footer,
body footer.dn-footer {
  margin: 0;
}

/* ===========================================================================
 * TRUST BADGES (Maroof · VAT) — optional footer row
 * Premium cards that adopt the footer palette (dark by default). Logo/icon on
 * the start, small uppercase label + the number beneath. Styling only.
 * ======================================================================== */
.dn-footer__trust { border-top: 1px solid var(--dn-ftr-border, rgba(255,255,255,.12)); }
.dn-footer__trustinner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 22px;
}
.dn-trust {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--dn-ftr-text, #fff) 6%, transparent);
  border: 1px solid var(--dn-ftr-border, rgba(255,255,255,.14));
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
a.dn-trust:hover {
  border-color: var(--duneus-accent, #FF5100);
  transform: translateY(-1px);
}
.dn-trust__logo {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  overflow: hidden;
  background: color-mix(in srgb, var(--dn-ftr-text, #fff) 8%, transparent);
}
.dn-trust__logo img { width: 100%; height: 100%; object-fit: contain; }
.dn-trust__logo svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--duneus-accent, #FF5100);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.dn-trust__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dn-trust__label {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
}
[dir='rtl'] .dn-trust__label { letter-spacing: 0; text-transform: none; }
.dn-trust__value {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .04em;
  unicode-bidi: plaintext;
  word-break: break-word;
}
/* Fallback for browsers without color-mix: a plain translucent surface. */
@supports not (background: color-mix(in srgb, #fff 6%, transparent)) {
  .dn-trust { background: rgba(255,255,255,.05); }
  .dn-trust__logo { background: rgba(255,255,255,.08); }
}
@media (max-width: 600px) {
  .dn-trust { flex: 1 1 100%; }
}