/* i18n-overrides.css
   ================================================================
   Loaded after site.css. Two purposes:

   (1) Styles for the language-toggle pill component (Variant A) — the
       segmented two-state control rendered by _Language_toggle.cshtml.
       Lives at top-leading on every screen that opts in.

   (2) Directional overrides that flip site.css from RTL to LTR when
       the html element carries dir="ltr". site.css is RTL-first
       (uses `right:` in many places) so LTR rendering needs explicit
       mirrored rules. Every override is scoped under [dir="ltr"] so
       the Hebrew (RTL) experience is byte-identical to before this file
       was added.

   Created by : Ido Ikar
   Notes      : This file is not a permanent home for these overrides.
                A future cleanup pass will inline these into site.css
                using logical properties (inset-inline-start, padding-inline,
                margin-inline) so the CSS becomes direction-agnostic.
                Until then, this file is the explicit list of every spot
                that needed a directional fix.
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. Language toggle pill (Variant A — segmented two-state)
   ──────────────────────────────────────────────────────────────── */

.lang-toggle {
    /* Pill positioned IMMEDIATELY to the left of the share button so the
       two form a tight cluster. Uses `position: absolute` (NOT fixed) to
       match the share button + .game-top-actions row — all four header
       elements scroll with the page and disappear together when the user
       scrolls down. Uses the same `right:` formula as the share button
       but offset by the share button's own width (1.75rem) + a small gap
       (0.5rem) so the toggle sits flush against the share button's left
       side. */
    position: absolute;
    top: 0.85rem;
    right: max(calc(0.85rem + 1.75rem + 0.5rem),
               calc(50vw - 240px + 0.85rem + 1.75rem + 0.5rem));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(233, 30, 99, 0.25);
    border-radius: 999px;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(4px);
}

/* No `position:fixed` overrides on .share-btn or .game-top-actions —
   they keep their original `position: absolute` from site.css so they
   scroll with the page exactly as before the bilingual UI rollout. */
/* Slightly more compact pills in this position to keep the footprint small. */
.lang-toggle .lang-toggle-btn {
    padding: 4px 9px;
    font-size: 11px;
    min-width: 26px;
}
@media (max-width: 480px) {
    .lang-toggle .lang-toggle-btn {
        padding: 4px 9px;
        font-size: 11px;
        min-width: 26px;
    }
}

.lang-toggle-form {
    /* Inline form so the second pill button sits next to the first
       without a vertical gap. */
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.lang-toggle-btn {
    border: 0;
    background: transparent;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    line-height: 1.2;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lang-toggle-btn.lang-toggle-active {
    background: var(--color-primary, #e91e63);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35);
    cursor: default;
}

.lang-toggle-btn.lang-toggle-inactive:hover {
    background: rgba(233, 30, 99, 0.10);
    color: var(--color-primary, #e91e63);
}

.lang-toggle-btn.lang-toggle-inactive:focus-visible {
    outline: 2px solid var(--color-primary, #e91e63);
    outline-offset: 2px;
}

/* The toggle uses a 44x44 px touch-target on small screens (per CLAUDE.md
   UI/UX standards) by enlarging the buttons. */
@media (max-width: 480px) {
    .lang-toggle-btn {
        padding: 8px 14px;
        font-size: 13px;
        min-width: 38px;
    }
}

/* ────────────────────────────────────────────────────────────────
   2. LTR direction overrides
   Every rule below applies ONLY when the document is LTR (English).
   The original RTL Hebrew rules in site.css are unchanged.
   ──────────────────────────────────────────────────────────────── */

/* 2.1 — Top action row (the "New Game / Exit" pair).
   In RTL the row sits at top-right and reads right-to-left ("New Game"
   on the right, "Exit" on the left). To get the visual mirror in LTR
   ("Exit" on the left, "New Game" on the right) we (a) move the row to
   top-right by switching its inset, AND (b) reverse the flex direction.
   The user explicitly approved this mirror — see localization approval
   sheet (Section 2 + 5/9 reply). */
[dir="ltr"] .game-top-actions {
    /* The original rule in site.css already uses `left: 0.85rem` (physical
       left) — same in both directions. We only flip the children order so
       source order (New Game, Exit) renders as (Exit, New Game) visually,
       matching the user-approved EN reading order. */
    flex-direction: row-reverse;
}

/* The language toggle stays at top-center (handled in the base .lang-toggle
   rule above) — no LTR-specific override needed. */

/* 2.2 — Share button.
   The original site.css rule uses `right: max(0.85rem, calc(50vw - 240px + 0.85rem))`
   which is direction-agnostic (always physical right) and stays aligned
   with the content card on desktop AND clamps to the viewport edge on
   mobile. NO LTR override here — overriding it breaks the centering.
   The bug "share button jumps to the right when switching to English"
   was caused by an earlier override that set `right: 1rem` flat, which
   bypassed the centering math. Removed. */

/* 2.3 — Setup screen header reset/clear pills (.setup-header-actions).
   In RTL the action pills row reads right-to-left. In LTR we want the
   visual order to mirror so labels appear left-to-right: "Reset Settings"
   on the left, "Clear history" on the right. site.css uses default flex
   row, which already reads LTR; no override needed unless the source
   ordering looks wrong — leave as-is for now and inspect after build. */

/* 2.4 — Slider thumb position + transform.
   site.css positions slider thumbs with right: % (RTL anchored).
   The Setup.cshtml JS now sets the direction-correct anchor inline
   (left in LTR, right in RTL via Set_thumb_pct), but the thumb's
   `transform: translate(50%, -50%)` is hardcoded for RTL anchoring
   — it shifts the thumb 50% of its width to the LEFT of its anchor,
   centering it on the percent mark when anchored from the right.
   In LTR we anchor from the left, so we need to shift to the RIGHT
   by 50% width, i.e. `translate(-50%, -50%)`. */
[dir="ltr"] .slider-thumb-wrap,
[dir="ltr"] .year-slider-thumb {
    transform: translate(-50%, -50%);
}

/* 2.5 — Slider fill anchoring.
   .slider-fill is statically positioned and flows with text direction —
   no override needed; it auto-anchors to the leading edge.
   .year-slider-fill / .age-slider-fill are absolutely positioned and
   anchored explicitly via JS (Set_fill_pct), so no override needed
   there either. */

/* 2.6 — Top-bar containing round-badge + team-badge.
   In RTL the badges flow right-to-left (round on the right, team on the
   left). In LTR we want the visual mirror (round on the left, team on
   the right) — which is also the natural English reading order. site.css
   uses `display:flex; justify-content: space-between;` so source order
   determines visual order — the row already mirrors correctly when dir
   flips. No explicit override needed. */

/* 2.7 — Mini-scoreboard divider — already symmetric. */

/* 2.8 — Replay / Replace song side controls (.sp-replay-container,
   .sp-replace-container). Positioned absolute relative to the timer
   wrapper. In RTL replay is on the right, replace on the left. Mirror. */
[dir="ltr"] .sp-replay-container {
    /* Was: right edge. Move to left edge in LTR. */
    right: auto;
    left: 0;
}
[dir="ltr"] .sp-replace-container {
    right: 0;
    left: auto;
}

/* 2.9 — Setup section right-aligned hints (.age-exclude-section).
   The "Always include these artists" label is text-align:right in RTL.
   In LTR we want text-align:left. */
[dir="ltr"] #age-exclude-section > div:first-child {
    text-align: left !important;
}

/* 2.10 — Answer-reveal back/next button pair.
   Source order is [Back, Next]. In RTL with default flex-direction:row,
   children render right-to-left visually so [Back] is on the right, [Next]
   on the left — matches RTL "back first" convention.
   In LTR with default flex-direction:row, children render left-to-right
   visually so [Back] is on the left, [Next] on the right — matches the
   Western convention of "primary action on the right." No override
   needed in LTR; the default flex flow already mirrors correctly. */

/* 2.11 — Ar-back-btn arrow direction.
   The icon `#icon-arrow-forward` points RIGHT natively. In RTL the back
   button uses no transform (right-pointing arrow == "back" relative to
   text flow). In LTR "back" should point LEFT, so flip the icon. The
   !important is needed to win against the inline style override on the
   Next button below. */
[dir="ltr"] .ar-back-btn svg {
    transform: scaleX(-1) !important;
}
/* The Next button's svg has an inline `style="transform:scaleX(-1);"`
   in the Razor view — that flips it to point LEFT in RTL ("forward" in
   right-to-left flow). In LTR we want forward = right-pointing, so we
   need to override the inline style. */
[dir="ltr"] .ar-next-btn svg {
    transform: none !important;
}

/* 2.12 — Score-breakdown next-round button has the same arrow trick. */
[dir="ltr"] .score-breakdown-screen .btn-primary > svg[style*="scaleX(-1)"] {
    transform: none !important;
}

/* 2.13 — Setup chip-group — left-to-right in LTR (already default flex). */

/* 2.14 — Final-results dialog close button position.
   site.css positions the close X at top-LEFT of the dialog with `left:0.75rem`.
   That's already correct in both directions if we keep the X on the
   leading edge. In RTL: top-left = trailing of dialog. In LTR: top-left
   = leading. Either is acceptable. Leave as-is. */

/* 2.15 — Reset-feedback inline message — neutral. */

/* 2.16 — Quit dialog buttons (Stay / Exit). In RTL Stay is on the right
   (primary action position in Hebrew). In LTR primary action goes on the
   right per Western UI convention, so Stay should also be on the right.
   .quit-dialog-buttons uses flex; source order is Stay, Exit. In LTR
   default flex flow renders Stay on the LEFT, Exit on the RIGHT. To keep
   the safer "Stay" in the trailing position (right) in LTR, reverse. */
[dir="ltr"] .quit-dialog-buttons {
    flex-direction: row-reverse;
}

/* 2.17 — Toggle switches (timer + popularity). The on/off labels read
   right-to-left in RTL. In LTR the "On" label should appear on the left
   and "Off" on the right (or both on the appropriate side of the
   switch). The .timer-toggle uses flex; we keep source order and let
   flex flow handle it. */

/* 2.18 — Setup-header-actions (Reset Settings + Clear history pills).
   Source order: Reset, Clear. In RTL the right-most pill is read first
   (Reset). In LTR users read left-to-right, so Reset first means Reset
   on the LEFT — that matches default flex flow. No override needed. */

/* 2.19 — Home-screen vinyl wordmark.
   Original HE brand is "מי שר?" (4 chars + space) and fits comfortably
   at 1.25rem on the 180px vinyl. The EN brand "Guess the Song" (14 chars)
   is too wide at the same size and was wrapping to two lines in the user's
   2026-05-10 testing. Site.css now keeps the text on one line via
   white-space: nowrap; here we drop the EN font-size so a single-line
   "Guess the Song" still fits inside the vinyl on standard phones. */
[dir="ltr"] .home-vinyl-text {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* Smaller phones (≤360px CSS px) shrink the vinyl from 180→150px.
   Drop the LTR brand a touch more so it still fits with margin. */
@media (max-width: 360px) {
    [dir="ltr"] .home-vinyl-text {
        font-size: 0.8rem;
        letter-spacing: 0.3px;
    }
}