/* ========================================
   LOVESAC AI DISCOVERY TOOL - STYLESHEET
   ======================================== */

/* Lovesac Brand Fonts */
@font-face {
    font-family: 'museosans-normal';
    src: url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-300.otf') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-300.eot') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-300.woff2') format('woff2'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-300.woff') format('woff'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-300.svg') format('svg'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'museo-sans';
    src: url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-500.otf') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-500.eot') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-500.woff2') format('woff2'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-500.woff') format('woff'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-500.svg') format('svg'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'museosans-bold';
    src: url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-700.otf') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-700.eot') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-700.woff2') format('woff2'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-700.woff') format('woff'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-700.svg') format('svg'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'museosans-bolder';
    src: url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-900.otf') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-900.eot') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-900.woff2') format('woff2'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-900.woff') format('woff'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-900.svg') format('svg'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/museosans-900.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'millerdisplay-light';
    src: url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-light.otf') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-light.eot') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-light.woff2') format('woff2'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-light.woff') format('woff'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-light.svg') format('svg'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'millerdisplay-roman';
    src: url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-roman.otf') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-roman.eot') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-roman.woff2') format('woff2'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-roman.woff') format('woff'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-roman.svg') format('svg'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-roman.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'miller-display';
    src: url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-bold.otf') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-bold.eot') format('opentype'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-bold.woff2') format('woff2'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-bold.woff') format('woff'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-bold.svg') format('svg'),
        url('https://origin.xtlo.net/type=core:clientId=1747449748:coreAssetsVersion=187/media/millerdisplay-bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables - Lovesac Brand Colors */
:root {
    --link-color: #0098a7;
    --primary-button-hover: #00e0ff;
    --link-hover-color: #56585a;
    --background-color: white;
    --light-color: #f5f5f5;
    --dark-color: #56585a;
    --text-color: #56585a;
    --stealth-color: #373737;
    --body-font-family: 'museo-sans', 'museosans-normal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --heading-font-family: 'miller-display', 'millerdisplay-roman', Georgia, 'Times New Roman', Times, serif;
    --c-primary-color: #0098a7;
    --c-secondary-color: #56585a;
    --c-color-grey-1: #ccc;
    --c-color-grey-2: #d9d9d9;
    --c-color-grey-3: #f5f5f5;
    --c-color-grey-4: #a4a6a8;
    --c-color-grey-5: #707375;
    --c-color-blue-green-1: #1a5b60;
    --c-color-blue-green-2: #00808c;
    --c-color-blue-green-3: #00525a;
    --c-color-white: #fff;
    --c-color-black: #000;
    --c-font-weight-light: 300;
    --c-font-weight-regular: 400;
    --c-font-weight-semibold: 500;
    --c-font-weight-bold: 700;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--body-font-family);
    background-color: var(--light-color);
    color: var(--text-color);
    line-height: 1.6;
    font-weight: var(--c-font-weight-regular);
    height: 100vh;
    overflow: hidden;
}

html {
    height: 100%;
    overflow: hidden;
}

/* ========================================
   PHASE-BASED UI COMPONENTS
   ======================================== */

/* Phase Container */
.phase-container {
    width: 100%;
}

.phase-header {
    margin-bottom: 2rem;
}

.phase-header h2 {
    font-family: var(--heading-font-family);
    font-size: 1.8rem;
    font-weight: var(--c-font-weight-bold);
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.phase-description {
    font-size: 1rem;
    color: var(--c-color-grey-5);
    margin-bottom: 0;
}

.phase-questions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.phase-question {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Question title removed - Sactional Genius handles question presentation */

/* Icon Options (Phase 1) - Compact Grid Layout */
.icon-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    max-width: 100%;
}

.icon-option {
    border: 2px solid var(--c-color-grey-2);
    border-radius: 0;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.icon-option:hover {
    border-color: var(--c-primary-color);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.15);
}

.icon-option.selected {
    border-color: var(--c-primary-color);
    background-color: rgba(0, 152, 167, 0.05);
}

.icon-option-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-color-grey-3);
    border-radius: 0;
    font-size: 20px;
    overflow: hidden;
    position: relative;
}

.icon-option-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.icon-option-content h4 {
    font-size: 1rem;
    font-weight: var(--c-font-weight-semibold);
    margin-bottom: 0.25rem;
    color: var(--text-color);
    line-height: 1.2;
}

.icon-option-content p {
    font-size: 0.85rem;
    color: var(--c-color-grey-5);
    line-height: 1.3;
    margin: 0;
}

/* Shape Diagrams (Phase 2) - 2x2 Grid Layout */
.shape-diagrams-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.5rem;
    max-width: 100%;
    margin-bottom: 0.75rem;
}

.shape-diagram {
    border: 2px solid var(--c-color-grey-2);
    border-radius: 0;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shape-diagram:hover {
    border-color: var(--c-primary-color);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.15);
}

.shape-diagram.selected {
    border-color: var(--c-primary-color);
    background-color: rgba(0, 152, 167, 0.05);
}

.shape-visual {
    width: 60px;
    height: 45px;
    margin: 0 auto 0.5rem;
    background: var(--c-color-grey-3);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-diagram-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

/* Old shape placeholder CSS removed - now using actual images */

.shape-info h4 {
    font-size: 0.85rem;
    font-weight: var(--c-font-weight-semibold);
    margin-bottom: 0.15rem;
    color: var(--text-color);
    line-height: 1.1;
}

.shape-info p {
    font-size: 0.7rem;
    color: var(--c-color-grey-5);
    line-height: 1.2;
    margin: 0;
}

/* Comfort Options (Phase 3) - Centered Layout for Seating Style */
.comfort-options-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 100%;
    flex-wrap: wrap;
}

.comfort-option {
    border: 2px solid var(--c-color-grey-2);
    border-radius: 0;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    margin-bottom: 0;
    flex: 1;
    min-width: 240px;
    max-width: 320px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.comfort-option:hover {
    border-color: var(--c-primary-color);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.15);
}

.comfort-option.selected {
    border-color: var(--c-primary-color);
    background-color: rgba(0, 152, 167, 0.05);
}

.comfort-preview {
    width: 100%;
    height: 80px;
    margin-bottom: 0.75rem;
    border-radius: 0;
    overflow: hidden;
    background: var(--c-color-grey-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comfort-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.comfort-info h4 {
    font-size: 1rem;
    font-weight: var(--c-font-weight-semibold);
    margin-bottom: 0.5rem;
    color: var(--text-color);
    line-height: 1.2;
}

.comfort-info p {
    font-size: 0.85rem;
    color: var(--c-color-grey-5);
    line-height: 1.4;
    margin: 0;
}

/* Style Images (Phase 3) - Compact Grid Layout with Real Images */
.style-images-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    max-width: 100%;
}

.style-image {
    border: 2px solid var(--c-color-grey-2);
    border-radius: 0;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    text-align: center;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.style-image:hover {
    border-color: var(--c-primary-color);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.15);
}

.style-image.selected {
    border-color: var(--c-primary-color);
    background-color: rgba(0, 152, 167, 0.05);
}

.style-preview {
    width: 100%;
    height: 80px;
    margin-bottom: 0.75rem;
    border-radius: 0;
    overflow: hidden;
    background: var(--c-color-grey-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.style-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.style-info h4 {
    font-size: 0.95rem;
    font-weight: var(--c-font-weight-semibold);
    margin: 0 0 0.25rem;
    color: var(--text-color);
    line-height: 1.2;
}

.style-info p {
    font-size: 0.8rem;
    color: var(--c-color-grey-5);
    line-height: 1.3;
    margin: 0;
}

/* Checkboxes (Phase 4) - Compact Grid Layout */
.checkboxes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    max-width: 100%;
}

.checkbox-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 2px solid var(--c-color-grey-2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    min-height: 50px;
}

.checkbox-option:hover {
    border-color: var(--c-primary-color);
    background-color: rgba(0, 152, 167, 0.02);
}

.checkbox-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
    accent-color: var(--c-primary-color);
    cursor: pointer;
}

.checkbox-label {
    font-size: 0.95rem;
    font-weight: var(--c-font-weight-regular);
    color: var(--text-color);
    cursor: pointer;
}

/* Color Swatches (Phase 4) - Horizontal Color + Text Layout */
.color-swatches-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    max-width: 100%;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.color-swatch {
    border: 2px solid var(--c-color-grey-2);
    border-radius: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 140px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.color-swatch:hover {
    border-color: var(--c-primary-color);
    box-shadow: 0 4px 16px rgba(0, 152, 167, 0.2);
    transform: translateY(-2px);
}

.color-swatch.selected {
    border-color: var(--c-primary-color);
    background-color: rgba(0, 152, 167, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 152, 167, 0.3);
}

.swatch-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.swatch-grays { background: linear-gradient(135deg, #6b7280, #374151); }
.swatch-beiges { background: linear-gradient(135deg, #d2b48c, #deb887); }
.swatch-blues { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.swatch-earth { background: linear-gradient(135deg, #8b4513, #a0522d); }
.swatch-whites { background: linear-gradient(135deg, #f8fafc, #e2e8f0); }

.swatch-label {
    font-size: 0.85rem;
    font-weight: var(--c-font-weight-medium);
    color: var(--text-color);
    line-height: 1.2;
    margin: 0;
    flex: 1;
}

/* Remove scrollbar styling for color swatches - no longer needed */
.color-swatches-container::-webkit-scrollbar {
    display: none;
}

/* Scrollbar styling for color swatches */
.color-swatches-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.color-swatches-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.color-swatches-container::-webkit-scrollbar-thumb {
    background: rgba(0, 152, 167, 0.3);
    border-radius: 3px;
}

.color-swatches-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 152, 167, 0.5);
}

/* Professional Phase 4 Design */

/* Clean Single-Column Flow - Compact */
.phase-4-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
}

/* Selection Groups - Compact */
.selection-group {
    background: rgba(248, 250, 252, 0.4);
    border: 1px solid rgba(0, 152, 167, 0.08);
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.selection-group:hover {
    border-color: rgba(0, 152, 167, 0.15);
    background: rgba(248, 250, 252, 0.6);
}

.selection-group-header {
    font-size: 0.8rem;
    font-weight: var(--c-font-weight-medium);
    color: var(--c-secondary-color);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Fabric Preview Integration - Compact */
.fabric-preview-section {
    background: white;
    border: 1px solid rgba(0, 152, 167, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0;
}

/* Household Chips - Refined */
.household-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    justify-content: flex-start;
}

.household-chip {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--c-color-grey-3);
    border-radius: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    white-space: nowrap;
}

.household-chip:hover {
    border-color: var(--c-primary-color);
    box-shadow: 0 2px 6px rgba(0, 152, 167, 0.15);
}

.household-chip.selected {
    border-color: var(--c-primary-color);
    background: rgba(0, 152, 167, 0.1);
    color: var(--c-primary-color);
}

.chip-label {
    font-weight: var(--c-font-weight-medium);
}

.chip-check {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--c-primary-color);
}

/* Color Pills */
.color-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
    justify-content: flex-start;
}

.color-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--c-color-grey-3);
    border-radius: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    white-space: nowrap;
}

.color-pill:hover {
    border-color: var(--c-primary-color);
    box-shadow: 0 2px 6px rgba(0, 152, 167, 0.15);
}

.color-pill.selected {
    border-color: var(--c-primary-color);
    background: rgba(0, 152, 167, 0.1);
    box-shadow: 0 2px 8px rgba(0, 152, 167, 0.2);
}

.pill-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.pill-label {
    font-weight: var(--c-font-weight-medium);
    color: var(--text-color);
}

/* Free-Form Input Section */
.free-form-section {
    margin-top: 2rem;
    border-top: 1px solid var(--c-color-grey-2);
    padding-top: 1.5rem;
}

.free-form-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--c-color-grey-2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--c-color-grey-5);
    transition: all 0.3s ease;
    width: auto;
}

.free-form-toggle-btn:hover {
    border-color: var(--c-primary-color);
    color: var(--c-primary-color);
}

.toggle-arrow {
    transition: transform 0.3s ease;
}

.free-form-input-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.free-form-input-container.expanded {
    max-height: 200px;
    margin-top: 1rem;
}

.free-form-textarea {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 2px solid var(--c-color-grey-2);
    border-radius: 8px;
    font-family: var(--body-font-family);
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.free-form-textarea:focus {
    outline: none;
    border-color: var(--c-primary-color);
}

.free-form-counter {
    text-align: right;
    font-size: 0.8rem;
    color: var(--c-color-grey-4);
    margin-top: 0.5rem;
}

/* Phase Confidence Message */
.phase-confidence-message {
    display: none;
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.08) 0%, rgba(0, 224, 255, 0.05) 100%);
    border: 1px solid rgba(0, 152, 167, 0.15);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.phase-confidence-message.show {
    display: block;
    animation: slideUp 0.5s ease-out;
}

/* ========================================
   SACTIONAL GENIUS CHAT INTERFACE
   ======================================== */

.sactional-genius-chat {
    background: #ffffff;
    border-radius: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
    padding: 12px 16px;
    position: relative;
    border: 1px solid rgba(0, 152, 167, 0.1);
}

.sactional-genius-chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary-color) 0%, #00e0ff 100%);
    border-radius: 0;
}

.chat-avatar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 152, 167, 0.08);
}

.avatar-container {
    position: relative;
}

.avatar-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--c-primary-color) 0%, #00e0ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    animation: avatarPulse 3s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(0, 152, 167, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 6px rgba(0, 152, 167, 0);
    }
}

.chat-identity {
    flex: 1;
}

.chat-name {
    font-family: var(--heading-font-family);
    font-size: 16px;
    font-weight: var(--c-font-weight-bold);
    color: var(--c-primary-color);
    margin-bottom: 2px;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-color-secondary);
}

.status-indicator {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: statusBlink 2s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.chat-messages {
    min-height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.chat-message {
    margin-bottom: 0;
    animation: messageSlideIn 0.6s ease-out;
}

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

.ai-message .message-content {
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.06) 0%, rgba(0, 224, 255, 0.03) 100%);
    border: 1px solid rgba(0, 152, 167, 0.08);
    border-radius: 0;
    padding: 12px;
    position: relative;
}

.ai-message .message-content::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 6px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.06) 0%, rgba(0, 224, 255, 0.03) 100%);
    border-left: 1px solid rgba(0, 152, 167, 0.08);
    border-bottom: 1px solid rgba(0, 152, 167, 0.08);
    transform: rotate(-45deg);
    border-radius: 0 0 0 1px;
}

.message-content p {
    margin: 0;
    line-height: 1.4;
    font-size: 13px;
}

.message-content p + p {
    margin-top: 6px;
}

.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 152, 167, 0.04);
    border-radius: 0;
    border: 1px solid rgba(0, 152, 167, 0.08);
    font-size: 12px;
    color: var(--text-color-secondary);
    font-style: italic;
}

.typing-dots {
    display: flex;
    gap: 2px;
}

.typing-dot {
    width: 3px;
    height: 3px;
    background: var(--c-primary-color);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Enhanced question container to work with chat */
.question-container {
    background: rgba(248, 250, 252, 0.8);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 152, 167, 0.08);
}

/* Mobile responsiveness for chat interface */
@media (max-width: 768px) {
    .sactional-genius-chat {
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: 10px;
    }
    
    .chat-avatar {
        gap: 6px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    
    .avatar-icon {
        width: 28px;
        height: 28px;
    }
    
    .chat-name {
        font-size: 14px;
    }
    
    .chat-status {
        font-size: 11px;
    }
    
    .message-content {
        padding: 10px;
        font-size: 12px;
    }
    
    .ai-message .message-content {
        border-radius: 10px 10px 10px 3px;
    }
}

@media (max-width: 480px) {
    .sactional-genius-chat {
        margin-bottom: 10px;
        padding: 8px 10px;
        border-radius: 8px;
    }
    
    .chat-avatar {
        gap: 6px;
        margin-bottom: 6px;
        padding-bottom: 6px;
    }
    
    .avatar-icon {
        width: 24px;
        height: 24px;
    }
    
    .chat-name {
        font-size: 13px;
    }
    
    .chat-status {
        font-size: 10px;
    }
    
    .message-content {
        padding: 8px 10px;
        font-size: 11px;
    }
    
    .ai-message .message-content {
        border-radius: 8px 8px 8px 2px;
    }
}

/* ========================================
   LAYOUT COMPONENTS
   ======================================== */

/* Main App Container - Two Panel Layout */
.app-container {
    display: flex;
    height: 100vh;
    max-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    gap: 2rem;
    padding: 1rem;
    overflow: hidden;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

/* Overlay container for recommendations loading */
.recommendations-loading-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.recommendations-loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Loading spinner animation */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--c-color-grey-2);
    border-top: 3px solid var(--c-primary-color);
    border-radius: 50%;
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading text */
.loading-text {
    font-size: 1rem;
    color: var(--c-primary-color);
    font-weight: var(--c-font-weight-semibold);
    text-align: center;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Wizard Panel - Left Side on Desktop */
.wizard-panel {
    flex: 1;
    min-width: 0;
    background: var(--c-color-white);
    border-radius: 0;
    padding: 0;
    /* Removed box-shadow to eliminate dark outline */
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100vh - 2rem);
    overflow: hidden;
}

/* Fixed Header Area - Breadcrumbs + Title */
.wizard-fixed-header {
    flex-shrink: 0;
    background: var(--c-color-white);
    padding: 2rem 2rem 1rem 2rem;
    /* Removed border-bottom to eliminate dark line */
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Scrollable Content Area - Questions + Confidence */
.wizard-scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    min-height: 0;
}

/* Custom scrollbar for wizard content - minimal */
.wizard-scrollable-content::-webkit-scrollbar {
    width: 3px;
}

.wizard-scrollable-content::-webkit-scrollbar-track {
    background: transparent;
}

.wizard-scrollable-content::-webkit-scrollbar-thumb {
    background: var(--c-color-grey-1);
    border-radius: 2px;
    opacity: 0.5;
}

.wizard-scrollable-content::-webkit-scrollbar-thumb:hover {
    background: var(--c-color-grey-4);
    opacity: 0.8;
}

/* Fixed Footer Area - Continue Button */
.wizard-fixed-footer {
    flex-shrink: 0;
    background: linear-gradient(to top, var(--c-color-white) 70%, transparent);
    padding: 1.5rem 2rem 2rem 2rem;
    position: sticky;
    bottom: 0;
    z-index: 50;
}

/* Recommendations Panel - Right Side on Desktop */
.recommendations-panel {
    flex: 1;
    min-width: 0;
    background: var(--c-color-white);
    border-radius: 0;
    padding: 0;
    /* Removed box-shadow to eliminate dark outline */
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100vh - 2rem);
    overflow: hidden;
}

/* Scrollable Content Area - Takes up most space, scrolls */
.recommendations-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 2rem 1rem 2rem;
    position: relative; /* Added for loading overlay positioning */
}

/* Fixed Footer Area - Stays at bottom, doesn't scroll */
.recommendations-fixed-footer {
    flex-shrink: 0;
    background: var(--background-color);
    padding: 0.75rem 2rem 1rem 2rem;
    /* Removed border-top and box-shadow to eliminate dark lines */
}

/* Custom scrollbar for recommendations content - more minimal */
.recommendations-content::-webkit-scrollbar {
    width: 3px;
}

.recommendations-content::-webkit-scrollbar-track {
    background: transparent;
}

.recommendations-content::-webkit-scrollbar-thumb {
    background: var(--c-color-grey-1);
    border-radius: 2px;
    opacity: 0.5;
}

.recommendations-content::-webkit-scrollbar-thumb:hover {
    background: var(--c-color-grey-4);
    opacity: 0.8;
}

/* ========================================
   WIZARD PANEL COMPONENTS  
   ======================================== */

/* Wizard Header */
.wizard-header {
    padding: 0.75rem 0 0.5rem 0;
    /* Removed border-bottom to eliminate dark line */
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%);
}

.header-brand {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.brand-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.brand-divider {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent, var(--c-color-grey-4), transparent);
    opacity: 0.6;
}

.brand-tagline {
    font-family: var(--body-font-family);
    font-size: 0.875rem;
    font-weight: var(--c-font-weight-semibold);
    color: var(--c-primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.brand-tagline::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--c-primary-color);
    border-radius: 50%;
    opacity: 0.7;
}

.header-content h1 {
    font-family: var(--heading-font-family);
    font-size: 2rem;
    font-weight: var(--c-font-weight-bold);
    color: var(--c-secondary-color);
    line-height: 1.2;
    margin-bottom: 0;
    background: linear-gradient(135deg, var(--c-secondary-color) 0%, var(--c-color-grey-5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wizard-subtitle {
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-weight: var(--c-font-weight-regular);
    color: var(--c-color-grey-5);
    line-height: 1.5;
    max-width: 480px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .wizard-header {
        padding: 1rem 0 0.75rem 0;
    }
    
    .header-brand {
        margin-bottom: 1rem;
        gap: 0.5rem;
    }
    
    .brand-logo {
        height: 28px;
    }
    
    .brand-tagline {
        font-size: 0.75rem;
    }
    
    .header-content h1 {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .wizard-header {
        padding: 0.75rem 0 0.5rem 0;
    }
    
    .brand-logo {
        height: 24px;
    }
    
    .brand-tagline {
        font-size: 0.7rem;
    }
    
    .header-content h1 {
        font-size: 1.5rem;
    }
}

/* ========================================
   BREADCRUMB COMPONENTS
   ======================================== */

.breadcrumb-container {
    padding: 0rem 0.5rem;
    margin-bottom: 1.2rem;
    background: transparent;
    border-bottom: none;
}

.breadcrumb-progress-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

.breadcrumb-steps {
    justify-self: center;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    position: relative;
}

/* Old progress bar removed - using integrated design */
.progress-bar {
    display: none;
}

.progress-fill {
    display: none;
}

/* Redesigned Phase Progress Indicators with Full Width and Connecting Lines */
.phase-progress-indicators {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    position: relative;
    padding: 0.1rem 0.75rem;
}

/* Removed connecting lines as requested */

.phase-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.phase-indicator:hover:not(.current) {
    transform: translateY(-1px);
}

.phase-indicator-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 152, 167, 0.15);
    border: 2px solid rgba(0, 152, 167, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin-bottom: 0.1rem;
}

.phase-indicator.current .phase-indicator-dot {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--c-primary-color) 0%, var(--c-color-blue-green-2) 100%);
    border: 3px solid white;
    box-shadow: 0 0 0 3px var(--c-primary-color), 0 4px 12px rgba(0, 152, 167, 0.3);
    transform: scale(1.1);
    margin-bottom: 0.05rem;
}

.phase-indicator.completed .phase-indicator-dot {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--c-color-blue-green-2) 0%, #00b4cc 100%);
    border: 2px solid var(--c-color-blue-green-2);
    margin-bottom: 0.08rem;
}

.phase-indicator.completed .phase-indicator-dot::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7px;
    color: white;
    font-weight: bold;
    line-height: 1;
}

.phase-indicator-label {
    font-size: 0.65rem;
    color: rgba(0, 152, 167, 0.6);
    text-align: center;
    line-height: 1;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    margin-top: 0.5rem;
}

.phase-indicator.current .phase-indicator-label {
    color: var(--c-primary-color);
    font-weight: 600;
    font-size: 0.7rem;
}

.phase-indicator.completed .phase-indicator-label {
    color: var(--c-color-blue-green-2);
    font-weight: 500;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .breadcrumb-container {
        padding: 0rem 0.5rem;
        margin-bottom: 0.8rem;
    }
    
    /* Phase 3 Comfort Options - Stack vertically on mobile */
    .comfort-options-container {
        flex-direction: column;
        align-items: center;
    }
    
    .comfort-option {
        min-width: 100%;
        max-width: 100%;
        min-height: 160px;
    }
    
    .comfort-preview {
        height: 70px;
    }
    
    /* Phase 3 Style Images - Adjust for mobile */
    .style-images-container {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .style-image {
        min-height: 140px;
    }
    
    .style-preview {
        height: 70px;
    }
    
    .phase-progress-indicators {
        padding: 0.05rem 0.5rem;
        max-width: 100%;
    }
    
    /* Mobile connecting lines removed */
    
    .phase-indicator-dot {
        width: 10px;
        height: 10px;
        margin-bottom: 0.05rem;
    }
    
    .phase-indicator.current .phase-indicator-dot {
        width: 16px;
        height: 16px;
        margin-bottom: 0.02rem;
    }
    
    .phase-indicator.completed .phase-indicator-dot {
        width: 13px;
        height: 13px;
        margin-bottom: 0.03rem;
    }
    
    .phase-indicator.completed .phase-indicator-dot::after {
        font-size: 6px;
    }
    
    .phase-indicator-label {
        font-size: 0.6rem;
        margin-top: 0.4rem;
    }
    
    .phase-indicator.current .phase-indicator-label {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb-container {
        padding: 0.15rem 0;
    }
    
    .breadcrumb-progress {
        padding: 0 0.5rem;
        gap: 0.4rem;
    }
    

    
    .phase-progress-indicators {
        padding: 0.2rem 0.3rem;
    }
    
    .phase-indicator-label {
        font-size: 0.55rem;
        margin-top: 0.3rem;
    }
    
    .phase-indicator.current .phase-indicator-label {
        font-size: 0.6rem;
    }
}

/* Remove the old "Current step" indicator */
.phase-progress-indicators [aria-current="step"]::after {
    display: none;
}

/* Question Container */
.question-container {
    flex: 1;
    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
}

.question-container.transitioning {
    opacity: 0;
    transform: translateX(-20px) scale(0.98);
    filter: blur(2px);
}

/* Enhanced Phase Transition Animations */
.phase-container {
    /* Removed automatic animation to prevent unwanted initial animation */
    opacity: 1;
    transform: none;
}

@keyframes phaseSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Phase content staggered animation for questions */
.phase-question {
    opacity: 0;
    transform: translateY(15px);
    animation: phaseQuestionSlideIn 0.4s ease-out forwards;
}

.phase-question:nth-child(1) { animation-delay: 0.1s; }
.phase-question:nth-child(2) { animation-delay: 0.2s; }
.phase-question:nth-child(3) { animation-delay: 0.3s; }

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

/* Phase header animation */
.phase-header {
    opacity: 0;
    transform: translateY(-10px);
    animation: phaseHeaderSlideIn 0.4s ease-out 0.05s forwards;
}

@keyframes phaseHeaderSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Free-form section animation */
.free-form-section {
    opacity: 0;
    transform: translateY(10px);
    animation: freeFormSlideIn 0.4s ease-out 0.4s forwards;
}

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

/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
    .question-container,
    .phase-container,
    .phase-question,
    .phase-header,
    .free-form-section {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
    
    .question-container.transitioning {
        transform: none !important;
        filter: none !important;
    }
    
    .phase-container {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

.question-placeholder h2 {
    font-family: var(--heading-font-family);
    font-size: 1.8rem;
    color: var(--stealth-color);
    margin-bottom: 1.5rem;
    font-weight: var(--c-font-weight-semibold);
    line-height: 1.3;
    transition: color 0.2s ease;
}

/* Input Controls */
.input-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Primary Buttons Container - Center the buttons */
.primary-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto 0.5rem auto;
}

.primary-button {
    background: var(--c-color-blue-green-2);
    color: var(--c-color-white);
    border: none;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--body-font-family);
}

.primary-button:hover {
    background: var(--c-color-blue-green-1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.3);
}

.primary-button:active {
    transform: translateY(0);
}

.primary-button:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
    background: var(--c-color-blue-green-1);
}

.primary-button:disabled {
    background: var(--c-color-grey-4);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Confidence Message styles removed */

/* Size Slider */
.size-slider {
    margin-top: 1rem;
}

.size-slider label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: var(--c-font-weight-semibold);
    color: var(--dark-color);
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slider-label {
    font-size: 0.9rem;
    color: var(--c-color-grey-5);
}

#size-adjustment {
    flex: 1;
    height: 6px;
    background: var(--c-color-grey-2);
    outline: none;
    -webkit-appearance: none;
}

#size-adjustment::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--c-color-blue-green-2);
    cursor: pointer;
}

#size-adjustment::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--c-color-blue-green-2);
    cursor: pointer;
    border: none;
}

#size-adjustment:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

#size-adjustment::-webkit-slider-thumb:hover {
    background: var(--c-color-blue-green-1);
    transform: scale(1.1);
}

#size-adjustment::-moz-range-thumb:hover {
    background: var(--c-color-blue-green-1);
    transform: scale(1.1);
}

/* ========================================
   RECOMMENDATIONS PANEL COMPONENTS
   ======================================== */

/* Recommendations Header */
.recommendations-header h3 {
    font-family: var(--heading-font-family);
    font-size: 1.8rem;
    color: var(--stealth-color);
    margin-bottom: 0.5rem;
    font-weight: var(--c-font-weight-semibold);
}

.recommendations-subtitle {
    color: var(--c-color-grey-5);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* Hero Configuration Card */
.hero-card {
    background: var(--c-color-white);
    border: 2px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(135deg, var(--c-primary-color) 0%, var(--c-color-blue-green-2) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 152, 167, 0.08);
    animation: heroGlow 4s ease-in-out infinite;
}

/* Subtle pulse animation for hero card */
@keyframes heroGlow {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(0, 152, 167, 0.08);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 152, 167, 0.12);
    }
}

.hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.02) 0%, rgba(0, 128, 140, 0.02) 100%);
    pointer-events: none;
    border-radius: inherit;
}

.hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 152, 167, 0.15);
    background-image: linear-gradient(white, white), linear-gradient(135deg, var(--c-primary-color) 0%, var(--c-color-blue-green-1) 100%);
}

.hero-card:focus-within {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.hero-card .card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-color);
    margin-bottom: 1rem;
}

.hero-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.hero-card h4 {
    font-family: var(--heading-font-family);
    font-size: 1.5rem;
    color: var(--stealth-color);
    margin-bottom: 0.5rem;
    font-weight: var(--c-font-weight-semibold);
}

.card-description {
    color: var(--c-color-grey-5);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.spec {
    background: var(--light-color);
    color: var(--dark-color);
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: var(--c-font-weight-semibold);
}

.card-price {
    font-size: 1.25rem;
    font-weight: var(--c-font-weight-bold);
    color: var(--stealth-color);
    margin-bottom: 1rem;
}

.card-actions {
    display: flex;
    gap: 1rem;
}

.primary-action {
    background: var(--c-color-blue-green-2);
    color: var(--c-color-white);
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    font-family: var(--body-font-family);
}

.primary-action:hover {
    background: var(--c-color-blue-green-1);
    transform: translateY(-1px);
}

.primary-action:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.primary-action:active {
    transform: translateY(0);
}

.secondary-action {
    background: transparent;
    color: var(--c-color-blue-green-2);
    border: 1px solid var(--c-color-blue-green-2);
    padding: 0.75rem 1.5rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    font-family: var(--body-font-family);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
}

.secondary-action:hover {
    background: var(--c-color-blue-green-2);
    color: var(--c-color-white);
}

.secondary-action:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.secondary-action:active {
    transform: translateY(1px);
}

/* Recommendation List */
.recommendation-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recommendation-card {
    background: var(--c-color-white);
    border: 1px solid var(--c-color-grey-2);
    padding: 1rem;
    display: flex;
    gap: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.recommendation-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.recommendation-card:focus-within {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.recommendation-card:active {
    transform: translateY(0);
}

.card-image-small {
    flex-shrink: 0;
    width: 140px;
    height: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-color);
}

.card-image-small img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.card-content-small {
    flex: 1;
}

.card-content-small h5 {
    font-family: var(--heading-font-family);
    font-size: 1.1rem;
    color: var(--stealth-color);
    margin-bottom: 0.25rem;
    font-weight: var(--c-font-weight-semibold);
}

.card-description-small {
    color: var(--c-color-grey-5);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.card-specs-small {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.spec-small {
    background: var(--light-color);
    color: var(--dark-color);
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--c-font-weight-semibold);
}

.card-price-small {
    font-size: 1rem;
    font-weight: var(--c-font-weight-bold);
    color: var(--stealth-color);
    margin-bottom: 0.5rem;
}

.card-actions-small {
    display: flex;
    gap: 0.5rem;
}

.primary-action-small {
    background: var(--c-color-blue-green-2);
    color: var(--c-color-white);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--body-font-family);
}

.primary-action-small:hover {
    background: var(--c-color-blue-green-1);
}

.primary-action-small:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.primary-action-small:active {
    transform: translateY(1px);
}

.secondary-action-small {
    background: transparent;
    color: var(--c-color-blue-green-2);
    border: 1px solid var(--c-color-blue-green-2);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--body-font-family);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
}

.secondary-action-small:hover {
    background: var(--c-color-blue-green-2);
    color: var(--c-color-white);
}

.secondary-action-small:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.secondary-action-small:active {
    transform: translateY(1px);
}

/* ========================================
   RECOMMENDATIONS PANEL CONTROL AREA
   ======================================== */

/* Control Area - In fixed footer, compact design */
.control-area {
    background: var(--c-color-white);
    border: 1px solid var(--c-color-grey-2);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.control-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.control-section:last-child {
    margin-bottom: 0;
}

.control-label {
    font-size: 0.875rem;
    font-weight: var(--c-font-weight-semibold);
    color: var(--c-secondary-color);
    min-width: 50px;
}

/* Size Controls - New Slider Design */
.size-control-section {
    background: var(--c-color-grey-3);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0;
}

.size-slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.size-end-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--c-color-white);
    border: 1px solid var(--c-color-grey-2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    min-width: 60px;
}

.size-end-btn:hover {
    background: var(--c-primary-color);
    border-color: var(--c-primary-color);
    color: var(--c-color-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 152, 167, 0.3);
}

.size-end-btn:focus {
    box-shadow: 0 0 0 2px rgba(0, 152, 167, 0.3);
}

.size-end-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 152, 167, 0.3);
}

.size-end-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.size-end-btn:disabled:hover {
    background: var(--c-color-white);
    border-color: var(--c-color-grey-2);
    color: inherit;
    transform: none;
    box-shadow: none;
}

.size-btn-label {
    font-size: 0.7rem;
    font-weight: var(--c-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.size-slider-track {
    flex: 1;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    margin: 0 0.5rem;
}

.size-slider-rail {
    width: 100%;
    height: 4px;
    background: var(--c-color-grey-2);
    border-radius: 2px;
    position: absolute;
}

.size-slider-fill {
    height: 4px;
    background: linear-gradient(90deg, var(--c-primary-color) 0%, var(--c-color-blue-green-2) 100%);
    border-radius: 2px;
    position: absolute;
    transition: width 0.3s ease;
    width: 50%;
}

.size-slider-markers {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.size-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-color-grey-1);
    border: 2px solid var(--c-color-white);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.size-marker.active {
    background: var(--c-primary-color);
    border-color: var(--c-color-white);
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(0, 152, 167, 0.4);
}

.size-slider-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: left 0.3s ease;
    pointer-events: none;
}

.size-handle-dot {
    width: 100%;
    height: 100%;
    background: var(--c-color-white);
    border: 3px solid var(--c-primary-color);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 152, 167, 0.3);
    transition: all 0.2s ease;
}

.size-slider-handle:hover .size-handle-dot {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(0, 152, 167, 0.4);
}

/* Filter Pills */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 1.5rem;
}

.filter-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--c-primary-color);
    color: var(--c-color-white);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: var(--c-font-weight-regular);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.filter-pill:hover {
    background: var(--c-color-blue-green-2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-pill:focus {
    box-shadow: 0 0 0 2px rgba(0, 152, 167, 0.3);
}

.filter-pill:active {
    transform: translateY(0);
}

.filter-pill-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    color: var(--c-color-white);
    cursor: pointer;
    transition: background 0.2s ease;
}

.filter-pill-remove:hover {
    background: rgba(255, 255, 255, 0.5);
}

.filter-pill-remove svg {
    width: 10px;
    height: 10px;
}

/* Removed filter-pills-placeholder */

/* Control Confidence Message */
.control-confidence-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid var(--c-color-grey-2);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--c-secondary-color);
    font-weight: var(--c-font-weight-regular);
    min-width: 0;
    flex: 1;
}

.control-confidence-message svg {
    width: 14px;
    height: 14px;
    color: var(--c-primary-color);
    flex-shrink: 0;
}

#control-confidence-text {
    line-height: 1.3;
}

/* Responsive Design for Control Area */
@media (max-width: 768px) {
    .recommendations-panel {
        height: auto;
        max-height: none;
    }
    
    .recommendations-fixed-footer {
        padding: 0.75rem 1rem 1rem 1rem;
    }
    
    .recommendations-content {
        padding: 1rem;
        overflow-y: visible;
    }
    
    /* Mobile: Make recommendations loading overlay cover full screen */
    .recommendations-loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    /* Mobile horizontal scrolling for recommendations */
    .recommendation-list {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 0.5rem;
        scroll-snap-type: x mandatory;
    }
    
    .recommendation-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
        flex-direction: column;
    }
    
    .card-image-small {
        width: 100%;
        height: 140px;
    }
    
    /* Hide scrollbar on mobile but keep functionality */
    .recommendation-list::-webkit-scrollbar {
        display: none;
    }
    
    .recommendation-list {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .control-area {
        padding: 0.5rem;
    }
    
    .control-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .control-label {
        min-width: auto;
    }
    
    .size-control-section {
        padding: 0.5rem;
    }
    
    .size-slider-container {
        gap: 0.75rem;
    }
    
    .size-end-btn {
        min-width: 50px;
        padding: 0.4rem;
    }
    
    .size-btn-label {
        font-size: 0.65rem;
    }
    
    .size-slider-track {
        margin: 0 0.25rem;
    }
    
    .filter-pills {
        width: 100%;
    }
    
    .control-confidence-message {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .control-area {
        padding: 0.25rem;
    }
    
    .control-section {
        margin-bottom: 0.5rem;
    }
    
    .size-control-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .filter-pill {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
    
    .control-confidence-message {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0.5rem;
    }
    
    .wizard-panel {
        height: 100vh;
    }
    
    .wizard-fixed-header {
        padding: 1rem 1rem 0.5rem 1rem;
    }
    
    .wizard-scrollable-content {
        padding: 1rem;
    }
    
    .wizard-fixed-footer {
        padding: 1rem 1rem 1.5rem 1rem;
    }
    
    .wizard-header h1 {
        font-size: 2rem;
    }
    
    .question-placeholder h2 {
        font-size: 1.5rem;
    }
    
    .input-controls {
        gap: 0.75rem;
    }
    
    .primary-button {
        min-height: 50px;
        font-size: 1rem;
    }
    
    .hero-card .card-image {
        height: 180px;
    }
    
    .hero-badge {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
        border-radius: 0 0 0 6px;
    }
    
    .card-actions {
        flex-direction: column;
    }
    
        /* Desktop: Keep vertical layout for recommendation cards in desktop mobile view */
    .recommendation-card:not(.mobile-horizontal) {
        flex-direction: column;
    }

    .recommendation-card:not(.mobile-horizontal) .card-image-small {
        width: 100%;
        height: 140px;
    }

    .card-actions-small {
        flex-direction: column;
    }

    .primary-action-small,
    .secondary-action-small {
        width: 100%;
    }

    .image-cards-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .image-card {
        min-height: 120px;
        padding: 0.75rem;
    }
    
    .style-preview {
        height: 60px;
    }
    
    .style-shape {
        width: 40px;
        height: 24px;
    }
    
    .style-accent {
        width: 6px;
        height: 6px;
        top: 8px;
        right: 12px;
    }

    .color-palette-container {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }

    .icon-choice .icon {
        font-size: 1.5rem;
    }

    .upgrade-card-content {
        padding: 1rem;
        gap: 1rem;
    }
    
    .upgrade-image-section {
        width: 60px;
        height: 60px;
    }
    
    .upgrade-info-section h4 {
        font-size: 1rem;
    }
    
    .upgrade-info-section h5 {
        font-size: 0.9rem;
    }
    
    .upgrade-info-section p {
        font-size: 0.8rem;
    }
    
    .cart-toggle-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        min-width: 70px;
    }
    
    .cart-quantity-controls {
        gap: 0.4rem;
        padding: 0.2rem;
    }
    
    .cart-qty-btn {
        min-width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .card-description,
    .card-description-small {
        font-size: 0.8rem;
    }


    
    /* Breadcrumb responsive styles */
    .breadcrumb-progress {
        grid-template-columns: 1fr minmax(200px, auto) 1fr;
        align-items: center;
        gap: 1rem;
    }
    

    
    .breadcrumb-steps {
        justify-self: center;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        width: 100%;
        max-width: 200px;
    }
    

}

/* ========================================
   ADDITIONAL COMPONENT STYLES
   ======================================== */

/* Image Cards Container */
.image-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.image-card {
    background: var(--c-color-white);
    border: 2px solid var(--c-color-grey-2);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
}

.image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--c-color-grey-4);
}

.image-card.selected {
    border-color: var(--c-color-blue-green-2);
    background: rgba(0, 152, 167, 0.05);
    box-shadow: 0 0 0 1px rgba(0, 152, 167, 0.2);
}

.image-card:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.image-card:active {
    transform: translateY(0);
}

.image-placeholder {
    width: 100%;
    height: 80px;
    background: var(--light-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-color-grey-4);
    font-size: 0.8rem;
    border-radius: 4px;
}

.card-label {
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-semibold);
    color: var(--dark-color);
    margin-top: 0.5rem;
}

/* Style Preview Components */
.style-preview {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.style-shape {
    width: 50px;
    height: 30px;
    position: relative;
}

.style-accent {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 15px;
}

/* Modern Style Preview */
.modern-preview {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modern-shape {
    background: var(--c-color-grey-5);
    border-radius: 2px;
}

.modern-accent {
    background: var(--c-color-blue-green-2);
}

/* Traditional Style Preview */
.traditional-preview {
    background: linear-gradient(135deg, #faf8f5 0%, #f1ede6 100%);
}

.traditional-shape {
    background: #8b6f47;
    border-radius: 8px;
}

.traditional-accent {
    background: #d4af37;
}

/* Casual Style Preview */
.casual-preview {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}

.casual-shape {
    background: var(--c-color-grey-4);
    border-radius: 4px;
}

.casual-accent {
    background: var(--c-primary-color);
}

/* Icon Choices Container */
.icon-choices-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.icon-choice {
    background: var(--c-color-white);
    border: 1px solid var(--c-color-grey-2);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 120px;
}

.icon-choice:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.icon-choice.selected {
    border-color: var(--c-color-blue-green-2);
    background: rgba(0, 152, 167, 0.05);
}

.icon-choice:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.icon-choice:active {
    transform: translateY(0);
}

.icon-choice .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.choice-label {
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-semibold);
    color: var(--dark-color);
}

/* Checklist Items */
/* Checklist Items - Override primary-button styles when both classes are present */
.primary-button.checklist-item {
    background: var(--c-color-white) !important;
    color: var(--stealth-color) !important;
    border: 1px solid var(--c-color-grey-2);
    padding: 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-weight: var(--c-font-weight-regular);
    text-align: left;
    min-height: auto;
}

.primary-button.checklist-item:hover {
    background: var(--light-color) !important;
    color: var(--stealth-color) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.primary-button.checklist-item.selected {
    border-color: var(--c-color-blue-green-2) !important;
    background: rgba(0, 152, 167, 0.05) !important;
    color: var(--stealth-color) !important;
}

.primary-button.checklist-item:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
    background: var(--c-color-white) !important;
    color: var(--stealth-color) !important;
}

/* Color Palette Container */
.color-palette-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.color-swatch {
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-color-grey-2);
}

.color-swatch:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.color-swatch.selected {
    border-color: var(--c-color-blue-green-2);
    transform: scale(1.05);
}

.color-swatch:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.color-swatch:active {
    transform: scale(1);
}

.color-label {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--dark-color);
    text-align: center;
    width: 100px;
}

/* Upgrade Cards Container */
.upgrade-cards-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.upgrade-card {
    background: var(--c-color-white);
    border: 1px solid var(--c-color-grey-2);
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.upgrade-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.upgrade-card.selected {
    border-color: var(--c-color-blue-green-2);
    background: rgba(0, 152, 167, 0.05);
}

.upgrade-card:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.upgrade-card-content {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    gap: 1.5rem;
}

.upgrade-image-section {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    position: relative;
}

.upgrade-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.upgrade-info-section {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.upgrade-info-section h4 {
    font-family: var(--heading-font-family);
    font-size: 1.1rem;
    color: var(--stealth-color);
    margin: 0 0 0.25rem 0;
    font-weight: var(--c-font-weight-semibold);
}

.upgrade-info-section h5 {
    font-family: var(--heading-font-family);
    font-size: 1rem;
    color: var(--c-color-grey-6);
    margin: 0 0 0.5rem 0;
    font-weight: var(--c-font-weight-medium);
}

.upgrade-info-section p {
    color: var(--c-color-grey-5);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.upgrade-controls-section {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Cart Toggle Button (for StealthTech) */
.cart-toggle-btn {
    background: var(--c-color-white);
    border: 2px solid var(--c-color-grey-3);
    color: var(--c-color-grey-6);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.cart-toggle-btn:hover {
    border-color: var(--c-primary-color);
    color: var(--c-primary-color);
}

.cart-toggle-btn.active {
    background: var(--c-primary-color);
    border-color: var(--c-primary-color);
    color: var(--c-color-white);
}

.cart-toggle-btn.active:hover {
    background: var(--c-secondary-color);
    border-color: var(--c-secondary-color);
}

/* Cart Quantity Controls (for Recliner & Storage) */
.cart-quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--c-color-grey-3);
    background: var(--c-color-white);
    padding: 0.25rem;
}

.cart-qty-btn {
    background: var(--c-color-white);
    border: 1px solid var(--c-color-grey-3);
    color: var(--c-color-grey-6);
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-qty-btn:hover:not(:disabled) {
    border-color: var(--c-primary-color);
    color: var(--c-primary-color);
}

.cart-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-qty-display {
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-grey-6);
    min-width: 20px;
    text-align: center;
}

/* ========================================
   FABRIC GALLERY STYLES
   ======================================== */

.fabric-gallery-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.fabric-section-header {
    font-size: 0.8rem;
    font-weight: var(--c-font-weight-medium);
    color: var(--c-secondary-color);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.fabric-section-header.recommended-header {
    color: var(--c-primary-color);
    font-size: 1.1rem;
    margin-top: 0;
}

.fabric-gallery-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(248, 250, 252, 0.5);
    padding: 0.4rem 0;
    user-select: none;
    margin: 0;
    border: 1px solid rgba(0, 152, 167, 0.1);
}

.fabric-gallery-row {
    display: flex;
    gap: 0.5rem;
    padding: 0 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: transform 0.3s ease;
    cursor: grab;
    min-height: 120px;
}

.fabric-gallery-row:active {
    cursor: grabbing;
}

.fabric-gallery-row::-webkit-scrollbar {
    display: none;
}

.fabric-gallery-row.recommended-row {
    padding: 0.75rem 3rem;
    background: rgba(0, 152, 167, 0.05);
    border-radius: 0;
    margin: 0.5rem 0;
}

.fabric-scroll-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    color: var(--c-color-grey-4);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
}

.fabric-scroll-chevron:hover {
    color: var(--c-primary-color);
    background: rgba(255, 255, 255, 0.95);
}

.fabric-scroll-chevron:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

.fabric-scroll-chevron.left {
    left: 0.5rem;
}

.fabric-scroll-chevron.right {
    right: 0.5rem;
}

.fabric-scroll-chevron svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.fabric-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem;
    border: 2px solid var(--c-color-grey-2);
    border-radius: 6px;
    background: var(--c-color-white);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 90px;
    max-width: 90px;
    min-height: 110px;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.fabric-swatch:hover {
    border-color: var(--c-primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.2);
}

.fabric-swatch.selected {
    border-color: var(--c-primary-color);
    background: rgba(0, 152, 167, 0.05);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.25);
    transform: translateY(-2px);
}

.fabric-swatch:focus {
    outline: none;
    border-color: var(--c-primary-color);
    box-shadow: 0 0 0 3px rgba(0, 152, 167, 0.1);
}

.fabric-swatch:active {
    transform: translateY(-1px);
}

.fabric-image-container {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.4rem;
    border: 2px solid var(--c-color-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fabric-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.fabric-label {
    text-align: center;
    font-size: 0.65rem;
    font-weight: var(--c-font-weight-medium);
    color: var(--c-secondary-color);
    line-height: 1.1;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 0.25rem;
}

.fabric-swatch.selected .fabric-label {
    color: var(--c-primary-color);
    font-weight: var(--c-font-weight-semibold);
}

.fabric-swatch.recommended {
    border-color: var(--c-primary-color);
    box-shadow: 0 2px 8px rgba(0, 152, 167, 0.1);
}

.recommended-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--c-primary-color);
    color: white;
    font-size: 0.6rem;
    font-weight: var(--c-font-weight-semibold);
    padding: 0.2rem 0.4rem;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}

.color-match-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #4F46E5;
    color: white;
    font-size: 0.6rem;
    font-weight: var(--c-font-weight-semibold);
    padding: 0.2rem 0.4rem;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 9;
}

.fabric-swatch.color-match {
    border-color: #4F46E5;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

/* Fabric Gallery Scroll Indicators */
.fabric-gallery-scroll-indicator {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.25rem;
    opacity: 0.7;
}

.fabric-gallery-scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-color-grey-3);
    transition: all 0.3s ease;
}

.fabric-gallery-scroll-dot.active {
    background: var(--c-primary-color);
    transform: scale(1.2);
}

/* Next Button */
.next-button {
    background: var(--c-color-blue-green-2);
    color: var(--c-color-white);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
    width: 100%;
    font-family: var(--body-font-family);
}

.next-button:hover {
    background: var(--c-color-blue-green-1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.3);
}

.next-button:focus {
    outline: 2px solid var(--c-primary-color);
    outline-offset: 2px;
}

.next-button:active {
    transform: translateY(0);
}

/* Completion Message */
.completion-message {
    text-align: center;
    padding: 2rem;
}

.completion-message h2 {
    font-family: var(--heading-font-family);
    color: var(--stealth-color);
    margin-bottom: 1rem;
    font-weight: var(--c-font-weight-semibold);
}

.completion-message p {
    color: var(--c-color-grey-5);
    font-size: 1.1rem;
}

/* Selected States */
.question-container {
    animation: fadeIn 0.5s ease-in-out;
}

.primary-button.selected,
.image-card.selected,
.icon-choice.selected,
.primary-button.checklist-item.selected,
.color-swatch.selected,
.upgrade-card.selected,
.fabric-swatch.selected {
    border-color: var(--c-color-blue-green-2);
    background: rgba(0, 152, 167, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.2);
}

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

/* Additional Responsive Design */
@media (min-width: 769px) and (max-width: 1024px) {
    .app-container {
        gap: 1.5rem;
    }
    
    .wizard-panel,
    .recommendations-panel {
        padding: 1.5rem;
    }
    
    /* Phase 5: Optimize upgrade cards for tablet */
    .upgrade-cards-container {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .upgrade-card-content {
        padding: 1.25rem;
        gap: 1.25rem;
    }
    
    .upgrade-image-section {
        width: 70px;
        height: 70px;
    }
    
    .upgrade-info-section h4 {
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }
    
    .upgrade-info-section h5 {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }
    
    .upgrade-info-section p {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
        .image-cards-container {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .icon-options-container {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.4rem;
    }

    .shape-diagrams-container {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.4rem;
    }

    .comfort-options-container {
        gap: 1rem;
        justify-content: center;
    }
    
    .comfort-option {
        min-width: 280px;
        max-width: 380px;
    }

    .style-images-container {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.4rem;
    }

    .checkboxes-container {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.4rem;
    }

    .color-swatches-container {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.4rem;
    }

    .color-palette-container {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    
    .fabric-gallery-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .fabric-gallery-row.recommended-row {
        display: flex;
        overflow-x: auto;
        grid-template-columns: none;
        gap: 0.75rem;
        padding: 0.75rem;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    .fabric-gallery-row.recommended-row .fabric-swatch {
        flex: 0 0 90px;
        min-width: 90px;
    }
}

/* Desktop Optimization for Phase 5 */
@media (min-width: 1025px) {
    /* Phase 5: More compact layout for desktop */
    .upgrade-cards-container {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .upgrade-card-content {
        padding: 1rem;
        gap: 1rem;
    }
    
    .upgrade-image-section {
        width: 60px;
        height: 60px;
    }
    
    .upgrade-info-section h4 {
        font-size: 0.95rem;
        margin-bottom: 0.15rem;
    }
    
    .upgrade-info-section h5 {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }
    
    .upgrade-info-section p {
        font-size: 0.8rem;
        line-height: 1.25;
        margin: 0;
    }
    
    .cart-toggle-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
        min-width: 70px;
    }
    
    .cart-quantity-controls {
        padding: 0.2rem;
        gap: 0.4rem;
    }
    
    .cart-qty-btn {
        min-width: 28px;
        height: 28px;
        font-size: 0.85rem;
        padding: 0.2rem 0.4rem;
    }
    
    .cart-qty-display {
        font-size: 0.85rem;
        min-width: 18px;
    }
}

@media (max-width: 768px) {
    .image-cards-container {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    
    .color-palette-container {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    }
    
    .fabric-gallery-wrapper {
        padding: 0.5rem 0;
    }
    
    .fabric-gallery-row {
        padding: 0 2.5rem;
        gap: 0.5rem;
    }
    
    .fabric-gallery-row.recommended-row {
        padding: 0.5rem 2.5rem;
    }
    
    .fabric-scroll-button {
        width: 36px;
        height: 36px;
    }
    
    .fabric-scroll-button.left {
        left: 0.25rem;
    }
    
    .fabric-scroll-button.right {
        right: 0.25rem;
    }
    
    .fabric-swatch {
        min-width: 90px;
        max-width: 90px;
        min-height: 100px;
        padding: 0.4rem;
    }
    
    .fabric-image-container {
        width: 45px;
        height: 45px;
    }
    
    .icon-choice .icon {
        font-size: 1.5rem;
    }
    
    .upgrade-card {
        padding: 1rem;
    }
    
    .card-description,
    .card-description-small {
        font-size: 0.85rem;
    }
    

}

@media (max-width: 480px) {
    .app-container {
        padding: 0.25rem;
        gap: 0.5rem;
    }
    
    .wizard-panel,
    .recommendations-panel {
        padding: 1rem;
    }
    
    .wizard-header h1 {
        font-size: 1.8rem;
    }
    
    .question-placeholder h2 {
        font-size: 1.3rem;
    }
    
    .icon-options-container {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.3rem;
    }
    
    .icon-option-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 0.5rem;
    }

    .shape-diagrams-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
.shape-diagram {
        min-height: 90px;
        padding: 0.4rem;
    }
    
    .shape-visual {
        width: 50px;
        height: 35px;
        margin-bottom: 0.3rem;
    }

    .comfort-options-container {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .comfort-option {
        min-height: 140px;
    }
    
    .comfort-preview {
        height: 60px;
    }

    .style-images-container {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 0.3rem;
    }

    .checkboxes-container {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .color-swatches-container {
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
    }

    .color-palette-container {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    }
    
    .color-swatch {
        min-width: 75px;
        padding: 0.5rem;
    }
    
    .swatch-color {
        width: 35px;
        height: 35px;
    }
    
    .fabric-gallery-container {
        max-width: 100%;
        padding: 0;
    }
    
    .fabric-gallery-wrapper {
        padding: 0.4rem 0;
    }
    
    .fabric-gallery-row {
        padding: 0 2rem;
        gap: 0.4rem;
    }
    
    .fabric-gallery-row.recommended-row {
        padding: 0.4rem 2rem;
    }
    
    .fabric-scroll-button {
        width: 32px;
        height: 32px;
    }
    
    .fabric-scroll-button.left {
        left: 0.1rem;
    }
    
    .fabric-scroll-button.right {
        right: 0.1rem;
    }
    
    .fabric-swatch {
        min-width: 80px;
        max-width: 80px;
        min-height: 100px;
        padding: 0.3rem;
    }
    
    .fabric-image-container {
        width: 45px;
        height: 45px;
    }
    
    .fabric-label {
        font-size: 0.6rem;
        line-height: 1.1;
    }
    
    .recommended-badge {
        font-size: 0.5rem;
        padding: 0.15rem 0.25rem;
        top: -4px;
        right: -4px;
    }
    
    .fabric-section-header {
        font-size: 0.9rem;
        margin: 0.75rem 0 0.5rem 0;
    }
    
    .icon-choice {
        min-width: 80px;
        padding: 0.75rem;
    }
    
    .icon-choice .icon {
        font-size: 1.25rem;
    }
    
    .upgrade-card-content {
        padding: 0.75rem;
        gap: 0.75rem;
        flex-direction: column;
        text-align: center;
    }
    
    .upgrade-image-section {
        width: 50px;
        height: 50px;
        align-self: center;
    }
    
    .upgrade-info-section {
        text-align: center;
    }
    
    .upgrade-info-section h4 {
        font-size: 0.9rem;
    }
    
    .upgrade-info-section h5 {
        font-size: 0.8rem;
    }
    
    .upgrade-info-section p {
        font-size: 0.75rem;
    }
    
    .cart-toggle-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        min-width: 60px;
    }
    
    .cart-quantity-controls {
        gap: 0.3rem;
        padding: 0.15rem;
    }
    
    .cart-qty-btn {
        min-width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    /* Mobile styles for new compact components */
    .household-chips-container {
        gap: 0.3rem;
    }

    .household-chip {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .color-pills-container {
        gap: 0.3rem;
        justify-content: flex-start;
    }

    .color-pill {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .pill-color {
        width: 14px;
        height: 14px;
    }
    
    .fabric-gallery-row {
        gap: 0.3rem;
        padding: 0 1.5rem;
        min-height: 100px;
    }
    
    /* Mobile: Stack Phase 4 layout vertically */
    .phase-4-layout {
        gap: 0.75rem;
    }
    
    .selection-group {
        padding: 0.6rem;
        margin-bottom: 0.6rem;
    }
    
    .selection-group-header {
        font-size: 0.75rem;
        margin-bottom: 0.4rem;
    }
    
    .fabric-preview-section {
        padding: 0.6rem;
    }
}

/* Touch feedback for mobile devices */
.primary-button.touch-active,
.image-card.touch-active,
.icon-choice.touch-active,
.color-swatch.touch-active,
.upgrade-card.touch-active,
.fabric-swatch.touch-active {
    transform: scale(0.98);
    opacity: 0.8;
    transition: all 0.1s ease;
}

/* Ensure smooth click transitions */
.primary-button,
.image-card,
.icon-choice,
.color-swatch,
.upgrade-card,
.fabric-swatch {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Active state improvements for all interactive elements */
.primary-button:active,
.image-card:active,
.icon-choice:active,
.color-swatch:active,
.upgrade-card:active {
    transform: scale(0.95);
}

/* Selected state improvements */
.primary-button.selected {
    background: var(--c-color-blue-green-1) !important;
    box-shadow: 0 0 0 3px rgba(0, 152, 167, 0.3);
}

.image-card.selected,
.icon-choice.selected,
.color-swatch.selected,
.upgrade-card.selected {
    border-color: var(--c-primary-color);
    box-shadow: 0 0 0 3px rgba(0, 152, 167, 0.3);
    transform: translateY(-2px);
}

/* Hero Badge - Top Pick indicator */
.hero-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    background: linear-gradient(135deg, var(--c-primary-color) 0%, var(--c-color-blue-green-2) 100%);
    color: var(--c-color-white);
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: var(--c-font-weight-semibold);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 0 0 0 8px;
    box-shadow: 0 2px 8px rgba(0, 152, 167, 0.3);
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-badge svg {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}

/* ========================================
   CONTINUE BUTTON (STICKY)
   ======================================== */

/* Inline Text Input Container */
.inline-text-input-container {
    margin-bottom: 0.5rem;
    padding: 0;
}

.text-input-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--c-color-grey-2);
    border-radius: 0;
    padding: 4px 6px 4px 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.text-input-wrapper:focus-within {
    border-color: var(--c-primary-color);
    box-shadow: 0 2px 12px rgba(0, 152, 167, 0.15);
}

.inline-text-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--body-font-family);
    font-size: 0.9rem;
    padding: 12px 8px;
    color: var(--text-color-primary);
}

.inline-text-input::placeholder {
    color: var(--c-color-grey-4);
    font-style: italic;
}

.text-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--c-primary-color);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 152, 167, 0.3);
}

.text-submit-button:hover {
    background: #007a8c;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.4);
}

.text-submit-button:active {
    transform: scale(0.95);
}

.text-submit-button:disabled {
    background: var(--c-color-grey-3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}



.navigation-buttons-container {
    /* Container now lives inside wizard-fixed-footer */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

.back-button {
    flex: 1;
    background: var(--c-color-grey-2);
    color: var(--c-color-grey-6);
    border: 1px solid var(--c-color-grey-3);
    padding: 1rem 1.5rem;
    border-radius: 0;
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.back-button:hover:not(:disabled) {
    background: var(--c-color-grey-3);
    color: var(--c-color-grey-7);
    transform: translateY(-1px);
}

.back-button:active:not(:disabled) {
    transform: translateY(0);
}

.back-button:disabled {
    background: var(--c-color-grey-1);
    color: var(--c-color-grey-3);
    cursor: not-allowed;
    transform: none;
}

.back-button svg {
    transition: transform 0.2s ease;
}

.back-button:hover:not(:disabled) svg {
    transform: translateX(-2px);
}

.continue-button {
    flex: 1;
    background: var(--c-primary-color);
    color: var(--c-color-white);
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0;
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-weight: var(--c-font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 152, 167, 0.3);
}

.continue-button:hover:not(:disabled) {
    background: var(--c-color-blue-green-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 152, 167, 0.4);
}

.continue-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 152, 167, 0.3);
}

.continue-button:disabled {
    background: var(--c-color-grey-2);
    color: var(--c-color-grey-4);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.continue-button[aria-label*="Skip"] {
    background: rgba(0, 152, 167, 0.7);
    opacity: 0.85;
}

.continue-button[aria-label*="Skip"]:hover:not(:disabled) {
    background: rgba(0, 152, 167, 0.85);
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 152, 167, 0.25);
}

.continue-button svg {
    transition: transform 0.2s ease;
}

.continue-button:hover:not(:disabled) svg {
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .inline-text-input-container {
        margin-bottom: 0.25rem;
        padding: 0;
    }
    
    .text-input-wrapper {
        padding: 3px 5px 3px 12px;
    }
    
    .inline-text-input {
        font-size: 0.85rem;
        padding: 10px 6px;
    }
    
    .text-submit-button {
        width: 32px;
        height: 32px;
    }
    
    .navigation-buttons-container {
        gap: 0.75rem;
        padding: 0;
        margin: 0;
    }
    
    .back-button,
    .continue-button {
        padding: 1.25rem 1.5rem;
        font-size: 1.1rem;
    }
}

/* ========================================
   END OF STYLESHEET
   ======================================== */

/* Confidence Message Component - Cohesive with left panel chat styling */
.confidence-message {
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.06) 0%, rgba(0, 224, 255, 0.03) 100%);
    border: 1px solid rgba(0, 152, 167, 0.08);
    border-radius: 12px 12px 12px 3px;
    padding: 12px;
    margin-bottom: 16px;
    position: relative;
    overflow: visible;
}

/* Chat bubble tail to match left panel styling */
.confidence-message::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 6px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.06) 0%, rgba(0, 224, 255, 0.03) 100%);
    border-left: 1px solid rgba(0, 152, 167, 0.08);
    border-bottom: 1px solid rgba(0, 152, 167, 0.08);
    transform: rotate(-45deg);
    border-radius: 0 0 0 1px;
}

.confidence-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--c-primary-color);
    flex-shrink: 0;
    margin-right: 8px;
    vertical-align: top;
    margin-top: 1px;
}

.confidence-message-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
    margin: 0;
    font-weight: var(--c-font-weight-regular);
    display: flex;
    align-items: flex-start;
}

/* Animation for confidence message - matches left panel animation */
.confidence-message {
    animation: messageSlideIn 0.6s ease-out;
}

/* Use the same keyframes as left panel chat messages */
@keyframes confidenceSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsiveness for confidence message - matches left panel styling */
@media (max-width: 768px) {
    .confidence-message {
        padding: 10px;
        margin-bottom: 12px;
        border-radius: 10px 10px 10px 3px;
    }
    
    .confidence-message-text {
        font-size: 12px;
    }
    
    .confidence-message-icon {
        width: 16px;
        height: 16px;
    }

    .confidence-message-icon svg {
        width: 16px;
        height: 16px;
    }

    .confidence-message::before {
        left: 4px;
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .confidence-message {
        padding: 8px 10px;
        margin-bottom: 10px;
        border-radius: 8px 8px 8px 3px;
    }
    
    .confidence-message-text {
        font-size: 11px;
        line-height: 1.3;
    }
    
    .confidence-message-icon {
        width: 14px;
        height: 14px;
    }

    .confidence-message-icon svg {
        width: 14px;
        height: 14px;
    }

    .confidence-message::before {
        left: 3px;
        width: 5px;
        height: 5px;
    }
}

/* Question Context Message Component */
.question-context-message {
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.08) 0%, rgba(0, 224, 255, 0.05) 100%);
    border: 1px solid rgba(0, 152, 167, 0.15);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.question-context-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary-color) 0%, var(--primary-button-hover) 100%);
}

.question-context-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.question-context-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--c-primary-color);
}

.question-context-title {
    font-family: var(--heading-font-family);
    font-size: 14px;
    font-weight: var(--c-font-weight-semibold);
    color: var(--c-primary-color);
    margin: 0;
}

.question-context-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    margin: 0;
    font-weight: var(--c-font-weight-regular);
}

/* Animation for question context message */
.question-context-message {
    animation: questionContextSlideIn 0.5s ease-out;
}

@keyframes questionContextSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsiveness for question context message */
@media (max-width: 768px) {
    .question-context-message {
        padding: 12px 14px;
        margin-bottom: 16px;
    }
    
    .question-context-title {
        font-size: 11px;
    }
    
    .question-context-text {
        font-size: 12px;
        line-height: 1.3;
    }
    
    .question-context-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .question-context-message {
        padding: 10px 12px;
        margin-bottom: 14px;
    }
    
    .question-context-title {
        font-size: 10px;
    }
    
    .question-context-text {
        font-size: 11px;
    }
    
    .question-context-icon {
        width: 14px;
        height: 14px;
    }
} 

/* Recommendation List */
.recommendations-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    color: var(--c-color-grey-5);
    font-size: 0.9rem;
    font-weight: var(--c-font-weight-semibold);
}

.recommendations-section-header svg {
    color: var(--c-color-blue-green-2);
}

/* Mobile styles */
@media (max-width: 768px) {
    .recommendations-section-header {
        padding: 0.75rem 1rem;
        background: var(--c-color-white);
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 1px solid var(--c-color-grey-2);
    }
}

.recommendation-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Old mobile breadcrumb styles removed - using new professional design */

/* ========================================
   EXPANDED RECOMMENDATIONS MODAL (PHASE 6)
   ======================================== */

.expanded-recommendations-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.expanded-recommendations-modal.show {
    opacity: 1;
    visibility: visible;
}

.expanded-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.expanded-modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 1400px;
    height: 90vh;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.expanded-recommendations-modal.show .expanded-modal-content {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.expanded-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.expanded-header-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.expanded-header-content p {
    font-size: 16px;
    color: #64748b;
    margin: 0;
}

.expanded-modal-close {
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.expanded-modal-close:hover {
    background: #e2e8f0;
    transform: scale(1.05);
}

.close-icon {
    font-size: 24px;
    color: #64748b;
    line-height: 1;
}

/* Modal Controls */
.expanded-modal-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.expanded-controls-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.recommendation-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.count-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--lovesac-blue);
    line-height: 1;
}

.count-label {
    font-size: 16px;
    color: #64748b;
    font-weight: 500;
}

.expanded-controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sort-select {
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 180px;
}

.sort-select:hover, .sort-select:focus {
    border-color: var(--lovesac-blue);
    outline: none;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-toggle:hover, .filter-toggle.active {
    border-color: var(--lovesac-blue);
    background: #eff6ff;
    color: var(--lovesac-blue);
}

.filter-icon {
    font-size: 16px;
}

/* Filters Panel */
.expanded-filters-panel {
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    animation: slideDown 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filters-content {
    padding: 24px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-label {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
}

.filter-checkbox:hover {
    color: #1f2937;
}

.filter-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.filter-checkbox input[type="checkbox"]:checked {
    background: var(--lovesac-blue);
    border-color: var(--lovesac-blue);
}

.filter-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Recommendations Grid */
.expanded-recommendations-grid {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    background: #f8fafc;
}

/* Enhanced Recommendation Cards */
.expanded-recommendation-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.expanded-recommendation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.expanded-recommendation-card.top-pick {
    border: 2px solid var(--lovesac-blue);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);
}

.top-pick-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--lovesac-blue);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.crown-icon {
    font-size: 14px;
}

/* Card Image */
.expanded-card-image {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #f1f5f9;
}

.expanded-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.expanded-recommendation-card:hover .expanded-card-image img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.expanded-recommendation-card:hover .image-overlay {
    opacity: 1;
}

.view-details-btn {
    padding: 10px 20px;
    background: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.view-details-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Card Content */
.expanded-card-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

.card-price-large {
    font-size: 18px;
    font-weight: 700;
    color: var(--lovesac-blue);
    flex-shrink: 0;
}

.card-description {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Specs Section */
.card-specs-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
}

.specs-header {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.spec-item {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}

.spec-item strong {
    color: #1f2937;
}

/* Features Section */
.card-features-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
}

.features-header {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feature-item {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
    position: relative;
    padding-left: 16px;
}

.feature-item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

/* Card Actions */
.card-actions-expanded {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.primary-action-expanded {
    padding: 12px 16px;
    background: var(--lovesac-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.primary-action-expanded:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.secondary-action-expanded {
    padding: 12px 16px;
    background: white;
    color: var(--lovesac-blue);
    border: 2px solid var(--lovesac-blue);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.secondary-action-expanded:hover {
    background: #eff6ff;
    transform: translateY(-1px);
}

.tertiary-action-expanded {
    padding: 12px 16px;
    background: #f8fafc;
    color: #64748b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.tertiary-action-expanded:hover {
    background: #f1f5f9;
    color: #374151;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

/* No Recommendations State */
.no-recommendations {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.no-recommendations-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.no-recommendations h3 {
    font-size: 24px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.no-recommendations p {
    font-size: 16px;
    color: #64748b;
    margin: 0;
}

/* Modal Footer */
.expanded-modal-footer {
    padding: 24px 32px;
    border-top: 1px solid #e5e7eb;
    background: white;
}

.footer-escape-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.escape-text {
    font-size: 16px;
    color: #4b5563;
    margin: 0;
}

.escape-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.escape-link {
    color: var(--lovesac-blue);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}

.escape-link:hover {
    background: #eff6ff;
    text-decoration: underline;
}

.escape-divider {
    color: #9ca3af;
    font-size: 14px;
}

.escape-button {
    padding: 8px 16px;
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.escape-button:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .expanded-modal-overlay {
        padding: 10px;
    }
    
    .expanded-modal-content {
        height: 95vh;
        border-radius: 16px;
    }
    
    .expanded-modal-header {
        padding: 20px 24px;
    }
    
    .expanded-header-content h2 {
        font-size: 24px;
    }
    
    .expanded-modal-controls {
        padding: 16px 24px;
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .expanded-controls-left,
    .expanded-controls-right {
        justify-content: center;
    }
    
    .filters-content {
        padding: 20px 24px;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .expanded-recommendations-grid {
        padding: 20px 24px;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .card-actions-expanded {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    
    .escape-actions {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .expanded-modal-overlay {
        padding: 5px;
    }
    
    .expanded-modal-content {
        height: 98vh;
        border-radius: 12px;
    }
    
    .expanded-modal-header {
        padding: 16px 20px;
    }
    
    .expanded-header-content h2 {
        font-size: 20px;
    }
    
    .expanded-header-content p {
        font-size: 14px;
    }
    
    .expanded-modal-controls {
        padding: 12px 20px;
    }
    
    .count-number {
        font-size: 24px;
    }
    
    .filters-content {
        padding: 16px 20px;
    }
    
    .expanded-recommendations-grid {
        padding: 16px 20px;
    }
    
    .expanded-card-image {
        height: 200px;
    }
    
    .expanded-card-content {
        padding: 20px;
    }
    
    .card-title {
        font-size: 18px;
    }
    
    .specs-grid {
        grid-template-columns: 1fr;
    }
}

/* Accessibility and Animation Preferences */
@media (prefers-reduced-motion: reduce) {
    .expanded-recommendations-modal,
    .expanded-modal-content,
    .expanded-recommendation-card,
    .expanded-card-image img,
    .image-overlay,
    .view-details-btn,
    .primary-action-expanded,
    .secondary-action-expanded,
    .tertiary-action-expanded {
        transition: none !important;
        animation: none !important;
    }
    
    .expanded-recommendations-modal.show .expanded-modal-content {
        transform: none;
    }
    
    .expanded-recommendation-card:hover {
        transform: none;
    }
}

/* ========================================
   PHASE 5.1: UI/UX POLISH & ACCESSIBILITY
   ======================================== */

/* Phase Transition Loading States */
.phase-transition-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.phase-transition-loading.show {
    opacity: 1;
    visibility: visible;
}

.phase-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.phase-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid var(--lovesac-blue);
    border-radius: 50%;
    animation: phaseSpinner 1s linear infinite;
}

@keyframes phaseSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.phase-loading-text {
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

/* Enhanced Visual Feedback */
.feedback-success {
    animation: feedbackSuccess 0.6s ease-out;
    border: 2px solid transparent;
    border-color: #10b981 !important;
}

.feedback-error {
    animation: feedbackError 0.6s ease-out;
    border: 2px solid transparent;
    border-color: #ef4444 !important;
}

.feedback-info {
    animation: feedbackInfo 0.6s ease-out;
    border: 2px solid transparent;
    border-color: var(--lovesac-blue) !important;
}

@keyframes feedbackSuccess {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.1);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes feedbackError {
    0% { 
        transform: translateX(0);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    25% { 
        transform: translateX(-4px);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
    }
    75% { 
        transform: translateX(4px);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
    }
    100% { 
        transform: translateX(0);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes feedbackInfo {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    50% { 
        transform: scale(1.01);
        box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* Feedback Messages */
.feedback-message {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10;
    animation: fadeInUp 0.3s ease-out;
}

.feedback-message-success {
    background: #10b981;
    color: white;
}

.feedback-message-error {
    background: #ef4444;
    color: white;
}

.feedback-message-info {
    background: var(--lovesac-blue);
    color: white;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Enhanced Focus Indicators */
.focus-enhanced:focus-visible {
    outline: 3px solid var(--lovesac-blue) !important;
    outline-offset: 2px !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1) !important;
}

.selected.focus-enhanced:focus-visible {
    outline-color: #10b981 !important;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1) !important;
}

/* Keyboard Navigation Helpers */
.selectable-option {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selectable-option:focus-visible::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--lovesac-blue);
    border-radius: 8px;
    pointer-events: none;
    animation: focusPulse 2s infinite;
}

@keyframes focusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Screen Reader Only Content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Auto-Save Indicator */
.save-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #10b981;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.save-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

.save-indicator::before {
    content: '✓';
    font-weight: bold;
}

/* Confirmation Modal */
.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.confirmation-modal.show {
    opacity: 1;
    visibility: visible;
}

.confirmation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirmation-content {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.confirmation-modal.show .confirmation-content {
    transform: scale(1);
}

.confirmation-header {
    padding: 24px 24px 0 24px;
}

.confirmation-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.confirmation-body {
    padding: 16px 24px 24px 24px;
}

.confirmation-body p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.confirmation-actions {
    display: flex;
    gap: 12px;
    padding: 0 24px 24px 24px;
}

.confirmation-cancel,
.confirmation-confirm {
    flex: 1;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirmation-cancel {
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.confirmation-cancel:hover,
.confirmation-cancel:focus {
    background: #e2e8f0;
    border-color: #cbd5e1;
    outline: none;
}

.confirmation-confirm {
    background: #ef4444;
    color: white;
    border: 2px solid #ef4444;
}

.confirmation-confirm:hover,
.confirmation-confirm:focus {
    background: #dc2626;
    border-color: #dc2626;
    outline: none;
}

/* Enhanced Validation Styling */
.character-count {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
    transition: color 0.2s ease;
}

.character-count.over-limit {
    color: #ef4444;
    font-weight: 600;
}

.validation-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.validation-success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Enhanced Interactive States */
.icon-option:focus-visible,
.shape-diagram:focus-visible,
.comfort-option:focus-visible,
.style-image:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.upgrade-card:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Progress Enhancement for Accessibility */
.phase-progress-indicators [aria-current="step"] {
    position: relative;
}

.phase-progress-indicators [aria-current="step"]::after {
    content: 'Current step';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--lovesac-blue);
    font-weight: 600;
    white-space: nowrap;
}

/* Mobile Accessibility Enhancements */
@media (max-width: 768px) {
    .feedback-message {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 8px;
        text-align: center;
    }
    
    .save-indicator {
        top: 10px;
        right: 10px;
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .confirmation-content {
        margin: 10px;
    }
    
    .confirmation-actions {
        flex-direction: column;
    }
    
    .focus-enhanced:focus-visible {
        outline-offset: 1px !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .feedback-success {
        border-color: #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
    
    .feedback-error {
        border-color: #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
    
    .focus-enhanced:focus-visible {
        outline: 4px solid #000 !important;
        outline-offset: 2px !important;
    }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .phase-transition-loading,
    .feedback-success,
    .feedback-error,
    .feedback-info,
    .phase-loading-spinner,
    .save-indicator,
    .confirmation-content,
    .selectable-option,
    .focus-enhanced {
        transition: none !important;
        animation: none !important;
    }
    
    .selectable-option:focus-visible::after {
        animation: none !important;
    }
    
    .phase-loading-spinner {
        border-top-color: var(--lovesac-blue);
        animation: none;
    }
}

/* Focus Management Enhancements */
.phase-container:focus-within {
    /* Removed focus-within styling to prevent unwanted outline */
}

/* Improved Button States for Accessibility */
button:disabled,
.primary-button:disabled,
.secondary-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

button:disabled:focus,
.primary-button:disabled:focus,
.secondary-button:disabled:focus {
    outline: 2px solid #9ca3af !important;
    outline-offset: 2px !important;
}

/* Enhanced Loading States */
.loading-state {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.loading-state::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid var(--lovesac-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   SACTIONAL GENIUS CHAT INTERFACE
   ======================================== */

.sactional-genius-chat {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
    padding: 12px 16px;
    position: relative;
    border: 1px solid rgba(0, 152, 167, 0.1);
}

.sactional-genius-chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary-color) 0%, #00e0ff 100%);
    border-radius: 12px 12px 0 0;
}

.chat-avatar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 152, 167, 0.08);
}

.avatar-container {
    position: relative;
}

.avatar-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--c-primary-color) 0%, #00e0ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    animation: avatarPulse 3s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(0, 152, 167, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 6px rgba(0, 152, 167, 0);
    }
}

.chat-identity {
    flex: 1;
}

.chat-name {
    font-family: var(--heading-font-family);
    font-size: 16px;
    font-weight: var(--c-font-weight-bold);
    color: var(--c-primary-color);
    margin-bottom: 2px;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-color-secondary);
}

.status-indicator {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: statusBlink 2s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.chat-messages {
    min-height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.chat-message {
    margin-bottom: 0;
    animation: messageSlideIn 0.6s ease-out;
}

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

.ai-message .message-content {
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.06) 0%, rgba(0, 224, 255, 0.03) 100%);
    border: 1px solid rgba(0, 152, 167, 0.08);
    border-radius: 12px 12px 12px 3px;
    padding: 12px;
    position: relative;
}

.ai-message .message-content::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 6px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, rgba(0, 152, 167, 0.06) 0%, rgba(0, 224, 255, 0.03) 100%);
    border-left: 1px solid rgba(0, 152, 167, 0.08);
    border-bottom: 1px solid rgba(0, 152, 167, 0.08);
    transform: rotate(-45deg);
    border-radius: 0 0 0 1px;
}

.message-content p {
    margin: 0;
    line-height: 1.4;
    font-size: 13px;
}

.message-content p + p {
    margin-top: 6px;
}

.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 152, 167, 0.04);
    border-radius: 12px 12px 12px 3px;
    border: 1px solid rgba(0, 152, 167, 0.08);
    font-size: 12px;
    color: var(--text-color-secondary);
    font-style: italic;
}

.typing-dots {
    display: flex;
    gap: 2px;
}

.typing-dot {
    width: 3px;
    height: 3px;
    background: var(--c-primary-color);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Enhanced question container to work with chat */
.question-container {
    background: rgba(248, 250, 252, 0.8);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 152, 167, 0.08);
}

/* Mobile responsiveness for chat interface */
@media (max-width: 768px) {
    .sactional-genius-chat {
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: 10px;
    }
    
    .chat-avatar {
        gap: 6px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    
    .avatar-icon {
        width: 28px;
        height: 28px;
    }
    
    .chat-name {
        font-size: 14px;
    }
    
    .chat-status {
        font-size: 11px;
    }
    
    .message-content {
        padding: 10px;
        font-size: 12px;
    }
    
    .ai-message .message-content {
        border-radius: 10px 10px 10px 3px;
    }
    
    .user-message .message-content {
        border-radius: 10px 10px 3px 10px;
        margin-left: 30px;
    }
}

/* ========================================
   CHAT TYPING OVERLAY
   ======================================== */

/* Overlay typing indicator that doesn't affect layout */
.chat-typing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(1px);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.chat-typing-overlay.show {
    opacity: 1;
    visibility: visible;
}

.chat-typing-overlay-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 152, 167, 0.04);
    border-radius: 12px 12px 12px 3px;
    border: 1px solid rgba(0, 152, 167, 0.08);
    font-size: 12px;
    color: var(--text-color-secondary);
    font-style: italic;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}