/*
 * GLOBAL-MARKETS-CURRENT-001 / FABLE-UX - the shared global presentation-
 * language control (header, footer, mobile drawer, account) and the one
 * language picker.
 *
 * Market and Language are visually related but semantically independent:
 * both controls consume the same --aanya-pref-* geometry tokens, which each
 * placement declares once (header: layout/header.css on .header-market-slot;
 * footer: layout/footer.css on .site-footer__global-controls). Logical
 * properties keep every rule RTL-ready; no layout here assumes left-to-right.
 */

/* ---- The control -------------------------------------------------------- */
.language-control {
    display: inline-flex;
    align-items: center;
    gap: var(--aanya-pref-gap, 0.4rem);
    box-sizing: border-box;
    min-block-size: var(--aanya-pref-height, 38px);
    max-inline-size: 100%;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--aanya-pref-pad-x, 0.7rem);
    border: 1px solid var(--aanya-pref-border, color-mix(in srgb, var(--brown-500, #6b4632) 14%, transparent));
    border-radius: var(--aanya-pref-radius, 999px);
    background: var(--aanya-pref-bg, var(--neutral-0, #fff));
    color: var(--aanya-pref-fg, var(--brown-700, #3f2b20));
    font: inherit;
    font-size: var(--aanya-pref-font-size, 0.8125rem);
    font-weight: var(--font-weight-semibold, 650);
    line-height: 1;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--motion-fast, 160ms) var(--motion-ease, ease), border-color var(--motion-fast, 160ms) var(--motion-ease, ease), color var(--motion-fast, 160ms) var(--motion-ease, ease);
}

.language-control:hover,
.language-control[aria-expanded="true"] {
    border-color: var(--aanya-pref-hover-border, color-mix(in srgb, var(--green-600, #1f5a43) 35%, transparent));
    background: var(--aanya-pref-hover-bg, var(--green-50, #eee));
    color: var(--aanya-pref-hover-fg, var(--green-800, #143d2f));
}

.language-control:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-aanya-green, #2f6f53) 50%, transparent);
    outline-offset: 2px;
}

.language-control__value {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    min-inline-size: 0;
}

.language-control__icon,
.language-control__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--aanya-pref-accent, var(--green-700, #194b39));
}

.language-control__icon svg {
    display: block;
    inline-size: 1.05rem;
    block-size: 1.05rem;
}

.language-control__chevron svg {
    display: block;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    transition: transform var(--motion-fast, 160ms) var(--motion-ease, ease);
}

.language-control[aria-expanded="true"] .language-control__chevron svg {
    transform: rotate(180deg);
}

/* The native name is the label; it is never a locale code. Long endonyms get
   room before they are shortened. */
.language-control__name {
    min-inline-size: 0;
    max-inline-size: var(--aanya-pref-name-max, 11rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    unicode-bidi: isolate;
}

.language-control__label {
    display: none;
}

/* ---- Compact header (authenticated app shell below the desktop breakpoint):
   icon-only, the accessible name still carries the current language. ---- */
@media (max-width: 1023px) {
    .language-control--header {
        padding-inline: 0;
        inline-size: var(--aanya-pref-height, 40px);
        justify-content: center;
    }

    .language-control--header .language-control__name,
    .language-control--header .language-control__chevron {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ---- Mobile drawer row: "Language | globe native-name", the same row
   grammar as the Market row beside it. ---- */
.language-control--mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 50px;
    padding-block: 0.55rem;
    padding-inline: 0.35rem 3rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary, #181a19);
    font-size: var(--font-size-body, 1rem);
    font-weight: var(--font-weight-semibold, 650);
    line-height: 1.3;
}

.language-control--mobile:hover,
.language-control--mobile[aria-expanded="true"] {
    border-color: transparent;
    background: var(--surface-section-alt, #f1f3f1);
    color: var(--text-primary, #181a19);
}

.language-control--mobile:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-aanya-green, #2f6f53) 45%, transparent);
    outline-offset: -3px;
}

.language-control--mobile .language-control__label {
    display: block;
    min-inline-size: 0;
}

.language-control--mobile .language-control__value {
    justify-content: flex-end;
    gap: 0.45rem;
    color: var(--text-secondary, #4e554f);
    font-size: var(--font-size-body-sm, 0.9375rem);
}

.language-control--mobile .language-control__name {
    max-inline-size: 11rem;
}

.language-control--mobile .language-control__chevron {
    display: none;
}

/* ---- The picker layer --------------------------------------------------- */
.language-picker {
    position: fixed;
    inset: 0;
    /* A modal dialog: above the header, the mobile drawer and popovers. */
    z-index: var(--z-chrome-modal, 10082);
    display: block;
    pointer-events: none;
}

.language-picker[hidden] {
    display: none;
}

.language-picker__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--text-primary, #181a19) 42%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast, 160ms) var(--motion-ease, ease);
}

.language-picker__panel {
    position: fixed;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    inline-size: min(23rem, calc(100% - 2rem));
    max-block-size: min(70vh, 35rem);
    border: 1px solid var(--border-subtle, #d9deda);
    border-radius: var(--surface-overlay-radius, 14px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary, #181a19);
    box-shadow: var(--shadow-popover, 0 18px 44px rgba(24, 26, 25, 0.16));
    outline: none;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: auto;
    transition: opacity var(--motion-fast, 160ms) var(--motion-ease, ease), transform var(--motion-fast, 160ms) var(--motion-ease, ease);
}

.language-picker[data-direction="up"] .language-picker__panel {
    transform: translateY(6px);
}

.language-picker.is-open .language-picker__panel {
    opacity: 1;
    transform: none;
}

.language-picker__inner {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    flex: 1 1 auto;
}

/* Bottom sheet: below the desktop header breakpoint and from the drawer. */
.language-picker[data-placement="sheet"] {
    pointer-events: auto;
}

.language-picker[data-placement="sheet"] .language-picker__backdrop {
    pointer-events: auto;
}

.language-picker[data-placement="sheet"].is-open .language-picker__backdrop {
    opacity: 1;
}

.language-picker[data-placement="sheet"] .language-picker__panel {
    inset-inline: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: min(88dvh, 100%);
    padding-block-end: env(safe-area-inset-bottom, 0px);
    border-block-end: 0;
    border-radius: 18px 18px 0 0;
    transform: translateY(24px);
}

.language-picker[data-placement="sheet"].is-open .language-picker__panel {
    transform: none;
}

.language-picker[data-placement="sheet"] .language-picker__panel::before {
    content: "";
    display: block;
    inline-size: 2.5rem;
    block-size: 0.25rem;
    margin: 0.5rem auto 0;
    border-radius: 999px;
    background: var(--neutral-300, #b7bfb9);
}

/* Tablets: a centred sheet card rather than an edge-to-edge sheet. */
@media (min-width: 600px) and (max-width: 1023px) {
    .language-picker[data-placement="sheet"] .language-picker__panel {
        inset-inline: auto;
        left: 50%;
        inset-block-end: 1.5rem;
        inline-size: min(28rem, calc(100% - 2rem));
        max-block-size: min(80vh, 36rem);
        border-block-end: 1px solid var(--border-subtle, #d9deda);
        border-radius: 18px;
        transform: translate(-50%, 24px);
    }

    .language-picker[data-placement="sheet"].is-open .language-picker__panel {
        transform: translate(-50%, 0);
    }
}

body.language-picker-open {
    overflow: hidden;
}

/* ---- Panel anatomy ------------------------------------------------------ */
.language-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 0.75rem 0.5rem 1.25rem;
}

.language-picker__title {
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.3;
    color: var(--text-primary, #181a19);
}

.language-picker__close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #4e554f);
    cursor: pointer;
    transition: background-color var(--motion-fast, 160ms) var(--motion-ease, ease), color var(--motion-fast, 160ms) var(--motion-ease, ease);
}

.language-picker__close svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
}

.language-picker__close:hover {
    background: var(--surface-section-alt, #f1f3f1);
    color: var(--text-primary, #181a19);
}

.language-picker__search-wrap {
    padding: 0 1rem 0.5rem;
}

.language-picker__search-field {
    position: relative;
    display: block;
}

.language-picker__search-icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    inset-block-start: 50%;
    display: inline-flex;
    color: var(--text-secondary, #4e554f);
    transform: translateY(-50%);
    pointer-events: none;
}

.language-picker__search-icon svg {
    inline-size: 1rem;
    block-size: 1rem;
}

/* The frozen field id is the selector on purpose: the shared customer input
   reset (body:not(.aanya-admin) input:not([type=…])×6) carries (0,7,2) and
   would otherwise restyle this field; the id outranks it without !important. */
.language-picker__panel .language-picker__search,
.language-picker__panel #language-picker-search {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 42px;
    margin: 0;
    padding-block: 0.5rem;
    padding-inline: 2.6rem 0.75rem;
    border: 1px solid var(--border-subtle, #d9deda);
    border-radius: 10px;
    background: var(--surface-section-alt, #f1f3f1);
    color: var(--text-primary, #181a19);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.3;
    -webkit-appearance: none;
    appearance: none;
}

.language-picker__search::-webkit-search-decoration {
    -webkit-appearance: none;
}

.language-picker__panel .language-picker__search:focus-visible,
.language-picker__panel #language-picker-search:focus-visible {
    border-color: var(--action-link, #245b45);
    background: var(--surface-primary, #fff);
    outline: var(--focus-ring, 3px solid #2f7257);
    outline-offset: 1px;
}

.language-picker__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0.5rem 0.5rem;
    scrollbar-gutter: stable;
}

.language-picker__empty {
    margin: 0.5rem 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--surface-section-alt, #f1f3f1);
    color: var(--text-secondary, #4e554f);
    font-size: 0.875rem;
    text-align: center;
}

.language-picker__empty[hidden] {
    display: none;
}

.language-picker__group {
    padding: 0.35rem 0.25rem 0;
}

.language-picker__group[hidden] {
    display: none;
}

.language-picker__group--suggested + .language-picker__group--all {
    margin-block-start: 0.5rem;
    padding-block-start: 0.6rem;
    border-block-start: 1px solid var(--border-subtle, #d9deda);
}

.language-picker__group-title {
    margin: 0 0 0.25rem;
    padding: 0 0.5rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-500, #68716b);
}

.language-picker__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-picker__list > li[hidden] {
    display: none;
}

/* A row: native name (own language and direction) over the English name,
   and the state on the inline-end side: a check for the current language, a
   restrained tag for one still being prepared. */
.language-picker__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 48px;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary, #181a19);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--motion-fast, 160ms) var(--motion-ease, ease), border-color var(--motion-fast, 160ms) var(--motion-ease, ease);
}

.language-picker__option:hover {
    background: var(--surface-section-alt, #f1f3f1);
}

.language-picker__option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-aanya-green, #2f6f53) 55%, transparent);
    outline-offset: -3px;
}

.language-picker__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--green-500, #2f6f53) 10%, var(--surface-primary, #fff));
    border-color: color-mix(in srgb, var(--green-600, #1f5a43) 32%, transparent);
}

.language-picker__text {
    display: grid;
    gap: 0.1rem;
    min-inline-size: 0;
}

.language-picker__native {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold, 650);
    line-height: 1.3;
    overflow-wrap: anywhere;
    unicode-bidi: isolate;
}

.language-picker__english {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--text-secondary, #4e554f);
}

.language-picker__option[data-availability="preparing"] .language-picker__native {
    color: var(--text-secondary, #4e554f);
}

.language-picker__state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.language-picker__state--current {
    color: var(--green-700, #194b39);
}

.language-picker__state--current svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
}

.language-picker__tag {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-subtle, #d9deda);
    border-radius: 999px;
    color: var(--text-secondary, #4e554f);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold, 650);
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

/* One truthful source-language note, never one per row. */
.language-picker__note {
    margin: 0;
    padding: 0.6rem 1.25rem 0.85rem;
    border-block-start: 1px solid var(--border-subtle, #d9deda);
    color: var(--text-secondary, #4e554f);
    font-size: 0.75rem;
    line-height: 1.45;
}

.language-picker__badge {
    /* Screen-reader text; the visible state is the check mark. */
}

/* ---- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .language-control__chevron svg,
    .language-picker__backdrop,
    .language-picker__panel,
    .language-picker__option,
    .language-picker__close,
    .language-control {
        transition: none;
    }

    .language-picker__panel,
    .language-picker[data-direction="up"] .language-picker__panel,
    .language-picker[data-placement="sheet"] .language-picker__panel {
        transform: none;
    }
}

/* ---- Footer global controls: Market and Language belong together ---------- */
.site-footer__global-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}