/* ============================================================
   Qfunny — RTL overrides (loaded only when Arabic is active)
   Applies on top of layout.css / component styles.
   Scope everything under [dir="rtl"] so it never affects LTR.
   ============================================================ */

/* ── Base ── */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] body {
    text-align: right;
}

/* Arabic-friendly font stack (Segoe UI / Tahoma render Arabic well on most systems) */
[dir="rtl"] body,
[dir="rtl"] .navbar,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Arial', sans-serif;
}

/* ── Headings & paragraphs default to right ── */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p {
    text-align: right;
}

/* Bootstrap text-alignment utilities must survive the broad element rules above.
   .text-center itself carries !important, but its DESCENDANTS only inherit —
   and inheritance loses to the direct [dir="rtl"] p / h1..h6 rules. */
[dir="rtl"] .text-center,
[dir="rtl"] .text-center h1,
[dir="rtl"] .text-center h2,
[dir="rtl"] .text-center h3,
[dir="rtl"] .text-center h4,
[dir="rtl"] .text-center h5,
[dir="rtl"] .text-center h6,
[dir="rtl"] .text-center p {
    text-align: center;
}

/* ── Bootstrap margin-auto helpers: flip in RTL ──
   ms-auto (margin-inline-start:auto) already flips correctly in Bootstrap RTL,
   but for our custom navbar we make sure the actions sit on the left in RTL. */

/* ── Navbar ── */
[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}

/* Bootstrap Icons that are directional: none in the nav, safe */

/* ── Language dropdown: open toward the correct side ── */
[dir="rtl"] .dropdown-menu-end {
    --bs-position: start;
    right: auto;
    left: 0;
}

/* Icon spacing inside buttons/links: flip the side the icon sits on.
   Many places use "me-2" (margin-end) via Bootstrap which auto-flips;
   for custom inline <i> + text, swap margins. */
[dir="rtl"] .nav-link i,
[dir="rtl"] .qf-lang-toggle .qf-lang-flag {
    margin-left: 6px;
    margin-right: 0;
}

/* ── Generic: swap common utility spacings that don't auto-flip ── */
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }

/* ── Cards: content right-aligned ── */
[dir="rtl"] .card,
[dir="rtl"] .bw-card,
[dir="rtl"] .mq-card,
[dir="rtl"] .fv-card,
[dir="rtl"] .cat-card {
    text-align: right;
    direction: rtl;
}

/* Card badges / meta that used left positioning */
[dir="rtl"] .bw-cat,
[dir="rtl"] .mq-cat,
[dir="rtl"] .fv-category {
    text-align: right;
}

/* ── Forms: labels & inputs right-aligned ── */
[dir="rtl"] .st-field > label,
[dir="rtl"] .pf-field > label,
[dir="rtl"] .form-group > label,
[dir="rtl"] .form-label,
[dir="rtl"] .lp-label,
[dir="rtl"] .rp-label {
    text-align: right;
    display: block;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* Email / URL / password fields read better LTR even in RTL UI */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* ── Directional arrows / chevrons: flip horizontally ── */
[dir="rtl"] .pf-li-arrow,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-arrow-right {
    transform: scaleX(-1);
}

/* ── Progress bars fill from the right ── */
[dir="rtl"] .progress {
    direction: rtl;
}

/* ── Flex rows that assume LTR order: reverse where needed ──
   (kept minimal — only rows that visually need it) */
[dir="rtl"] .lp-social,
[dir="rtl"] .lp-divider {
    direction: rtl;
}

/* ── Utility: keep numbers/latin snippets readable ── */
[dir="rtl"] .ltr,
[dir="rtl"] code,
[dir="rtl"] .code {
    direction: ltr;
    unicode-bidi: embed;
    text-align: left;
}

/* ── Navbar user-avatar: gap sits on the LEFT of the name in RTL ── */
[dir="rtl"] .user-avatar {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ── Dropdown items: icon + text spacing and right alignment in RTL ── */
[dir="rtl"] .dropdown-item {
    text-align: right;
}

/* Give the icon breathing room from the label (icon sits to the right) */
[dir="rtl"] .dropdown-item i,
[dir="rtl"] .dropdown-item .bi {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* The check-mark on the active language item: push to the far side */
[dir="rtl"] .qf-lang-item .bi-check2 {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Language toggle flag/name spacing */
[dir="rtl"] .qf-lang-toggle {
    gap: 6px;
}

/* ============================================================
   Page-specific RTL fixes — browse, my-quizzes, login, settings
   These are PHYSICAL left/right properties that don't auto-flip
   under dir="rtl" (unlike flex order, gap, and Bootstrap ms-/me-).
   Selectors are [dir="rtl"] .class (0,2,0) so they override the
   page rules (0,1,0) regardless of stylesheet load order.
   ============================================================ */

/* ── Search inputs: icon + text padding move to the right side ── */
[dir="rtl"] .bw-search-wrap svg { left: auto; right: 12px; }
[dir="rtl"] .mq-search-wrap svg { left: auto; right: 11px; }
[dir="rtl"] .bw-search { padding: 0 38px 0 12px; }   /* was 0 12px 0 38px */
[dir="rtl"] .mq-search { padding: 0 34px 0 12px; }   /* was 0 12px 0 34px */

/* ── Difficulty badge: pushed to the (now) left end of the meta row ── */
[dir="rtl"] .bw-diff,
[dir="rtl"] .mq-diff {
    margin-left: 0;
    margin-right: auto;
}

/* ── My-quizzes card menu: dropdown anchors to the opposite corner ── */
[dir="rtl"] .mq-dropdown {
    right: auto;
    left: 0;
}

/* ── My-quizzes "Play" button: keep the 3px gap on the icon's inner side.
   The triangle stays pointing right (universal media-play convention).
   !important beats the inline style="margin-right:3px" on the <svg>. ── */
[dir="rtl"] .mq-btn-play svg {
    margin-right: 0 !important;
    margin-left: 3px !important;
}

/* ── Login form: leading icon → right, password eye → left ── */
[dir="rtl"] .lp-input-icon   { left: auto;  right: 12px; }
[dir="rtl"] .lp-input-toggle { right: auto; left: 12px; }
/* .lp-input padding is symmetric (40px both sides) — no change needed */

/* ── Settings: password eye → left; input padding follows the eye ── */
[dir="rtl"] .st-eye { right: auto; left: 11px; }
[dir="rtl"] .st-input {
    padding-right: 12px;
    padding-left: 38px;   /* room for the eye, now on the left */
}

/* ============================================================
   Item 44 — Register + Forgot-password (Bootstrap .input-group)
   These two pages use Bootstrap .input-group + .form-control, not
   the custom .lp-/.st- classes. Bootstrap 5.3 auto-flips input-group
   order + border-radius under dir="rtl" (logical properties); only
   the page's manual seam-border removal and register's toggle /
   requirements icons need explicit flipping here.
   ============================================================ */

/* ── Seam borders ──
   In RTL the addon (.input-group-text) sits on the RIGHT, so the
   removed border must move to the touching (inner/left) edge and the
   outer (right) edge be restored. Mirror for the input. SCOPED to
   .input-group so standalone .form-control fields are never touched. */
[dir="rtl"] .input-group .input-group-text {
    border-right: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-left: none;
}
[dir="rtl"] .input-group .form-control {
    border-left: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-right: none;
}

/* ── Register: password eye toggle → left ── */
[dir="rtl"] .password-toggle {
    right: auto;
    left: 15px;
}

/* ── Register: password-requirements list icons → gap on the left ── */
[dir="rtl"] .requirements li i {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ============================================================
   Item 45 (Slice D) — Quiz player RTL
   player.css / player-interactive.css are largely flex + logical
   properties (auto-flip under dir="rtl"); these are the few
   PHYSICAL directional rules that need explicit mirroring.
   (.modal left:0 = full-width overlay, .score-percentage left:50%
   = centering — both symmetric, deliberately left alone.)
   ============================================================ */

/* Progress % label + answer-option text alignment */
[dir="rtl"] .progress-percentage { text-align: left !important; }
[dir="rtl"] .option-text         { text-align: right !important; }

/* Favourite button → top-left corner */
[dir="rtl"] .qw-fav-btn { right: auto; left: 14px; }

/* Edit / Duplicate button gaps → left (page uses !important) */
[dir="rtl"] .btn-edit,
[dir="rtl"] .btn-duplicate { margin-right: 0 !important; margin-left: 12px !important; }

/* Interactive question types: checkbox / handle / number / rank gaps → left */
[dir="rtl"] .multiple-select-option input[type="checkbox"],
[dir="rtl"] .ordering-item::before,
[dir="rtl"] .ordering-number,
[dir="rtl"] .sorting-rank { margin-right: 0; margin-left: 12px; }

/* Question status badge push-to-end → right */
[dir="rtl"] .question-status-badge { margin-left: 0; margin-right: auto; }

/* Hover slide effect mirrors (slide toward reading direction) */
[dir="rtl"] .multiple-select-option:hover,
[dir="rtl"] .ordering-item:hover,
[dir="rtl"] .sorting-item:hover { transform: translateX(-4px); }

/* ============================================================
   Item 46 (Slice D) — Quiz builder RTL
   builder.css is almost entirely flex/logical; only the custom
   toggle-switch thumb (physical left + translateX) needs mirroring.
   ============================================================ */
[dir="rtl"] .checkbox-label input[type="checkbox"]::before { left: auto; right: 2px; }
[dir="rtl"] .checkbox-label input[type="checkbox"]:checked::before { transform: translateX(-15px); }

/* Player nav arrows — mirror direction in RTL (Prev → , Next ←) */
[dir="rtl"] #prevBtn .fa-arrow-left,
[dir="rtl"] #nextBtn .fa-arrow-right { display: inline-block; transform: scaleX(-1); }

/* Safety net: quiz option labels must stay flex in RTL (they are <label> elements). */
[dir="rtl"] .option-label,
[dir="rtl"] .multiple-select-option { display: flex !important; }