/* The language + currency picker (components/RegionMenu.tsx), moved out of landing-rtl.css on
   2026-10-01 so the auth pages (AuthShell, `.auth-region`) render the same «AR / EGP» pill as the
   landing navbar (`.dsl`). Same layer as before. `.auth-region` defines the two landing variables the
   rules read, with the landing's own values. */
@layer landing-rtl {
  .auth-region {
    --_typography---text-s--font-size: .875rem;
    --neutral--darkest: #1f1f1f;
  }

/* ============================================================================
   * 0084 — region menu (language + currency), landing skin. One pill, matching the
   * metrics of the two pills it replaced, opening an AliExpress-style panel of
   * labelled selects with a Save button. Hardcoded hex matches the Webflow-export
   * convention of this stylesheet; the landing is always light.
   * ==========================================================================*/
  :is(.dsl, .auth-region) .mega-nav__reg { position: relative; display: inline-block; }
  :is(.dsl, .auth-region) .mega-nav__reg > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 2.5rem;
    min-width: 2.75rem;
    padding: 0 0.875rem;
    cursor: pointer;
    list-style: none;
    background-color: #fff;
    background-image: linear-gradient(90deg, #fff, #fdfdfd);
    border: 1px solid #e2e6f3;
    border-radius: 0.69rem;
    font-size: var(--_typography---text-s--font-size);
    font-weight: 600;
    line-height: 1;
    color: var(--neutral--darkest);
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  :is(.dsl, .auth-region) .mega-nav__reg > summary::-webkit-details-marker { display: none; }
  :is(.dsl, .auth-region) .mega-nav__reg > summary::marker { content: ""; }
  :is(.dsl, .auth-region) .mega-nav__reg > summary:hover,
  :is(.dsl, .auth-region) .mega-nav__reg[open] > summary {
    background-image: linear-gradient(90deg, #f3f3f3, #eef1f8);
    border-color: #dbe1f0;
  }
  :is(.dsl, .auth-region) .mega-nav__reg-codes { display: inline-flex; align-items: center; gap: 0.3rem; }
  :is(.dsl, .auth-region) .mega-nav__reg-sep { color: #a1aac8; font-weight: 400; }
  :is(.dsl, .auth-region) .mega-nav__reg-pop {
    position: absolute;
    z-index: 5;
    inset-block-start: calc(100% + 0.625rem);
    inset-inline-end: 0;
    width: 19rem;
    max-width: calc(100vw - 2rem);
    padding: 1.25rem;
    /* Panel text is start-aligned even though the trigger centres its label. */
    text-align: start;
    background-color: #fff;
    border: 1px solid #e2e6f3;
    border-radius: 1.25rem;
    box-shadow: 0 18px 48px rgb(16 24 40 / 14%);
  }
  :is(.dsl, .auth-region) .mega-nav__reg-field { margin-block-end: 1rem; }
  :is(.dsl, .auth-region) .mega-nav__reg-label {
    display: block;
    margin-block-end: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #151e3a;
  }
  :is(.dsl, .auth-region) .mega-nav__reg-sel { position: relative; display: block; }
  :is(.dsl, .auth-region) .mega-nav__reg-sel select {
    /* appearance:none so the chevron below is the only one, in the same place in both directions. */
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 3rem;
    padding-inline: 1rem 2.75rem;
    background-color: #fff;
    border: 1px solid #e2e6f3;
    border-radius: 0.75rem;
    font-family: inherit;
    font-size: var(--_typography---text-s--font-size);
    font-weight: 500;
    color: #151e3a;
    cursor: pointer;
    transition: border-color 0.2s ease;
  }
  :is(.dsl, .auth-region) .mega-nav__reg-sel select:hover { border-color: #cbd3ea; }
  :is(.dsl, .auth-region) .mega-nav__reg-sel select:focus-visible {
    outline: 2px solid var(--_color-theme---normal, #225aea);
    outline-offset: 1px;
  }
  :is(.dsl, .auth-region) .mega-nav__reg-sel > svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1rem;
    transform: translateY(-50%);
    color: #707ba0;
    pointer-events: none;
  }
  :is(.dsl, .auth-region) .mega-nav__reg-save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
    margin-block-start: 0.25rem;
    background-color: var(--_color-theme---normal, #225aea);
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--_typography---text-s--font-size);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  :is(.dsl, .auth-region) .mega-nav__reg-save:hover { background-color: var(--_color-theme---dark, #1448cb); }
  :is(.dsl, .auth-region) .mega-nav__reg-note {
    margin-block: 0.75rem 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #707ba0;
  }
  /* The pref pill stays compact in the full-width mobile action row so only the two
   * CTAs stretch. The pre-existing rule was [dir="rtl"] only; this covers both. */
  @media screen and (max-width: 991px) {
    /* The mobile nav panel is `overflow: auto`, so a downward panel would be clipped
     * by it. Drop it upward instead. Landing only: on the auth pages the pill sits at the
     * top of the page, so an upward panel would open above the viewport (2026-10-04). */
    .dsl .mega-nav__reg-pop {
      inset-block-start: auto;
      inset-block-end: calc(100% + 0.5rem);
      inset-inline-end: auto;
      inset-inline-start: 0;
    }
  }

}