/* ==================== FONT FACES (from style-pure.css) ==================== */

/* Merriweather */
@font-face {
    font-family: "Merriweather";
    font-weight: 300;
    font-style: normal;
    src: url(/assets/css/font/Merriweather/Merriweather-Light.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    font-weight: 400;
    font-style: normal;
    src: url(/assets/css/font/Merriweather/Merriweather-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    font-weight: 700;
    font-style: normal;
    src: url(/assets/css/font/Merriweather/Merriweather-Bold.ttf);
    font-display: swap;
}

/* Rubik */
@font-face {
    font-family: "Rubik";
    font-weight: 400;
    font-style: normal;
    src: url(/assets/css/font/Rubik/Rubik-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    font-weight: 500;
    font-style: normal;
    src: url(/assets/css/font/Rubik/Rubik-Medium.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    font-weight: 700;
    font-style: normal;
    src: url(/assets/css/font/Rubik/Rubik-Bold.ttf);
    font-display: swap;
}

/* Urbanist */
@font-face {
    font-family: "Urbanist";
    font-weight: 300;
    font-style: normal;
    src: url(/assets/css/font/Urbanist/Urbanist-Light.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Urbanist";
    font-weight: 400;
    font-style: normal;
    src: url(/assets/css/font/Urbanist/Urbanist-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Urbanist";
    font-weight: 500;
    font-style: normal;
    src: url(/assets/css/font/Urbanist/Urbanist-Medium.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Urbanist";
    font-weight: 600;
    font-style: normal;
    src: url(/assets/css/font/Urbanist/Urbanist-SemiBold.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Urbanist";
    font-weight: 700;
    font-style: normal;
    src: url(/assets/css/font/Urbanist/Urbanist-Bold.ttf);
    font-display: swap;
}

@font-face {
    font-family: "Urbanist";
    font-weight: 800;
    font-style: normal;
    src: url(/assets/css/font/Urbanist/Urbanist-ExtraBold.ttf);
    font-display: swap;
}


/* ==================== COLOR VARIABLES (from style-pure.css) ==================== */

:root {
    --primary: #D98C7C;
    --secondary: #000000;
    
    --indigo: #000;
    --indigo_rgb: #D98C7C;

    --purple: #7788FF;
    --purple_rgb: 119 136 255;

    --cyan: #1EB7E4;
    --cyan_rgb: 30 183 228;

    --darkgray: #222E33;
    --darkgray_rgb: 34 46 51;

    --mediumgray: #aaaaaa;
    --mediumgray_rgb: 170 170 170;

    --gray: #E2E4E5;
    --gray_rgb: 226 228 229;

    --lightgray: #F0F0F0;
    --lightgray_rgb: 240 240 240;

    --yellow: #FFC300;
    --yellow_rgb: 255 195 0;


    --darkblue: #1F2630;
    --darkblue_rgb: 31 38 48;

    --blue: #1976D2;
    --blue_rgb: 25 118 210;

    --green: #4CAF50;
    --green_rgb: 76 175 80;

    --red: #ef4444;
    --red_rgb: 239 68 68;

    --orange: #fca423;
    --orange_rgb: 252 164 35;


    --gradient: linear-gradient(90deg, rgba(217, 140, 124, 0.15), rgba(217, 140, 124, 0.20), rgba(217, 140, 124, 0.30), var(--primary));
    --gradient_light: linear-gradient(90deg, rgba(217, 140, 124, 0.08), rgba(217, 140, 124, 0.13), var(--primary));
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 21px !important;
    height: 100% !important;
    color: var(--darkgray) !important;
    font-family: 'Helvetica', sans-serif !important;
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    -moz-osx-font-smoothing: grayscale !important;
    scroll-behavior: smooth !important;
}


/* ==================== LAYOUT & NAVIGATION ==================== */

.layout-wrapper.background-gradient-light {
    background: #FFFFFA !important;
}

.intake-header {
    background: transparent !important;
}

/* Progress Bar Container (matches .intake_progress from style-pure.css) */
.progress-bar-container {
    display: table !important;
    width: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

/* Back Button Wrapper (matches .progress_back_div from style-pure.css) */
.back-button-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    font-size: 20px !important;
    line-height: 0px !important;
    color: var(--indigo) !important;
    text-align: left !important;
    position: absolute !important;
    top: 30px !important;
    left: 30px !important;
    cursor: pointer !important;
}

.back-button {
    padding: 7px 10px !important;
    border-radius: 8px !important;
}

.back-button:hover {
    background: var(--indigo) !important;
    color: #fff !important;
}

/* Progress Bar Track (matches .progress_bar from style-pure.css) */
.progress-bar {
    display: inline-block !important;
    vertical-align: middle !important;
    width: calc(100% - 120px) !important;
    margin: 0 10px !important;
    background: rgb(var(--indigo_rgb) / 20%) !important;
    border-radius: 8px !important;
}

/* Progress Bar Fill (matches .progress_bar_inner from style-pure.css) */
.progress-bar-fill {
    display: table !important;
    width: 100% !important;
    background: var(--indigo) !important;
    background-image: linear-gradient(135deg, rgb(var(--cyan_rgb) / 100%), rgb(var(--purple_rgb) / 100%)) !important;
    height: 13px !important;
    border-radius: 8px !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 0.15s !important;
}

/* Progress Step Counter (matches .progress_step_container from style-pure.css) */
.progress-counter {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 60px !important;
    text-align: right !important;
}

/* Progress Step Current (matches .progress_step from style-pure.css) */
.progress-step-current {
    color: var(--indigo) !important;
    font-weight: 500 !important;
}

.progress-step-total {
    color: var(--indigo) !important;
}

/* Segmented Progress Bar (overrides .progress_bar_segmented from style-pure.css) */
.progress_bar_segmented {
    display: flex !important;
    vertical-align: middle !important;
    width: calc(100% - 120px) !important;
    margin: 0 auto 10px auto !important;
    gap: 4px !important;
}

.progress_segment {
    flex: 1 !important;
    height: 13px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
}

.progress_segment_inner {
    height: 100% !important;
    background: var(--primary) !important;
    border-radius: 8px !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 0.15s !important;
}


/* ==================== LOADING WIDGET ==================== */

.loading-overlay {
    background: #FFFFFA !important;
}


/* ==================== TYPOGRAPHY ==================== */

/* Font Family Utilities */
.rubik {
    font-family: 'Rubik', sans-serif !important;
}

.merriweather {
    font-family: "Merriweather", serif !important;
}

.urbanist {
    font-family: "Urbanist", serif !important;
}

/* Font Weight Utilities */
.regular {
    font-weight: 400 !important;
}

.medium {
    font-weight: 500 !important;
}

.bold {
    font-weight: 700 !important;
}

/* Heading Styles */
h1 {
    font-family: "Urbanist", serif !important;
    font-size: 27px !important;
    line-height: 33px !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
}

h2 {
    font-family: "Urbanist", serif !important;
    font-size: 23px !important;
    line-height: 29px !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
}

h3 {
    font-family: "Urbanist", serif !important;
    font-size: 20px !important;
    line-height: 25px !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
}


/* ==================== QUESTION CONTAINERS ==================== */

.question-container {
    margin-top: 40px !important;
}

.question-title {
    font-family: "Urbanist", serif !important;
    font-size: 27px !important;
    line-height: 33px !important;
    font-weight: 700 !important;
    color: var(--indigo) !important;
}


/* ==================== CHECKBOX & RADIO OPTIONS ==================== */

.checkbox-option,
.radio-option {
    background: #fff !important;
    border: 1px #CCCCCC solid !important;
    border-radius: 15px !important;
    padding: 18px !important;
    font-size: 1.1em !important;
}

.checkbox-option:hover,
.radio-option:hover,
.checkbox-option-selected,
.radio-option-selected {
    cursor: pointer !important;
}

.checkbox-option-selected i,
.radio-option-selected i,
.checkbox-option:hover i,
.radio-option:hover i {
    color: #000 !important;
}


/* ==================== GRID LAYOUT ==================== */

.option-grid.grid-cols-2 .grid-item:nth-child(2n+1) {
    padding-right: 10px !important;
}

.option-grid.grid-cols-2 .grid-item:nth-child(2n+2) {
    padding-left: 10px !important;
}


/* ==================== TEXTAREA INPUT ==================== */

.textarea-input {
    font-family: 'Rubik', sans-serif !important;
    width: calc(100% - 2px) !important;
    background: #fff !important;
    border: 1px solid var(--indigo_rgb) !important;
    border-radius: 8px !important;
    margin: 13px 0 !important;
    padding: 10px !important;
    font-size: 15px !important;
    line-height: 21px !important;
    box-sizing: border-box !important;
}

.textarea-input:focus,
.textarea-input:active {
    border-color: rgb(var(--indigo_rgb) / 50%) !important;
    outline: 0 !important;
}


/* ==================== ALERT MESSAGES ==================== */

.alert-message {
    background: #fef2f2 !important;
    border: 1px solid #fee2e1 !important;
    color: var(--red) !important;
}

.alert-icon {
    color: var(--red) !important;
}


/* ==================== BUTTONS ==================== */

.action-button {
    background: #000 !important;
    background-image: linear-gradient(90deg, rgb(var(--cyan_rgb) / 5%) 20%, rgb(var(--purple_rgb) / 5%)) !important;
    color: #fff !important;
    border-radius: 50px !important;
    letter-spacing: 0px !important;
    font-weight: 800 !important;
}

.action-button:hover {
    opacity: 0.9 !important;
}

.button-icon {
    color: #fff !important;
}

@keyframes button_spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.button-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.continue-button {
    box-shadow: 0 0 0 0 rgb(var(--indigo_rgb) / 70%) !important;
    transform: scale(1) !important;
    animation: pulse 1.5s infinite !important;
}

.continue-button:hover {
    animation: none !important;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(var(--indigo_rgb) / 70%);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgb(var(--indigo_rgb) / 0%);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(var(--indigo_rgb) / 0%);
    }
}


/* ==================== MOBILE RESPONSIVE ==================== */

@media only screen and (max-width: 600px) {
    .back-button:hover {
        background: initial !important;
        color: inherit !important;
    }

    .back-button:active {
        background: var(--indigo) !important;
        color: #fff !important;
    }

    .checkbox-option:hover:not(.checkbox-option-selected),
    .radio-option:hover:not(.radio-option-selected) {
        color: initial !important;
        background-color: #fff !important;
        border-color: rgb(var(--indigo_rgb) / 30%) !important;
    }

    .checkbox-option:hover:not(.checkbox-option-selected) .option-icon,
    .radio-option:hover:not(.radio-option-selected) .option-icon {
        color: rgb(var(--indigo_rgb) / 30%) !important;
    }
}