/* =========================================================
   AIONION CAPITAL - SURVEY THEME
   Font: Poppins
   Brand: Blue + Pink
   ========================================================= */

/* =========================================================
   1. FONT + VARIABLES
   ========================================================= */

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

:root {
    --brand-blue: #0023ff;
    --brand-pink: #f3667c;

    --brand-gradient:
        linear-gradient(135deg, #0023ff 0%, #f3667c 100%);

    --bg-color: #f0f2f5;

    /* Text colours */
    --text-main: #111827;
    --text-body: #374151;
    --text-muted: #667085;

    --border-light: #e5e7eb;
}


/* =========================================================
   2. BODY
   ========================================================= */

html,
body {
    font-family: 'Poppins', sans-serif !important;
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-body) !important;

    margin: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;

    line-height: 1.6;
}


/* =========================================================
   3. REMOVE DEFAULT OUTER CONTAINERS
   ========================================================= */

.outerframe,
.container,
.jumbotron {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}


/* =========================================================
   4. MAIN SURVEY / GROUP CARD
   ========================================================= */

#surveylist,
.survey-container,
.group-container {
    background: #ffffff !important;

    max-width: 850px !important;
    width: 95% !important;

    margin: 40px auto !important;
    padding: 60px !important;

    border-radius: 20px !important;
    border-top: 5px solid var(--brand-blue) !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   5. HIDE DEFAULT TOP NAVIGATION
   ========================================================= */

.navbar,
.navbar-default,
.navbar-expand-lg,
#ls-row-header,
.survey-header-bar {
    display: none !important;
    visibility: hidden !important;

    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;
}

.survey-header-text,
.text-info-header,
a[href*="resume"] {
    display: none !important;
}


/* =========================================================
   6. CUSTOM LOGO
   ========================================================= */

.brand-logo-img {
    display: block !important;

    width: auto !important;
    height: 60px !important;
    max-width: 220px !important;

    object-fit: contain !important;
}

#survey-nav .logo-container {
    display: flex !important;
    align-items: center !important;

    padding: 8px 15px !important;
}

#survey-nav .brand-logo-img {
    height: 60px !important;
    max-width: 240px !important;
}


/* =========================================================
   7. MAIN SURVEY TITLE
   ========================================================= */

.survey-name,
h1 {
    color: var(--brand-blue) !important;

    font-size: 32px !important;
    font-weight: 700 !important;

    text-align: center !important;

    margin-bottom: 10px !important;
}


/* =========================================================
   8. SURVEY DESCRIPTION
   ========================================================= */

.survey-description {
    color: var(--text-muted) !important;

    text-align: center !important;

    margin-bottom: 40px !important;
}


/* =========================================================
   9. GROUP / SESSION TITLE
   ========================================================= */

h2,
h3,
.group-title {
    color: var(--brand-blue) !important;
}


/* =========================================================
   10. QUESTION TITLE
   ========================================================= */

/*
   IMPORTANT:
   Question text is DARK NAVY instead of bright blue.
   This gives better visual hierarchy.
*/

.question-title-container {
    display: block !important;

    color: var(--text-main) !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.55 !important;

    text-align: left !important;

    margin-bottom: 8px !important;
}

.question-title-container,
.question-title-container * {
    color: var(--text-main) !important;
}


/* =========================================================
   11. REQUIRED ASTERISK
   ========================================================= */

.asterisk,
.question-title-container .asterisk {
    color: #dc2626 !important;
}


/* =========================================================
   12. QUESTION HELP / DESCRIPTION
   ========================================================= */

/*
   Changed from pink to neutral grey.
   This makes the form cleaner and easier to read.
*/

.ls-question-help,
.ls-questionhelp,
.question-help,
.question-help-container {
    color: var(--text-muted) !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: 1.6 !important;
}


/* Keep everything inside help text grey */

.ls-question-help *,
.ls-questionhelp *,
.question-help *,
.question-help-container * {
    color: var(--text-muted) !important;
}


/* =========================================================
   13. QUESTION BLOCK
   ========================================================= */

.ls-question {
    display: block !important;

    margin-bottom: 30px !important;
}


/* =========================================================
   14. STANDARD INPUT FIELDS
   ========================================================= */

.form-control {
    background: #f9fafb !important;

    border: 2px solid var(--border-light) !important;
    border-radius: 10px !important;

    padding: 15px !important;

    font-size: 16px !important;

    color: var(--text-main) !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}

.form-control:focus {
    background: #ffffff !important;

    border-color: var(--brand-blue) !important;

    box-shadow:
        0 0 0 4px rgba(0, 35, 255, 0.10) !important;

    outline: none !important;
}


/* =========================================================
   15. VALIDATION ERROR
   ========================================================= */

.has-error input,
.has-error textarea,
.has-error select {
    border: 2px solid #dc2626 !important;
    background-color: #fff5f5 !important;
}


/* =========================================================
   16. RADIO + CHECKBOX
   ========================================================= */

.radio-item,
.checkbox-item {
    display: flex !important;
    align-items: center !important;

    margin-bottom: 10px !important;

    padding: 10px !important;

    border-radius: 8px !important;

    transition: background-color 0.2s ease !important;
}

.radio-item:hover,
.checkbox-item:hover {
    background-color: #f5f7ff !important;
}

input[type="radio"],
input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;

    margin-right: 15px !important;

    accent-color: var(--brand-blue);
}


/* =========================================================
   17. FORCE VERTICAL RADIO QUESTIONS
   ========================================================= */

.force-vertical .form-check-inline {
    display: block !important;

    margin-right: 0 !important;
    margin-bottom: 10px !important;
}


/* =========================================================
   18. ANSWER AREA
   ========================================================= */

.ls-answers {
    margin-top: 10px !important;
}


/* =========================================================
   19. RATING BUTTON ROW
   ========================================================= */

/*
   Used for 1-5 / 0-10 rating questions.
*/

.ls-answers .row {
    display: flex !important;

    flex-wrap: nowrap !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 12px !important;
}


/* Remove Bootstrap column widths */

.ls-answers .col-md-2,
.ls-answers .col-12 {
    width: auto !important;

    flex: 0 0 auto !important;

    max-width: none !important;

    padding: 0 !important;
}


/* =========================================================
   20. RATING BUTTONS
   ========================================================= */

.ls-answers .btn-primary {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 5px !important;
    padding: 0 !important;

    background: #ffffff !important;

    color: var(--brand-blue) !important;

    border:
        2px solid var(--border-light) !important;

    border-radius: 50% !important;

    box-shadow: none !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Rating hover */

.ls-answers .btn-primary:hover {
    background: #f5f7ff !important;

    border-color: var(--brand-blue) !important;

    transform: translateY(-2px) !important;
}


/* Rating selected */

.ls-answers .btn-primary.active,
.ls-answers .btn-primary:active,
.ls-answers input:checked + label {
    background: var(--brand-gradient) !important;

    color: #ffffff !important;

    border-color: transparent !important;

    box-shadow:
        0 5px 15px rgba(0, 35, 255, 0.20) !important;
}


/* =========================================================
   21. NAVIGATION AREA
   ========================================================= */

.navigator {
    text-align: center !important;

    margin-top: 40px !important;
    padding-top: 20px !important;

    border-top: 1px solid #eeeeee !important;
}


/* =========================================================
   22. NEXT / SUBMIT BUTTONS
   ========================================================= */

#ls-button-submit,
.ls-move-btn {
    background: var(--brand-gradient) !important;

    border: none !important;

    color: #ffffff !important;

    padding: 14px 40px !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    border-radius: 50px !important;

    box-shadow:
        0 10px 20px rgba(0, 35, 255, 0.15) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

#ls-button-submit:hover,
.ls-move-btn:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 15px 30px rgba(243, 102, 124, 0.25) !important;
}


/* =========================================================
   23. PREVIOUS BUTTON
   ========================================================= */

.ls-move-previous-btn {
    background: #f3f4f6 !important;

    color: var(--text-muted) !important;

    box-shadow: none !important;
}


/* =========================================================
   24. PROGRESS BAR
   ========================================================= */

.progress {
    height: 8px !important;

    background-color: #e5e7eb !important;

    border-radius: 10px !important;

    margin-bottom: 30px !important;
}

.progress-bar {
    background: var(--brand-gradient) !important;
}


/* =========================================================
   25. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {

    #surveylist,
    .survey-container,
    .group-container {
        width: 94% !important;

        padding: 40px !important;
    }

    .survey-name,
    h1 {
        font-size: 28px !important;
    }
}


/* =========================================================
   26. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #surveylist,
    .survey-container,
    .group-container {
        width: 94% !important;

        margin: 20px auto !important;

        padding: 25px 18px !important;

        border-radius: 15px !important;
    }

    .survey-name,
    h1 {
        font-size: 24px !important;
    }

    .question-title-container {
        font-size: 16px !important;
    }

    /*
       Allow rating buttons to wrap on small screens
       instead of overflowing.
    */

    .ls-answers .row {
        flex-wrap: wrap !important;

        gap: 8px !important;
    }

    .ls-answers .btn-primary {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
    }

    #ls-button-submit,
    .ls-move-btn {
        padding: 12px 25px !important;
    }
}