/* ============================================================
   The panel footer (issue #1669, LP5 — PRD #1664)

   ONE file for the footer at the bottom of every page that is not the
   homepage: the merchant panel, and the public help centre, contact and
   legal pages too. It is loaded by the wrapper for all of them, so the
   footer cannot lose its look on a page that does not load the panel
   shell (`/help` and `/contact` do not).

   TWO THINGS THIS FILE IS CAREFUL ABOUT:

   1. It never touches the sidebar offset. `body.panel-shell-active .footer`
      in panel-shell.css owns that (issue #988), and it reads the sidebar
      width from a variable. Nothing here may set a margin on `.footer`.
   2. Every colour is written out. The footer is dark in light mode and dark
      in dark mode — the same dark — so the dark-mode layer has nothing to
      undo, and the switch that flips the theme without reloading the page
      cannot leave the footer half-lit.

   Logical properties everywhere (`inline-start`, `padding-inline`), because
   this site is RTL and the panel can be either.
   ============================================================ */

.site-footer {
  /* The one dark, and the two greys that sit on it. */
  --site-footer-bg: #17140F;
  --site-footer-line: rgba(255, 255, 255, .10);
  --site-footer-text: rgba(255, 255, 255, .62);
  --site-footer-strong: #FFFFFF;
  --site-footer-accent: #FF6A3D;

  background: var(--site-footer-bg);
  color: var(--site-footer-text);
  font-size: .95rem;

  /* Clearly a footer, not more page: a hairline, a warm rule above it, and
     real air between the last card and this. */
  border-top: 3px solid var(--site-footer-accent);
  padding: 2.5rem 0 1.75rem;
  margin: 4rem 0 0 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ------------------------------------------------------------
   1. الخطوة التالية — what a merchant does next
   ------------------------------------------------------------ */

.site-footer__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--site-footer-line);
}

.site-footer__next-title {
  font-weight: 700;
  color: var(--site-footer-strong);
  font-size: 1rem;
}

.site-footer__next-list {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__next-link,
.site-footer .site-footer__next-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding: .375rem 1rem;
  border: 1px solid var(--site-footer-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--site-footer-strong);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.site-footer .site-footer__next-link:hover,
.site-footer .site-footer__next-link:focus {
  background: rgba(255, 106, 61, .16);
  border-color: var(--site-footer-accent);
  color: var(--site-footer-strong);
  text-decoration: none;
}

.site-footer__next-link i {
  color: var(--site-footer-accent);
}

/* ------------------------------------------------------------
   2-4. the brand, the shared links, the two switches
   ------------------------------------------------------------ */

.site-footer__main {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.site-footer__brand {
  min-width: 14rem;
}

.site-footer .site-footer__brand-name {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--site-footer-strong);
  text-decoration: none;
}

.site-footer__copyright {
  margin: .5rem 0 0;
}

.site-footer__socials {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  max-width: 34rem;
}

.site-footer .site-footer__links a,
.site-footer .site-footer__social {
  color: var(--site-footer-text);
  text-decoration: none;
}

.site-footer .site-footer__links a:hover,
.site-footer .site-footer__links a:focus,
.site-footer .site-footer__social:hover,
.site-footer .site-footer__social:focus {
  color: var(--site-footer-strong);
  text-decoration: underline;
}

.site-footer__switches {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
}

/* The switches keep every bit of their behaviour. Only the colour is set
   here, so they can be read on the dark. */
.site-footer .site-footer__switches a:not(.dropdown-item) {
  color: var(--site-footer-text);
}

.site-footer .site-footer__switches a:not(.dropdown-item):hover,
.site-footer .site-footer__switches a:not(.dropdown-item):focus {
  color: var(--site-footer-strong);
}

.site-footer .site-footer__switches .dropdown-menu {
  /* The menu itself is a normal light popover, exactly as everywhere else. */
  color: initial;
}

/* ------------------------------------------------------------
   5. the bottom bar
   ------------------------------------------------------------ */

.site-footer__bottom {
  padding-top: 1.25rem;
  border-top: 1px solid var(--site-footer-line);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .45);
}

.site-footer__company {
  margin: 0 0 .375rem;
}

.site-footer__company-label {
  color: rgba(255, 255, 255, .62);
}

.site-footer__disclaimer {
  margin: 0;
  text-align: start;
}

/* ------------------------------------------------------------
   Small screens
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  .site-footer {
    padding: 2rem 0 1.5rem;
    margin-top: 2.5rem;
  }

  .site-footer__main {
    flex-direction: column;
    gap: 1.25rem;
  }

  .site-footer__next-list {
    width: 100%;
  }

  .site-footer__next-link {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Somebody who asked their system for less movement gets none. */
@media (prefers-reduced-motion: reduce) {
  .site-footer__next-link {
    transition: none;
  }
}