@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* =========================================================================
   Bayt.com survey theme — FLAT, simple, modern (matches the reference)
   -------------------------------------------------------------------------
   Loaded LAST (after Fruity TwentyThree + its variation). Pure CSS override.
   Design: no cards, no shadows. Questions flow on one clean white sheet,
   separated by hairline dividers, each with a "QUESTION 0X" eyebrow, a bold
   title, and minimal fields (underline text inputs, outlined option rows with
   solid blue radios, clean matrix tables).
   ========================================================================= */

:root {
    /* brand */
    --bayt-brand:      #0070eb;
    --bayt-brand-rgb:  0, 112, 235;
    --bayt-brand-600:  #005bc4;
    --bayt-brand-700:  #00419e;
    --bayt-accent:     #ffd42a;

    /* neutrals */
    --bayt-page:       #f4f6f9;   /* faint grey behind the sheet */
    --bayt-sheet:      #ffffff;   /* the white content sheet */
    --bayt-text:       #1d2430;
    --bayt-title:      #11161f;
    --bayt-muted:      #8a93a3;   /* eyebrow + helper + placeholders */
    --bayt-line:       #a8b0c0;   /* dividers between questions */
    --bayt-field-line: #dfe3ec;   /* input underline / option border */
    --bayt-option-bg-selected: #f4f8ff;

    --bayt-ring: 0 0 0 3px rgba(var(--bayt-brand-rgb), .18);

    /* Width of the white question sheet. The progress bar above it is pinned to
       the same number so the two line up — keep them reading from here rather
       than repeating the literal. */
    --bayt-sheet-max: 1020px;
    /* NB: Bootstrap --bs-primary / link colours are owned by the theme_bayt.css
       colour variation (Theme color = Bayt); no need to re-point them here. */
}

/* =========================================================================
   Base
   ========================================================================= */
/* Scale ALL respondent text down a touch (rem-based sizes shrink uniformly;
   pixel-sized controls/markers stay the same). */
html { font-size: 15px; }
body, html, * { font-family: 'Roboto', sans-serif !important; }
body {
    background-color: var(--bayt-page);
    color: var(--bayt-text);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--bayt-brand); text-decoration: none; }
a:hover { color: var(--bayt-brand-600); text-decoration: underline; }

/* =========================================================================
   Header / navbar + brand logo (thin blue line + bayt wordmark)
   ========================================================================= */
#survey-nav.navbar {
    background-color: #fff;
    border-bottom: 2px solid #000000;
    box-shadow: none;
    min-height: 118px;
    padding: 1rem 0;
}
/* Logo renders through the brandlogo/brandlogofile THEME OPTION (an <img>),
   not a CSS background — keep this to size/position that img only. */
#survey-nav .navbar-brand.logo-container {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    overflow: visible !important;
}
/* Sized for the tightly-cropped DFF x Bayt lockup (aspect ~11:1). The older
   artwork was a 2584x720 canvas whose marks filled barely a fifth of the
   height, so it needed 96px here to read at all; cropped, that same 96px
   makes it ~1050px wide and it runs into the language pill. */
#survey-nav .navbar-brand .logo {
    display: block;
    height: 46px !important;
    width: auto !important;
    max-width: min(56vw, 560px) !important;
    object-fit: contain;
    image-rendering: auto;
}
#survey-nav .navbar-toggler {
    border: 1px solid var(--bayt-field-line); border-radius: 8px;
    color: var(--bayt-text); padding: .35rem .6rem;
}
#survey-nav .navbar-toggler:focus { box-shadow: var(--bayt-ring); }
#main-dropdown.dropdown-menu {
    border: 1px solid var(--bayt-line); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16,24,40,.10); padding: .35rem;
}

/* =========================================================================
   First-page logo banner (Zoho-style centered card) — only present on the
   native pre-survey welcome step (step == 0, see nav_bar.twig). Scoped to
   .dff-banner-page so the slim navbar above keeps governing every other page.
   ========================================================================= */
#survey-nav.dff-banner-page {
    position: static;
    background-color: var(--bayt-sheet);
    border-bottom: 0;
    box-shadow: none;
    border-radius: 16px;
    min-height: 0;
    padding: 2rem 0;
    margin: 1.25rem auto 1rem;
}
#survey-nav.dff-banner-page .container-fluid.col-xl-8 {
    width: 100%;
    max-width: var(--bayt-sheet-max);
    margin: 0 auto;
}
#survey-nav.dff-banner-page .navbar-brand.logo-container {
    display: flex; justify-content: center; width: 100%; margin: 0; padding: 0;
}
#survey-nav.dff-banner-page .navbar-brand .logo {
    height: 72px;
    width: auto;
    max-width: min(96vw, 820px);
    object-fit: contain;
}
@media (max-width: 575.98px) {
    #survey-nav.dff-banner-page { border-radius: 0; padding: 1.25rem 0; }
    #survey-nav.dff-banner-page .navbar-brand .logo { height: 44px; max-width: 92vw; }
}

/* =========================================================================
   Language switcher — segmented pill in the navbar, one option per survey
   language (see views/subviews/header/nav_bar.twig). Only rendered on
   multilingual surveys.

   The pill is pinned to the centre of the navbar and must land in the SAME
   place in English and Arabic. Everything positioning it is therefore physical
   (left/transform), never logical (ms-auto, margin-inline, inset-inline): the
   logical properties flip with dir="rtl", which is exactly the language-
   dependent drift being avoided here. translateX is physical too, so the pair
   below is direction-blind by construction.

   The option order inside the pill still mirrors under RTL — that is the grid
   row doing its normal job and is wanted; only the pill's position is fixed.

   inline-grid + grid-auto-columns:1fr rather than inline-flex: it sizes every
   option to the WIDEST one, so "English" and "عربي" are equal halves however the
   two scripts happen to measure, and a third language would divide evenly with
   no new rule. A flex row would size each option to its own text and make the
   toggle look lopsided.
   The pill is centred in the whole navbar with position:absolute + left:50%.
   The logo would otherwise share that centre — the inherited theme renders the
   brand centred in the bar, so a dead-centre pill lands right on top of it (the
   logo peeks out both sides). So the logo is pinned to the start with an auto
   inline-end margin: physical-left in LTR, physical-right in RTL, which is the
   normal place for a brand and clears the middle for the pill. The pill's own
   position stays language-independent, as required.
   ========================================================================= */
#survey-nav .container-fluid { position: relative; }
#survey-nav .navbar-brand.logo-container { margin-inline-end: auto; }
.bayt-lang-switch {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--bayt-field-line);
    border-radius: 999px;
    background: var(--bayt-page);
    /* lifts the pill off the white navbar so it reads as a control, not a label */
    box-shadow: 0 2px 8px rgba(16, 24, 40, .07);
}
.bayt-lang-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--bayt-muted);
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.bayt-lang-option:hover {
    color: var(--bayt-brand);
    background: rgba(var(--bayt-brand-rgb), .08);
}
.bayt-lang-option:focus-visible {
    outline: none;
    box-shadow: var(--bayt-ring);
}
.bayt-lang-option.is-active,
.bayt-lang-option.is-active:hover {
    background: var(--bayt-brand);
    color: #fff;
    cursor: default;
    box-shadow: 0 2px 8px rgba(var(--bayt-brand-rgb), .35);
}
@media (max-width: 575.98px) {
    /* On a phone the logo already fills the width, so a dead-centre pill cannot
       clear it side-by-side. Stack instead: the navbar becomes a column, logo
       centred on top and pill centred below. That keeps the pill centred and
       identical in both languages (the requirement) without a collision. The
       pill leaves absolute positioning here so the column can lay it out; the
       desktop left-pin on the logo is undone so it centres in the column. */
    #survey-nav .container-fluid { flex-direction: column; align-items: center; }
    #survey-nav .navbar-brand.logo-container { margin-inline-end: 0; }
    .bayt-lang-switch {
        position: static; left: auto; top: auto; transform: none;
        margin-top: .5rem; padding: 3px; gap: 2px;
    }
    .bayt-lang-option { min-height: 34px; padding: .4rem .8rem; font-size: .85rem; }
}

/* =========================================================================
   Survey version switcher — an offer attached to the question it applies to
   (see views/subviews/survey/group_subviews/group_container.twig), not a navbar
   control. Sits inside the card above the group heading, in solid brand blue so
   respondents actually register that the shorter version exists. Aligns to the end of the reading
   direction, so it lands top-right in English and top-left in Arabic with
   nothing to flip.
   ========================================================================= */
.bayt-flow-switch {
    display: flex;
    justify-content: flex-end;
    /* Never let the row stretch the pill: the group markup around this is
       flex-based, and a stretched item turns the pill into a full-height bar. */
    align-items: center;
    margin-bottom: .75rem;
    /* Stays in view while the respondent reads down this page — the offer is
       only useful if it is still reachable once you have seen what you are being
       asked. It sticks within .group-container, so it leaves with the page: the
       next page of the section does not render it at all.
       The offset clears the fixed navbar. --bayt-nav-h is measured from the real
       navbar by setNavHeight() in scripts/bayt.js, because the bar's height
       changes with the breakpoint (it stacks on phones) and a hard-coded value
       would either overlap it or float too low. */
    position: sticky;
    top: calc(var(--bayt-nav-h, 120px) + .5rem);
    z-index: 15;
}
.bayt-flow-switch > a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .45rem;
    padding: .5rem 1.05rem;
    border: 1px solid var(--bayt-brand);
    border-radius: 999px;
    background: var(--bayt-brand);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    /* The label is a version name ("Simpler version"); wrapping it mid-phrase
       reads as broken rather than compact. */
    white-space: nowrap;
    /* Solid brand blue rather than the outline it used to be: as a quiet
       outlined pill respondents read it as fine print and did not realise the
       shorter version was on offer. It is still not the primary action — the
       Next button is — but it has to be noticed to be useful, and the two do
       not compete because they sit at opposite ends of the page. */
    color: #fff;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .06);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bayt-flow-switch > a:hover,
.bayt-flow-switch > a:focus {
    /* White-on-blue already; darken the fill so hover still reads as feedback. */
    color: #fff;
    border-color: var(--bayt-brand-600);
    background: var(--bayt-brand-600);
}
.bayt-flow-switch > a:focus-visible {
    outline: none;
    box-shadow: var(--bayt-ring);
}
.bayt-flow-icon { font-size: 1em; line-height: 1; }
@media (max-width: 575.98px) {
    .bayt-flow-switch > a { padding: .45rem .9rem; font-size: .8125rem; }
}

/* Reserved gutter for the switch — wide screens only.
   The button used to sit on its own full-width row above the group title, which
   spent a whole band of vertical space on a secondary action and left it
   competing with the heading for the same column. Instead the group reserves a
   strip down its trailing edge and the button lives in it: the title, the
   description and the answer table all narrow to the remaining width, and the
   switch is beside the content rather than on top of it.

   .bayt-flow-gutter is added by group_subviews/group_container.twig on exactly
   the pages that render the switch, so no other page or survey narrows.

   float takes the button out of the vertical flow (so it no longer pushes the
   title down) while position:sticky, set in the base rule above, still holds it
   in view on scroll — the two combine. The negative margin pulls it back across
   the padding it would otherwise be confined to, so it lands in the reserved
   strip and ends flush with the sheet's own content edge.

   Physical float with a [dir="rtl"] override rather than `float: inline-end`:
   the logical keyword only landed in Chrome 118 and this has to hold up in
   whatever browser a respondent brings.

   Below 768px the strip is not affordable — it would leave the table a sliver —
   so the button keeps its own row, which is the right shape on a phone anyway. */
@media (min-width: 768px) {
    .group-container.bayt-flow-gutter { --bayt-flow-gutter-w: 15rem; }
    .group-container.bayt-flow-gutter { padding-inline-end: var(--bayt-flow-gutter-w); }
    .group-container.bayt-flow-gutter > .bayt-flow-switch {
        float: right;
        /* Wider than either label (English ~197px, Arabic ~205px) so a longer
           translation right-aligns inside the strip instead of reaching back
           over the content. */
        width: var(--bayt-flow-gutter-w);
        margin-inline-end: calc(var(--bayt-flow-gutter-w) * -1);
        margin-bottom: 0;
    }
    [dir="rtl"] .group-container.bayt-flow-gutter > .bayt-flow-switch { float: left; }
}

/* =========================================================================
   Standing hint note — phones only

   A full-width brand-blue bar carrying one line of guidance, authored in the
   survey's own question HTML as

       <div class="bayt-hint-note" role="note">…</div>

   rather than in a template, so the note travels with the question it explains
   and adding another one is a content edit, not a theme change.

   It replaced a hover-reveal "i" bubble: the instruction (that either column
   may be filled) is something every respondent needs before they start typing,
   not something they would think to go looking for, and on a touchscreen there
   is no hover to discover it with. Standing text needs no discovery.

   Phones only, hence display:none by default. On a wide screen the two columns
   and their headings are visible together, so the instruction is legible from
   the table itself; on a phone the theme collapses the array and the headings
   go away entirely, which is where a standing reminder earns its space.

   scripts/bayt.js moves it to the top of .answer-container so it sits on the
   column headings it qualifies and gets the answer block as its sticky
   containing block. The move happens regardless of width — it is cheap, and it
   keeps the element correct if the viewport is resized across the breakpoint
   after load.
   ========================================================================= */
.bayt-hint-note { display: none; }

@media (max-width: 575.98px) {
    .bayt-hint-note {
        display: block;
        position: sticky;
        /* Clears the fixed navbar. --bayt-nav-h is measured from the real bar
           by setNavHeight(), since its height changes with the breakpoint. */
        top: calc(var(--bayt-nav-h, 120px) + .5rem);
        z-index: 14;
        /* Edge to edge, matching the reference. Safe to break out here
           specifically because at this breakpoint the sheet already runs to the
           screen edge with square corners (see the .col-xl-8 rule above), so
           there is no rounded card edge to tear through. -1.15rem is that
           rule's own horizontal padding — keep the two in step. */
        width: auto;
        /* .question-container is a Bootstrap .row, so `.row > *` hands every
           direct child width:100% AND max-width:100%. The width is overridden
           just above, but max-width would still clamp the box to the content
           width and quietly swallow the negative margins below — the bar would
           render inset instead of full-bleed. */
        max-width: none;
        margin: 0 -1.15rem .5rem;
        padding: .55rem .75rem;
        border-radius: 0;
        background: var(--bayt-brand);
        color: #fff;
        font-size: .9375rem;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
        /* Sits over the table while pinned, so it needs to lift off it. */
        box-shadow: 0 2px 8px rgba(16, 24, 40, .16);
    }
}

/* =========================================================================
   Progress bar — slim, brand, with a permanent "x% complete / Page x of y"
   readout (see views/subviews/header/progress_bar.twig).
   ========================================================================= */
.top-container { margin-top: 1rem; margin-bottom: .25rem; }
.ls-progress-container .progress {
    height: 6px; border-radius: 999px; background-color: #e5e5e5; overflow: hidden;
}
.ls-progress-container .progress-bar { background-color: var(--bayt-brand) !important; border-radius: 999px; }

/* Line the bar up with the white question sheet below it. The .top-content
   column carries col-xl-8, which Bootstrap only sizes at >=1200px, so without
   this the bar ran nearly edge to edge while the sheet stayed at 1020px. Same
   width pin the sheet itself gets (see "The white sheet" below).
   The column keeps its Bootstrap gutter: that leaves the bar a hair inside the
   sheet's edges, but the two columns then track each other at every width.
   Zeroing it lined them up exactly at >=1020px and overshot the sheet by the
   gutter below that, which pushed the label off the right edge. */
.top-container .top-content {
    width: 100%;
    max-width: var(--bayt-sheet-max);
    margin: 0 auto;
}

/* Track and readout share one row: the track takes whatever the label leaves.
   Logical properties (gap, text-align: end) keep the label after the track in
   both directions, so Arabic gets it on the left without a separate rule. */
.bayt-progress {
    display: flex;
    align-items: center;
    gap: .875rem;
}
.bayt-progress .bayt-progress-track {
    flex: 1 1 auto;
    /* The parent theme puts min-width: 2em on .progress-bar so an empty bar is
       still visible; without a min-width here a long label could squeeze the
       track down to that stub. */
    min-width: 8rem;
}
.bayt-progress-label {
    flex: 0 0 auto;
    text-align: end;
    line-height: 1.25;
    font-size: .8125rem;
    color: var(--bayt-text);
    /* Reserve the width the longest state needs ("100% complete"), so the track
       does not shorten by a few pixels every time the number gains a digit. */
    min-width: 7.5rem;
}
.bayt-progress-percent { display: block; font-weight: 700; }
/* Pre-first-question state: the label carries a hint instead of a number (see
   progress_bar.twig). Muted and unbolded so it reads as a placeholder rather
   than a value, and allowed to shrink because it is a good deal longer than any
   percentage and would otherwise push the track down to its min-width. */
.bayt-progress-label-pending {
    flex: 0 1 auto;
    color: var(--bayt-muted);
}
.bayt-progress-label-pending .bayt-progress-percent { font-weight: 400; }

/* Narrow screens: the label would eat most of the row, so drop it under the
   track instead.
   It stays packed against the start edge rather than pinned to the end: the
   sheet already overruns the viewport at this width (visible on the stock theme
   too), so anything pinned to the end edge risks being cut off. */
@media (max-width: 575.98px) {
    .bayt-progress {
        display: block;
    }
    .bayt-progress-label {
        min-width: 0;
        margin-top: .375rem;
        text-align: start;
    }
}

/* =========================================================================
   The white "sheet": questions flow inside a centered white column on grey.
   ========================================================================= */
#outerframeContainer.outerframe { padding-top: 1.25rem; padding-bottom: 2.5rem; }
/* col-xl-8 only gets a Bootstrap width/centering rule at >=1200px. Below that
   breakpoint there's no fallback, so the sheet collapses to content width and
   sits flush left instead of centering (the Zoho reference keeps one fixed,
   centered card width at any viewport size) -- pin width/centering ourselves,
   independent of the Bootstrap breakpoint, to match Zoho at any window size. */
#outerframeContainer .col-xl-8,
.outerframe .col-centered {
    counter-reset: bayt-q;
    background: var(--bayt-sheet);
    border-radius: 16px;
    padding: 1.25rem 2.5rem 2rem;
    float: none;
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--bayt-sheet-max);
    margin: 0 auto;
}
@media (max-width: 575.98px) {
    #outerframeContainer .col-xl-8,
    .outerframe .col-centered { padding: 1rem 1.15rem 1.5rem; border-radius: 0; }
}

/* Strip space-col top margins — removes the large gap above the group title */
.space-col { margin-top: 0 !important; }

/* Collapse the group-description container.
   It holds a CSS-only <style> tag with no visible content, but inherits
   space-col's margin-bottom: 2em from theme_bayt.css which creates ~30px
   of empty space between the page title and the first question on every page. */
.group-container .group-description {
    margin: 0 !important;
    padding: 0 !important;
}

/* Group title (page title) */
.group-title, .group-container .group-title {
    font-size: 18px !important; font-weight: 700; color: var(--bayt-title);
    margin: 0 0 .25rem; line-height: 1.3 !important;
}
.group-desc { color: var(--bayt-muted); margin-bottom: .5rem; font-size: .95rem; }

/* =========================================================================
   FLAT questions — no card, hairline divider, eyebrow, bold title
   (.question-container is also a Bootstrap .row → neutralise gutter)
   ========================================================================= */
.question-container {
    --bs-gutter-x: 0;
    display: block;
    margin: 0;
    padding: 1.9rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* Divider appears ABOVE each question that follows another — no trailing border ever */
.question-container + .question-container {
    border-top: 1px solid var(--bayt-line);
}
/* A question absorbed into the previous one by initHintNotes() (so the hint bar
   stays pinned across both) is no longer an adjacent sibling, so the rule above
   stops matching and the divider between them would silently vanish — including
   on desktop, where the bar is not even shown. Restate it for the nested case. */
.question-container > .question-container.bayt-hint-absorbed {
    border-top: 1px solid var(--bayt-line);
}
/* Boilerplate intro text — same top padding as other question cards.
   !important needed to beat the inline <style> card rule (0,1,0,0 !important)
   because this rule has higher specificity (0,2,0,0 !important). */
.question-container.boilerplate {
    padding-top: 1.5rem !important;
    padding-bottom: .75rem;
}

/* "QUESTION 0X" eyebrow — hidden */
.question-container:not(.boilerplate):not(.text-display):not(.equation) {
    counter-increment: bayt-q;
}
.question-container:not(.boilerplate):not(.text-display):not(.equation)::before {
    content: none !important;
}

/* Title */
.question-container .question-text,
.question-container .ls-label-question {
    color: var(--bayt-title);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}
.question-container .question-title-container { margin-bottom: 1rem; }
.question-container .ls-label-question { margin-bottom: 0; }

/* Hide a trailing <hr> that is the very last element in boilerplate content.
   Uses :last-child so it only matches when <hr> ends the block — section-divider
   <hr> tags that have content after them are left untouched. */
.question-container.boilerplate .question-text > hr:last-child,
.question-container.text-display .question-text > hr:last-child { display: none !important; }

/* Display / boilerplate (type X) text must NOT inherit the bold question-title
   weight — otherwise the whole intro renders bold. Reset to normal weight and
   body size so the embedded HTML (<h3>, <strong>) controls emphasis, matching
   the Zoho reference where only headings/emphasis are bold. */
.question-container.boilerplate .question-text,
.question-container.boilerplate .ls-label-question,
.question-container.text-display .question-text,
.question-container.text-display .ls-label-question {
    font-weight: 400;
    font-size: 1rem;
    color: var(--bayt-text);
    line-height: 1.7;
}

/* Help text — hidden ("Choose one of the following answers" and similar tips) */
.questionhelp, .ls-questionhelp, .question-container .hint,
.question-help-container { display: none !important; }
/* The generic EM instruction tip ("Choose one of the following answers",
   "Select all that apply", "Choose your language") renders as its own element
   .ls-em-tip.em_default — hide it too. Real validation tips (em_num_answers,
   em_value_range, em_dberror, …) keep different classes and stay visible. */
.ls-em-tip.em_default { display: none !important; }
.asterisk, .ls-asterisk, i.asterisk { color: #e2496a; font-size: .7em; vertical-align: super; }

/* Collapse the empty validation/help containers (they reserve dead space) */
.question-valid-container { margin: 0 !important; padding: 0 !important; }
.question-valid-container:has(*) { margin: .6rem 0 0 !important; color: #e2496a; font-size: .9rem; }
.question-help-container { margin: 0 !important; }

/* --- Reveal real author NOTE text (Follow-up page) -----------------------
   Help is hidden globally above to suppress generic tips. Re-enable it ONLY
   for short-text and single-choice questions that actually carry author help
   — i.e. acknowledge / companyName / companyAddr on the Follow-up page.
   Array (Q4) questions keep help hidden because their notes are inlined in the
   question HTML; revealing help there would duplicate them. The :has() guard
   brings the container back only when help text is actually present, so empty
   help containers on other text/list questions stay collapsed. */
.question-container.text-short .question-help-container:has(.ls-questionhelp),
.question-container.list-radio .question-help-container:has(.ls-questionhelp) {
    display: block !important;
    margin: .45rem 0 0 !important;
    padding: 0 !important;
}
.question-container.text-short .ls-questionhelp,
.question-container.list-radio .ls-questionhelp {
    display: block !important;
    color: var(--bayt-muted);
    font-size: .85rem;
    line-height: 1.55;
    font-style: italic;
}
.answer-container { margin-top: 0; }
/* Text-input questions get a little more breathing room above the field. */
.question-container.text-short .answer-container,
.question-container.text-long .answer-container,
.question-container.text-huge .answer-container,
.question-container.numeric .answer-container,
.question-container.numeric-multi .answer-container { margin-top: .55rem; }

/* =========================================================================
   TEXT / NUMBER inputs → underline only (no box)
   ========================================================================= */
.answer-container input[type="text"].form-control,
.answer-container input[type="email"].form-control,
.answer-container input[type="number"].form-control,
.answer-container input[type="password"].form-control,
.answer-container input.text,
.answer-container input.numeric,
.text-item input.form-control {
    width: 100% !important;
    max-width: 100%;
    border: 1.5px solid #d6dce6 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: .7rem 1rem !important;
    min-height: 48px !important;
    font-size: 1.02rem;
    color: var(--bayt-text);
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.answer-container input.form-control::placeholder,
.text-item input.form-control::placeholder { color: var(--bayt-muted); }
.answer-container input[type="text"].form-control:hover:not(:focus),
.answer-container input[type="number"].form-control:hover:not(:focus),
.text-item input.form-control:hover:not(:focus) { border-color: #b9c2d1 !important; }
.answer-container input[type="text"].form-control:focus,
.answer-container input[type="email"].form-control:focus,
.answer-container input[type="number"].form-control:focus,
.answer-container input.numeric:focus,
.text-item input.form-control:focus {
    border-color: var(--bayt-brand) !important;
    box-shadow: var(--bayt-ring) !important;
    outline: none;
}
/* array cells: bordered inputs fill the cell (not capped) */
table.ls-answers input.form-control { max-width: 100% !important; min-height: 42px !important; }
@media (max-width: 575.98px) {
    .answer-container input[type="text"].form-control,
    .answer-container input[type="number"].form-control,
    .text-item input.form-control { max-width: 100%; }
}

/* Textarea → light, clean box (underline reads odd for multi-line) */
textarea.form-control {
    border: 1.5px solid var(--bayt-field-line);
    border-radius: 12px;
    background: #fff;
    padding: .75rem .9rem;
    min-height: 7rem;
    line-height: 1.55;
    box-shadow: none;
}
textarea.form-control:focus { border-color: var(--bayt-brand); box-shadow: var(--bayt-ring); outline: none; }

/* Select → clean bordered (not underline) */
.form-select {
    min-height: 46px;
    border: 1.5px solid var(--bayt-field-line);
    border-radius: 10px;
    padding: .55rem .9rem;
    background-color: #fff;
    color: var(--bayt-text);
}
.form-select:focus { border-color: var(--bayt-brand); box-shadow: var(--bayt-ring); outline: none; }

/* prefix / suffix groups stay inline with the underline */
.ls-input-group { display: inline-flex; align-items: baseline; gap: .4rem; }
.ls-input-group-extra { color: var(--bayt-muted); background: transparent; border: 0; padding: 0; }

/* =========================================================================
   CHOICE LISTS → thin outlined rounded rows + solid blue radios
   (scope to <li>; array <td> handled separately)
   ========================================================================= */
ul.ls-answers, ul.answers-list { padding-left: 0; margin: 0; list-style: none; }

li.answer-item.radio-item,
li.answer-item.checkbox-item {
    list-style: none;
    margin: 0 0 .6rem 0;
    padding: 0;
    border: 1px solid var(--bayt-field-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}
/* type M nests input/label inside .row>.col-auto — make it span the row */
li.answer-item.checkbox-item > .row,
li.answer-item.checkbox-item > .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; margin: 0; }

li.answer-item.radio-item input[type="radio"],
li.answer-item.checkbox-item input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

li.answer-item.radio-item label.control-label,
li.answer-item.checkbox-item label.control-label,
li.answer-item.radio-item label.radio-label,
li.answer-item.checkbox-item label.checkbox-label {
    display: block; width: 100%; margin: 0;
    padding: .9rem 1rem .9rem 3rem;
    position: relative; cursor: pointer;
    font-size: 1rem; font-weight: 500; color: var(--bayt-text); line-height: 1.45;
}
li.answer-item.radio-item:hover,
li.answer-item.checkbox-item:hover { border-color: #c4ccda; }
li.answer-item.radio-item:has(input:checked),
li.answer-item.checkbox-item:has(input:checked) {
    border-color: rgba(var(--bayt-brand-rgb), .45);
    background: var(--bayt-option-bg-selected);
}
li.answer-item.radio-item:has(input:focus-visible),
li.answer-item.checkbox-item:has(input:focus-visible) { border-color: var(--bayt-brand); box-shadow: var(--bayt-ring); }

/* marker: hollow ring → solid blue radio when checked */
li.answer-item.radio-item label::before,
li.answer-item.checkbox-item label::before {
    content: ""; position: absolute; left: 1rem; top: 50%;
    width: 20px; height: 20px; margin: -10px 0 0 0;   /* reset parent theme's margin-left:-20px */
    border: 2px solid #c4ccda; background: #fff; box-sizing: border-box;
    transition: border-color .15s ease, background-color .15s ease;
}
li.answer-item.radio-item label::before { border-radius: 50%; }
li.answer-item.checkbox-item label::before { border-radius: 6px; }

li.answer-item.radio-item label::after {
    content: ""; position: absolute; left: calc(1rem + 5px); top: 50%;
    width: 10px; height: 10px; margin: -5px 0 0 0; border-radius: 50%;
    background: var(--bayt-brand) !important; transform: scale(0); transition: transform .12s ease;
}
li.answer-item.radio-item input:checked + label::before { border-color: var(--bayt-brand) !important; }
li.answer-item.radio-item input:checked + label::after { transform: scale(1); }

li.answer-item.checkbox-item label::after {
    content: ""; position: absolute; left: calc(1rem + 7px); top: 50%;
    width: 5px; height: 10px; margin: -7px 0 0 0;
    border: solid #fff; border-width: 0 2.5px 2.5px 0;
    background: transparent !important; transform: rotate(45deg) scale(0); transition: transform .12s ease;
}
li.answer-item.checkbox-item input:checked + label::before { background: var(--bayt-brand); border-color: var(--bayt-brand); }
li.answer-item.checkbox-item input:checked + label::after { transform: rotate(45deg) scale(1); }

/* =========================================================================
   "Other" row on choice lists (li.radio-text-item) → a plain always-visible
   text box, labelled by its own placeholder.

   Core renders this row as `<li class="row answer-item radio-text-item d-flex">`
   holding two Bootstrap columns: the radio+label in .col-auto and the text input
   in .col. Left alone it broke against the pill styling above in three ways:
     - .row applies negative gutter margins, so the columns hung past the pill's
       1px rounded border and the input's own border collided with it;
     - the .col-auto label still had width:100% + 3rem indent from the rule above,
       so it fought the flex row and squeezed the input to a sliver;
     - the input is 48px tall with its own box, i.e. a bordered box flush inside
       a bordered box, sharing a row with a label that carries the radio marker.

   The radio and its label are visually hidden rather than removed: the radio is
   still the field that records "-oth-", and the template's inline
   keyup->click(radio) handler selects it as soon as anything is typed. So typing
   is the whole interaction — no separate click to arm the box first. The label
   text becomes the input's placeholder (initOtherInlineText in scripts/bayt.js),
   which is why hiding it loses no wording. It stays in the DOM because the input
   is aria-labelledby it.

   The pill chrome is dropped for this row: with no visible label it would be an
   empty bordered box wrapping a bordered input.

   Hiding the label is scoped to .bayt-other-inline, which initOtherInlineText()
   adds only once it has actually copied the label into the placeholder. Any
   other survey's "Other" row keeps its visible label — losing the wording with
   nothing to replace it is exactly the regression that scoping prevents.
   ========================================================================= */
li.answer-item.radio-item.radio-text-item {
    display: block !important;   /* beats the template's d-flex utility */
    margin-left: 0;
    margin-right: 0;             /* .row's negative gutters, undone */
}
li.answer-item.radio-item.radio-text-item > .othertext-label-checkox-container,
li.answer-item.radio-item.radio-text-item > .other-text-item {
    width: 100%; max-width: 100%; flex: 0 0 100%;
    margin: 0; padding: 0;
}
li.answer-item.radio-item.radio-text-item > .other-text-item { display: block; }
li.answer-item.radio-item.radio-text-item > .other-text-item input.form-control {
    width: 100% !important;
    max-width: 100%;
    min-height: 48px !important;
}

/* Placeholder-labelled variant (JS-flagged).

   The row keeps the pill chrome and the radio marker of every other option, so
   it reads as one of the choices rather than a stray text box — it IS one: the
   radio it carries is what records "-oth-". Only the label's TEXT goes (it is
   the placeholder now), not the label itself, which still draws the circle via
   the ::before/::after rules above and stays the accessible name for the input.

   Laid out as a flex row — marker column, then the field — so the typed number
   starts on the same 3rem text edge as every other option's label. */
li.answer-item.radio-item.radio-text-item.bayt-other-inline {
    display: flex !important;    /* beats the block layout of the base rule */
    align-items: center;
}
li.answer-item.radio-item.radio-text-item.bayt-other-inline > .othertext-label-checkox-container {
    flex: 0 0 3rem;
    width: 3rem;
    align-self: stretch;
}
li.answer-item.radio-item.radio-text-item.bayt-other-inline label.control-label {
    /* font-size:0 hides the wording while leaving the element (and so the
       marker, and the accessible name) in place. */
    font-size: 0;
    width: 100%;
    height: 100%;
    min-height: 48px;
    padding: 0;
}
li.answer-item.radio-item.radio-text-item.bayt-other-inline > .other-text-item {
    flex: 1 1 auto;
    width: auto; max-width: none;
    min-width: 0;                /* let it shrink inside the flex row */
}
/* The pill is the visible control, so the field inside it drops its own box. */
li.answer-item.radio-item.radio-text-item.bayt-other-inline > .other-text-item input.form-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 1rem !important;
    min-height: 46px !important;
}
[dir="rtl"] li.answer-item.radio-item.radio-text-item.bayt-other-inline > .other-text-item input.form-control {
    padding-left: 1rem !important;
    padding-right: 0 !important;
}

/* The EM tip this attribute auto-generates ("Only numbers may be entered in
   '…' accompanying text field.", em_manager_helper::_ValidateQuestion) is
   suppressed: the field is constrained to digits as you type instead, so the
   sentence only restates something the input will not let you get wrong.
   initOtherNumbersOnly() in scripts/bayt.js does that constraining — the two
   belong together, because hiding the tip without it would leave a rejected
   submit with no visible reason. */
.ls-em-tip.em_other_numbers_only { display: none !important; }

/* =========================================================================
   YES / NO and GENDER → same outlined rows as choice lists
   ========================================================================= */
.yesno-button.btn-group, .gender-button.btn-group,
.yesno-button.radio-list, .gender-button.radio-list {
    display: flex; flex-direction: column; gap: .6rem; width: 100%; max-width: 100%;
}
.yesno-button .ls-icon, .gender-button .ls-icon { display: none !important; }
.yesno-button.btn-group > .btn, .gender-button.btn-group > .btn,
.yesno-button .btn-check + .btn, .gender-button .btn-check + .btn {
    flex: 0 0 auto; display: block; width: 100%; text-align: left; position: relative;
    margin: 0 !important; padding: .9rem 1rem .9rem 3rem !important;
    background: #fff !important; border: 1px solid var(--bayt-field-line) !important;
    border-radius: 12px !important; color: var(--bayt-text) !important;
    box-shadow: none !important; font-weight: 500; line-height: 1.45;
}
.yesno-button.btn-group > .btn:hover, .gender-button.btn-group > .btn:hover { border-color: #c4ccda !important; }
.yesno-button .btn-check + .btn::before, .gender-button .btn-check + .btn::before {
    content: ""; position: absolute; left: 1rem; top: 50%; width: 20px; height: 20px; margin-top: -10px;
    border: 2px solid #c4ccda; border-radius: 50%; background: #fff; box-sizing: border-box;
}
.yesno-button .btn-check + .btn::after, .gender-button .btn-check + .btn::after {
    content: ""; position: absolute; left: calc(1rem + 5px); top: 50%; width: 10px; height: 10px; margin-top: -5px;
    border-radius: 50%; background: var(--bayt-brand); transform: scale(0); transition: transform .12s ease;
}
.yesno-button .btn-check:checked + .btn, .gender-button .btn-check:checked + .btn {
    background: var(--bayt-option-bg-selected) !important; border-color: rgba(var(--bayt-brand-rgb), .45) !important; color: var(--bayt-text) !important;
}
.yesno-button .btn-check:checked + .btn::before, .gender-button .btn-check:checked + .btn::before { border-color: var(--bayt-brand) !important; }
.yesno-button .btn-check:checked + .btn::after, .gender-button .btn-check:checked + .btn::after { transform: scale(1); }
.yesno-button.radio-list li.answer-item, .gender-button.radio-list li.answer-item { width: 100%; margin-bottom: 0; }

/* =========================================================================
   ARRAYS / MATRIX → minimal clean table (no zebra, hairline rows)
   ========================================================================= */
table.ls-answers { border-collapse: separate; border-spacing: 0; width: 100%; }
table.ls-answers, table.ls-answers thead, table.ls-answers tbody,
table.ls-answers tr, table.ls-answers tr.ls-even, table.ls-answers tr.ls-odd,
table.ls-answers tbody tr td, table.ls-answers tbody tr th {
    border-left: 0 !important; border-right: 0 !important;
    background-color: transparent !important;
}
table.ls-answers > thead > tr > th,
table.ls-answers .ls-heading th {
    color: #000000 !important; font-weight: 700 !important; font-size: 1rem; text-align: center;
    vertical-align: bottom; padding: .5rem .4rem .65rem; border-bottom: 1px solid var(--bayt-line) !important;
}
table.ls-answers > tbody > tr > td,
table.ls-answers > tbody > tr > th { padding: .8rem .4rem; vertical-align: middle; border-bottom: 0 !important; }
table.ls-answers .answertext, table.ls-answers th.answertext { text-align: left; font-weight: 500; color: var(--bayt-text); font-size: .85rem; }

/* array radio cells: clean hollow ring → solid blue when checked */
td.answer-item.radio-item { text-align: center; }
td.answer-item.radio-item input:checked + label::before { border-color: var(--bayt-brand) !important; }
td.answer-item.radio-item input:checked + label::after  { background-color: var(--bayt-brand) !important; }
body .answer-item.radio-item label::after { background-color: var(--bayt-brand); }

/* =========================================================================
   RANKING → flat outlined draggable rows
   ========================================================================= */
.sortable-list.list-group .list-group-item, li.ls-choice.list-group-item {
    border: 1px solid var(--bayt-field-line); border-radius: 12px; margin-bottom: .55rem;
    padding: .75rem 1rem; background: #fff; cursor: grab; box-shadow: none;
}
.sortable-list.list-group .list-group-item:hover, li.ls-choice.list-group-item:hover { border-color: #c4ccda; }
.ranking-sorted-items .sortable-rank .list-group-item { border-left: 3px solid var(--bayt-brand); }
.sortable-subtitle { color: var(--bayt-muted); font-weight: 600; }

/* =========================================================================
   Buttons / navigator
   ========================================================================= */
.btn { border-radius: 10px; font-weight: 600; --bs-btn-focus-shadow-rgb: 0, 112, 235; }
.btn-lg { padding: .7rem 1.6rem; font-size: 1rem; }
/* No purple glow/outline ever: nothing on hover/active/mouse-focus, a brand-blue
   ring only on keyboard focus. */
.btn:hover, .btn:active, .btn:active:focus,
.btn:focus:not(:focus-visible) {
    box-shadow: none !important;
    outline: none !important;
}
.btn:focus-visible {
    box-shadow: var(--bayt-ring) !important;
    outline: none !important;
}
.btn-primary {
    background-color: var(--bayt-brand) !important; border-color: var(--bayt-brand) !important; color: #fff !important; box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--bayt-brand-600) !important; border-color: var(--bayt-brand-600) !important; color: #fff !important; }
.btn-primary:active { background-color: var(--bayt-brand-700) !important; border-color: var(--bayt-brand-700) !important; }
.btn-primary:focus-visible { box-shadow: var(--bayt-ring); }
.btn-outline-secondary {
    color: var(--bayt-text) !important; border-color: var(--bayt-field-line) !important; background: #fff !important;
}
.btn-outline-secondary:hover { background: #f3f5f9 !important; border-color: #c4ccda !important; color: var(--bayt-text) !important; }
.btn-link { color: var(--bayt-brand) !important; }
.btn-link:hover { color: var(--bayt-brand-600) !important; }
.navigator.space-col { margin-top: 1.75rem; row-gap: .75rem; padding-top: 1.25rem; border-top: 0; }
.text-primary { color: var(--bayt-brand) !important; }
.bg-primary { background-color: var(--bayt-brand) !important; }

/* =========================================================================
   Welcome / completed / footer (flat)
   ========================================================================= */

/* Center the welcome-page content column.
   theme_bayt.css sets #welcome-container { max-width:750px } with no
   margin:auto, leaving it start-aligned inside the wider sheet column
   (LTR → extra right gap; RTL → extra left gap).
   Make it full-width so the dff-welcome HTML can control its own width,
   and zero the Bootstrap row gutter on the outer .row so the sheet
   itself is not offset by the default ±0.75 rem bleed. */
#outerframeContainer > .row {
    --bs-gutter-x: 0;
    margin-left:  0 !important;
    margin-right: 0 !important;
}
#welcome-container {
    max-width:    100% !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    padding:      0 !important;
}

/* The welcome/description logo overflows phones because it is authored in survey
   content with an INLINE style attribute, and inline styles outrank any
   stylesheet rule that is not !important. Three variants exist across the
   languages and the two text fields:
       max-width:420px; width:100%; height:auto   — survives, width:100% caps it
       max-width:420px; height:auto               — 420px wide whatever the
                                                    container, so it overflows
                                                    any viewport under ~420px
       width:500px; height:139px                  — a hard 500px, worse
   Hence !important here, and width:auto to neutralise the fixed 500px: with
   max-width the image then scales to the column. height:auto keeps the aspect
   ratio once width is clamped — without it the 139px height would stay fixed
   and the logo would stretch.

   The cap is min(100%, 360px), not a bare 100%: overriding the inline rule with
   100% alone also removes the authored 420px ceiling, so on a desktop the logo
   grew to the full width of the welcome column. The min() keeps both ends
   right — it yields the column width on a phone (narrower than 360px, so the
   logo still shrinks to fit) and a fixed 360px from there up.

   Fixing this in the content instead would mean re-importing the survey, which
   would cost the responses already collected.

   Scoped to the welcome/description blocks, so the navbar brand (sized by
   #survey-nav .logo, also !important) and in-question images are untouched. */
#welcome-container img,
.survey-description img,
.survey-welcome img,
.dff-logo img,
.dff-welcome img,
.dff-survey img {
    max-width: min(100%, 360px) !important;
    width:     auto !important;
    height:    auto !important;
}
/* Without this the logo goes edge-to-edge on a phone, since the welcome column
   is padding-free. Padding on the wrapper (not a max-width on the image) keeps
   it centred and lets it stay as large as the space allows. */
@media (max-width: 575.98px) {
    .dff-logo { padding-left: 1.25rem; padding-right: 1.25rem; }
}

.welcome-container, .privacy { color: var(--bayt-text); }
.completed-wrapper { background: transparent; border: 0; box-shadow: none; padding: 2.5rem 0; text-align: center; }
.completed-heading { font-size: 1.7rem; font-weight: 700; color: var(--bayt-title); margin-bottom: .5rem; position: relative; display: inline-block; padding-bottom: .5rem; }
.completed-heading::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 52px; height: 3px; border-radius: 999px; background: var(--bayt-accent); }
.completed-Content { color: var(--bayt-muted); font-size: 1.05rem; }
footer, .footer-bar, #footer { color: var(--bayt-muted); font-size: .85rem; }

/* =========================================================================
   Auxiliary screens (load / save / register / error / print / clearall) —
   their panels, fields and labels live OUTSIDE .answer-container, so style the
   generic Bootstrap components too, to match the bayt look everywhere.
   ========================================================================= */
.form-control:not(textarea):not([type="checkbox"]):not([type="radio"]) {
    border: 1.5px solid var(--bayt-field-line);
    border-radius: 10px;
    min-height: 46px;
    padding: .6rem .9rem;
    background: #fff;
    color: var(--bayt-text);
    box-shadow: none;
}
.form-control:focus {
    border-color: var(--bayt-brand) !important;
    box-shadow: var(--bayt-ring) !important;
    outline: none;
}
.form-control::placeholder { color: var(--bayt-muted); }

/* panels / cards (load-save, register, error, assessments) → clean sheet */
.panel, .card {
    background: var(--bayt-sheet);
    border: 1px solid var(--bayt-line);
    border-radius: 16px;
    box-shadow: none;
}
.panel-heading, .card-header {
    background: #fff !important;
    color: var(--bayt-title) !important;
    border-bottom: 1px solid var(--bayt-line) !important;
    font-weight: 700;
    border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.panel-title, .card-title { color: var(--bayt-title); font-weight: 700; }
.panel-body, .card-body { color: var(--bayt-text); }
.form-label, label.control-label, .control-label { color: var(--bayt-text); font-weight: 600; }

/* alerts → soft rounded; keep success/danger semantics, brand-tint the info one */
.alert { border-radius: 12px; }
.alert-info { background: #eef5ff !important; border-color: #cfe2ff !important; color: #0a4c9b !important; }

/* assessment / well boxes */
.well { background: #f7f9fc; border: 1px solid var(--bayt-line); border-radius: 12px; box-shadow: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 575.98px) {
    .question-container .question-text, .question-container .ls-label-question { font-size: 1.15rem; }
    .question-container { padding: 1.5rem 0; }
    .btn-lg { padding: .7rem 1rem; }
    #survey-nav.navbar { min-height: 92px; padding: .65rem 0; }
    #survey-nav .navbar-brand.logo-container { width: auto; height: auto; }
    #survey-nav .navbar-brand .logo { height: 72px !important; max-width: 94vw !important; }
    .navigator.space-col .col-6 { flex: 0 0 auto; width: 50%; }
    .navigator.space-col .btn { width: 100%; }
}

/* =========================================================================
   RTL (Arabic, <html dir="rtl">) — flip the custom option rows.
   Lives in modern.css (which always loads) with !important so it overrides
   both this file's LTR base rules and the inherited theme_bayt-rtl.css.
   The marker (radio/checkbox circle) moves to the right edge and the label
   gains right padding so the text clears the circle instead of hugging it.
   ========================================================================= */
[dir="rtl"] ul.ls-answers,
[dir="rtl"] ul.answers-list { padding-right: 0 !important; padding-left: 0 !important; }

[dir="rtl"] li.answer-item.radio-item label.control-label,
[dir="rtl"] li.answer-item.checkbox-item label.control-label,
[dir="rtl"] li.answer-item.radio-item label.radio-label,
[dir="rtl"] li.answer-item.checkbox-item label.checkbox-label {
    padding-right: 3.25rem !important;
    padding-left: 1rem !important;
    text-align: right;
}
[dir="rtl"] li.answer-item.radio-item label::before,
[dir="rtl"] li.answer-item.checkbox-item label::before { left: auto !important; right: 1rem !important; }
[dir="rtl"] li.answer-item.radio-item label::after  { left: auto !important; right: calc(1rem + 5px) !important; }
[dir="rtl"] li.answer-item.checkbox-item label::after { left: auto !important; right: calc(1rem + 7px) !important; }

/* Yes/No & gender rows */
[dir="rtl"] .yesno-button.btn-group > .btn,
[dir="rtl"] .gender-button.btn-group > .btn,
[dir="rtl"] .yesno-button .btn-check + .btn,
[dir="rtl"] .gender-button .btn-check + .btn {
    text-align: right !important;
    padding-right: 3.25rem !important;
    padding-left: 1rem !important;
}
[dir="rtl"] .yesno-button .btn-check + .btn::before,
[dir="rtl"] .gender-button .btn-check + .btn::before { left: auto !important; right: 1rem !important; }
[dir="rtl"] .yesno-button .btn-check + .btn::after,
[dir="rtl"] .gender-button .btn-check + .btn::after { left: auto !important; right: calc(1rem + 5px) !important; }

/* matrix row label + ranking accent */
[dir="rtl"] table.ls-answers .answertext,
[dir="rtl"] table.ls-answers th.answertext { text-align: right !important; }
[dir="rtl"] .ranking-sorted-items .sortable-rank .list-group-item {
    border-left: 0 !important;
    border-right: 3px solid var(--bayt-brand) !important;
}

/* =========================================================================
   MOBILE ARRAY RADIO — minimum tap-target height  (no-tables-mobile ≤767px)
   Interaction is handled entirely in bayt.js (touchend delegation on td).
   ========================================================================= */
@media (max-width: 767px) {
    .no-tables-mobile .ls-answers td.radio-item {
        min-height: 44px !important;
        cursor: pointer !important;
    }
}

/* =========================================================================
   MOBILE ARRAY HIDDEN ROWS — keep relevance-hidden subquestion rows
   invisible in the no-tables-mobile stacked layout (≤767px).

   Root cause: theme_bayt.css forces
     .no-tables-mobile table.ls-answers tr { display: block }
   with specificity (0,0,2,2), which beats the relevance engine's
     .js .ls-hidden { display: none }
   at (0,0,2,0) because of the two extra element selectors (table, tr).
   Result: rows hidden by LimeSurvey's conditional logic reappear on mobile.

   Fix: a scoped rule with higher specificity + !important re-asserts the
   hidden state for tr elements that carry the ls-hidden / ls-irrelevant
   classes added by ExpressionManager.
   ========================================================================= */
@media (max-width: 767px) {
    .js .no-tables-mobile table.ls-answers tr.ls-hidden,
    .js .no-tables-mobile table.ls-answers tr.ls-irrelevant {
        display: none !important;
    }
}

/* =========================================================================
   MOBILE RTL ARRAYS — keep stacked array content right-aligned (≤767px)

   In the no-tables-mobile stacked layout the parent theme_bayt-rtl.css
   right-aligns array cells, but two rules in THIS file are NOT scoped to a
   media query and therefore leak into mobile, pulling Arabic array content
   toward the left/centre:
     - .answertext               { text-align: left }   (LTR base, ~line 482)
     - td.answer-item.radio-item { text-align: center } (~line 485)
   That is what shifts the Q3/Q4 subquestion labels and answer choices off
   the right edge on phones. Re-assert right alignment for RTL on mobile.
   Scoped to [dir="rtl"] + ≤767px + array tables, so LTR and desktop layouts
   are untouched.
   ========================================================================= */
@media (max-width: 767px) {
    [dir="rtl"] .no-tables-mobile table.ls-answers .answertext,
    [dir="rtl"] .no-tables-mobile table.ls-answers th.answertext,
    [dir="rtl"] .no-tables-mobile table.ls-answers tbody td,
    [dir="rtl"] .no-tables-mobile table.ls-answers td.answer-item.radio-item,
    [dir="rtl"] .no-tables-mobile table.ls-answers td.answer-item.checkbox-item,
    [dir="rtl"] .no-tables-mobile table.ls-answers .ls-label-xs-visibility {
        text-align: right !important;
    }
}