/*! Header language / currency switcher.
 *
 *  Written entirely in logical properties - inline-start/inline-end rather than
 *  left/right - so it needs no entry in the mirrored right-to-left stylesheets.
 *  The component reads correctly in both directions from one set of rules, and
 *  cannot drift out of step with a twin the way the theme sheets can.
 *
 *  Loaded in both directions, so it must never assume either one.
 */

.nine-switcher {
    position: relative;
    display: inline-block;
}

/* ---------------------------------------------------------------
   Trigger.

   A fixed min-width is the point: the select2 version sized itself to the
   selected option, so "USD" had two pixels of headroom before it clipped and
   the whole bar shifted when you switched between "English" and "Arabic".
   --------------------------------------------------------------- */
.nine-switcher__trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 118px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background-color 0.18s ease;
}

/* The default disclosure triangle, in every engine that draws one. */
.nine-switcher__trigger::-webkit-details-marker { display: none; }
.nine-switcher__trigger::marker { content: ""; }

.nine-switcher__trigger:hover {
    background-color: rgba(127, 127, 127, 0.14);
}

/* Keyboard users need to see where they are; summary is focusable by default. */
.nine-switcher__trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.nine-switcher__icon {
    display: inline-flex;
    flex: none;
}

/* The accessible name for the control. Present for assistive technology, not
   shown - the icon carries the meaning visually. */
.nine-switcher__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.nine-switcher__value {
    flex: 1 1 auto;
    text-align: start;
    white-space: nowrap;
}

/* Chevron, drawn from two borders so it needs no icon font.
 *
 * PHYSICAL border-right/border-bottom on purpose, and the one place in this
 * file that is not logical. A chevron pointing down is symmetric about the
 * vertical axis, so it must look identical in both directions - it is not a
 * thing that should mirror. border-inline-end resolves to the LEFT border in a
 * right-to-left page, which turned the down chevron into one pointing left. */
.nine-switcher__caret {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.75;
    transition: transform 0.18s ease;
}

.nine-switcher[open] .nine-switcher__caret {
    transform: rotate(-135deg);
    margin-top: 2px;
}

/* ---------------------------------------------------------------
   Menu.

   inset-inline-start: 0 aligns it under the leading edge of the trigger, which
   is the left in an English page and the right in an Arabic one, with no
   second rule.
   --------------------------------------------------------------- */
.nine-switcher__menu {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(100% + 6px);
    z-index: 999;
    min-width: 100%;
    padding: 6px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid rgba(10, 22, 94, 0.1);
    box-shadow: 0 12px 28px rgba(10, 22, 94, 0.16);
}

.nine-switcher__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    color: #0a165e;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nine-switcher__option:hover,
.nine-switcher__option:focus-visible {
    background-color: rgba(10, 22, 94, 0.06);
    color: #0a165e;
}

.nine-switcher__option.is-current {
    font-weight: 600;
    color: var(--theme-color, #2b4dff);
}

/* A tick on the active entry rather than a filled bar, so the open menu does
   not compete with the page behind it. The box is always reserved, so the
   labels line up whether or not an entry is current. */
.nine-switcher__tick {
    flex: none;
    width: 14px;
    height: 14px;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%232b4dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nine-switcher__option.is-current .nine-switcher__tick {
    opacity: 1;
}

/* ---------------------------------------------------------------
   Drawer copy.

   _menu_nav.blade.php is not a mobile-only partial: the same nav.menu-block is
   the desktop navigation too, and it only turns into a drawer below 992px. So
   this pair has to be hidden above that width, or it appears a second time
   under the logo alongside the ones already in the top bar.

   992px is exactly where the theme hides .nine-header-top, so the two
   controls are visible in precisely one place at any width.
   --------------------------------------------------------------- */
.mobile-menu-switchers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px 4px;
}

@media (min-width: 992px) {
    .mobile-menu-switchers {
        display: none;
    }
}

.mobile-menu-switchers .nine-switcher__trigger {
    border: 1px solid rgba(10, 22, 94, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .nine-switcher__trigger,
    .nine-switcher__caret,
    .nine-switcher__option {
        transition: none;
    }
}