/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* =========================================================
   Split-question layout
   – Renders each question's two ";" separated sentences as
     two clearly labelled subquestions, each with its own
     set of answer options (A1/A2/A3 and B1/B2/B3).
   ========================================================= */

.split-question-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
}

.split-subquestion {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Text card – holds the subquestion label, acts as toggle trigger */
.split-subquestion-text-card {
    background: #f8f9fa;
    border-left: 4px solid #6c757d;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.split-subquestion-text-card:hover {
    background: #e9ecef;
}

.split-subquestion-text-card:active {
    transform: scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.split-subquestion-text-card.split-open {
    background: #e9ecef;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
}

.split-subquestion-a .split-subquestion-text-card {
    border-left-color: #0d6efd;
}

.split-subquestion-a .split-subquestion-text-card.split-open {
    background: #e7f0ff;
}

.split-subquestion-b .split-subquestion-text-card {
    border-left-color: #198754;
}

.split-subquestion-b .split-subquestion-text-card.split-open {
    background: #e8f5ee;
}

/* Answers card – hidden by default, revealed on click */
.split-subquestion-answers-card {
    display: none;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem 1.25rem;
}

.split-subquestion-text {
    font-weight: 600;
    margin-bottom: 0;
    color: #212529;
    font-size: 1rem;
    line-height: 1.5;
    /* cursor:pointer is inherited from .split-subquestion-text-card — Chrome Translate
       skips elements with cursor:pointer. Override it here so the text is translated. */
    cursor: default;
}

/* Button-style answer items */
.split-answers {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.split-answers input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.split-answers .answer-item {
    flex: 1;
    margin: 0;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    background: #ffffff;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    text-align: center;
    box-sizing: border-box;
}

.split-answers .answer-item:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.split-answers .answer-item.split-btn-selected {
    border-color: #0d6efd;
    background: #e7f0ff;
    color: #0d6efd;
    font-weight: 600;
}

.split-answers .radio-label {
    margin: 0;
    cursor: pointer;
    display: block;
    font-weight: inherit;
    color: inherit;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove the radio circle pseudo-elements rendered by awesome-bootstrap-checkbox / template-core */
.split-answers .radio-item label::before,
.split-answers .radio-item label::after,
.split-answers label::before,
.split-answers label::after,
.dir-ltr .split-answers .radio-item label::before,
.dir-ltr .split-answers .radio-item label::after,
.dir-rtl .split-answers .radio-item label::before,
.dir-rtl .split-answers .radio-item label::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   Question counter  –  "X / 125" next to the progress bar
   ========================================================= */

.pm-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pm-progress-wrapper .ls-progress-container {
    flex: 1;
    margin: 0;
}

.pm-question-counter {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    line-height: 1;
}

.pm-counter-answered {
    color: #0d6efd;
}

.pm-counter-sep {
    margin: 0 0.2em;
    color: #adb5bd;
}

.pm-counter-total {
    color: #6c757d;
}

/* =========================================================
   Mobile responsiveness – iPhone 15 / 16
   Portrait  : ≤ 575px  (~390 px logical width)
   Landscape : 576–900px wide AND ≤ 500px tall (~390 px logical height)
   ========================================================= */

/* ---------- Portrait (≤ 575px) ---------- */
@media (max-width: 575.98px) {

    /* Stack A and B subquestions vertically instead of side-by-side */
    .split-question-wrapper {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Tighter card padding */
    .split-subquestion-text-card {
        padding: 0.75rem 0.9rem;
    }

    .split-subquestion-answers-card {
        padding: 0.65rem 0.9rem;
    }

    /* Slightly smaller subquestion text */
    .split-subquestion-text {
        font-size: 0.92rem;
    }

    /* Answer buttons: ensure 44 px min tap target (Apple HIG) */
    .split-answers {
        gap: 0.4rem;
    }

    .split-answers .answer-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.4rem;
        font-size: 0.82rem;
    }

    /* Progress counter: keep it legible but compact */
    .pm-question-counter {
        font-size: 0.75rem;
    }

    /* Prevent the counter from shrinking the progress bar too much */
    .pm-progress-wrapper {
        gap: 0.5rem;
    }
}

/* ---------- Landscape iPhone (576 – 900px wide, ≤ 500px tall) ---------- */
@media (min-width: 576px) and (max-width: 900px) and (max-height: 500px) {

    /* Keep side-by-side but reduce gap and card padding */
    .split-question-wrapper {
        gap: 0.75rem;
    }

    .split-subquestion-text-card {
        padding: 0.6rem 0.85rem;
    }

    .split-subquestion-answers-card {
        padding: 0.55rem 0.85rem;
    }

    .split-subquestion-text {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    /* Compact answer buttons – still 40px for comfortable tapping */
    .split-answers {
        gap: 0.35rem;
    }

    .split-answers .answer-item {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.35rem;
        font-size: 0.8rem;
    }
}

/* ---------- Safe-area insets (notch / Dynamic Island / home bar) ---------- */
@supports (padding: max(0px)) {
    .ls-content,
    .container-fluid {
        padding-left:  max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    /* Bottom nav buttons: keep above home-bar swipe indicator */
    .ls-nav-bottom,
    .navigator,
    #ls-button-submit {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        margin-bottom:  max(0rem,   env(safe-area-inset-bottom));
    }
}

/* =========================================================
   Terms & Conditions – welcome screen
   ========================================================= */

.pm-tc-section {
    margin: 1.5rem 0 1rem;
}

.pm-tc-scroll {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #343a40;
    scroll-behavior: smooth;
}

.pm-tc-scroll:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.pm-tc-title {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #212529;
}

.pm-tc-body p {
    margin-bottom: 0.65rem;
}

.pm-tc-body p:last-child {
    margin-bottom: 0;
}

.pm-tc-agree-row {
    margin-top: 0.9rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
}

.pm-tc-agree-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: #212529;
    margin: 0;
    user-select: none;
}

.pm-tc-checkbox {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    accent-color: #0d6efd;
}

/* Next/Begin button disabled state until T&C agreed */
.pm-tc-next-disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

@media (max-width: 575.98px) {
    .pm-tc-scroll {
        max-height: 200px;
        padding: 0.75rem 0.9rem;
        font-size: 0.85rem;
    }
    .pm-tc-agree-label {
        font-size: 0.88rem;
    }
}

/* Reset the ls-label-xs-visibility mini-box that clips the circle */
.split-answers .ls-label-xs-visibility,
.split-answers .radio-item .ls-label-xs-visibility,
.dir-ltr .split-answers .radio-item .ls-label-xs-visibility,
.dir-rtl .split-answers .radio-item .ls-label-xs-visibility {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    line-height: inherit !important;
}

/* Hide validation tip text */
.em_default, .ls-em-tip, [id^="vmsg_"] {
    visibility: hidden !important;
    font-size: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}