/*
===========================================
FACTORZ PRODUCT COMPARISON STYLE GUIDE
===========================================

Based on 2025 e-commerce and comparison website design trends
Research-driven design system for modern product comparison experiences

===========================================
TABLE OF CONTENTS
===========================================
1. Color Palette
2. Typography
3. Spacing & Layout
4. Component Library
5. Card Systems
6. Interactive Elements
7. Responsive Grid
8. Animation & Transitions
===========================================
*/

/* ===========================================
   1. COLOR PALETTE
   =========================================== */

:root {
    /* Primary Brand Colors */
    --color-primary: #6366f1;           /* Modern indigo */
    --color-primary-light: #a5b4fc;     /* Light indigo */
    --color-primary-dark: #4338ca;      /* Dark indigo */
    --color-primary-50: #eef2ff;        /* Very light indigo */
    --color-primary-100: #e0e7ff;       /* Ultra light indigo */
    
    /* Secondary Colors */
    --color-secondary: #f59e0b;         /* Amber accent */
    --color-secondary-light: #fbbf24;   /* Light amber */
    --color-secondary-dark: #d97706;    /* Dark amber */
    
    /* Success & Status Colors */
    --color-success: #10b981;           /* Emerald green */
    --color-warning: #f59e0b;           /* Amber */
    --color-error: #ef4444;             /* Red */
    --color-info: #3b82f6;              /* Blue */
    
    /* Neutral Grays */
    --color-gray-50: #f9fafb;           /* Very light gray */
    --color-gray-100: #f3f4f6;          /* Light gray */
    --color-gray-200: #e5e7eb;          /* Medium light gray */
    --color-gray-300: #d1d5db;          /* Medium gray */
    --color-gray-400: #9ca3af;          /* Dark medium gray */
    --color-gray-500: #6b7280;          /* Dark gray */
    --color-gray-600: #4b5563;          /* Very dark gray */
    --color-gray-700: #374151;          /* Almost black */
    --color-gray-800: #1f2937;          /* Near black */
    --color-gray-900: #111827;          /* Black */
    
    /* Text Colors */
    --color-text-primary: #111827;      /* Main text */
    --color-text-secondary: #6b7280;    /* Secondary text */
    --color-text-muted: #9ca3af;        /* Muted text */
    --color-text-inverse: #ffffff;      /* White text */
    
    /* Background Colors */
    --color-bg-primary: #ffffff;        /* Main background */
    --color-bg-secondary: #f9fafb;      /* Secondary background */
    --color-bg-accent: #eef2ff;         /* Accent background */
    --color-bg-dark: #1f2937;           /* Dark background */
    
    /* Border Colors */
    --color-border-light: #e5e7eb;      /* Light borders */
    --color-border-medium: #d1d5db;     /* Medium borders */
    --color-border-dark: #6b7280;       /* Dark borders */
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 0px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ===========================================
   2. TYPOGRAPHY
   =========================================== */

/* Font Stack */
:root {
    --font-family-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* Font Sizes */
:root {
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
}

/* Font Weights */
:root {
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
}

/* Line Heights */
:root {
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
}

/* ===========================================
   3. SPACING & LAYOUT
   =========================================== */

:root {
    /* Spacing Scale */
    --space-0: 0;
    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    
    /* Border Radius */
    --radius-sm: 0.125rem;  /* 2px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-full: 9999px;  /* Full rounded */
    
    /* Max Widths */
    --max-width-xs: 20rem;    /* 320px */
    --max-width-sm: 24rem;    /* 384px */
    --max-width-md: 28rem;    /* 448px */
    --max-width-lg: 32rem;    /* 512px */
    --max-width-xl: 36rem;    /* 576px */
    --max-width-2xl: 42rem;   /* 672px */
    --max-width-3xl: 48rem;   /* 768px */
    --max-width-4xl: 56rem;   /* 896px */
    --max-width-5xl: 64rem;   /* 1024px */
    --max-width-6xl: 72rem;   /* 1152px */
    --max-width-7xl: 80rem;   /* 1280px */
}

/* ===========================================
   4. COMPONENT LIBRARY
   =========================================== */

/* Modern Card Component */
.sg-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

.sg-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--color-primary-light);
}

.sg-card-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
}

.sg-card-body {
    padding: var(--space-6);
}

.sg-card-footer {
    padding: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
}

/* Product Card Specific */
.sg-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
}

.sg-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.sg-product-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sg-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.sg-product-card:hover .sg-product-image img {
    transform: scale(1.05);
}

.sg-product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    gap: var(--space-3);
}

.sg-product-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: 0;
}

.sg-product-description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.sg-product-price {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin: var(--space-2) 0;
}

.sg-product-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    z-index: 10;
}

/* Score/Rating Component */
.sg-score {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sg-score-badge {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    min-width: 3rem;
    text-align: center;
}

.sg-score-bar {
    flex: 1;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.sg-score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

/* ===========================================
   5. MODERN BUTTON SYSTEM
   =========================================== */

.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    box-sizing: border-box;
}

.sg-btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.sg-btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.sg-btn-secondary {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border-color: var(--color-border-medium);
}

.sg-btn-secondary:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-dark);
}

.sg-btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.sg-btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Button Sizes */
.sg-btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.sg-btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

/* ===========================================
   6. COMPARISON TABLE STYLES
   =========================================== */

.sg-comparison-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.sg-comparison-feature {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.sg-comparison-feature:last-child {
    border-bottom: none;
}

.sg-feature-label {
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}

.sg-feature-value {
    color: var(--color-text-secondary);
    text-align: right;
}

/* ===========================================
   7. FILTER & SEARCH COMPONENTS
   =========================================== */

.sg-filter-bar {
    background: var(--color-bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.sg-search-input {
    flex: 1;
    min-width: 250px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--color-bg-primary);
    transition: border-color 0.2s ease;
}

.sg-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.sg-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-100);
    color: var(--color-primary-dark);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.sg-filter-remove {
    background: none;
    border: none;
    color: var(--color-primary-dark);
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-filter-remove:hover {
    background: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

/* ===========================================
   8. RESPONSIVE GRID SYSTEM
   =========================================== */

.sg-container {
    width: 100%;
    max-width: var(--max-width-7xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.sg-grid {
    display: grid;
    gap: var(--space-6);
}

.sg-grid-1 { grid-template-columns: 1fr; }
.sg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sg-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive Grid */
@media (max-width: 768px) {
    .sg-grid-2,
    .sg-grid-3,
    .sg-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .sg-comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .sg-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sg-search-input {
        min-width: auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sg-grid-3,
    .sg-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   9. ANIMATIONS & TRANSITIONS
   =========================================== */

.sg-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.sg-slide-up {
    animation: slideUp 0.5s ease-out;
}

.sg-scale-in {
    animation: scaleIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===========================================
   10. UTILITY CLASSES
   =========================================== */

/* Text Utilities */
.sg-text-center { text-align: center; }
.sg-text-left { text-align: left; }
.sg-text-right { text-align: right; }

.sg-font-light { font-weight: var(--font-light); }
.sg-font-normal { font-weight: var(--font-normal); }
.sg-font-medium { font-weight: var(--font-medium); }
.sg-font-semibold { font-weight: var(--font-semibold); }
.sg-font-bold { font-weight: var(--font-bold); }

/* Spacing Utilities */
.sg-m-0 { margin: 0; }
.sg-m-1 { margin: var(--space-1); }
.sg-m-2 { margin: var(--space-2); }
.sg-m-3 { margin: var(--space-3); }
.sg-m-4 { margin: var(--space-4); }
.sg-m-6 { margin: var(--space-6); }
.sg-m-8 { margin: var(--space-8); }

.sg-p-0 { padding: 0; }
.sg-p-1 { padding: var(--space-1); }
.sg-p-2 { padding: var(--space-2); }
.sg-p-3 { padding: var(--space-3); }
.sg-p-4 { padding: var(--space-4); }
.sg-p-6 { padding: var(--space-6); }
.sg-p-8 { padding: var(--space-8); }

/* Margin/Padding directions */
.sg-mt-4 { margin-top: var(--space-4); }
.sg-mb-4 { margin-bottom: var(--space-4); }
.sg-ml-4 { margin-left: var(--space-4); }
.sg-mr-4 { margin-right: var(--space-4); }

.sg-pt-4 { padding-top: var(--space-4); }
.sg-pb-4 { padding-bottom: var(--space-4); }
.sg-pl-4 { padding-left: var(--space-4); }
.sg-pr-4 { padding-right: var(--space-4); }

/* Display Utilities */
.sg-hidden { display: none; }
.sg-block { display: block; }
.sg-inline { display: inline; }
.sg-inline-block { display: inline-block; }
.sg-flex { display: flex; }
.sg-grid { display: grid; }

/* Flex Utilities */
.sg-flex-col { flex-direction: column; }
.sg-flex-row { flex-direction: row; }
.sg-justify-center { justify-content: center; }
.sg-justify-between { justify-content: space-between; }
.sg-items-center { align-items: center; }
.sg-items-start { align-items: flex-start; }
.sg-items-end { align-items: flex-end; }

/* Background Utilities */
.sg-bg-white { background-color: var(--color-bg-primary); }
.sg-bg-gray { background-color: var(--color-bg-secondary); }
.sg-bg-primary { background-color: var(--color-primary); }

/* Border Utilities */
.sg-rounded { border-radius: var(--radius-md); }
.sg-rounded-lg { border-radius: var(--radius-lg); }
.sg-rounded-xl { border-radius: var(--radius-xl); }
.sg-rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.sg-shadow { box-shadow: var(--shadow-md); }
.sg-shadow-lg { box-shadow: var(--shadow-lg); }
.sg-shadow-xl { box-shadow: var(--shadow-xl); }

/* ===========================================
   END OF STYLE GUIDE
   =========================================== */

/* Starter Gemini - Section Groups Styling */

/* ============================================
   Typography - Font Family
   ============================================ */

/* Apply Rubik font to all text elements in questionnaire */
.starter-gemini-container,
.starter-gemini-container * {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   Container - Remove side padding on mobile
   ============================================ */

/* Remove horizontal padding on mobile for starter container */
.starter-gemini-container {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 2rem;
}

.starter-gemini-container .sg-container {
    padding-left: 0;
    padding-right: 0;
}

.starter-gemini-container .bottom-buttons.first {
    position: relative;
    background: none !important;
    padding: 0;
    box-shadow: none;
}

/* Add horizontal padding back on tablet+ */
@media (min-width: 768px) {
    .starter-gemini-container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    
    .starter-gemini-container .sg-container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* ============================================
   Intro Section - Messages
   ============================================ */

.starter-gemini-container .intro .msg {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
}

@media (min-width: 768px) {
    .starter-gemini-container .intro .msg {
        font-size: var(--text-lg);
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .intro .msg {
        font-size: var(--text-xl);
    }
}

/* ============================================
   Section Groups Container
   ============================================ */

.questions-container {
    margin-top: var(--space-8);
}

/* ============================================
   Section Group Titles (H3)
   ============================================ */

.question-group-title,
.factor-group-title {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--color-primary-dark);
    font-size: var(--text-2xl);      /* 24px */
    font-weight: var(--font-bold);    /* 700 - font-bold */
    line-height: var(--leading-tight);
    margin-bottom: var(--space-6);    /* 1.5rem / 24px */
    padding-bottom: var(--space-2);  /* 0.5rem / 8px */
    border-bottom: 2px solid var(--color-gray-300);
    position: relative;
}

.question-group-title::after,
.factor-group-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 60px;
    height: 2px;
    background-color: var(--color-primary);
}

/* ============================================
   Question Group Container - Standard Container (without border)
   ============================================ */

.question-group {
    /* Standard Container styling - without border */
    /* background: var(--color-bg-primary); */
    /* border-radius: var(--radius-2xl); */  /* 1rem */
    /* box-shadow: var(--shadow-md); */
    /* padding: var(--space-2) 0; */          /* Vertical padding only on mobile, no horizontal padding */
    margin-bottom: 2.5rem;              /* 40px - mb-10 equivalent */
    overflow: visible;  /* Allow content to be visible, don't clip text */
}

/* Hide question groups by default in preview mode (when not answered yet) */
.starter-gemini-container:not(.has-answers) .question-group:not(:first-of-type),
.starter-gemini-container:not(.has-answers) .question-group-title:not(:first-of-type),
.starter-gemini-container:not(.has-answers) .factor-group-title:not(:first-of-type) {
    display: none;
}

/* Hide intro personal question-wrap section by default in preview mode */
.starter-gemini-container:not(.has-answers) .intro.personal.question-wrap {
    display: none;
}

/* Show question groups with .show class */
.starter-gemini-container .question-group.show {
    display: block !important;
    animation: fadeInUp 0.6s ease-out;
}

.question-group > div{
    width: 100%;
    /* max-width: 50rem; */
}

.starter-gemini-container .question-group-title.show,
.starter-gemini-container .factor-group-title.show {
    display: block;
    animation: fadeInUp 0.6s ease-out;
}

/* Animation for smooth question group appearance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Show intro personal question-wrap with .show class */
.starter-gemini-container .intro.personal.question-wrap.show {
    display: block;
}


.question-group:last-child {
    margin-bottom: var(--space-8);      /* 2rem / 32px */
}

.question-group.optional {
    margin-top: var(--space-8);
}

/* ============================================
   Question Text - Responsive Sizing
   ============================================ */

/* Base size for mobile */
.starter-gemini-container .qs li > div:first-child .info label,
.starter-gemini-container .qs li > div:first-child label {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);      /* 16px on mobile */
    font-weight: var(--font-bold);     /* 700 - font-bold */
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
}

/* Larger on tablet */
@media (min-width: 768px) {
    .starter-gemini-container .qs li > div:first-child .info label,
    .starter-gemini-container .qs li > div:first-child label {
        font-size: var(--text-lg);    /* 18px on tablet */
    }
}

/* Significantly larger on desktop */
@media (min-width: 1024px) {
    .starter-gemini-container .qs li > div:first-child .info label,
    .starter-gemini-container .qs li > div:first-child label {
        font-size: var(--text-xl);    /* 20px on desktop */
    }
}

/* Even larger on wide screens */
@media (min-width: 1280px) {
    .starter-gemini-container .qs li > div:first-child .info label,
    .starter-gemini-container .qs li > div:first-child label {
        font-size: var(--text-2xl);  /* 24px on wide screens */
    }
}

/* ============================================
   Preference Answers Styling - Card Style
   ============================================ */

/* Container for preference answers - answers with custom-control (radiobox) */
.starter-gemini-container .qs li .answers.q-actions,
.starter-gemini-container .qs li .answers:has(.answer .custom-control) {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);  /* 1rem / 16px spacing between answers */
    width: 100%;  /* Full width */
    max-width: 100%;  /* No max-width restriction */
    overflow: visible;  /* Allow content to be fully visible */
}

/* Each answer option - card style (for answers with radiobox) */
.starter-gemini-container .qs li .answers .answer:has(.custom-control) {
    /* Card container styling */
    background: var(--color-bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);  /* 0.75rem / 12px */
    padding: var(--space-3) var(--space-2);  /* Reduced horizontal padding on mobile */
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: flex-start;  /* Align to start to prevent text clipping */
    gap: var(--space-2) var(--space-4);
    width: 100%;
    max-width: 100%;  /* Full width on mobile, no max-width restriction */
    justify-content: space-between;  /* Space between label and radio button */
    box-sizing: border-box;  /* Ensure padding is included in width */
    overflow: visible;  /* Allow text to be fully visible */
    word-wrap: break-word;  /* Break long words */
    min-width: 0;  /* Allow container to shrink below content size */
    flex-wrap: wrap;
    flex-direction: row;
}

/* Larger padding on wider screens */
@media (min-width: 768px) {
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) {
        padding: var(--space-3) var(--space-8);  /* Keep reduced vertical padding */
    }
    
    /* Row layout on tablet+ - span and help-block inline */
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label {
        flex-direction: row;  /* Row layout on tablet+ - span and help-block side by side */
        align-items: center;  /* Center align items */
        gap: var(--space-2);  /* Larger gap for row layout */
        flex-wrap: nowrap;  /* Prevent wrapping on larger screens */
    }
    
    /* Add max-width back on tablet+ for answer container */
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) {
        max-width: 42rem;  /* Limit width on tablet+ - ~672px */
        /* align-items: center; */  /* Center align on tablet+ */
        flex-direction: column;
    }
    
    /* Prevent text breaking on tablet+ */
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label > span {
        white-space: nowrap;  /* Prevent main text from breaking */
        flex-shrink: 0;  /* Don't shrink */
    }
    
    /* Prevent description breaking on tablet+ */
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label .help-block {
        display: inline;  /* Inline on tablet+ */
        white-space: nowrap;  /* Prevent description from breaking */
        flex-shrink: 0;  /* Don't shrink */
        width: auto;  /* Auto width on tablet+ */
        margin-right: var(--space-2);  /* Space before description */
    }
    
    /* Span width on tablet+ */
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label > span {
        width: auto;  /* Auto width on tablet+ */
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) {
        padding: var(--space-4) var(--space-6);  /* Slightly more vertical padding on desktop */
    }
}

/* Hover state */
.starter-gemini-container .qs li .answers .answer:has(.custom-control):hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Selected answer - colored background */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-md);
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .custom-control-label {
    color: var(--color-text-inverse);
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .custom-control-label span {
    color: var(--color-text-inverse);
}

/* Radio button styling in selected state */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .custom-control-input ~ .custom-control-label::before {
    border-color: var(--color-text-inverse);
    background-color: var(--color-text-inverse);
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Label text styling - groups span and help-block together */
.starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    flex: 1 1 0%;  /* Take all available space, can shrink to 0%, grow from 0% */
    display: flex;
    flex-direction: column;  /* Column layout - span and help-block stack together */
    align-items: flex-start;  /* Align items to start */
    gap: 0;  /* Gap between span and help-block */
    line-height: var(--leading-normal);
    min-width: 0;  /* Allow flex item to shrink below content size */
    max-width: 100%;  /* But don't exceed container */
    overflow: visible;  /* Allow content to be fully visible */
    /* word-wrap: break-word; */  /* Break long words */
    box-sizing: border-box;  /* Include padding in width calculation */
}

/* Main text span - allow breaking on mobile */
.starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label > span {
    white-space: normal;  /* Allow text to wrap on mobile */
    word-break: break-word;  /* Break long words if needed */
    word-wrap: break-word;  /* Additional word wrapping */
    overflow-wrap: break-word;  /* Break words that are too long */
    flex-shrink: 1;  /* Allow shrinking on mobile */
    width: 100%;  /* Full width within label container */
    max-width: 100%;  /* Ensure no max-width restriction */
    overflow: visible;  /* Ensure text is fully visible */
}

/* Larger text on wider screens */
@media (min-width: 768px) {
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label {
        font-size: var(--text-lg);
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label {
        font-size: var(--text-xl);
    }
}

/* Description text (smaller, secondary) - inline with main text */
.starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label .help-block {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);      /* 16px on mobile - larger than before */
    color: var(--color-text-secondary);
    margin: 0;
    font-weight: var(--font-normal);
    display: block;  /* Block display on mobile */
    white-space: normal;  /* Allow wrapping on mobile */
    /* word-break: break-word; */  /* Break long words if needed */
    word-wrap: break-word;  /* Additional word wrapping */
    overflow-wrap: break-word;  /* Break words that are too long */
    line-height: var(--leading-normal);
    width: 100%;  /* Full width within label container, aligns with span */
    max-width: 100%;  /* Ensure no max-width restriction */
    overflow: visible;  /* Ensure text is fully visible */
    text-overflow: clip;  /* Don't use ellipsis, show full text */
}

@media (min-width: 768px) {
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label .help-block {
        font-size: var(--text-lg);    /* 18px on tablet - larger than before */
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label .help-block {
        font-size: var(--text-lg);    /* 18px on desktop */
    }
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .custom-control-label .help-block {
    color: rgba(255, 255, 255, 0.9);
}

/* Custom range slider visibility when custom option is selected */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .price-range {
    /* Ensure price-range is visible */
    display: flex;
}

/* Range slider track - make it visible on purple background */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .range-slider input[type=range]::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Range slider thumb - make it visible on purple background */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .range-slider input[type=range]::-webkit-slider-thumb {
    background: var(--color-text-inverse) !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Range slider for Firefox */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .range-slider input[type=range]::-moz-range-track {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .range-slider input[type=range]::-moz-range-thumb {
    background: var(--color-text-inverse) !important;
    border: 2px solid var(--color-primary) !important;
}

/* Range slider for MS Edge */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .range-slider input[type=range]::-ms-track {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .range-slider input[type=range]::-ms-thumb {
    background: var(--color-text-inverse) !important;
    border: 2px solid var(--color-primary) !important;
}

/* Current content inputs and button - ensure visibility */
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .current-content span {
    color: var(--color-text-inverse) !important;
}
.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .current-content input {
    background: var(--color-text-inverse) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .current-content button {
    background: var(--color-text-inverse) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-text-inverse) !important;
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .current-content button:hover:not(:disabled) {
    background: var(--color-gray-100) !important;
    border-color: var(--color-gray-200) !important;
}

.starter-gemini-container .qs li .answers .answer:has(.custom-control-input:checked) .current-content button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Custom control wrapper */
.starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control {
    margin: 0;
    padding: 0;
    flex-shrink: 0;  /* Don't shrink radio button */
    flex-grow: 0;  /* Don't grow radio button */
    width: 100%;
    flex-basis: auto;  /* Natural size */
    min-width: 1em;  /* Minimum size for radio button */
    max-width: 100%;  /* Maximum size for radio button */
    /* order: 1; */  /* Radio button on the right side (RTL layout) */
    align-self: flex-start;  /* Align to start */
}

/* Label takes remaining space */
.starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control-label {
    flex: 1 1 100%;  /* Take all available space, can shrink to 0% */
    min-width: 0;  /* Allow flex item to shrink below content size */
    max-width: 100%;  /* But don't exceed container */
    overflow: visible;  /* Allow content to be fully visible */
}

/* ============================================
   Quality & Feature Answers Styling - Card Style
   ============================================ */

/* Container for Quality/Feature buttons */
.starter-gemini-container .qs li .btns.q-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);  /* 0.5rem / 8px spacing between buttons */
    width: 100%;  /* Full width on mobile */
    max-width: 100%;  /* No max-width restriction on mobile */
    overflow: visible;  /* Allow content to be fully visible */
}

/* Button groups - convert to card layout */
.starter-gemini-container .qs li .btns .btn-group-icon,
.starter-gemini-container .qs li .btns .btn-group-icon-text {
    display: flex;
    /* flex-direction: column; */
    gap: var(--space-2);
    width: 100%;
}

/* Each button - card style */
.starter-gemini-container .qs li .btns .btn-group-icon button{
    justify-content: space-between;
    justify-items: center;
}
.starter-gemini-container .qs li .btns .btn-group-icon button,
.starter-gemini-container .qs li .btns .btn-group-icon-text button {
    /* Card container styling */
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: var(--radius-xl) !important;  /* 0.75rem / 12px */
    padding: var(--space-3) var(--space-2) !important;  /* Reduced horizontal padding on mobile */
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex !important;
    align-items: center;  /* Align to start to prevent text clipping */
    gap: var(--space-3);
    width: 100% !important;
    max-width: 100% !important;  /* Full width on mobile */
    text-align: right;
    min-height: 3.5rem;
    box-shadow: none !important;
    overflow: visible !important;  /* Allow text to be fully visible */
    word-wrap: break-word !important;  /* Break long words */
    box-sizing: border-box !important;  /* Ensure padding is included in width */
}

/* Larger padding on wider screens */
@media (min-width: 768px) {
    .starter-gemini-container .qs li .btns .btn-group-icon button,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button {
        padding: var(--space-3) var(--space-8);
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .qs li .btns .btn-group-icon button,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button {
        padding: var(--space-4) var(--space-8);
    }
}

/* Hover state */
.starter-gemini-container .qs li .btns .btn-group-icon button:hover,
.starter-gemini-container .qs li .btns .btn-group-icon-text button:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Selected button - colored background */
.starter-gemini-container .qs li .btns .btn-group-icon button.selected,
.starter-gemini-container .qs li .btns .btn-group-icon-text button.selected {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Weight bars styling in selected state */
.starter-gemini-container .qs li .btns .btn-group-icon button.selected weight-bars,
.starter-gemini-container .qs li .btns .btn-group-icon-text button.selected weight-bars {
    border-color: var(--color-text-inverse);
}

/* Text content styling */
.starter-gemini-container .qs li .btns .btn-group-icon button span,
.starter-gemini-container .qs li .btns .btn-group-icon-text button span {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    white-space: normal;  /* Allow wrapping on mobile */
    word-break: break-word;  /* Break long words if needed */
    word-wrap: break-word;  /* Additional word wrapping */
    overflow-wrap: break-word;  /* Break words that are too long */
    overflow: visible;  /* Ensure text is fully visible */
    max-width: 100%;  /* Ensure no max-width restriction */
}

.starter-gemini-container .qs li .btns .btn-group-icon button span{
    text-align: center;
}

/* Button div container - no specific font styling needed, inherits from parent */

.starter-gemini-container .qs li .btns .btn-group-icon-text button div label {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    margin: 0;
    white-space: normal;  /* Allow wrapping on mobile */
    word-break: break-word;  /* Break long words if needed */
    word-wrap: break-word;  /* Additional word wrapping */
    overflow: visible;  /* Ensure text is fully visible */
    max-width: 100%;  /* Ensure no max-width restriction */
}

.starter-gemini-container .qs li .btns .btn-group-icon-text button div span {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    white-space: normal;  /* Allow wrapping on mobile */
    word-break: break-word;  /* Break long words if needed */
    word-wrap: break-word;  /* Additional word wrapping */
    overflow: visible;  /* Ensure text is fully visible */
    max-width: 100%;  /* Ensure no max-width restriction */
}

.starter-gemini-container .qs li .btns .btn-group-icon-text button div p {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base) !important;      /* 16px on mobile - override _buttons.css 15px, responsive sizing */
    font-weight: var(--font-normal);
    color: var(--color-text-secondary);
    margin: 0;
    /* margin-top: var(--space-1); */
    white-space: normal;
    word-break: break-word;  /* Break long words if needed */
    word-wrap: break-word;  /* Additional word wrapping */
    overflow-wrap: break-word;  /* Break words that are too long */
    /* line-height: var(--leading-normal); */
    width: 100%;  /* Full width to prevent clipping */
    max-width: 100%;  /* Ensure no max-width restriction */
    overflow: visible;  /* Ensure text is fully visible */
    text-overflow: clip;  /* Don't use ellipsis, show full text */
}

@media (min-width: 768px) {
    .starter-gemini-container .qs li .btns .btn-group-icon-text button div p {
        font-size: var(--text-lg) !important;    /* 18px on tablet */
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container, .starter-gemini-container *,
    .starter-gemini-container .qs li .question .content > p,
 .qs li .content > p,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button div p {
        font-size: var(--text-xl) !important;    /* 20px on desktop */
    }

    .bottom-buttons > *{
        max-width:20rem;
    }
   
}

/* Selected state text colors */
.starter-gemini-container .qs li .btns .btn-group-icon button.selected span,
.starter-gemini-container .qs li .btns .btn-group-icon-text button.selected span {
    color: var(--color-text-inverse) !important;
}

.starter-gemini-container .qs li .btns .btn-group-icon-text button.selected div label,
.starter-gemini-container .qs li .btns .btn-group-icon-text button.selected div span {
    color: var(--color-text-inverse) !important;
}

.starter-gemini-container .qs li .btns .btn-group-icon-text button.selected div p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Weight bars container */
.starter-gemini-container .qs li .btns .btn-group-icon weight-bars,
.starter-gemini-container .qs li .btns .btn-group-icon-text weight-bars {
    flex-shrink: 0;
    order: 1;  /* On the right side (RTL) */
    display: flex;
    align-items: center;
}

/* Weight bars in selected state - ensure visibility */
.starter-gemini-container .qs li .btns .btn-group-icon button.selected weight-bars > *,
.starter-gemini-container .qs li .btns .btn-group-icon-text button.selected weight-bars > * {
    background: var(--color-text-inverse) !important;
    border-color: var(--color-text-inverse) !important;
}

/* Larger text on wider screens */
@media (min-width: 768px) {
    .starter-gemini-container .qs li .btns .btn-group-icon button span,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button div span,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button div label {
        font-size: var(--text-lg);
        white-space: nowrap;  /* Prevent wrapping on tablet+ */
    }
    
    /* Add max-width back on tablet+ for buttons container */
    .starter-gemini-container .qs li .btns.q-actions {
        max-width: 42rem;  /* Limit width on tablet+ - ~672px */
    }
    
    /* Center align buttons on tablet+ */
    .starter-gemini-container .qs li .btns .btn-group-icon button,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button {
        align-items: center;  /* Center align on tablet+ */
        padding: var(--space-3) var(--space-8) !important;  /* Larger padding on tablet+ */
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .qs li .btns .btn-group-icon button span,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button div span,
    .starter-gemini-container .qs li .btns .btn-group-icon-text button div label {
        font-size: var(--text-xl);
    }
}

/* Remove default button group styling */
.starter-gemini-container .qs li .btns .btn-group-icon,
.starter-gemini-container .qs li .btns .btn-group-icon-text {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Remove button group connected borders */
.starter-gemini-container .qs li .btns .btn-group-icon button:not(:first-child),
.starter-gemini-container .qs li .btns .btn-group-icon-text button:not(:first-child) {
    border-top: 1px solid var(--color-gray-200) !important;
    border-radius: var(--radius-xl) !important;
}

.starter-gemini-container .qs li .btns .btn-group-icon button:first-child,
.starter-gemini-container .qs li .btns .btn-group-icon-text button:first-child {
    border-radius: var(--radius-xl) !important;
}

/* Never button (לא רלוונטי) - card style */
.starter-gemini-container .qs li .q-footer {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-start;
}

.starter-gemini-container .qs li .q-footer button.never {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-2) var(--space-6);
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    max-width: 42rem;
    width: 100%;
}

.starter-gemini-container .qs li .q-footer button.never:hover {
    border-color: var(--color-gray-300) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--color-gray-50) !important;
    color: var(--color-text-secondary) !important;
}

.starter-gemini-container .qs li .q-footer button.never.selected {
    background: var(--color-gray-400);
    border-color: var(--color-gray-400);
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-md);
}

/* ============================================
   Additional Text Elements
   ============================================ */

/* Answer labels in question info */
.starter-gemini-container .qs li .info .ans-label {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

/* Help links */
.starter-gemini-container .qs li .content a.helpme {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
}

/* Well Done section messages */
.starter-gemini-container .welldone .msg {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
}

@media (min-width: 768px) {
    .starter-gemini-container .welldone .msg {
        font-size: var(--text-xl);
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .welldone .msg {
        font-size: var(--text-2xl);
    }
}

/* ============================================
   Well Done Section - Checkbox Styling
   ============================================ */

/* Checkbox container in welldone section */
.starter-gemini-container .welldone .answers .custom-checkbox {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

/* Checkbox label text */
.starter-gemini-container .welldone .custom-checkbox label {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
}

@media (min-width: 768px) {
    .starter-gemini-container .welldone .custom-checkbox label {
        font-size: var(--text-lg);
    }
}

/* Checkbox box styling - ensure proper size and visibility */
.starter-gemini-container .welldone .custom-checkbox label::before {
    height: 18px;
    width: 18px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    background-color: var(--color-bg-primary);
    margin-left: var(--space-2);
    margin-bottom: -3px;
}

/* Checked state - purple background */
.starter-gemini-container .welldone .custom-checkbox input:checked + label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Checkmark icon - ensure it's visible */
.starter-gemini-container .welldone .custom-checkbox input:checked + label::after {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    color: var(--color-text-inverse);
    font-size: 11px;
    right: 0px;
    text-align: center;
    width: 18px;
    top: 6px;
    line-height: 1;
}

/* Help block (description) styling */
.starter-gemini-container .welldone .custom-checkbox .help-block {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--color-text-secondary);
    margin-right: 20px;
    margin-top: var(--space-1);
    line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
    .starter-gemini-container .welldone .custom-checkbox .help-block {
        font-size: var(--text-base);
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (min-width: 768px) {
    .question-group-title,
    .factor-group-title {
        margin-bottom: var(--space-6);
        font-size: var(--text-2xl);
    }
    
    .question-group {
        padding: var(--space-2);        /* Add horizontal padding back on tablet+ */
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .question-group-title,
    .factor-group-title {
        margin-bottom: var(--space-6);
        font-size: var(--text-2xl) !important;
    }
    
    .question-group {
        margin-bottom: 2.5rem;
    }

    .starter-gemini-container .qs li .answers .answer:has(.custom-control) .custom-control{
        gap: var(--space-2);
    }

    .custom-radio input{
    font-size: 16px !important;
    }
}


/* ============================================
   Bottom Buttons - Match New Design
   ============================================ */

/* Container background - light pinkish-purple */
.starter-gemini-container .bottom-buttons {
    background: #FAE6FF !important;
}

/* Button styling - lavender/blue-purple with white text */
.starter-gemini-container .bottom-buttons .btn {
    background: #8B7CDE !important;
    border: none !important;
    color: white !important;
    border-radius: var(--radius-lg) !important;
    padding: .75rem 1rem;
}

.starter-gemini-container .bottom-buttons .btn:hover:not(:disabled) {
    background: #7A6BC8 !important;
}

.starter-gemini-container .bottom-buttons .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Explain Section - Factors Summary
   ============================================ */

/* Hide questions and intro when explain is showing */
.starter-gemini-container.showing-explain .questions-container {
    display: none !important;
}

.starter-gemini-container.showing-explain .intro {
    display: none !important;
}

/* Explain section container */
.starter-gemini-container .factors-summary.explain {
    display: none;
    padding: var(--space-8) var(--space-4);
    background: var(--color-bg-primary);
    min-height: 50vh;
}

.starter-gemini-container .factors-summary.explain.show {
    display: block;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Prompt container */
.starter-gemini-container .factors-summary .prompt {
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--space-6) 0;
    width: 100%;
}

/* Message list */
.starter-gemini-container .factors-summary .prompt > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Individual message items */
.starter-gemini-container .factors-summary .prompt > ul > li.msg {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    animation: slideInUp 0.5s ease-out;
    margin-bottom: 0;
    width: 100%;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.starter-gemini-container .factors-summary .prompt > ul > li.msg:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Message label text */
.starter-gemini-container .factors-summary .prompt > ul > li.msg label {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    line-height: var(--leading-relaxed);
    width: 100%;
    margin: 0;
    text-align: right;
    display: block;
}

@media (min-width: 768px) {
    .starter-gemini-container .factors-summary .prompt > ul > li.msg label {
        font-size: var(--text-xl);
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .factors-summary .prompt > ul > li.msg label {
        font-size: var(--text-2xl);
    }
}

/* Factors list (consds) */
.starter-gemini-container .factors-summary .consds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

/* Individual factor item */
.starter-gemini-container .factors-summary .consds li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-xl);
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-primary-dark);
    transition: all 0.2s ease;
    opacity: 0;
    animation: fadeInScale 0.4s ease-out forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.starter-gemini-container .factors-summary .consds li:hover {
    background: var(--color-primary-100);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Factor icon */
.starter-gemini-container .factors-summary .consds li img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* Factor name */
.starter-gemini-container .factors-summary .consds li h4 {
    font-family: 'Rubik', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-primary-dark);
    margin: 0;
    line-height: var(--leading-normal);
}

@media (min-width: 768px) {
    .starter-gemini-container .factors-summary .consds li h4 {
        font-size: var(--text-lg);
    }
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .starter-gemini-container .factors-summary.explain {
        padding: var(--space-12) var(--space-8);
    }
    
    .starter-gemini-container .factors-summary .prompt {
        max-width: 48rem;
    }
}

@media (min-width: 1024px) {
    .starter-gemini-container .factors-summary.explain {
        padding: var(--space-16) var(--space-12);
    }
    
    .starter-gemini-container .factors-summary .prompt {
        max-width: 56rem;
    }
}

amain > .container-fluid + footer{
    margin-top: 20rem;
}