/* =========================================================================
   Bayt.com survey theme — "DFF x Bayt" design system
   -------------------------------------------------------------------------
   Loaded LAST (after Fruity TwentyThree + the theme_bayt.css variation). Pure
   CSS override, no core edits.

   Visual language (from the approved mockups, Oct 2026):
     - soft grey page, ONE white rounded sheet (24px radius, soft shadow)
     - Inter (latin) / IBM Plex Sans Arabic (arabic), bundled in files/fonts
     - brand blue #0070eb on a light blue tint (#e9f1fd) for panels/icons
     - outlined rounded option rows, bordered rounded inputs, pill buttons
     - welcome page: 4 info tiles, "guided phone call" panel, two-column
       intro ("Before you begin" | "Who should complete this survey?")
   The welcome-page markup lives in the survey's own description / welcome
   text (classes .dff-*); this file only styles it.
   ========================================================================= */

/* ---- Fonts (self-hosted, see files/fonts) ------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../files/fonts/Inter-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../files/fonts/Inter-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../files/fonts/Inter-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../files/fonts/Inter-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../files/fonts/Inter-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../files/fonts/Inter-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../files/fonts/Inter-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../files/fonts/Inter-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../files/fonts/IBMPlexSansArabic-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* brand */
    --bayt-brand:      #0070eb;
    --bayt-brand-rgb:  0, 112, 235;
    --bayt-brand-600:  #005bc4;
    --bayt-brand-700:  #00419e;
    --bayt-accent:     #ffd42a;
    --bayt-tint:       #e9f1fd;   /* light blue panel / icon circle */
    --bayt-tint-2:     #d5e4fb;   /* stronger tint (icon circle on panel) */

    /* neutrals */
    --bayt-page:       #f3f5f9;
    --bayt-sheet:      #ffffff;
    --bayt-text:       #2a3240;
    --bayt-title:      #0f1623;
    --bayt-muted:      #5b6677;
    --bayt-placeholder:#8a93a3;
    --bayt-line:       #e3e8f0;   /* hairlines, card borders */
    --bayt-field-line: #cfd8e6;   /* input / option borders */
    --bayt-option-bg-selected: #f0f6ff;

    --bayt-ring: 0 0 0 3px rgba(var(--bayt-brand-rgb), .18);
    --bayt-radius-sheet: 24px;
    --bayt-radius-card: 16px;
    --bayt-radius-ctl: 12px;
    --bayt-shadow-sheet: 0 10px 30px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);

    --bayt-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bayt-font-ar: "IBM Plex Sans Arabic", "Inter", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;

    /* Width of the white sheet. The progress bar and the navbar content are
       pinned to the same number so the three line up. */
    --bayt-sheet-max: 1160px;
    --bayt-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l3 3 5-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bayt-sheet-pad: 2.1rem;
}

/* =========================================================================
   Base
   ========================================================================= */
html { font-size: 16px; }
body, html, *, .btn, input, button, select, textarea { font-family: var(--bayt-font) !important; }
html[lang^="ar"], html[lang^="ar"] body, html[lang^="ar"] *,
html[lang^="ar"] .btn, html[lang^="ar"] input, html[lang^="ar"] button, html[lang^="ar"] select, html[lang^="ar"] textarea {
    font-family: var(--bayt-font-ar) !important;
}
/* icon fonts must keep their own family */
[class^="ri-"], [class*=" ri-"], html[lang^="ar"] [class^="ri-"], html[lang^="ar"] [class*=" ri-"] { font-family: "remixicon" !important; }
.fa, .fas, .far, .fab, html[lang^="ar"] .fa, html[lang^="ar"] .fas, html[lang^="ar"] .far { font-family: "FontAwesome" !important; }

body {
    background-color: var(--bayt-page) !important;
    color: var(--bayt-text);
    font-size: 1rem;
    line-height: 1.55;
    -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; }
strong, b { font-weight: 700; }

/* =========================================================================
   Header / navbar: logo lockup at the start, language pill at the end,
   both aligned to the sheet's edges.
   ========================================================================= */
#survey-nav.navbar {
    background-color: #fff;
    border-bottom: 1px solid var(--bayt-line);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    min-height: 88px;
    padding: .75rem 0;
}
#survey-nav .container-fluid {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    max-width: var(--bayt-sheet-max);
    margin: 0 auto;
    padding: 0 var(--bayt-sheet-pad);
}
#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;
}
#survey-nav .navbar-brand .logo {
    display: block;
    height: 48px !important;
    width: auto !important;
    max-width: min(56vw, 560px) !important;
    object-fit: contain;
}
#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;
}

/* ---- Language pill (nav_bar.twig). Sits at the end edge; the option order
   mirrors under RTL which is wanted. ------------------------------------- */
.bayt-lang-switch {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid #e6ebf3;
    border-radius: 999px;
    background: #f1f4f9;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
    flex: 0 0 auto;
}
.bayt-lang-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    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 3px 10px rgba(var(--bayt-brand-rgb), .35);
}
@media (max-width: 575.98px) {
    #survey-nav.navbar { min-height: 68px; padding: .6rem 0; }
    #survey-nav .container-fluid { padding: 0 1rem; }
    #survey-nav .navbar-brand .logo { height: 30px !important; max-width: 58vw !important; }
    .bayt-lang-switch { padding: 3px; }
    .bayt-lang-option { min-height: 32px; padding: .3rem .8rem; font-size: .85rem; }
}

/* =========================================================================
   Survey version switcher (group_container.twig) — unchanged behaviour
   ========================================================================= */
.bayt-flow-switch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: .75rem;
    position: sticky;
    top: calc(var(--bayt-nav-h, 88px) + .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;
    white-space: nowrap;
    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 { 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; }
}
@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;
        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 (authored in question HTML as
   <div class="bayt-hint-note" role="note">…</div>, moved by bayt.js)
   ========================================================================= */
.bayt-hint-note { display: none; }
@media (max-width: 575.98px) {
    .bayt-hint-note {
        display: block;
        position: sticky;
        top: calc(var(--bayt-nav-h, 68px) + .5rem);
        z-index: 14;
        width: auto;
        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;
        box-shadow: 0 2px 8px rgba(16, 24, 40, .16);
    }
}

/* =========================================================================
   Progress bar (progress_bar.twig): slim track + permanent readout
   ========================================================================= */
.top-container { margin-top: 1rem; margin-bottom: .25rem; }
.ls-progress-container .progress {
    height: 6px; border-radius: 999px; background-color: #e3e7ee; overflow: hidden;
}
.ls-progress-container .progress-bar { background-color: var(--bayt-brand) !important; border-radius: 999px; }
.top-container .top-content {
    width: 100%;
    max-width: var(--bayt-sheet-max);
    margin: 0 auto;
    padding-left: var(--bayt-sheet-pad);
    padding-right: var(--bayt-sheet-pad);
}
.bayt-progress { display: flex; align-items: center; gap: 1.25rem; }
.bayt-progress .bayt-progress-track { flex: 1 1 auto; min-width: 8rem; }
.bayt-progress-label {
    flex: 0 0 auto;
    text-align: end;
    line-height: 1.25;
    font-size: .9375rem;
    color: var(--bayt-muted);
    min-width: 7.5rem;
}
.bayt-progress-percent { display: block; font-weight: 600; }
.bayt-progress-label-pending { flex: 0 1 auto; color: var(--bayt-muted); }
.bayt-progress-label-pending .bayt-progress-percent { font-weight: 400; }
@media (max-width: 575.98px) {
    .top-container { margin-top: .75rem; }
    .top-container .top-content { padding-left: 1rem; padding-right: 1rem; }
    .bayt-progress { gap: .75rem; }
    .bayt-progress-label { min-width: 0; font-size: .8125rem; }
}

/* =========================================================================
   The white sheet
   ========================================================================= */
#outerframeContainer.outerframe { padding-top: .75rem; padding-bottom: 3rem; }
#outerframeContainer > .row { --bs-gutter-x: 0; margin-left: 0 !important; margin-right: 0 !important; }
#outerframeContainer .col-xl-8 {
    counter-reset: bayt-q;
    background: var(--bayt-sheet);
    border-radius: var(--bayt-radius-sheet);
    box-shadow: var(--bayt-shadow-sheet);
    padding: var(--bayt-sheet-pad) var(--bayt-sheet-pad) 1.75rem;
    float: none;
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--bayt-sheet-max);
    margin: 0 auto;
}
@media (max-width: 575.98px) {
    #outerframeContainer.outerframe { padding-top: .5rem; padding-bottom: 2rem; }
    #outerframeContainer .col-xl-8 { padding: 1.1rem 1rem 1.25rem; border-radius: 18px; margin: 0 .6rem; width: calc(100% - 1.2rem); }
}

.space-col { margin-top: 0 !important; }
.group-container .group-description { margin: 0 !important; padding: 0 !important; }

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

/* =========================================================================
   Questions — flat, hairline dividers, bold title
   ========================================================================= */
.question-container {
    --bs-gutter-x: 0;
    display: block;
    margin: 0;
    padding: 1.6rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.question-container + .question-container { border-top: 1px solid var(--bayt-line); }
.question-container > .question-container.bayt-hint-absorbed { border-top: 1px solid var(--bayt-line); }
.question-container.boilerplate { padding-top: 1.25rem !important; padding-bottom: .75rem; }
.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; }

.question-container .question-text,
.question-container .ls-label-question {
    color: var(--bayt-title);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}
.question-container .question-title-container { margin-bottom: 1rem; }
.question-container .ls-label-question { margin-bottom: 0; }
.question-container.boilerplate .question-text > hr:last-child,
.question-container.text-display .question-text > hr:last-child { display: none !important; }
.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.6;
}
/* Rich text authored inside questions (intro blocks, tables, headings) */
.question-text h3, .question-text h2, .dff-h3 {
    font-size: 1.25rem; font-weight: 700; color: var(--bayt-title); line-height: 1.3; margin: 1.25rem 0 .35rem;
}
.question-text p { margin: 0 0 .6rem; }
.dff-h3--first, .question-text .dff-h3--first { margin-top: 0; }
.dff-guide p { line-height: 1.55; }
.dff-worked-example-video { margin: .75rem 0 0; }
.dff-worked-example-video video { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; border-radius: var(--bayt-radius-card); background: #000; }
.question-text table:not(.ls-answers) {
    width: 100%; border-collapse: separate; border-spacing: 0; margin: .5rem 0 1rem;
    border: 1px solid var(--bayt-line); border-radius: var(--bayt-radius-ctl); overflow: hidden;
    font-size: .9375rem;
}
.question-text table:not(.ls-answers) th,
.question-text table:not(.ls-answers) td {
    border: 0 !important; border-bottom: 1px solid var(--bayt-line) !important;
    padding: .7rem .9rem !important; text-align: start !important; vertical-align: top; font-size: .9375rem !important;
}
.question-text table:not(.ls-answers) th { background: #f6f8fb; font-weight: 700; color: var(--bayt-title); }
.question-text table:not(.ls-answers) tr:last-child td { border-bottom: 0 !important; }
.question-text hr { border: 0 !important; border-top: 1px solid var(--bayt-line) !important; margin: 1.25rem 0 !important; opacity: 1; }
.question-text video { border-radius: var(--bayt-radius-card); }
/* Highlight spans keep the colours authored in the survey text (yellow / green / cyan
   mark different time periods and seniority levels); only the shape is softened. */
.question-text span[style*="background-color"] {
    border-radius: 4px;
    padding: 0 .25em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Help text — hidden generic tips, keep real author notes */
.questionhelp, .ls-questionhelp, .question-container .hint,
.question-help-container { display: none !important; }
.ls-em-tip.em_default { display: none !important; }
.asterisk, .ls-asterisk, i.asterisk { color: #e2496a; font-size: .7em; vertical-align: super; }
.question-valid-container { margin: 0 !important; padding: 0 !important; }
.question-valid-container:has(*) { margin: .6rem 0 0 !important; color: #e2496a; font-size: .9rem; }
/* Error and mandatory messages are plain text: the core templates put an icon span
   in front of each (fa + remixicon classes on one element), which shows as an empty
   box. "Please check at least one item." repeats "This question is mandatory" on
   multiple-choice questions, so only the latter is shown. */
.ls-question-mandatory > .fa,
.ls-question-mandatory > [class*="ri-"],
.ls-question-message > .fa,
.ls-question-message > [class*="ri-"] { display: none !important; }
.ls-question-mandatory-multiplechoice { display: none !important; }
.question-help-container { margin: 0 !important; }
.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: .9rem; line-height: 1.55; font-style: italic;
}
.answer-container { margin-top: 0; }
.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; }

/* =========================================================================
   Inputs
   ========================================================================= */
.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: 1px solid var(--bayt-field-line) !important;
    border-radius: var(--bayt-radius-ctl) !important;
    background: #fff !important;
    padding: .65rem 1rem !important;
    min-height: 48px !important;
    font-size: 1rem;
    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-placeholder); }
.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: #a9b5c8 !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;
}
table.ls-answers input.form-control { max-width: 100% !important; min-height: 44px !important; }

textarea.form-control {
    border: 1px solid var(--bayt-field-line);
    border-radius: var(--bayt-radius-ctl);
    background: #fff;
    padding: .75rem 1rem;
    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; }
.form-select {
    min-height: 48px;
    border: 1px solid var(--bayt-field-line);
    border-radius: var(--bayt-radius-ctl);
    padding: .55rem 1rem;
    background-color: #fff;
    color: var(--bayt-text);
}
.form-select:focus { border-color: var(--bayt-brand); box-shadow: var(--bayt-ring); outline: none; }
.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 → outlined rounded rows, solid blue radio / tick
   ========================================================================= */
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: var(--bayt-radius-ctl);
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
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: .85rem 1rem .85rem 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: #a9b5c8; }
li.answer-item.radio-item:has(input:checked),
li.answer-item.checkbox-item:has(input:checked) {
    border-color: var(--bayt-brand);
    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); }
li.answer-item.radio-item label::before,
li.answer-item.checkbox-item label::before {
    content: ""; position: absolute; left: 1rem; top: 50%;
    width: 22px; height: 22px; margin: -11px 0 0 0;
    border: 2px solid #b9c3d3; 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 + 6px); 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); }
.answer-item.checkbox-item label::after,
.answer-item.checkbox-item input[type="checkbox"]:checked + label::after,
.answer-item.checkbox-item input[type="checkbox"]:indeterminate + label::after,
.answer-item.checkbox-item input[type="checkbox"]:focus + label::after {
    content: none !important; display: none !important;
}
li.answer-item.checkbox-item label::before { background-position: center; background-repeat: no-repeat; background-size: 0; transition: border-color .15s ease, background-color .15s ease, background-size .15s ease; }
li.answer-item.checkbox-item input[type="checkbox"]:checked + label::before {
    background-color: var(--bayt-brand) !important;
    border-color: var(--bayt-brand) !important;
    background-image: var(--bayt-tick);
    background-size: 13px;
}
li.answer-item.checkbox-item input[type="checkbox"]:checked + label { color: var(--bayt-text); }

/* "Other" row (see scripts/bayt.js initOtherNumbersOnly) */
li.answer-item.radio-item.radio-text-item { display: block !important; margin-left: 0; margin-right: 0; }
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; }
li.answer-item.radio-item.radio-text-item.bayt-other-inline { display: flex !important; 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; 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; }
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; }
.ls-em-tip.em_other_numbers_only { display: none !important; }

/* Yes/No, gender → same rows */
.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: .85rem 1rem .85rem 3rem !important;
    background: #fff !important; border: 1px solid var(--bayt-field-line) !important;
    border-radius: var(--bayt-radius-ctl) !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: #a9b5c8 !important; }
.yesno-button .btn-check + .btn::before, .gender-button .btn-check + .btn::before {
    content: ""; position: absolute; left: 1rem; top: 50%; width: 22px; height: 22px; margin-top: -11px;
    border: 2px solid #b9c3d3; 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 + 6px); 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: var(--bayt-brand) !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 → clean table
   ========================================================================= */
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: var(--bayt-title) !important; font-weight: 600 !important; font-size: .9375rem; 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: .75rem .4rem; vertical-align: middle; border-bottom: 1px solid #eef1f6 !important; }
table.ls-answers > tbody > tr:last-child > td,
table.ls-answers > tbody > tr:last-child > th { 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: .9375rem; }
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); }
/* stacked (no-tables) layout: subquestion label reads as a small heading */
.no-tables-mobile table.ls-answers .answertext,
.no-tables-general table.ls-answers .answertext { font-weight: 600; color: var(--bayt-title); }

/* =========================================================================
   Ranking
   ========================================================================= */
.sortable-list.list-group .list-group-item, li.ls-choice.list-group-item {
    border: 1px solid var(--bayt-field-line); border-radius: var(--bayt-radius-ctl); 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: #a9b5c8; }
.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: var(--bayt-radius-ctl); font-weight: 600; --bs-btn-focus-shadow-rgb: 0, 112, 235; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1.0625rem; min-height: 52px; }
.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-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: #a9b5c8 !important; color: var(--bayt-text) !important; }
.btn-link { color: var(--bayt-brand) !important; }
.btn-link:hover { color: var(--bayt-brand-600) !important; }
.text-primary { color: var(--bayt-brand) !important; }
.bg-primary { background-color: var(--bayt-brand) !important; }

/* The navigator row: hairline above, Back at the start, Next/Submit at the end.
   The Next/Submit button carries a trailing arrow (bayt.js adds .bayt-btn-arrow). */
.navigator.space-col { margin-top: 1.25rem; row-gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--bayt-line); }
.navigator .btn-lg { padding-left: 1.5rem; padding-right: 1.5rem; }
.bayt-btn-arrow { display: inline-flex; align-items: center; gap: .75rem; }
.bayt-btn-arrow .ri-arrow-right-line, .bayt-btn-arrow .ri-arrow-left-line { font-size: 1.2em; line-height: 1; }
@media (max-width: 575.98px) {
    .navigator.space-col .col-6 { flex: 0 0 100%; width: 100%; }
    .navigator.space-col .btn { width: 100%; justify-content: center; }
    /* primary action first on phones */
    .navigator.space-col .col-6:has(button[value="movenext"]),
    .navigator.space-col .col-6:has(button[value="movesubmit"]) { order: -1; }
    .navigator.space-col .col-6:has(button[value="moveprev"]) .btn { background: #fff !important; }
}

/* =========================================================================
   WELCOME PAGE — components authored in the survey texts (.dff-*)
   ========================================================================= */
#welcome-container { max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; }
.welcome-container, .privacy { color: var(--bayt-text); }
.survey-description, .survey-welcome { font-size: 1.0625rem; line-height: 1.55; }
/* legacy in-card logo from older survey texts: never shown twice */
.dff-logo { display: none !important; }
#welcome-container img, .survey-description img, .survey-welcome img, .dff-survey img {
    max-width: min(100%, 360px) !important; width: auto !important; height: auto !important;
}

/* ---- Info tiles -------------------------------------------------------- */
.dff-meta-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 0 1.25rem;
    padding: 1.6rem 1.25rem;
    border: 1px solid var(--bayt-line);
    border-radius: var(--bayt-radius-card);
    background: #fcfdfe;
    list-style: none;
}
.dff-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    padding: 0 1.4rem;
    min-width: 0;
    border-inline-start: 1px solid var(--bayt-line);
}
.dff-tile:first-child { border-inline-start: 0; }
.dff-tile__icon, .dff-icon, .callback-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bayt-tint);
    color: var(--bayt-brand);
    font-size: 1.55rem;
    line-height: 1;
    flex: 0 0 auto;
}
.dff-tile__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dff-tile__body > strong, .dff-tile__title {
    display: block;
    font-size: 1.3125rem;
    font-weight: 700;
    color: var(--bayt-title);
    line-height: 1.25;
    letter-spacing: -.01em;
}
.dff-tile__body > span, .dff-tile__sub { display: block; font-size: 1rem; color: var(--bayt-muted); line-height: 1.35; }
.dff-meta-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.dff-tile__text { margin: 0; font-size: 1.0625rem; font-weight: 400; color: var(--bayt-text); line-height: 1.45; }
.dff-tile__text strong { font-size: 1.1875rem; font-weight: 700; color: var(--bayt-title); letter-spacing: -.01em; }
.dff-tile__text a { color: var(--bayt-brand); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.dff-tile__links { display: flex; align-items: center; gap: .6rem; }
.dff-tile__links a { color: var(--bayt-brand); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.dff-tile__links .dff-sep { color: #b4bccb; }

/* ---- Guided phone call panel (markup in the survey text + callback.js) -- */
.dff-callback, .callback-box {
    margin: 0 0 1.5rem;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: var(--bayt-radius-card);
    background: var(--bayt-tint);
}
.callback-widget__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.15fr);
    align-items: center;
    gap: 0 1.5rem;
}
.callback-widget__head::before { content: none; }
.callback-widget__divider { width: 1px; align-self: stretch; background: #c9d8ef; }
.callback-widget__intro { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.callback-widget__intro .callback-widget__icon { width: 64px; height: 64px; background: var(--bayt-tint-2); font-size: 1.7rem; }
.callback-widget__intro > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.callback-widget__intro strong { font-size: 1.3125rem; font-weight: 700; color: var(--bayt-title); line-height: 1.25; letter-spacing: -.01em; }
.callback-widget__intro span { font-size: 1rem; color: var(--bayt-muted); line-height: 1.35; }

/* ---- "Welcome" + two columns ------------------------------------------- */
.dff-h2 { font-size: 1.875rem; font-weight: 700; color: var(--bayt-title); line-height: 1.2; letter-spacing: -.015em; margin: .25rem 0 .75rem; }
.dff-welcome p { margin: 0 0 .85rem; font-size: 1.0625rem; line-height: 1.5; color: var(--bayt-text); }
.dff-welcome p:last-child { margin-bottom: 0; }
.dff-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 0 2rem;
    margin-top: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bayt-line);
}
.dff-columns__divider { width: 1px; background: var(--bayt-line); align-self: stretch; }
.dff-col { min-width: 0; }
.dff-col .dff-h3, .dff-h3 { font-size: 1.625rem; font-weight: 700; color: var(--bayt-title); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .9rem; }
.dff-col p { margin: 0 0 .5rem; font-size: 1.0625rem; line-height: 1.45; }
.dff-icon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.dff-icon-list > li { display: flex; align-items: center; gap: 1rem; font-size: 1.0625rem; line-height: 1.45; }
.dff-icon-list > li > span:last-child { min-width: 0; }
.dff-u { color: var(--bayt-brand); text-decoration: underline; text-underline-offset: 3px; }
.dff-dot-list { list-style: none; margin: .25rem 0 0; padding: 0; }
.dff-dot-list > li {
    position: relative; padding-inline-start: 1.6rem; font-size: 1.0625rem; line-height: 1.6;
}
.dff-dot-list > li::before {
    content: ""; position: absolute; inset-inline-start: .45rem; top: .72em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--bayt-brand);
}
/* The welcome page has no questions, so the navigator's hairline would double
   the one the columns already draw. */
#welcome-container ~ .navigator.space-col,
.welcome-container ~ .navigator.space-col { border-top: 0; padding-top: .75rem; }

@media (max-width: 991.98px) {
    .dff-meta-tiles { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; padding: 1.25rem .75rem; }
    .dff-tile { padding: 0 1rem; }
    .dff-tile:nth-child(3) { border-inline-start: 0; }
    .dff-tile:nth-child(-n+2) { padding-bottom: 1.25rem; border-bottom: 1px solid var(--bayt-line); }
    .callback-widget__head { grid-template-columns: 1fr; gap: 1rem 0; }
    .callback-widget__divider { width: auto; height: 1px; }
    .dff-columns { grid-template-columns: 1fr; gap: 1.5rem 0; }
    .dff-columns__divider { display: none; }
}
@media (max-width: 575.98px) {
    .survey-description, .survey-welcome, .dff-welcome p, .dff-col p, .dff-icon-list > li, .dff-dot-list > li { font-size: 1rem; }
    .dff-meta-tiles { padding: .9rem .15rem; margin-bottom: 1rem; gap: .9rem 0; }
    .dff-tile { flex-direction: row; align-items: center; gap: .55rem; padding: 0 .45rem; }
    .dff-tile:nth-child(-n+2) { padding-bottom: .9rem; }
    .dff-tile__icon { width: 38px; height: 38px; font-size: 1.15rem; }
    .dff-tile__body > strong, .dff-tile__title { font-size: .9375rem; line-height: 1.2; }
    .dff-tile__body > span, .dff-tile__sub { font-size: .8125rem; }
    .dff-tile__text { font-size: .9rem; line-height: 1.35; }
    .dff-tile__text strong { font-size: .95rem; }
    .dff-tile__links { gap: .4rem; }
    .dff-callback, .callback-box { padding: 1.1rem 1rem 1.15rem; margin-bottom: 1.25rem; }
    .callback-widget__intro .callback-widget__icon { width: 54px; height: 54px; font-size: 1.45rem; }
    .callback-widget__intro strong { font-size: 1.125rem; }
    .callback-widget__intro span { font-size: .95rem; }
    .dff-h2 { font-size: 1.5rem; }
    .dff-col .dff-h3, .dff-h3 { font-size: 1.375rem; }
    .dff-icon, .dff-icon-list > li > .dff-icon { width: 46px; height: 46px; font-size: 1.35rem; }
    .dff-columns { margin-top: 1.25rem; padding-bottom: 1rem; }
}

/* =========================================================================
   Completed page
   ========================================================================= */
.completed-wrapper { background: transparent; border: 0; box-shadow: none; padding: 2rem 0; text-align: center; }
.completed-heading { font-size: 1.75rem; font-weight: 700; color: var(--bayt-title); margin-bottom: .5rem; }
.completed-Content { color: var(--bayt-text); font-size: 1.0625rem; }
.completed-Content img { max-width: min(100%, 360px) !important; height: auto !important; }
footer, .footer-bar, #footer { color: var(--bayt-muted); font-size: .85rem; }

/* =========================================================================
   Auxiliary screens (load / save / register / error / print / clearall)
   ========================================================================= */
.form-control:not(textarea):not([type="checkbox"]):not([type="radio"]) {
    border: 1px solid var(--bayt-field-line);
    border-radius: var(--bayt-radius-ctl);
    min-height: 48px;
    padding: .6rem 1rem;
    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-placeholder); }
.panel, .card { background: var(--bayt-sheet); border: 1px solid var(--bayt-line); border-radius: var(--bayt-radius-card); 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: var(--bayt-radius-card); border-top-right-radius: var(--bayt-radius-card);
}
.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; }
.alert { border-radius: var(--bayt-radius-ctl); }
.alert-info { background: var(--bayt-tint) !important; border-color: #cfe2ff !important; color: #0a4c9b !important; }
.well { background: #f7f9fc; border: 1px solid var(--bayt-line); border-radius: var(--bayt-radius-ctl); box-shadow: none; }

/* =========================================================================
   Responsive (questions)
   ========================================================================= */
@media (max-width: 575.98px) {
    .question-container .question-text, .question-container .ls-label-question { font-size: 1.0625rem; }
    .question-container { padding: 1.25rem 0; }
    .group-title, .group-container .group-title { font-size: 1.3125rem !important; }
}

/* =========================================================================
   RTL (Arabic)
   ========================================================================= */
[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 + 6px) !important; }
[dir="rtl"] li.answer-item.checkbox-item label::after { left: auto !important; right: calc(1rem + 8px) !important; }
[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 + 6px) !important; }
[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; }
[dir="rtl"] .bayt-btn-arrow .ri-arrow-right-line { transform: scaleX(-1); }
[dir="rtl"] .bayt-btn-arrow .ri-arrow-left-line { transform: scaleX(-1); }

/* Mobile arrays (no-tables-mobile ≤767px) — behaviour in bayt.js */
@media (max-width: 767px) {
    .no-tables-mobile .ls-answers td.radio-item { min-height: 44px !important; cursor: pointer !important; }
    .js .no-tables-mobile table.ls-answers tr.ls-hidden,
    .js .no-tables-mobile table.ls-answers tr.ls-irrelevant { display: none !important; }
    [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; }
}