/* =========================================================================
   lang-switcher.css
   Shared language-switcher component for RahatiPay. Reused, unmodified,
   across the main website and the /En/Privacy/, /Fr/Privacy/ and
   /Ar/Privacy/ pages, so the same control looks and behaves identically
   everywhere. It is purely additive: it only defines new class names
   (.lang-switcher, .lang-option, ...) and never touches an existing
   selector from style-website.css.

   Placement rationale (desktop, >=992px):
   The navbar's existing desktop row ends with a single strong visual
   anchor before the hamburger: the translucent "glass pill"
   .desktop-download-button. On desktop only, the language switcher's
   trigger takes over that exact slot and visual treatment (same
   background/border/blur/padding/radius), and the download button is
   hidden there — the switcher literally replaces it rather than sitting
   alongside it. The switcher is NOT placed among the plain nav links; it
   stays a separate, button-like control, matching how the download
   button always behaved in that position.

   Placement rationale (mobile/tablet, <992px):
   Nothing is added to the compact mobile top bar (still just logo +
   hamburger, exactly as today), and the Download button keeps its
   existing place inside the full-screen hamburger menu, untouched. The
   switcher is its own "Language" block inside that same menu, using the
   site's frosted-pill look.

   The block now sits at the TOP of that menu — directly under the logo,
   above the navigation links — instead of near the bottom, and its three
   options are laid out as a single horizontal row of equal-width pills
   (flag above label) rather than three stacked full-width rows. Same
   frosted-pill treatment, same font family/weight, same active state; it
   is only the axis and the position in the list that changed. The row is
   ~100px shorter than the stack it replaces, which is also what keeps the
   menu inside the viewport on short screens.

   Interaction pattern:
   The desktop dropdown reuses the site's own existing "checkbox hack"
   (an invisible checkbox toggled by a visible label, exactly like
   .outer-menu .checkbox-toggle already does for the hamburger) so no
   JavaScript is introduced — all options remain plain <a> links.

   Flag icons:
   Real SVG flags (assets/flags/gb.svg, fr.svg, dz.svg — MIT-licensed,
   from the flag-icons project) are used via <img>, not emoji. Emoji
   flags render as plain two-letter codes on some platforms (notably
   Windows), which is exactly the problem this replaces.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Flag icons (shared by the trigger, the dropdown and the mobile rows)
   ------------------------------------------------------------------------- */
.lang-flag-icon {
  display: block;
  flex: none;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--clr-black-10);
}

/* -------------------------------------------------------------------------
   Desktop trigger + dropdown
   ------------------------------------------------------------------------- */
.lang-switcher {
  position: relative;
  display: none;
}

.lang-switcher-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.lang-switcher-trigger {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: var(--clr-white-10);
  border: 1px solid var(--clr-white-30);
  border-radius: 15px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px var(--clr-black-10);
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-btn-desktop);
  color: var(--clr-white-60);
  cursor: pointer;
  transition: background-color var(--duration-medium) var(--ease-standard),
    color var(--duration-medium) var(--ease-standard);
}

.lang-switcher-toggle:hover ~ .lang-switcher-trigger,
.lang-switcher-toggle:focus-visible ~ .lang-switcher-trigger {
  background: var(--clr-white-30);
  color: var(--clr-white);
}

.lang-switcher-toggle:checked ~ .lang-switcher-trigger {
  background: var(--clr-white-30);
  color: var(--clr-white);
}

.lang-switcher-trigger .lang-code {
  white-space: nowrap;
  font-family: "Tajawal", var(--font-primary);
}

.lang-caret {
  width: 10px;
  height: 7px;
  flex: none;
  transition: transform var(--duration-medium) var(--ease-standard);
}

.lang-switcher-toggle:checked ~ .lang-switcher-trigger .lang-caret {
  transform: rotate(180deg);
}

.lang-switcher-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--clr-white);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--clr-black-25);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-medium) var(--ease-standard),
    transform var(--duration-medium) var(--ease-standard),
    visibility 0s var(--duration-medium);
  z-index: 20;
}

.lang-switcher-toggle:checked ~ .lang-switcher-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-medium) var(--ease-standard),
    transform var(--duration-medium) var(--ease-standard);
}

.lang-switcher-dropdown .lang-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--clr-text-body);
  transition: background-color var(--duration-medium) var(--ease-standard),
    color var(--duration-medium) var(--ease-standard);
}

.lang-switcher-dropdown .lang-option:hover,
.lang-switcher-dropdown .lang-option:focus-visible {
  background: var(--clr-primary-light-05);
  color: var(--clr-primary);
}

.lang-switcher-dropdown .lang-option[aria-current="page"] {
  background: var(--clr-primary-light-05);
  color: var(--clr-primary);
  font-weight: 500;
}

.lang-switcher-dropdown .lang-name {
  flex: 1;
}

.lang-name.ar {
  font-family: "Tajawal", var(--font-primary);
}

.lang-switcher-dropdown .lang-check {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--clr-accent);
}

@media (min-width: 992px) {
  .lang-switcher {
    display: block;
  }

  /* The switcher takes over the Download button's slot on desktop, so
     the button itself is hidden there. It keeps its normal place inside
     the mobile hamburger menu untouched — see .outer-menu .menu button
     below, which is left completely alone. */
  .navbar > .desktop-download-button {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Mobile: horizontal row at the top of the full-screen hamburger menu
   ------------------------------------------------------------------------- */

/* The wrap keeps its column direction: it stacks the "Langue" label above
   the row of options. Only the row inside it turned horizontal.
   align-self: stretch is what lets the row below measure itself against the
   width the <ul> actually has, instead of shrink-wrapping to its own
   content the way the other centred menu items do. */
.lang-switcher-mobile-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  align-self: stretch;
}

.lang-switcher-mobile-label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-white-60);
}

/* MODIFICATION: was `flex-direction: column` with a 260px cap. The three
   options now sit side by side. `row` (not `row-reverse`) is deliberate —
   the Arabic build sets dir="rtl" on <html>, so the flow reverses on its
   own and English still reads first in the writing direction of the page. */
.outer-menu .menu .lang-switcher-mobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

/* MODIFICATION: each option was a full-width row of flag + label + tick.
   As a third of a row it becomes a small pill with the flag stacked over
   the label. `flex: 1 1 0` splits the row into three exactly equal columns
   whatever the label lengths are, and `min-width: 0` lets them shrink
   together on narrow screens rather than pushing the row wider than the
   menu. Frosted-pill treatment, radius, border and colours are unchanged
   from the stacked version. */
.outer-menu .menu .lang-switcher-mobile .lang-option {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 0.4rem;
  border-radius: 12px;
  background: var(--clr-white-10);
  border: 1px solid var(--clr-white-30);
  color: var(--clr-white-60);
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  /* Steps down from 1rem so "Français" fits a third of the row without
     truncation, all the way down to a 320px-wide screen. */
  font-size: clamp(0.75rem, 3.2vw, 0.85rem);
  line-height: 1.2;
  text-align: center;
}

.outer-menu .menu .lang-switcher-mobile .lang-option::after {
  content: none;
}

.outer-menu .menu .lang-switcher-mobile .lang-option:hover,
.outer-menu .menu .lang-switcher-mobile .lang-option:active {
  background: var(--clr-white-30);
  color: var(--clr-white);
}

.outer-menu .menu .lang-switcher-mobile .lang-option[aria-current="page"] {
  background: var(--clr-white-30);
  color: var(--clr-white);
  border-color: var(--clr-white-60);
}

/* MODIFICATION: the min-width/min-height added by `.menu img` in
   style-website.css (there to size the RahatiPay logo at the top of the
   hamburger menu) also applied to these flags, stretching every one of them
   to a 45x45 square and cropping it via object-fit. That is why the mobile
   flags did not match the desktop dropdown's. The selector below is scoped
   tightly enough to out-specify `.menu img` without touching the logo, so
   the flags render at the 22x16 they declare (and at the same aspect ratio
   as the width/height attributes on the <img> tags). */
.outer-menu .menu .lang-switcher-mobile .lang-flag-icon {
  width: 22px;
  height: 16px;
  min-width: 0;
  min-height: 0;
}

/* MODIFICATION: was `flex: 1; text-align: start` — correct for a full-width
   row, wrong for a centred pill. The ellipsis is a safety net only; the
   clamp above is sized so it should never actually trigger. */
.lang-switcher-mobile .lang-name {
  flex: none;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MODIFICATION: the tick no longer has the end of a row to sit at, so it
   becomes a small corner badge on the active pill. inset-inline-end keeps
   it on the correct corner in the RTL Arabic build. It sits on top of the
   pill rather than in its flow, so all three pills stay the same height. */
.lang-switcher-mobile .lang-check {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--clr-white);
}

@media (min-width: 992px) {
  .lang-switcher-mobile-wrap {
    display: none;
  }
}