/* Language selector (D-123, D-124, L3b): a dropdown in the headers. Direction-neutral (inline-start/end),
   so it mirrors on right-to-left pages; light or dark follows the page's colour scheme (Canvas colours);
   the area colour comes from --z-lang-accent. On a phone the globe and a short label. */
.z-lang-select {
    --z-lang-accent: #047857;
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0.875rem;
    line-height: 1.2;
}

[data-zawaro-scope="agency"] .z-lang-select {
    --z-lang-accent: var(--za-accent, #4338CA);
}

.z-lang-select > summary {
    list-style: none;
}

.z-lang-select > summary::-webkit-details-marker {
    display: none;
}

.z-lang-select__button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
    padding-block: 0.45rem;
    padding-inline: 0.75rem 0.6rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 999px;
    color: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.z-lang-select__button:hover,
.z-lang-select[open] > .z-lang-select__button {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.z-lang-select__button:focus-visible {
    outline: 2px solid var(--z-lang-accent);
    outline-offset: 2px;
}

.z-lang-select__globe,
.z-lang-select__caret,
.z-lang-select__tick {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.z-lang-select__globe {
    width: 18px;
    height: 18px;
    stroke-width: 1.7;
}

.z-lang-select__caret {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    transition: transform 150ms ease;
}

.z-lang-select[open] .z-lang-select__caret {
    transform: rotate(180deg);
}

.z-lang-select__short {
    display: none;
}

.z-lang-select__list {
    position: absolute;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-end: 0;
    z-index: 60;
    box-sizing: border-box;
    min-width: 12rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
    border-radius: 12px;
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    text-align: start;
}

.z-lang-select__list li {
    margin: 0;
    padding: 0;
}

.z-lang-select__option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 42px;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: 8px;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

.z-lang-select a.z-lang-select__option:link,
.z-lang-select a.z-lang-select__option:visited {
    color: CanvasText;
    text-decoration: none;
}

.z-lang-select a.z-lang-select__option:hover,
.z-lang-select a.z-lang-select__option:focus-visible {
    background: color-mix(in srgb, CanvasText 7%, Canvas);
    outline: none;
}

.z-lang-select a.z-lang-select__option:focus-visible {
    box-shadow: inset 0 0 0 2px var(--z-lang-accent);
}

.z-lang-select__option[aria-current="true"] {
    font-weight: 700;
}

.z-lang-select__tick {
    width: 18px;
    height: 18px;
    stroke: var(--z-lang-accent);
    stroke-width: 2.4;
}

.z-lang-select__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Agency sign-in and two-step pages have no header: the selector sits in the top corner. */
.z-lang-corner {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 16px;
    z-index: 5;
}

@media (max-width: 640px) {
    .z-lang-select__name {
        display: none;
    }

    .z-lang-select__short {
        display: inline;
    }

    .z-lang-select__button {
        padding-inline: 0.6rem 0.5rem;
    }
}

/* Licence credit for the country database (D-119, L2; DB-IP Lite, CC BY 4.0). */
.z-geo-credit {
    margin: 0;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    font-size: 0.75rem;
    text-align: center;
}

.z-geo-credit a {
    color: inherit;
}

/* Right-to-left fixes (L3b part d, D-128). Every rule here applies only when the page reads right to
   left ([dir="rtl"]), so English pages are untouched. Page styles stay as they are; the design system
   (stage 1) replaces these with direction-neutral rules. */

/* Public page: the hero flowers sit behind the heading's end in English; mirror the decoration so they
   sit on the opposite side of the Arabic heading. `scale` is used (not `transform`) so the flowers'
   own positioning transforms are kept. */
[dir="rtl"] .z-fe-public-hero__flowers {
    scale: -1 1;
}

/* Agency two-step set-up: numbered steps, recovery codes and the "coming next" note start on the right. */
[dir="rtl"] .za-steps {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .za-codes {
    padding-left: 0;
    padding-right: 24px;
}

[dir="rtl"] .za-next {
    border-left: 0;
    border-right: 4px solid var(--za-accent, #4338CA);
    border-radius: 10px 0 0 10px;
}

/* Email addresses, codes, phone numbers and web addresses are always written left to right, also on
   Arabic pages; they stay aligned to the start (right) of the field. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[autocomplete="one-time-code"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] input[name="code"] {
    direction: ltr;
    text-align: right;
}