/*
 * Default Theme - Base Stylesheet
 *
 * Loaded for every intake unless its config sets `layout.defaultTheme: false`
 * (see docs/theming.md). It is linked from `src/app/[slug]/layout.tsx`, ahead
 * of the intake's own `themeCssFile`, so a theme rule of equal specificity
 * wins — but many rules here carry `!important`, which a theme cannot beat;
 * an intake that wants a clean slate turns the whole sheet off instead.
 *
 * Served from public/ rather than bundled so that it CAN be left out per
 * intake. Cached by the deploy SHA in its URL (next.config.mjs).
 *
 * Supports both component generations:
 *   - V1 (MDExam components: btn-base, input-base, text-large-desktop-title, etc.)
 *   - V2 (Intake components: action-button, checkbox-option, progress-bar, etc.)
 */


/* ============================================
   1. CSS CUSTOM PROPERTIES — V2 DESIGN TOKENS
   ============================================ */

:root {
    --primary: #264653;
    --secondary: #2A9D8F;

    --indigo: #264653;
    --indigo_rgb: 38 70 83;

    --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(38, 70, 83, 0.15), rgba(42, 157, 143, 0.20), rgba(42, 157, 143, 0.30), var(--primary));
    --gradient_light: linear-gradient(90deg, rgba(38, 70, 83, 0.08), rgba(42, 157, 143, 0.13), var(--primary));

    /* Thank-you page surfaces. Brand-controllable like every other themed
       surface, but flat by default: the stock `--gradient` is a hard 90deg wash
       that ends in solid `--primary`, which fights any palette it wasn't
       designed for. A brand that wants a gradient can set these to one. */
    --thankyou_hero_bkg: rgb(var(--indigo_rgb) / 6%);
    --thankyou_section_bkg: #FFFFFA;
    --thankyou_card_bkg: #FFFFFF;
    --thankyou_icon_bkg: var(--indigo);
    --thankyou_font_head: "Merriweather", serif;
    --thankyou_font_body: 'Rubik', sans-serif;
}


/* ============================================
   2. CSS CUSTOM PROPERTIES — V1 DESIGN TOKENS
   ============================================ */

:root {
    /* V1 Main Colors */
    --color-tide-200: #254451;
    --color-tide-100: #C1CACD;
    --color-teal-200: #559CB9;
    --color-teal-100: #D3ECF6;
    --color-surf-green-200: #229B8E;
    --color-surf-green-100: #C2E2DF;
    --color-sandy-200: #F8F6C9;
    --color-sandy-100: #FFFFED;
    --color-bonito-green-200: #05FED1;
    --color-bonito-green-100: #B9FFF1;
    --color-sky-blue-200: #01DFDF;
    --color-sky-blue-100: #E2FEFE;
    --color-bluebird-200: #0444FE;
    --color-bluebird-100: #E1F3FD;
    --color-violet-200: #6A52EC;
    --color-violet-100: #DDD7F8;
    --color-sunset-200: #C95CA7;
    --color-sunset-100: #F2D9E9;
    --color-sunrise-200: #FF6B01;
    --color-sunrise-100: #FFDDC7;
    --color-buoy-red-200: #F24932;
    --color-buoy-red-100: #FBD6D1;
    --color-starfish-200: #FF7384;
    --color-starfish-100: #FFDFE2;
    --color-blackest-200: #000000;
    --color-neutral-grey-100: #646464;
    --color-neutral-grey-200: rgba(0, 0, 0, 0.40);

    /* V1 Primary Colors */
    --color-primary-1-100: #EAEDEE;
    --color-primary-1-200: #BEC8CC;
    --color-primary-1-300: #92A2A8;
    --color-primary-1-400: #687E87;
    --color-primary-1-500: #516B75;
    --color-primary-1-600: #264653;

    /* V1 Primary 2 */
    --color-primary-2-100: rgba(255, 184, 78, 0.1);
    --color-primary-2-200: rgba(255, 184, 78, 0.3);
    --color-primary-2-300: rgba(255, 184, 78, 0.5);
    --color-primary-2-400: rgba(255, 184, 78, 0.7);
    --color-primary-2-500: rgba(255, 184, 78, 0.8);
    --color-primary-2-600: rgba(255, 184, 78, 1);

    /* V1 Dark Colors */
    --color-dark-1-100: #EBEBEB;
    --color-dark-1-200: #D9D9D9;
    --color-dark-1-300: #979797;
    --color-dark-1-400: #6A6666;
    --color-dark-1-500: #423E3E;
    --color-dark-1-600: #1E1E1E;

    /* V1 Secondary Colors */
    --color-secondary-1-100: #EAF6F4;
    --color-secondary-1-200: #C0E2DE;
    --color-secondary-1-300: #94CDC6;
    --color-secondary-1-400: #6ABBB1;
    --color-secondary-1-500: #55B1A5;
    --color-secondary-1-600: #2A9D8F;

    --color-secondary-2-100: #FFFFFA;
    --color-secondary-2-200: #FDFDEF;
    --color-secondary-2-300: #FBFAE3;
    --color-secondary-2-400: #FBF9DA;
    --color-secondary-2-500: #F9F8D4;
    --color-secondary-2-600: #F8F6C9;

    /* V1 Utility Colors */
    --color-white: #fff;
    --color-error: #DE4040;
    --color-btn-hover: #2C6975;

    /* V1 Font Colors */
    --font-color-grey: rgba(0, 0, 0, 0.60);
    --font-color-dark-grey: rgba(38, 38, 38, 0.90);

    /* V1 Gradients */
    --gradient-primary-title-highlighted: linear-gradient(to right, #19776C, #085B52);
    --gradient-primary-title: linear-gradient(to right, #19776C, #085B52);
    --gradient-normal-button-glare: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --gradient-primary-button-glare: linear-gradient(0deg, #6A52EC, #6A52EC), radial-gradient(45.25% 436.07% at 69.13% 50%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
    --gradient-backdrop: linear-gradient(to bottom, rgba(37, 202, 160, 0), rgba(37, 202, 160, 0.2));
    --gradient-highlight: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
    --gradient-color-tint: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    --gradient-background: linear-gradient(to bottom, rgba(85, 156, 185, 0), rgba(85, 156, 185, 0.2));
    --gradient-text-green: linear-gradient(90deg, #19776C 0%, #085B52 100%);
    --gradient-text-black: linear-gradient(116deg, rgba(0, 0, 0, 0.80) 0%, #000 100%);

    /* V1 Typography */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --font-size-2xs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 17px;
    --font-size-lg: 19px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 34px;
    --font-size-5xl: 48px;
    --font-size-6xl: 64px;

    /* V1 Text Style Tokens */
    --text-large-desktop-size: 40px;
    --text-large-desktop-height: 48px;
    --text-large-desktop-spacing: -0.02em;

    --text-medium-desktop-size: 34px;
    --text-medium-desktop-height: 40.8px;
    --text-medium-desktop-spacing: -0.02em;

    --text-mobile-title-size: 32px;
    --text-mobile-title-height: 38.4px;
    --text-mobile-title-weight: 500;
    --text-mobile-title-spacing: -0.02em;

    --text-section-title-size: 24px;
    --text-section-title-height: 31.68px;
    --text-section-title-weight: 600;

    --text-button-title-size: 22px;
    --text-button-title-weight: 600;
    --text-button-title-spacing: -0.22px;

    --text-subtitle-size: 16px;
    --text-subtitle-height: 21.12px;
    --text-subtitle-weight: 500;
    --text-subtitle-spacing: -0.01em;

    --text-hint-size: 14px;
    --text-hint-height: 18.48px;
    --text-hint-weight: 500;
    --text-hint-spacing: -0.01em;

    /* V1 Component Dimensions — Input */
    --input-height: 64px;
    --input-border-radius: 16px;
    --input-border-width: 1px;
    --input-border-color: rgba(193, 202, 205, 0.30);
    --input-background: white;
    --input-font-weight: 600;
    --input-element-width: 20px;
    --input-element-margin: 0px 7px 0px 20px;

    /* V1 Component Dimensions — Button */
    --button-height: 64px;
    --button-border-radius: 46px;
    --button-font-size: 22px;
    --button-font-weight: 600;
    --button-letter-spacing: -0.01em;
    --button-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.20);
    --button-box-shadow-hover: 0px 8px 16px 0px rgba(0, 0, 0, 0.20);

    /* V1 Component Dimensions — Select */
    --select-height: 64px;
    --select-border-radius: 16px;
    --select-border-width: 1px;
    --select-border-color: rgba(193, 202, 205, 0.30);
    --select-background: white;
    --select-font-weight: 600;

    /* V1 Component Dimensions — Textarea */
    --textarea-min-height: 120px;
    --textarea-height: 256px;
    --textarea-padding: 1rem;
    --textarea-border-radius: 16px;
    --textarea-border-width: 1px;
    --textarea-border-color: rgba(193, 202, 205, 0.30);
    --textarea-background: white;
    --textarea-font-weight: 600;
}


/* ============================================
   3. BASE HTML / TYPOGRAPHY
   ============================================ */

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: var(--font-family-primary) !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    -moz-osx-font-smoothing: grayscale !important;
    scroll-behavior: smooth !important;
}

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

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

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

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

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

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


/* ============================================
   4. V1 TEXT STYLE UTILITIES
   ============================================ */

.text-large-desktop-title {
    font-family: var(--font-family-heading);
    font-size: var(--text-large-desktop-size);
    line-height: var(--text-large-desktop-height);
    letter-spacing: var(--text-large-desktop-spacing);
}

.text-medium-desktop-title {
    font-family: var(--font-family-heading);
    font-size: var(--text-medium-desktop-size);
    line-height: var(--text-medium-desktop-height);
    letter-spacing: var(--text-medium-desktop-spacing);
}

.text-mobile-title {
    font-family: var(--font-family-heading);
    font-size: var(--text-mobile-title-size);
    font-weight: var(--text-mobile-title-weight);
    line-height: var(--text-mobile-title-height);
    letter-spacing: var(--text-mobile-title-spacing);
}

.text-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    line-height: var(--text-section-title-height);
}

.text-button-title {
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: var(--text-button-title-size);
    font-style: normal;
    font-weight: var(--text-button-title-weight);
    line-height: normal;
    letter-spacing: var(--text-button-title-spacing);
}

.text-subtitle {
    font-family: var(--font-family-primary);
    font-size: var(--text-subtitle-size);
    font-weight: var(--text-subtitle-weight);
    line-height: var(--text-subtitle-height);
    letter-spacing: var(--text-subtitle-spacing);
    color: var(--color-neutral-grey-100);
}

.text-hint {
    font-family: var(--font-family-primary);
    font-size: var(--text-hint-size);
    font-weight: var(--text-hint-weight);
    line-height: var(--text-hint-height);
    letter-spacing: var(--text-hint-spacing);
}


/* ============================================
   5. V1 BUTTON COMPONENT VARIANTS
   ============================================ */

.btn-base {
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: normal;
    text-align: center;
    font-family: var(--font-family-primary);
    font-style: normal;
    letter-spacing: var(--button-letter-spacing);
    border-radius: var(--button-border-radius);
    box-shadow: var(--button-box-shadow);
    height: var(--button-height);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

.btn-base:hover:not(:disabled) {
    box-shadow: var(--button-box-shadow-hover);
}

.btn-base:disabled {
    background: rgba(255, 255, 255, 0.50);
    color: rgba(0, 0, 0, 0.15);
    cursor: not-allowed;
    font-weight: 700;
    box-shadow: none;
    border-radius: var(--button-border-radius);
    border: 1px solid rgba(0, 0, 0, 0.10);
    opacity: 1;
}

.btn-base:disabled:hover {
    box-shadow: none;
    opacity: 1;
}

.btn-primary {
    border-radius: var(--button-border-radius);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.15) 100%),
                radial-gradient(436.07% 46.06% at 69.13% 50%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%),
                var(--color-violet-200);
    box-shadow: var(--button-box-shadow);
    color: var(--color-white);
}

.btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-primary:active:not(:disabled) {
    opacity: 0.8;
}

.btn-secondary {
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--gradient-normal-button-glare);
    border-radius: inherit;
    pointer-events: none;
}

.btn-secondary:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-secondary:active:not(:disabled) {
    opacity: 0.8;
}

.btn-normal {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.00) 100%),
                radial-gradient(436.07% 46.06% at 69.13% 50%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%),
                #000;
    color: var(--color-white);
}

.btn-normal:active:not(:disabled) {
    background: #1A1A1A;
}

.btn-disabled {
    height: var(--button-height);
    border-radius: var(--button-border-radius);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: var(--button-font-size);
    background: rgba(0, 0, 0, 0.05);
    color: #000;
    font-weight: 700;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.btn-dual-info {
    background: var(--gradient-primary-title);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    font-size: 18px;
    line-height: 22px;
}

.btn-dual-info::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--gradient-primary-button-glare);
    border-radius: inherit;
    pointer-events: none;
}

.btn-dual-info:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-dual-info:active:not(:disabled) {
    opacity: 0.8;
}


/* ============================================
   6. V1 INPUT / SELECT / TEXTAREA VARIANTS
   ============================================ */

/* --- Input --- */

.input-base {
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--input-border-color);
    background: var(--input-background);
    height: var(--input-height);
    font-weight: var(--input-font-weight);
    padding: 0 1rem;
    font-family: var(--font-family-primary);
    transition: all 0.2s ease;
    width: 100%;
    outline: none;
}

.input-base::placeholder {
    color: rgba(100, 100, 100, 0.5);
}

.input-base:focus,
.input-focus {
    border-radius: var(--input-border-radius);
    border: 1px solid var(--color-violet-200);
    background: linear-gradient(0deg, rgba(106, 82, 236, 0.05) 0%, rgba(106, 82, 236, 0.05) 100%), #FFF;
    box-shadow: 0px 0px 12px 0px rgba(106, 82, 236, 0.25);
    outline: none;
}

.input-base:disabled,
.input-disabled {
    border-radius: var(--input-border-radius);
    border: 1px solid rgba(193, 202, 205, 0.15);
    background: rgba(255, 255, 255, 0.50);
    cursor: not-allowed;
}

.input-primary {
    border-radius: var(--input-border-radius);
    border: 1px solid var(--input-border-color);
    background: var(--input-background);
    height: var(--input-height);
}

.input-error {
    border-radius: var(--input-border-radius);
    border: 1px solid var(--color-buoy-red-200);
    background: linear-gradient(0deg, rgba(242, 73, 50, 0.05) 0%, rgba(242, 73, 50, 0.05) 100%), #FFF;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-element {
    width: var(--input-element-width);
    margin: var(--input-element-margin);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    pointer-events: none;
}

.input-element-left {
    left: 0;
}

.input-element-right {
    right: 0;
}

/* --- Select --- */

.select-base {
    border-radius: var(--select-border-radius);
    border: var(--select-border-width) solid var(--select-border-color);
    background: var(--select-background);
    height: var(--select-height);
    font-weight: var(--select-font-weight);
    padding: 0 1rem;
    font-family: var(--font-family-primary);
    transition: all 0.2s ease;
    width: 100%;
    outline: none;
    cursor: pointer;
}

.select-base::placeholder {
    color: rgba(100, 100, 100, 0.5);
}

.select-base:focus,
.select-focus {
    border-radius: var(--select-border-radius);
    border: 1px solid var(--color-violet-200);
    background: linear-gradient(0deg, rgba(106, 82, 236, 0.05) 0%, rgba(106, 82, 236, 0.05) 100%), #FFF;
    box-shadow: 0px 0px 12px 0px rgba(106, 82, 236, 0.25);
    outline: none;
}

.select-base:disabled,
.select-disabled {
    border-radius: var(--select-border-radius);
    border: 1px solid rgba(193, 202, 205, 0.15);
    background: rgba(255, 255, 255, 0.50);
    cursor: not-allowed;
}

.select-primary {
    border-radius: var(--select-border-radius);
    border: 1px solid var(--select-border-color);
    background: var(--select-background);
    height: var(--select-height);
}

.select-error {
    border-radius: var(--select-border-radius);
    border: 1px solid var(--color-buoy-red-200);
    background: linear-gradient(0deg, rgba(242, 73, 50, 0.05) 0%, rgba(242, 73, 50, 0.05) 100%), #FFF;
}

/* --- Textarea (V1) --- */

.textarea-base {
    min-height: var(--textarea-min-height);
    height: var(--textarea-height);
    padding: var(--textarea-padding);
    border-radius: var(--textarea-border-radius);
    border: var(--textarea-border-width) solid var(--textarea-border-color);
    background: var(--textarea-background);
    font-weight: var(--textarea-font-weight);
    font-family: var(--font-family-primary);
    transition: all 0.2s ease;
    width: 100%;
    outline: none;
    resize: vertical;
}

.textarea-base::placeholder {
    color: rgba(100, 100, 100, 0.5);
}

.textarea-base:focus,
.textarea-focus {
    border-radius: var(--textarea-border-radius);
    border: 1px solid var(--color-violet-200);
    background: linear-gradient(0deg, rgba(106, 82, 236, 0.05) 0%, rgba(106, 82, 236, 0.05) 100%), #FFF;
    box-shadow: 0px 0px 12px 0px rgba(106, 82, 236, 0.25);
    outline: none;
}

.textarea-base:disabled,
.textarea-disabled {
    border-radius: var(--textarea-border-radius);
    border: 1px solid rgba(193, 202, 205, 0.15);
    background: rgba(255, 255, 255, 0.50);
    cursor: not-allowed;
}

.textarea-primary {
    border-radius: var(--textarea-border-radius);
    border: 1px solid var(--textarea-border-color);
    background: var(--textarea-background);
}

.textarea-error {
    border-radius: var(--textarea-border-radius);
    border: 1px solid var(--color-buoy-red-200);
    background: linear-gradient(0deg, rgba(242, 73, 50, 0.05) 0%, rgba(242, 73, 50, 0.05) 100%), #FFF;
}


/* ============================================
   7. LAYOUT & NAVIGATION
   ============================================ */

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

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


/* ============================================
   8. PROGRESS BAR
   ============================================ */

/* Progress Bar Container */
.progress-bar-container {
    display: table !important;
    width: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

/* Back Button Wrapper */
.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 */
.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 */
.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 */
.progress-counter {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 60px !important;
    text-align: right !important;
}

.progress-step-current {
    color: var(--indigo) !important;
    font-weight: 500 !important;
}

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

/* Segmented Progress Bar */
.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;
    background: rgb(var(--indigo_rgb) / 20%) !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;
}


/* ============================================
   9. QUESTION CONTAINERS
   ============================================ */

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

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


/* ============================================
   10. 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,
.radio-option-selected {
    border-color: var(--indigo) !important;
    background: rgb(var(--indigo_rgb) / 5%) !important;
}

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

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

.icon_notchecked,
.icon-not-checked {
    color: rgb(var(--indigo_rgb) / 30%) !important;
}

.icon_checked,
.icon-checked {
    color: var(--indigo) !important;
}


/* ============================================
   11. TEXTAREA & TEXT INPUT (V2)
   ============================================ */

.textarea-input {
    width: calc(100% - 2px) !important;
    background: #fff !important;
    border: 1px solid rgb(var(--indigo_rgb) / 30%) !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;
}


/* ============================================
   12. ALERT MESSAGES
   ============================================ */

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

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


/* ============================================
   13. BUTTONS (V2)
   ============================================ */

.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%);
    }
}

/* Button Container */
.button_next_div,
.button-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}


/* ============================================
   14. 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;
}


/* ============================================
   15. LOADING
   ============================================ */

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


/* ============================================
   16. UTILITY CLASSES
   ============================================ */

/* Color Utilities */
.indigo {
    color: var(--indigo) !important;
}

.blue {
    color: var(--blue) !important;
}

.green {
    color: var(--green) !important;
}

.white {
    color: #fff !important;
}

/* Text Alignment */
.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

/* Spacing Utilities */
.spacer {
    display: block !important;
}

.spacer_25 {
    height: 25px !important;
}

.spacer_50 {
    height: 50px !important;
}

.spacer_100 {
    height: 100px !important;
}

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

.mt_25 {
    margin-top: 25px !important;
}

.mt_50 {
    margin-top: 50px !important;
}

.my_10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.my_25 {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.my_50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.mr_10 {
    margin-right: 10px !important;
}

.mb_25 {
    margin-bottom: 25px !important;
}

.ml_10 {
    margin-left: 10px !important;
}

/* V1 Gradient Text Utilities */
.bg-gradient-primary-title {
    background: var(--gradient-primary-title);
}

.bg-gradient-text-green {
    background: var(--gradient-text-green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-text-black {
    background: var(--gradient-text-black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-color-grey {
    color: var(--font-color-grey);
}

.text-color-dark-grey {
    color: var(--font-color-dark-grey);
}


/* ============================================
   17. 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;
    }
}