/* ========================================
   MODU Konfigurator - Premium Design
   ======================================== */

:root {
    /* Premium Color Palette */
    --black: #0a0a0a;
    --charcoal: #1a1a1a;
    --dark-gray: #2d2d2d;
    --medium-gray: #4a4a4a;
    --light-gray: #8a8a8a;
    --off-white: #f5f5f3;
    --cream: #faf9f7;
    --white: #ffffff;

    /* Accent Colors */
    --gold: #c9a962;
    --gold-light: #d4bc7c;
    --gold-dark: #a68b4b;

    /* Functional */
    --success: #4a7c59;
    --error: #8b3a3a;

    /* Effects */
    --shadow-subtle: 0 2px 20px rgba(0,0,0,0.06);
    --shadow-medium: 0 8px 40px rgba(0,0,0,0.1);
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.15);
    --shadow-gold: 0 4px 20px rgba(201, 169, 98, 0.25);

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --radius: 2px;
    --radius-lg: 4px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --sidebar-width: 210px;
}

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

html {
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background: var(--charcoal);
    color: var(--off-white);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

::selection {
    background: var(--gold);
    color: var(--black);
}

/* ========================================
   Configurator Container
   ======================================== */
.configurator {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 60px 100px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ========================================
   Header - Luxury Branding
   ======================================== */
.header {
    text-align: center;
    padding: 16px 0 14px;
    border-bottom: 1px solid rgba(201, 169, 98, 0.2);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.logo {
    margin-bottom: 6px;
}

.logo img {
    height: 58px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.logo .logo-ivory {
    display: none;
}

[data-theme="ivory"] .logo .logo-dark {
    display: none;
}

[data-theme="ivory"] .logo .logo-ivory {
    display: block;
}

.tagline {
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}

.tagline-highlight {
    color: var(--white);
    font-weight: 500;
    font-size: 0.85rem;
}

/* ========================================
   Progress Bar - Minimal Elegance
   ======================================== */
.progress-bar {
    margin-bottom: 16px;
    flex-shrink: 0;
    position: relative;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    position: relative;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 36px;
    height: 36px;
    border: 1px solid var(--medium-gray);
    background: var(--charcoal);
    color: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    position: relative;
}

.step.active .step-number {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 169, 98, 0.1);
}

.step.completed .step-number {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--black);
}

.step-label {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--medium-gray);
    margin-top: 8px;
    transition: var(--transition-smooth);
}

.step.active .step-label {
    color: var(--gold);
}

.step.completed .step-label {
    color: var(--gold-light);
}

/* Clickable completed steps */
.step.completed {
    cursor: pointer;
}

.step.completed:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(201, 169, 98, 0.4);
}

.step.completed:hover .step-label {
    color: var(--gold);
}

.step.completed:active .step-number {
    transform: scale(0.95);
}

/* Visual hint that completed steps are clickable */
.step.completed .step-number::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px dashed transparent;
    transition: border-color 0.3s ease;
}

.step.completed:hover .step-number::after {
    border-color: rgba(201, 169, 98, 0.3);
}

.progress-line {
    height: 1px;
    background: var(--dark-gray);
    position: absolute;
    top: 18px;
    left: 60px;
    right: 60px;
    z-index: 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: var(--shadow-gold);
}

/* ========================================
   Progress Bar Variants
   ======================================== */

/* Hide dynamic elements by default */
.progress-bar .progress-text,
.progress-bar .progress-breadcrumb {
    display: none;
}

/* --- Variant: Minimal (thin bar + text) --- */
.progress-bar.progress-style-minimal .progress-steps {
    display: none;
}

.progress-bar.progress-style-minimal .progress-line {
    position: static;
    margin: 0 0 8px 0;
    height: 3px;
    border-radius: 2px;
    background: var(--dark-gray);
}

.progress-bar.progress-style-minimal .progress-fill {
    border-radius: 2px;
}

.progress-bar.progress-style-minimal .progress-fill::after {
    display: none;
}

.progress-bar.progress-style-minimal .progress-text {
    display: block;
    font-size: 0.8rem;
    color: var(--light-gray);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.progress-bar.progress-style-minimal .progress-text strong {
    color: var(--gold);
    font-weight: 600;
}

/* --- Variant: Dots (small dots + tooltip) --- */
.progress-bar.progress-style-dots .progress-steps {
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
}

.progress-bar.progress-style-dots .step {
    flex: 0;
}

.progress-bar.progress-style-dots .step-number {
    width: 10px;
    height: 10px;
    font-size: 0;
    border-width: 0;
    background: var(--medium-gray);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.progress-bar.progress-style-dots .step.active .step-number {
    width: 12px;
    height: 12px;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(201, 169, 98, 0.4);
}

.progress-bar.progress-style-dots .step.completed .step-number {
    background: var(--gold);
    box-shadow: none;
}

.progress-bar.progress-style-dots .step-label {
    display: none;
}

.progress-bar.progress-style-dots .step .step-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--charcoal);
    border: 1px solid var(--gold);
    color: var(--off-white);
    padding: 4px 10px;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 10;
}

.progress-bar.progress-style-dots .step .step-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--gold);
}

.progress-bar.progress-style-dots .step:hover .step-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.progress-bar.progress-style-dots .progress-line {
    display: none;
}

.progress-bar.progress-style-dots .step.completed .step-number::after {
    display: none;
}

/* --- Variant: Breadcrumb (text path) --- */
.progress-bar.progress-style-breadcrumb .progress-steps {
    display: none;
}

.progress-bar.progress-style-breadcrumb .progress-line {
    display: none;
}

.progress-bar.progress-style-breadcrumb .progress-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-bottom: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.progress-bar.progress-style-breadcrumb .breadcrumb-step {
    color: var(--medium-gray);
    transition: color 0.2s ease;
    padding: 4px 0;
}

.progress-bar.progress-style-breadcrumb .breadcrumb-step.completed {
    color: var(--gold-light);
    cursor: pointer;
}

.progress-bar.progress-style-breadcrumb .breadcrumb-step.completed:hover {
    color: var(--gold);
    text-decoration: underline;
}

.progress-bar.progress-style-breadcrumb .breadcrumb-step.active {
    color: var(--gold);
    font-weight: 600;
}

.progress-bar.progress-style-breadcrumb .breadcrumb-sep {
    color: var(--medium-gray);
    margin: 0 8px;
    font-size: 0.7rem;
}

/* --- Variant: Autohide (classic + scroll hide) --- */
.progress-bar.progress-style-autohide {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.progress-bar.progress-style-autohide.hidden-scroll {
    transform: translateY(-100%);
    opacity: 0;
    margin-bottom: -60px;
    pointer-events: none;
}

/* MODU themes: dots active glow */
[data-theme="modu"] .progress-bar.progress-style-dots .step.active .step-number,
[data-theme="modu-light"] .progress-bar.progress-style-dots .step.active .step-number {
    box-shadow: 0 0 8px rgba(80, 178, 244, 0.4);
}

/* ========================================
   Main Content
   ======================================== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    background: linear-gradient(180deg, var(--dark-gray) 0%, var(--charcoal) 100%);
    border: 1px solid var(--dark-gray);
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.main-content > .config-step {
    flex: 1;
    padding: 24px 50px;
    overflow-y: auto;
    min-width: 0;
}

.main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.3;
}

/* ========================================
   Live Summary Sidebar
   ======================================== */
.live-summary {
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid rgba(201, 169, 98, 0.2);
    background: rgba(0,0,0,0.15);
    overflow-y: auto;
}

.live-summary-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201, 169, 98, 0.2);
    margin: 0;
}

.live-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-summary-item.hidden {
    display: none;
}

.live-summary-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--light-gray);
}

.live-summary-value {
    font-size: 0.8rem;
    color: var(--off-white);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ls-ral {
    color: var(--gold);
    font-size: 0.7rem;
    opacity: 0.8;
}

.ls-dimensions {
    font-size: 0.7rem;
    color: var(--light-gray);
    opacity: 0.7;
    margin-left: 4px;
}

.ls-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.live-summary-canvas {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    padding: 6px;
    margin-top: 2px;
}

.live-summary-canvas svg {
    width: 100%;
    height: auto;
    display: block;
}

.live-summary-price {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(201, 169, 98, 0.2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-summary-price-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--light-gray);
}

.live-summary-price-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold);
}

/* Hide sidebar on step 7 (controlled via JS) */
.live-summary.hidden {
    display: none;
}

.config-step {
    display: none;
    animation: fadeIn 0.6s ease;
}

.config-step.active {
    display: block;
    flex: 1;
}

.config-step[data-step="3"].active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.config-step[data-step="4"].active,
.config-step[data-step="5"].active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.config-step[data-step="4"] .step-description,
.config-step[data-step="5"] .step-description {
    text-align: left;
    flex-shrink: 0;
}

.config-step[data-step="4"] .color-options {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    justify-items: center;
    align-content: start;
}

.config-step[data-step="5"] .upholstery-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.config-step h2 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--white);
}

.step-description {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 8px;
    color: var(--white);
}

.step-description-inline {
    color: var(--light-gray);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.step-footer-info {
    margin-top: 30px;
    padding: 16px 24px;
    background: rgba(201, 169, 98, 0.08);
    border-left: 3px solid var(--gold);
    color: var(--light-gray);
    font-size: 0.85rem;
    font-style: italic;
    letter-spacing: 0.5px;
}

.step-footer-info:empty {
    display: none;
}

/* ========================================
   Options Grid - Premium Cards
   ======================================== */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.options-grid.collections {
    grid-template-columns: repeat(3, 1fr);
}

.option-card {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: var(--transition-smooth);
}

.option-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.option-card:hover::before {
    opacity: 1;
}

.option-card.selected {
    border: 2px solid var(--gold);
    background: linear-gradient(180deg, rgba(201, 169, 98, 0.1) 0%, var(--charcoal) 100%);
    box-shadow: 0 0 12px rgba(201, 169, 98, 0.25);
}

.option-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 6px;
    color: var(--white);
}

.option-card p {
    font-size: 0.9rem;
    color: var(--light-gray);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.card-price {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--gold);
}

.options-grid.furniture-types {
    grid-template-columns: repeat(3, 1fr);
}

/* Furniture type cards - same as collections */
.options-grid.furniture-types .option-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Collection Images - Luxury Feel */
.option-image {
    margin-bottom: 8px;
    position: relative;
    overflow: visible;
}

.placeholder-image {
    height: 121px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gallery Slider */
.gallery-slider {
    position: relative;
    height: 121px;
    overflow: hidden;
}

.gallery-slider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to top, var(--charcoal), transparent);
    pointer-events: none;
    z-index: 5;
}

.gallery-slider .slides {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}

.gallery-slider .slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}


.option-card:hover .placeholder-image {
    transform: scale(1.35);
}

.placeholder-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to top, var(--charcoal), transparent);
}

.placeholder-image.modern {
    background-image: url('images/modern.jpg');
}

.placeholder-image.paella {
    background-image: url('images/paella.jpg');
}

.placeholder-image.arucas {
    background-image: url('images/arucas.jpg');
}

.placeholder-image.maladeta {
    background-image: url('images/maladeta.jpg');
}

.placeholder-image.teide {
    background-image: url('images/uklad-teide.jpg');
}

.placeholder-image.mauro {
    background-image: url('images/mauro.jpg');
}

/* Furniture Type Placeholders */
.placeholder-image.type-sofa-narozna {
    background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 50%, #3a3a3a 100%);
}

.placeholder-image.type-fotel {
    background: linear-gradient(135deg, #1a2530 0%, #2a3a4a 50%, #1a3040 100%);
}

.placeholder-image.type-stolik,
.placeholder-image.type-kawowy {
    background: linear-gradient(135deg, #302a20 0%, #4a4030 50%, #3a3528 100%);
}

.placeholder-image.type-lezak {
    background: linear-gradient(135deg, #20302a 0%, #304a3a 50%, #283a30 100%);
}

.placeholder-image.type-zestaw {
    background: linear-gradient(135deg, #2a2030 0%, #3a304a 50%, #302840 100%);
}

.placeholder-image.type-inny {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2d2d2d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-image.type-inny .type-icon {
    width: 48px;
    height: 48px;
    color: var(--gold);
    opacity: 0.7;
    transition: all 0.3s ease;
    z-index: 1;
}

.option-card:hover .placeholder-image.type-inny .type-icon {
    opacity: 1;
    transform: scale(1.1);
}

.placeholder-image.ibiza {
    background: linear-gradient(135deg, #1a3a4a 0%, #2a5a6a 50%, #1a4a5a 100%);
}

.placeholder-image.na-wymiar {
    background: linear-gradient(135deg, #2a2a3a 0%, #4a4a5a 50%, #3a3a4a 100%);
}

/* Furniture Type Icons - Refined */
.option-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    filter: grayscale(30%);
    transition: var(--transition-smooth);
}

.option-card:hover .option-icon {
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* Size Labels - Elegant */
.size-label {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 12px;
    letter-spacing: 2px;
}

/* ========================================
   Size Options (Step 3)
   ======================================== */
.size-type-selector {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.size-type-btn {
    flex: 1;
    padding: 14px 28px;
    border: 1px solid var(--dark-gray);
    background: transparent;
    color: var(--light-gray);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.size-type-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.size-type-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

.size-content {
    display: none;
}

.size-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.custom-size-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 700px;
}

.size-input-group label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--light-gray);
    margin-bottom: 12px;
}

.size-input-group input {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--dark-gray);
    background: var(--charcoal);
    color: var(--white);
    font-size: 1.2rem;
    font-family: var(--font-body);
    transition: var(--transition-smooth);
    text-align: center;
    letter-spacing: 1px;
}

.size-input-group input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

.size-input-group input::placeholder {
    color: var(--medium-gray);
}

.custom-note {
    margin-top: 24px;
    font-size: 0.8rem;
    color: var(--light-gray);
    font-style: italic;
    letter-spacing: 0.5px;
}

/* Module Selector */
.module-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 700px;
}

.module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border: 1px solid var(--dark-gray);
    transition: var(--transition-smooth);
}

.module-row.has-value {
    border-color: var(--gold);
    background: rgba(201, 169, 98, 0.05);
}

.module-name {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--off-white);
}

.module-counter {
    display: flex;
    align-items: center;
    gap: 14px;
}

.module-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--medium-gray);
    background: transparent;
    color: var(--light-gray);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    font-family: var(--font-body);
}

.module-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.module-count {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    min-width: 20px;
    text-align: center;
}

/* Modules Preview - HIDDEN (replaced by layout-dimensions) */
.modules-preview {
    display: none !important;
}

/* Step 3 Compact Chips */
.step3-chips {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}

/* When chips are inline (without mode toggle) */
.step3-chips:not(:has(.step3-mode-toggle)) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.step3-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 18px;
    border: 1px solid var(--dark-gray);
    background: transparent;
    color: var(--light-gray);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.step3-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.step3-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
    font-weight: 600;
}

/* Step 3 Mode Toggle (Wg osób / Wg przestrzeni) */
.step3-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: var(--dark-gray);
    border-radius: 4px;
    padding: 4px;
    width: fit-content;
}

.mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: var(--light-gray);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-radius: 2px;
}

.mode-btn:hover {
    color: var(--off-white);
    background: rgba(255, 255, 255, 0.05);
}

.mode-btn.active {
    background: var(--gold);
    color: var(--black);
    font-weight: 600;
}

.mode-icon {
    font-size: 1.1rem;
}

.step3-options-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.step3-chip .chip-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
}

.step3-chip .chip-desc {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 4px;
    line-height: 1.3;
}

.step3-chip:has(.chip-desc) {
    padding: 14px 12px;
    min-height: 70px;
    justify-content: center;
}

/* Step 3 Layout Cards with Thumbnails */
.step3-layout-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step3-section-header {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--medium-gray);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.step3-section-header .section-icon {
    font-size: 1rem;
}

.step3-layout-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: start;
}

.step3-layout-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 10px 10px;
    border: 1px solid var(--dark-gray);
    background: transparent;
    color: var(--light-gray);
    font-family: var(--font-body);
    cursor: pointer;
    transition: var(--transition-smooth);
    min-height: auto;
}

.step3-layout-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.step3-layout-card.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

.step3-layout-card .card-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
}

.step3-layout-card .card-thumb svg {
    width: 85%;
    height: 85%;
}

.step3-layout-card .card-label {
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.3;
}

.step3-layout-card .card-desc {
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 3px;
    line-height: 1.3;
}

.step3-layout-card.active .card-thumb {
    background: rgba(0, 0, 0, 0.15);
}

.step3-layout-card.active .card-desc {
    opacity: 0.85;
}

/* Module Legend - collapsible */
.module-legend {
    margin-top: 4px;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dark-gray);
    border-top: none;
    font-size: 0.65rem;
    max-height: 150px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
}

.module-legend.collapsed {
    max-height: 0;
    padding: 0;
    border: none;
    opacity: 0;
}

.module-legend-content {
    padding: 4px 10px;
}

.module-legend-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 0;
    width: fit-content;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dark-gray);
    border-top: none;
    border-radius: 0 0 6px 6px;
    color: var(--light-gray);
    font-size: 0.65rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.module-legend-tab:hover {
    color: var(--gold);
    background: rgba(0, 0, 0, 0.35);
}

.module-legend-tab .tab-icon {
    font-size: 0.7rem;
}

.module-legend-tab .tab-text {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

.module-legend-tab .tab-arrow {
    font-size: 0.45rem;
    transition: transform 0.3s ease;
    opacity: 0.6;
}

/* Strzałka w dół gdy legenda rozwinięta, w górę gdy zwinięta */
.module-legend.collapsed + .module-legend-tab .tab-arrow {
    transform: rotate(180deg);
}

.module-legend:not(.collapsed) + .module-legend-tab .tab-arrow {
    transform: rotate(0deg);
}

/* Layout Change Tab - sticky przy paletce */
.layout-change-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    border-bottom: none;
    color: var(--light-gray);
    font-size: 0.7rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.layout-change-tab:hover {
    background: rgba(201, 169, 98, 0.1);
    border-color: var(--gold);
    color: var(--gold);
}

.layout-change-tab .tab-icon {
    font-size: 0.9rem;
}

.layout-change-tab .tab-label {
    font-weight: 500;
}

.legend-title {
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.65rem;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.legend-item {
    color: var(--light-gray);
    white-space: nowrap;
}

/* Layout Dimensions Display */
.layout-dimensions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    margin-top: 0;
    background: rgba(201, 169, 98, 0.1);
    border: 1px solid var(--gold);
    border-top: none;
    color: var(--off-white);
    font-size: 0.85rem;
}

.dimensions-icon {
    font-size: 1.1rem;
}

.dimensions-text strong {
    color: var(--gold);
    font-weight: 600;
}

.dimensions-separator {
    margin: 0 8px;
    color: var(--medium-gray);
}

.dimensions-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 1px solid var(--medium-gray);
    border-radius: 4px;
    color: var(--medium-gray);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dimensions-toggle-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 169, 98, 0.1);
}

.dimensions-toggle-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 169, 98, 0.2);
}

.dimensions-toggle-btn svg {
    width: 14px;
    height: 14px;
}

/* Dimension lines on canvas */
.dimension-line-group text {
    font-family: 'Inter', sans-serif;
    user-select: none;
    pointer-events: none;
}

.dimension-line-group line,
.dimension-line-group polygon {
    pointer-events: none;
}

/* ========================================
   Step 3 Layout Modes
   ======================================== */

/* ACCORDION MODE - Collapsed bar */
.step3-accordion-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--dark-gray);
    border: 1px solid var(--gold);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.step3-accordion-bar:hover {
    background: rgba(201, 169, 98, 0.1);
}

.accordion-selection {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.accordion-mode {
    color: var(--gold);
    font-weight: 600;
    font-size: 0.85rem;
}

.accordion-arrow {
    color: var(--light-gray);
    font-size: 0.9rem;
}

.accordion-layout {
    color: var(--off-white);
    font-weight: 600;
}

.accordion-desc {
    color: var(--light-gray);
    font-size: 0.85rem;
}

.accordion-change-btn {
    background: transparent;
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
    padding: 6px 14px;
    margin-left: 16px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.accordion-change-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* SIDEBAR MODE - Floating panel */
.step3-sidebar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    color: var(--off-white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.step3-sidebar-trigger:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.sidebar-trigger-icon {
    font-size: 1.1rem;
}

.step3-sidebar-panel {
    position: fixed;
    top: 50%;
    right: -350px;
    transform: translateY(-50%);
    width: 320px;
    max-height: 80vh;
    background: var(--charcoal);
    border: 1px solid var(--gold);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: right var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.step3-sidebar-panel.open {
    right: 20px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dark-gray);
}

.sidebar-header h4 {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.sidebar-close {
    background: none;
    border: none;
    color: var(--light-gray);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.sidebar-close:hover {
    color: var(--gold);
}

.sidebar-mode-toggle {
    display: flex;
    padding: 12px;
    gap: 8px;
    border-bottom: 1px solid var(--dark-gray);
}

.sidebar-mode-toggle .mode-btn {
    flex: 1;
    padding: 10px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-mode-toggle .mode-btn:hover {
    border-color: var(--gold);
}

.sidebar-mode-toggle .mode-btn.active {
    background: rgba(201, 169, 98, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.sidebar-layouts {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-layout-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    color: var(--off-white);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-layout-btn:hover {
    border-color: var(--gold);
    background: rgba(201, 169, 98, 0.1);
}

.sidebar-layout-btn.active {
    border-color: var(--gold);
    background: rgba(201, 169, 98, 0.2);
}

.sidebar-layout-btn .layout-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.sidebar-layout-btn .layout-desc {
    color: var(--light-gray);
    font-size: 0.8rem;
}

.sidebar-empty {
    color: var(--light-gray);
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
}

/* COMPACT MODE - Small chips in sticky header */
.step3-compact-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 0 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dark-gray);
    z-index: 10;
    flex-wrap: wrap;
}

.step3-compact-toggle {
    display: flex;
    gap: 4px;
}

.compact-mode-btn {
    padding: 8px 12px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.compact-mode-btn:hover {
    border-color: var(--gold);
}

.compact-mode-btn.active {
    background: rgba(201, 169, 98, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.step3-compact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.compact-chip {
    padding: 8px 16px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    color: var(--off-white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.compact-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.compact-chip.active {
    background: rgba(201, 169, 98, 0.2);
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 600;
}

.compact-empty {
    color: var(--light-gray);
    font-size: 0.85rem;
}

/* Interactive Layout Canvas */
.layout-diagram {
    position: relative;
    margin-top: 0;
    border: 1px solid var(--dark-gray);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 300px;
    height: calc(100vh - 260px);
    max-height: none;
    overflow: visible;
}

.canvas-wrapper {
    flex: 1;
    min-width: 0;
    min-height: 200px;
    display: flex;
    position: relative;
}

/* Hint dla pustego canvas */
.layout-hint.empty-hint {
    font-size: 14px;
    opacity: 0.6;
}

/* Ukryj pusty dimensions */
.layout-dimensions-empty {
    display: none;
}

/* Canvas Toolbar - wrapper for dims badge + controls */
.canvas-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.canvas-toolbar > * {
    pointer-events: auto;
}

/* Canvas Dimensions Badge - overlay w rogu canvasa */
.canvas-dims-badge {
    display: none;
    z-index: 10;
    background: rgba(0, 0, 0, 0.55);
    color: var(--gold);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
}

.canvas-dims-badge .canvas-dims-label {
    opacity: 0.6;
    font-weight: 400;
}

.canvas-dims-badge .canvas-dims-sep {
    opacity: 0.4;
    margin: 0 2px;
}

.canvas-dims-badge .canvas-dims-area {
    display: block;
    color: var(--off-white);
    font-weight: 400;
    font-size: 10px;
    opacity: 0.85;
}

/* Canvas Controls - Planer aranżacji */
.canvas-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
    opacity: 0.2;
    transition: opacity 0.3s ease;
    padding: 20px;
    margin: -20px;
}

.canvas-controls:hover {
    opacity: 1;
}

.canvas-controls.faded {
    opacity: 0.1;
}

.canvas-control-rotate {
    display: flex;
    gap: 4px;
}

.rotate-btn,
.zoom-btn,
.canvas-control-center,
.canvas-control-mirror,
.canvas-control-fit,
.canvas-control-fullscreen {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dark-gray);
    background: rgba(45, 45, 45, 0.9);
    color: var(--light-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rotate-btn:hover,
.zoom-btn:hover,
.canvas-control-center:hover,
.canvas-control-mirror:hover,
.canvas-control-fit:hover,
.canvas-control-fullscreen:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(45, 45, 45, 1);
}

.rotate-btn svg,
.zoom-btn svg,
.canvas-control-center svg,
.canvas-control-mirror svg,
.canvas-control-fit svg,
.canvas-control-fullscreen svg {
    width: 16px;
    height: 16px;
}

.canvas-control-zoom {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.canvas-control-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Fullscreen mode */
.layout-diagram.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 9999;
    background: var(--charcoal);
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.layout-diagram.fullscreen .module-palette {
    flex-shrink: 0;
    max-height: 80px;
    overflow-x: auto;
    overflow-y: hidden;
}

.layout-diagram.fullscreen .canvas-wrapper {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

.layout-diagram.fullscreen .layout-dimensions {
    flex-shrink: 0;
}

.layout-diagram.fullscreen .canvas-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: none;
    border: none;
}

.layout-diagram.fullscreen .canvas-dims-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 13px;
    padding: 6px 12px;
    width: auto;
    border-top: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    order: unset;
    align-self: auto;
}

.layout-diagram.fullscreen .canvas-dims-badge .canvas-dims-area {
    font-size: 12px;
}

.layout-diagram.fullscreen .canvas-controls,
.layout-diagram.fullscreen .canvas-controls.faded {
    position: absolute;
    opacity: 1;
    top: 20px;
    right: 20px;
    flex-direction: column;
    background: none;
    border-top: none;
    padding: 20px;
    margin: -20px;
}

.layout-diagram.fullscreen .canvas-control-rotate,
.layout-diagram.fullscreen .canvas-control-row {
    display: flex;
}

.fullscreen-close {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dark-gray);
    background: rgba(45, 45, 45, 0.95);
    color: var(--off-white);
    font-size: 24px;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fullscreen-close:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.layout-diagram svg {
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ========================================
   MODULE HOVER PREVIEW (na paletce) - POZIOMY
   ======================================== */
.palette-hover-preview {
    display: none;
    position: fixed;
    z-index: 1500;
    background: var(--charcoal);
    border: 1px solid var(--gold);
    padding: 15px;
    box-shadow: var(--shadow-strong);
    pointer-events: none;
    animation: hoverPreviewIn 0.2s ease;
}

@keyframes hoverPreviewIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.palette-hover-preview.active {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.palette-hover-preview .preview-image {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    background: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-hover-preview .preview-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.palette-hover-preview .preview-info {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.palette-hover-preview .preview-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--off-white);
    margin-bottom: 8px;
}

.palette-hover-preview .preview-dims {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 0;
    border-top: 1px solid var(--dark-gray);
    border-bottom: 1px solid var(--dark-gray);
}

.palette-hover-preview .preview-dim {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 0.7rem;
}

.palette-hover-preview .preview-dim-label {
    color: var(--medium-gray);
}

.palette-hover-preview .preview-dim-value {
    color: var(--off-white);
    font-weight: 500;
}

.palette-hover-preview .preview-price {
    margin-top: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
}

.palette-hover-preview .preview-hint {
    margin-top: 8px;
    font-size: 0.65rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    animation: hint-pulse 1.5s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

@keyframes hint-pulse {
    0%, 100% {
        opacity: 0.6;
        text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
    }
}

/* Animacja dodania modułu na planer - rozszerzający się okrąg */
.module-added-circle {
    animation: module-circle-expand 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes module-circle-expand {
    0% {
        r: 5;
        stroke-width: 4;
        stroke-opacity: 1;
    }
    100% {
        r: 60;
        stroke-width: 1;
        stroke-opacity: 0;
    }
}

/* Module Palette - Minimalist */
.module-palette {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dark-gray);
    border-bottom: none;
}

.palette-hint {
    font-size: 0.6rem;
    color: var(--light-gray);
    margin-bottom: 4px;
    text-align: center;
    opacity: 0.8;
}

.palette-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.palette-item {
    width: 65px;
    height: 65px;
    cursor: grab;
    border: 1px solid var(--dark-gray);
    border-radius: 3px;
    transition: var(--transition-fast);
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.palette-item:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 169, 98, 0.3);
}

.palette-item:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.palette-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.palette-swatch {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    border-radius: 2px;
}

.palette-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.3), rgba(201, 169, 98, 0.15));
    border: 1px solid var(--gold);
    color: var(--gold);
}

.palette-swatch.swatch-table {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.4), rgba(60, 60, 60, 0.4));
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
}

/* Tooltip on hover */
.palette-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--charcoal);
    border: 1px solid var(--gold);
    border-radius: 6px;
    padding: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.palette-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gold);
}

.palette-item:hover .palette-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-image {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-gray);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.tooltip-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tooltip-name {
    font-size: 0.8rem;
    color: var(--off-white);
    font-weight: 500;
}

.tooltip-dims {
    font-size: 0.7rem;
    color: var(--medium-gray);
}

.tooltip-price {
    font-size: 0.75rem;
    color: var(--gold);
    font-weight: 600;
}

/* Module Details Modal */
.module-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.module-modal.active {
    opacity: 1;
    visibility: visible;
}

.module-modal-content {
    background: var(--charcoal);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.module-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--medium-gray);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.module-modal-close:hover {
    color: var(--gold);
}

.module-modal-image {
    width: 390px;
    height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-gray);
    border-radius: 8px;
    overflow: hidden;
}

.module-modal-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-swatch {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 8px;
}

.modal-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.3), rgba(201, 169, 98, 0.15));
    border: 2px solid var(--gold);
    color: var(--gold);
}

.modal-swatch.swatch-table {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.4), rgba(60, 60, 60, 0.4));
    border: 2px solid var(--medium-gray);
    color: var(--light-gray);
}

.module-modal-info {
    text-align: center;
    width: 100%;
}

.module-modal-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--off-white);
    margin: 0 0 10px;
}

.module-modal-desc {
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin: 0 0 15px;
    line-height: 1.5;
}

.module-modal-dims {
    font-size: 0.8rem;
    color: var(--light-gray);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.module-modal-dims strong {
    color: var(--off-white);
}

.module-modal-price {
    font-size: 1.25rem;
    color: var(--gold);
    font-weight: 600;
}

.module-modal-add-btn {
    margin-top: 15px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: var(--charcoal);
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
    width: 100%;
}

.module-modal-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, #e5c34a, var(--gold));
}

.module-modal-add-btn:active {
    transform: translateY(0);
}

/* Module Modal Navigation */
.module-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gold);
    color: var(--gold);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.module-modal-nav:hover {
    background: var(--gold);
    color: var(--charcoal);
}

.module-modal-prev {
    left: -60px;
}

.module-modal-next {
    right: -60px;
}

.module-modal-counter {
    font-size: 0.75rem;
    color: var(--medium-gray);
    margin-top: 15px;
    letter-spacing: 1px;
}

/* Module modal slide animations */
.module-modal-content {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.module-modal-content.slide-out-left {
    transform: translateX(-30px);
    opacity: 0;
}

.module-modal-content.slide-out-right {
    transform: translateX(30px);
    opacity: 0;
}

.module-modal-content.slide-in-right {
    animation: slideInRight 0.3s ease forwards;
}

.module-modal-content.slide-in-left {
    animation: slideInLeft 0.3s ease forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive: arrows inside on smaller screens */
@media (max-width: 600px) {
    .module-modal-prev {
        left: 10px;
    }
    .module-modal-next {
        right: 10px;
    }
    .module-modal-nav {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        background: rgba(0, 0, 0, 0.7);
    }
}

/* Table dimensions modal */
.table-dims-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.table-dims-modal.active {
    opacity: 1;
    visibility: visible;
}

.table-dims-content {
    background: var(--charcoal);
    border: 1px solid var(--gold);
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    position: relative;
}

.table-dims-content h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    font-size: 1.4rem;
    margin: 0 0 1.5rem;
    text-align: center;
}

.table-dims-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--off-white);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.table-dims-close:hover {
    opacity: 1;
}

.table-dims-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.table-dims-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.table-dims-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.table-dims-field label {
    font-size: 0.85rem;
    color: var(--off-white);
    opacity: 0.8;
    font-weight: 500;
}

.table-dims-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(201, 169, 98, 0.4);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.table-dims-input-wrap:focus-within {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.18);
}

.table-dims-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    outline: none;
    min-width: 0;
    width: 80px;
    caret-color: var(--gold);
}

.table-dims-unit {
    padding: 0 0.8rem;
    color: var(--gold);
    font-size: 0.85rem;
    opacity: 0.7;
}

.table-dims-range {
    font-size: 0.75rem;
    color: var(--medium-gray);
}

.table-dims-preview {
    background: rgba(201, 169, 98, 0.08);
    border: 1px solid rgba(201, 169, 98, 0.15);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.table-dims-base-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--medium-gray);
}

.table-dims-price-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-dims-price-label {
    font-size: 0.9rem;
    color: var(--off-white);
    opacity: 0.8;
}

.table-dims-price-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
    transition: transform 0.2s;
}

.table-dims-surcharge {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    text-align: center;
}

.table-dims-surcharge.surcharge-larger {
    background: rgba(255, 170, 0, 0.15);
    color: #ffaa00;
}

.table-dims-surcharge.surcharge-smaller {
    background: rgba(255, 100, 100, 0.15);
    color: #ff8888;
}

.table-dims-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.table-dims-cancel {
    flex: 1;
    padding: 0.7rem;
    border: 1px solid rgba(201, 169, 98, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.table-dims-cancel:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(201, 169, 98, 0.6);
}

.table-dims-apply {
    flex: 1;
    padding: 0.7rem;
    border: none;
    border-radius: 8px;
    background: var(--gold);
    color: var(--charcoal);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.table-dims-apply:hover {
    background: #d4b876;
}

.table-dims-apply:active {
    transform: scale(0.98);
}

.custom-dims-tag {
    font-size: 0.7rem;
    background: rgba(201, 169, 98, 0.2);
    color: var(--gold);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.3rem;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .table-dims-content {
        padding: 1.5rem;
    }

    .table-dims-inputs {
        grid-template-columns: 1fr;
    }

    .table-dims-content h3 {
        font-size: 1.2rem;
    }
}

/* Strefa kosza — pojawia się przy przeciąganiu modułu na mobile */
.planner-trash-zone {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(192, 57, 43, 0.3);
    border: 2px dashed rgba(192, 57, 43, 0.5);
    color: rgba(255, 255, 255, 0.5);
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, background 0.15s, border-color 0.15s;
}

.planner-trash-zone.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.planner-trash-zone.hover {
    background: rgba(192, 57, 43, 0.7);
    border-color: #e74c3c;
    color: #fff;
    transform: translateX(-50%) scale(1.15);
}

/* Ghost element for dragging from palette */
.palette-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 98, 0.4);
    border: 2px solid var(--gold);
    border-radius: 3px;
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-body);
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.layout-diagram .mod-cushion {
    fill: var(--gold);
    fill-opacity: 0.15;
    stroke: var(--gold);
    stroke-width: 1;
    transition: fill-opacity 0.15s;
}

.layout-diagram .mod-table {
    fill: var(--medium-gray);
    fill-opacity: 0.3;
    stroke: var(--light-gray);
    stroke-width: 1;
    transition: fill-opacity 0.15s;
}

.layout-diagram .mod-edge {
    fill: var(--gold);
    fill-opacity: 0.5;
    pointer-events: none;
}

.draggable-module.selected .mod-cushion,
.draggable-module.selected .mod-table {
    stroke: var(--gold);
    stroke-width: 3;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 12px rgba(201, 169, 98, 0.5));
    animation: module-selected-pulse 1.5s ease-in-out infinite;
}

@keyframes module-selected-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 12px rgba(201, 169, 98, 0.5)); }
    50% { filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 20px rgba(201, 169, 98, 0.7)); }
}

.layout-diagram .mod-label {
    fill: var(--gold);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    text-anchor: middle;
    dominant-baseline: central;
    opacity: 0.7;
    pointer-events: none;
}

.table-edit-btn {
    position: absolute;
    display: none;
    transform: translateX(-50%);
    z-index: 20;
    background: var(--gold);
    color: var(--charcoal);
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, transform 0.15s;
}

.table-edit-btn:hover {
    background: #d4b876;
    transform: translateX(-50%) scale(1.05);
}

.table-edit-btn:active {
    transform: translateX(-50%) scale(0.97);
}

.layout-diagram .layout-hint {
    fill: var(--medium-gray);
    font-family: var(--font-body);
    font-size: 9px;
    text-anchor: middle;
    letter-spacing: 1px;
}

.draggable-module {
    cursor: grab;
}

.draggable-module:hover .mod-cushion {
    fill-opacity: 0.3;
    stroke-width: 1.5;
}

.draggable-module:hover .mod-table {
    fill-opacity: 0.5;
    stroke-width: 1.5;
}

.draggable-module.dragging {
    cursor: grabbing;
    opacity: 0.75;
}

.draggable-module.dragging .mod-cushion,
.draggable-module.dragging .mod-table {
    stroke-dasharray: 4 2;
}

.drag-hint-cursor {
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Custom textarea for "Inny" */
.custom-textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--dark-gray);
    background: var(--dark-gray);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    resize: vertical;
    min-height: 80px;
    transition: var(--transition-smooth);
    letter-spacing: 0.3px;
}

.custom-textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--charcoal);
}

/* ========================================
   Color Options - Luxurious Swatches
   ======================================== */
.color-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    justify-items: center;
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 16px 8px;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
}

.color-option:hover {
    background: rgba(255,255,255,0.03);
}

.color-option.selected {
    border-color: var(--gold);
    background: rgba(201, 169, 98, 0.08);
}

.color-swatch {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.1);
    transition: var(--transition-smooth);
    position: relative;
}

.color-swatch::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
}

.color-option:hover .color-swatch {
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.color-option.selected .color-swatch {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 2px var(--gold);
}

.color-option span {
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--light-gray);
    transition: var(--transition-smooth);
    text-align: center;
}

.color-option.selected span {
    color: var(--gold);
}

.color-ral {
    font-size: 0.65rem;
    color: var(--gold);
    opacity: 0.8;
    letter-spacing: 0.5px;
    margin-top: -4px;
}

/* Custom RAL Color Option */
.custom-ral-swatch {
    background: conic-gradient(from 0deg, #e74c3c, #f39c12, #f1c40f, #2ecc71, #3498db, #9b59b6, #e74c3c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-ral-plus {
    font-size: 24px;
    font-weight: 300;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.custom-ral-swatch.has-color .custom-ral-plus {
    display: none;
}

.custom-ral-input {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--gold);
    border-radius: 8px;
    animation: fadeIn 0.3s ease;
}

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

.custom-ral-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.custom-ral-field label {
    font-size: 0.9rem;
    color: var(--light-gray);
}

.custom-ral-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ral-prefix {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
}

.custom-ral-row input {
    width: 100px;
    padding: 12px 16px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--medium-gray);
    border-radius: 6px;
    color: var(--off-white);
    transition: border-color 0.2s;
}

.custom-ral-row input:focus {
    outline: none;
    border-color: var(--gold);
}

.custom-ral-row input::placeholder {
    color: var(--medium-gray);
    font-weight: 400;
}

.custom-ral-result {
    min-height: 24px;
    font-size: 0.9rem;
    text-align: center;
}

.custom-ral-result.valid {
    color: var(--gold);
}

.custom-ral-result.invalid {
    color: #e74c3c;
}


/* ========================================
   Upholstery Section (Step 5)
   ======================================== */
.upholstery-section {
    margin-bottom: 28px;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--gold);
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--gold);
}

.material-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.material-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border: 1px solid var(--dark-gray);
    background: transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
    min-width: 240px;
}

.material-option:hover {
    border-color: var(--gold);
    background: rgba(201, 169, 98, 0.05);
}

.material-option.active {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.1) 0%, transparent 100%);
}

.material-icon {
    font-size: 1.8rem;
    opacity: 0.9;
}

.material-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.material-info strong {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--white);
}

.material-info span {
    font-size: 0.8rem;
    color: var(--light-gray);
    font-weight: 400;
}

/* ========================================
   Fabric Groups (Step 5 - Tabbed UI)
   ======================================== */
.fabric-groups-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Fabric class section (like step3 mode toggle) */
.fabric-group-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.fabric-class-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.fabric-class-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.fabric-class-toggle {
    display: flex;
    gap: 0;
}

.fabric-group-tab {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--dark-gray);
    color: var(--light-gray);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-left: -1px;
}

.fabric-group-tab:first-child {
    margin-left: 0;
}

.fabric-group-tab:hover {
    border-color: var(--gold);
    color: var(--gold);
    z-index: 1;
}

.fabric-group-tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
    font-weight: 600;
    z-index: 2;
}

/* Fabric lines chips (like step3 options) */
.fabric-lines-chips {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    overflow: hidden;
}

.fabric-lines-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fabric-lines-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.fabric-lines-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fabric-line-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 18px;
    border: 1px solid var(--dark-gray);
    background: transparent;
    color: var(--light-gray);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.fabric-line-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.fabric-line-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
    font-weight: 600;
}

.fabric-line-chip .chip-label {
    font-weight: inherit;
    font-size: inherit;
}

.fabric-line-chip .chip-desc {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 2px;
}

.fabric-line-chip.active .chip-desc {
    opacity: 0.9;
}

/* Ivory theme - fabric tabs */
[data-theme="ivory"] .fabric-group-tab {
    background: transparent;
    border: 1px solid #d4c9b0;
    color: #3d3225;
}

[data-theme="ivory"] .fabric-group-tab:hover {
    border-color: var(--gold);
    color: var(--gold);
}

[data-theme="ivory"] .fabric-group-tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1a1a;
}

[data-theme="ivory"] .fabric-line-chip {
    border-color: #d4c9b0;
    color: #3d3225;
}

[data-theme="ivory"] .fabric-line-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

[data-theme="ivory"] .fabric-line-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1a1a;
}

.fabric-group-colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ========================================
   Fabric Lines System (Step 5)
   ======================================== */
.fabric-lines-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fabric-line {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--dark-gray);
    border-radius: 4px;
    overflow: hidden;
}

.fabric-line-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(201, 169, 98, 0.08);
    border-bottom: 1px solid var(--dark-gray);
}

.fabric-line-header .line-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--gold);
}

.fabric-line-header .line-count {
    font-size: 0.75rem;
    color: var(--light-gray);
    margin-left: auto;
    margin-right: 12px;
}

.fabric-line-header .line-arrow {
    font-size: 0.6rem;
    color: var(--light-gray);
    transition: transform 0.3s ease;
}

.fabric-line-colors {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin-top: 16px;
    width: 100%;
}

/* Fabric Pattern Swatches */
.fabric-pattern-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    min-width: 0;
}

.fabric-pattern-option:hover {
    transform: translateY(-4px);
}

.fabric-pattern-option.selected {
    transform: translateY(-4px);
}

.fabric-pattern {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    border: 2px solid var(--dark-gray);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-subtle);
}

.fabric-pattern-option:hover .fabric-pattern {
    border-color: var(--gold);
    box-shadow: var(--shadow-medium);
}

.fabric-pattern-option.selected .fabric-pattern {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}

.fabric-color-name {
    font-size: 0.75rem;
    color: var(--light-gray);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fabric-pattern-option.selected .fabric-color-name {
    color: var(--gold);
    font-weight: 600;
}

.no-colors {
    color: var(--light-gray);
    font-size: 0.85rem;
    padding: 20px;
    text-align: center;
}

/* ========================================
   FABRIC PREVIEW MODES
   ======================================== */

/* Hover Popup */
.fabric-preview-popup {
    display: none;
    position: fixed;
    z-index: 1500;
    background: var(--charcoal);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    width: 300px;
    animation: fabricPopupIn 0.15s ease;
}

@keyframes fabricPopupIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.fabric-preview-popup.active {
    display: block;
}

.fabric-popup-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.fabric-popup-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--dark-gray);
}

.fabric-popup-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--off-white);
}

.fabric-popup-id {
    font-size: 0.75rem;
    color: var(--medium-gray);
    font-family: monospace;
}

/* Panel Preview */
.fabric-preview-panel {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 16px 20px;
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    border-radius: 12px;
    margin-bottom: 20px;
    min-height: 100px;
    transition: all 0.3s ease;
}

.fabric-preview-panel-placeholder {
    color: var(--medium-gray);
    font-size: 0.85rem;
    font-style: italic;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.fabric-panel-img {
    width: 200px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 2px solid var(--dark-gray);
}

.fabric-panel-swatch-large {
    width: 200px;
    height: 140px;
    border-radius: 8px;
    flex-shrink: 0;
}

.fabric-panel-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fabric-panel-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--off-white);
    font-family: 'Cormorant Garamond', serif;
}

.fabric-panel-id {
    font-size: 0.8rem;
    color: var(--medium-gray);
    font-family: monospace;
}

.fabric-panel-hex {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--light-gray);
    font-family: monospace;
}

.fabric-panel-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

/* Lightbox Zoom Button */
.fabric-pattern {
    position: relative;
}

.fabric-zoom-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: var(--off-white);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    padding: 0;
    line-height: 1;
    z-index: 2;
}

.fabric-pattern-option:hover .fabric-zoom-btn {
    opacity: 1;
}

.fabric-zoom-btn:hover {
    background: var(--gold);
    color: var(--charcoal);
}

/* Shared Overlay (Lightbox & Modal) */
.fabric-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    animation: fabricOverlayIn 0.2s ease;
}

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

.fabric-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fabric-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
}

.fabric-overlay-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 90vh;
}

.fabric-overlay-close {
    position: absolute;
    top: -40px;
    right: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--medium-gray);
    background: transparent;
    color: var(--off-white);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fabric-overlay-close:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Lightbox Content */
.fabric-lightbox-img {
    max-width: 80vw;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.fabric-lightbox-swatch {
    width: 400px;
    height: 300px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.fabric-lightbox-info {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--off-white);
}

.fabric-lightbox-name {
    font-size: 1.2rem;
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif;
}

.fabric-lightbox-id {
    font-size: 0.85rem;
    color: var(--medium-gray);
    font-family: monospace;
}

.fabric-lightbox-counter {
    font-size: 0.8rem;
    color: var(--medium-gray);
}

/* Modal Content */
.fabric-modal-content {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    border-radius: 16px;
    padding: 24px;
    max-width: 480px;
    width: 90vw;
}

.fabric-modal-content .fabric-overlay-close {
    top: 12px;
    right: 12px;
    border: none;
}

.fabric-modal-img {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.fabric-modal-swatch {
    width: 100%;
    height: 200px;
    border-radius: 10px;
}

.fabric-modal-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--off-white);
}

.fabric-modal-name {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif;
}

.fabric-modal-id {
    font-size: 0.8rem;
    color: var(--medium-gray);
    font-family: monospace;
}

.fabric-modal-hex {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--light-gray);
    font-family: monospace;
}

.fabric-modal-counter {
    font-size: 0.8rem;
    color: var(--medium-gray);
    margin-left: auto;
}

/* Shared Navigation */
.fabric-overlay-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fabric-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--medium-gray);
    background: transparent;
    color: var(--off-white);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fabric-nav-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.fabric-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.fabric-overlay-select {
    padding: 10px 28px;
    background: var(--gold);
    color: var(--charcoal);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.fabric-overlay-select:hover {
    background: #d4b96a;
    transform: translateY(-1px);
}

.fabric-overlay-cancel {
    padding: 10px 28px;
    background: transparent;
    color: var(--off-white);
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.fabric-overlay-cancel:hover {
    border-color: var(--off-white);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="ivory"] .fabric-overlay-cancel {
    color: #2c2c2c;
    border-color: #c0b8a8;
}

[data-theme="ivory"] .fabric-overlay-cancel:hover {
    border-color: #2c2c2c;
    background: rgba(0, 0, 0, 0.05);
}

/* Ivory theme adjustments for fabric preview */
[data-theme="ivory"] .fabric-preview-popup {
    background: #f5f0e6;
    border-color: #b8956a;
}

[data-theme="ivory"] .fabric-popup-name,
[data-theme="ivory"] .fabric-lightbox-name,
[data-theme="ivory"] .fabric-modal-name,
[data-theme="ivory"] .fabric-panel-name {
    color: #2c2c2c;
}

[data-theme="ivory"] .fabric-preview-panel {
    background: #f5f0e6;
    border-color: #d4c9b0;
}

[data-theme="ivory"] .fabric-modal-content {
    background: #f5f0e6;
    border-color: #d4c9b0;
}

/* Mobile: disable hover popup, simplify panel */
@media (max-width: 768px) {
    .fabric-preview-popup {
        display: none !important;
    }

    .fabric-preview-panel {
        flex-direction: column;
        text-align: center;
    }

    .fabric-panel-img,
    .fabric-panel-swatch-large {
        width: 100%;
        max-width: 300px;
        height: 120px;
    }

    .fabric-lightbox-img {
        max-width: 95vw;
        max-height: 50vh;
    }

    .fabric-modal-content {
        width: 95vw;
        padding: 16px;
    }

    .fabric-zoom-btn {
        opacity: 1;
    }
}

/* Layout: Accordion */
.fabric-lines-accordion .fabric-line-header {
    cursor: pointer;
    transition: background 0.2s ease;
}

.fabric-lines-accordion .fabric-line-header:hover {
    background: rgba(201, 169, 98, 0.15);
}

.fabric-lines-accordion .fabric-line-colors {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.fabric-lines-accordion .fabric-line.expanded .fabric-line-colors {
    max-height: 500px;
    padding: 20px;
}

.fabric-lines-accordion .fabric-line.expanded .line-arrow {
    transform: rotate(180deg);
}

/* Layout: Sections */
.fabric-lines-sections .fabric-line-header {
    cursor: default;
}

.fabric-lines-sections .fabric-line-header .line-count,
.fabric-lines-sections .fabric-line-header .line-arrow {
    display: none;
}

/* Layout: Dropdown */
.fabric-lines-dropdown .line-selector {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: rgba(201, 169, 98, 0.08);
    border: 1px solid var(--dark-gray);
    border-radius: 4px;
}

.fabric-lines-dropdown .line-selector label {
    font-size: 0.85rem;
    color: var(--light-gray);
    letter-spacing: 1px;
}

.fabric-lines-dropdown .line-selector select {
    flex: 1;
    max-width: 300px;
    padding: 10px 16px;
    background: var(--charcoal);
    border: 1px solid var(--medium-gray);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.fabric-lines-dropdown .line-selector select:hover,
.fabric-lines-dropdown .line-selector select:focus {
    border-color: var(--gold);
    outline: none;
}

.fabric-lines-dropdown .fabric-line-colors {
    padding: 0;
    max-width: none;
}

/* Ivory theme adjustments */
[data-theme="ivory"] .fabric-line {
    background: rgba(0, 0, 0, 0.03);
    border-color: #d4c9b0;
}

[data-theme="ivory"] .fabric-line-header {
    background: rgba(201, 169, 98, 0.1);
    border-color: #d4c9b0;
}

[data-theme="ivory"] .fabric-pattern {
    border-color: #d4c9b0;
}

[data-theme="ivory"] .fabric-lines-dropdown .line-selector {
    background: rgba(201, 169, 98, 0.08);
    border-color: #d4c9b0;
}

[data-theme="ivory"] .fabric-lines-dropdown .line-selector select {
    background: #faf8f3;
    border-color: #d4c9b0;
    color: #3d3225;
}

/* ========================================
   Accessories (Step 6)
   ======================================== */
.accessories-section {
    margin-bottom: 24px;
}

.accessories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.accessory-card {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.accessory-card:hover {
    border-color: var(--medium-gray);
}

.accessory-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

.accessory-image {
    width: 100%;
    height: 120px;
    background: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.accessory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accessory-placeholder {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--gold) 0%, #8b7355 100%);
    opacity: 0.3;
    border-radius: 4px;
}

.accessory-info h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--off-white);
}

.accessory-description {
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin: 0;
}

.accessory-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
    margin: 0;
}

.accessory-price .price-note {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--light-gray);
    opacity: 0.7;
    margin-top: 2px;
}

.accessory-prices-by-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.accessory-prices-by-group .group-price {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--medium-gray);
}

.accessory-prices-by-group .group-price.active {
    font-weight: 600;
    color: var(--gold);
}

.accessory-single-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
}

[data-theme="ivory"] .accessory-prices-by-group .group-price {
    color: #8b8078;
}

[data-theme="ivory"] .accessory-prices-by-group .group-price.active {
    color: #8b7355;
}

.accessory-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
}

.acc-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--dark-gray);
    background: transparent;
    color: var(--off-white);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acc-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.acc-quantity {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

/* Pillows Section with Fabric Selector */
.pillows-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.pillows-section .accessory-description {
    display: none;
}

.pillows-header {
    display: flex;
    flex-direction: column;
}

.pillows-title {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: var(--off-white);
    font-family: var(--font-display);
    font-weight: 600;
}

.pillow-fabric-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pillow-fabric-label {
    font-size: 0.85rem;
    color: var(--medium-gray);
}

.pillow-fabric-chips {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.fabric-chip {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--dark-gray);
    color: var(--medium-gray);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fabric-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.fabric-chip.selected {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--charcoal);
}

.pillows-grid {
    display: flex;
    gap: 10px;
}

.pillows-grid .accessory-card {
    flex: 1;
    padding: 13px;
    gap: 8px;
    min-width: 0;
}

.pillows-grid .accessory-image {
    display: none;
}

.pillows-grid .accessory-info h4 {
    font-size: 0.95rem;
}

.pillows-grid .accessory-price {
    font-size: 0.87rem;
}

.pillows-grid .accessory-controls {
    justify-content: center;
}

.pillows-grid .acc-btn {
    width: 30px;
    height: 30px;
    font-size: 0.98rem;
}

.pillows-grid .acc-quantity {
    min-width: 27px;
    font-size: 0.8rem;
}

.included-pillows-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(201, 169, 98, 0.08);
    border: 1px solid rgba(201, 169, 98, 0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.5;
}

.included-pillows-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.included-pillows-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.included-pillows-text strong {
    color: var(--gold);
    font-size: 0.82rem;
}

.included-pillows-detail {
    color: var(--off-white);
    font-size: 0.78rem;
}

.included-pillows-note {
    color: var(--medium-gray);
    font-size: 0.75rem;
    font-style: italic;
}

[data-theme="ivory"] .included-pillows-info {
    background: rgba(139, 115, 85, 0.08);
    border-color: rgba(139, 115, 85, 0.2);
}

[data-theme="ivory"] .included-pillows-text strong {
    color: #8b7355;
}

.other-accessories-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--dark-gray);
}

.other-accessories-title {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    color: var(--off-white);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
}

.other-accessories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Ivory theme */
[data-theme="ivory"] .pillows-title,
[data-theme="ivory"] .other-accessories-title {
    color: #2d2416;
}

[data-theme="ivory"] .pillow-fabric-label {
    color: #7a6b5a;
}

[data-theme="ivory"] .fabric-chip {
    border-color: #d4c9b0;
    color: #7a6b5a;
}

[data-theme="ivory"] .fabric-chip:hover {
    border-color: #8b7355;
    color: #8b7355;
}

[data-theme="ivory"] .fabric-chip.selected {
    background: #8b7355;
    border-color: #8b7355;
    color: #fff;
}

[data-theme="ivory"] .other-accessories-section {
    border-top-color: #d4c9b0;
}

.accessories-summary {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.accessories-summary h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 1px;
}

.accessories-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 60px;
}

.no-accessories {
    color: var(--medium-gray);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
}

.accessory-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--dark-gray);
}

.acc-item-name {
    color: var(--off-white);
}

.acc-item-price {
    color: var(--gold);
    font-weight: 500;
}

.accessories-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--gold);
    font-weight: 600;
}

.accessories-total span:last-child {
    color: var(--gold);
    font-size: 1.1rem;
}

.no-accessories-available {
    color: var(--medium-gray);
    text-align: center;
    padding: 40px;
}

/* Ivory theme */
[data-theme="ivory"] .accessory-card {
    background: #f8f5f0;
    border-color: #d4c9b0;
}

[data-theme="ivory"] .accessory-card.selected {
    border-color: #8b7355;
    box-shadow: 0 0 0 1px #8b7355;
}

[data-theme="ivory"] .accessory-image {
    background: #ebe5d9;
}

[data-theme="ivory"] .accessory-info h4 {
    color: #2d2416;
}

[data-theme="ivory"] .accessories-summary {
    background: #f8f5f0;
    border-color: #d4c9b0;
}

[data-theme="ivory"] .acc-btn {
    border-color: #d4c9b0;
    color: #2d2416;
}

/* ========================================
   Cover Selection (Pokrowce) - Step 6
   ======================================== */
.step6-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.cover-selection-container {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.cover-section {
    max-width: none;
}

.cover-header {
    margin-bottom: 20px;
}

.cover-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.cover-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
}

.cover-toggle-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
}

.cover-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cover-options.hidden {
    display: none;
}

.cover-season-select {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cover-season-label,
.cover-items-label {
    font-size: 0.85rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cover-season-hint {
    font-size: 0.75rem;
    color: var(--medium-gray);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 8px;
}

.cover-season-buttons {
    display: flex;
    gap: 12px;
}

.cover-season-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid var(--dark-gray);
    color: var(--light-gray);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.cover-season-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.cover-season-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

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

.season-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.season-price {
    font-size: 0.75rem;
    opacity: 0.8;
}

.cover-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.cover-item:hover {
    border-color: var(--gold);
}

.cover-item.selected {
    border-color: var(--gold);
    background: rgba(201, 169, 98, 0.1);
}

.cover-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
    flex-shrink: 0;
}

.cover-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cover-item-name {
    font-weight: 500;
    color: var(--white);
}

.cover-item-area {
    font-size: 0.75rem;
    color: var(--light-gray);
}

.cover-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cover-price-details {
    font-size: 0.7rem;
    color: var(--light-gray);
    font-weight: 400;
}

.cover-price-total {
    font-weight: 600;
    color: var(--gold);
    font-size: 1rem;
}

.cover-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--dark-gray);
    border: 1px solid var(--gold);
    margin-top: 10px;
}

.cover-total-label {
    font-size: 0.9rem;
    color: var(--light-gray);
}

.cover-total-price {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--gold);
}

.cover-hint {
    color: var(--medium-gray);
    font-size: 0.9rem;
    padding: 20px;
    text-align: center;
}

/* Ivory theme */
[data-theme="ivory"] .cover-item {
    background: #f8f5f0;
    border-color: #d4c9b0;
}

[data-theme="ivory"] .cover-item.selected {
    background: rgba(139, 115, 85, 0.1);
    border-color: #8b7355;
}

[data-theme="ivory"] .cover-season-btn {
    border-color: #d4c9b0;
    color: #3d3225;
}

[data-theme="ivory"] .cover-season-btn.active {
    background: #8b7355;
    border-color: #8b7355;
    color: #fff;
}

[data-theme="ivory"] .cover-total {
    background: #ebe5d9;
    border-color: #8b7355;
}

/* New Cover Selection - Independent per-item season choice */
.cover-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: var(--off-white);
}

.cover-subtitle {
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin: 8px 0 0 0;
}

.cover-items-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cover-item-card {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 10px;
    transition: var(--transition-smooth);
}

.cover-item-card.has-selection {
    border-color: var(--gold);
    background: rgba(201, 169, 98, 0.05);
}

.cover-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cover-item-card .cover-item-name {
    font-weight: 600;
    color: var(--off-white);
    font-size: 0.82rem;
}

.cover-item-fabric {
    font-size: 0.68rem;
    color: var(--medium-gray);
}

.cover-item-seasons {
    display: flex;
    gap: 8px;
}

.cover-season-toggle {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    background: transparent;
    border: 1px solid var(--dark-gray);
    color: var(--medium-gray);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.cover-season-toggle:hover {
    border-color: var(--gold);
    color: var(--off-white);
}

.cover-season-toggle.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--charcoal);
}

.cover-season-toggle .season-icon {
    font-size: 1rem;
}

.cover-season-toggle .season-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cover-season-toggle .season-price {
    font-size: 0.75rem;
    font-weight: 500;
}

.cover-total-breakdown {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cover-total-season {
    font-size: 1rem;
    color: var(--off-white);
}

.cover-total-sum {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold);
}

/* Ivory theme - new cover selection */
[data-theme="ivory"] .cover-title {
    color: #2d2416;
}

[data-theme="ivory"] .cover-subtitle {
    color: #7a6b5a;
}

[data-theme="ivory"] .cover-item-card {
    background: #f8f5f0;
    border-color: #d4c9b0;
}

[data-theme="ivory"] .cover-item-card.has-selection {
    border-color: #8b7355;
    background: rgba(139, 115, 85, 0.08);
}

[data-theme="ivory"] .cover-item-card .cover-item-name {
    color: #2d2416;
}

[data-theme="ivory"] .cover-season-toggle {
    border-color: #d4c9b0;
    color: #7a6b5a;
}

[data-theme="ivory"] .cover-season-toggle:hover {
    border-color: #8b7355;
    color: #2d2416;
}

[data-theme="ivory"] .cover-season-toggle.active {
    background: #8b7355;
    border-color: #8b7355;
    color: #fff;
}

[data-theme="ivory"] .cover-total-season {
    color: #2d2416;
}

[data-theme="ivory"] .cover-total-sum {
    color: #8b7355;
}

/* ========================================
   Summary (Step 7) - Premium Layout
   ======================================== */

/* Step 7 always uses full available width - no max-width restrictions */
.summary-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    width: 100%;
}

.preview-box {
    background: linear-gradient(180deg, var(--dark-gray) 0%, var(--charcoal) 100%);
    border: 1px solid var(--dark-gray);
    padding: 12px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.preview-box::before {
    content: 'RZUT Z GÓRY';
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--medium-gray);
}

#summary-canvas {
    width: 100%;
    height: 100%;
}

/* Preview zoom button */
.preview-zoom-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: var(--charcoal);
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.preview-zoom-btn:hover {
    opacity: 1;
    background: var(--gold);
    color: var(--charcoal);
    transform: scale(1.1);
}

/* Layout Preview Modal */
.layout-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.layout-preview-modal.active {
    display: flex;
}

.layout-preview-content {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    width: 75vw;
    max-width: 1200px;
    max-height: 90vh;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.layout-preview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.layout-preview-close:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.layout-preview-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
    padding-right: 40px;
}

.layout-preview-canvas-wrap {
    flex: 1;
    background: linear-gradient(180deg, var(--dark-gray) 0%, var(--charcoal) 100%);
    border: 1px solid var(--dark-gray);
    padding: 20px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#layout-preview-canvas {
    width: 100%;
    height: 100%;
    max-height: 50vh;
}

.layout-preview-legend {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--light-gray);
}

.layout-preview-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--dark-gray);
    border: 1px solid rgba(255,255,255,0.1);
}

.layout-preview-legend-item .module-label {
    font-weight: 600;
    color: var(--gold);
    min-width: 40px;
}

.layout-preview-legend-item .module-name {
    color: var(--white);
}

.layout-preview-legend-item .module-dims {
    color: var(--medium-gray);
    font-size: 0.8rem;
}

/* Ivory theme */
[data-theme="ivory"] .layout-preview-content {
    background: var(--ivory-card);
    border-color: var(--ivory-border);
}

[data-theme="ivory"] .layout-preview-canvas-wrap {
    background: linear-gradient(180deg, #f5f0e6 0%, #ebe5d9 100%);
    border-color: var(--ivory-border);
}

[data-theme="ivory"] .layout-preview-legend-item {
    background: #f5f0e6;
    border-color: var(--ivory-border);
}

/* Ivory theme preview */
[data-theme="ivory"] .preview-box {
    background: linear-gradient(180deg, #f5f0e6 0%, #ebe5d9 100%);
    border-color: #d4c9b0;
}

.summary-card {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 20px;
    margin-bottom: 12px;
    position: relative;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.summary-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dark-gray);
    color: var(--white);
}

.summary-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.summary-item .label {
    color: var(--light-gray);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.summary-item .value {
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.3px;
}

.summary-item .value.modules-list {
    text-align: right;
    line-height: 1.6;
}

.summary-item:has(.modules-list) {
    align-items: flex-start;
}

.summary-item:has(.modules-list) .label {
    padding-top: 2px;
}

.sum-dimensions {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--light-gray);
    opacity: 0.8;
    margin-left: 8px;
}

.price-breakdown {
    margin-top: 8px;
    padding: 6px 0;
    border-top: 1px dashed var(--dark-gray);
}

.price-breakdown .price-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--light-gray);
}

.price-breakdown .price-line span:last-child {
    color: var(--off-white);
}

.price-estimate {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--gold);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.price-label {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--light-gray);
}

.price-value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1px;
}

.price-note {
    font-size: 0.75rem;
    color: var(--medium-gray);
    margin-top: 8px;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* Contact Form - Elegant */
.contact-form {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 20px;
}

.contact-form h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--white);
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--light-gray);
    margin-bottom: 4px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dark-gray);
    background: var(--dark-gray);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    letter-spacing: 0.3px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--charcoal);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--medium-gray);
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* ========================================
   Summary Layout Variants
   ======================================== */

/* Hero Price Layout */
.summary-hero-price {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hero-price-header {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(180deg, var(--charcoal) 0%, transparent 100%);
}

.hero-title {
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--medium-gray);
    margin: 0 0 20px 0;
}

.hero-price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hero-price-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--medium-gray);
}

.hero-price-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 2px;
}

.hero-price-note {
    font-size: 0.75rem;
    color: var(--medium-gray);
    font-style: italic;
}

.hero-content {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.hero-preview .preview-box-mini {
    aspect-ratio: 1;
    padding: 8px;
}

.hero-preview .preview-box-mini::before {
    display: none;
}

.hero-details-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--medium-gray);
}

.hero-value {
    font-size: 0.95rem;
    color: var(--off-white);
}

.hero-form .contact-form-compact {
    padding: 16px;
}

.hero-form .contact-form-compact h3 {
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.hero-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hero-form .form-group {
    margin-bottom: 8px;
}

.hero-form .form-group input {
    padding: 8px 10px;
    font-size: 0.85rem;
}

/* Card Stack Layout */
.summary-card-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 700px;
    margin: 0 auto;
}

.stack-config-card {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    overflow: hidden;
}

.stack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(90deg, var(--dark-gray) 0%, transparent 100%);
    border-bottom: 1px solid var(--dark-gray);
}

.stack-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stack-collection {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gold);
}

.stack-type {
    font-size: 0.85rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stack-price-group {
    text-align: right;
}

.stack-price-label {
    font-size: 0.7rem;
    color: var(--medium-gray);
    display: block;
}

.stack-price {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--gold);
}

.stack-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    padding: 20px;
}

.stack-preview .preview-box-compact {
    aspect-ratio: 1;
    padding: 8px;
}

.stack-preview .preview-box-compact::before {
    display: none;
}

.stack-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stack-detail {
    display: flex;
    gap: 12px;
}

.stack-label {
    font-size: 0.75rem;
    color: var(--medium-gray);
    min-width: 70px;
}

.stack-value {
    font-size: 0.9rem;
    color: var(--off-white);
}

.stack-form-card {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 24px;
}

.stack-form-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 6px 0;
    color: var(--off-white);
}

.stack-form-subtitle {
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin: 0 0 20px 0;
}

.form-inline .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.form-inline .form-row.form-row-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.form-inline .form-group {
    margin-bottom: 0;
}

.form-inline .form-group input {
    padding: 8px 10px;
    font-size: 0.82rem;
}

.form-privacy-note {
    font-size: 0.58rem;
    color: var(--medium-gray);
    text-align: center;
    margin: 8px 0 0;
    line-height: 1.4;
}

.form-privacy-note a {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 98, 0.3);
}

.form-privacy-note a:hover {
    text-decoration-color: var(--gold);
}

[data-theme="ivory"] .form-privacy-note a {
    color: #8b7355;
    text-decoration-color: rgba(139, 115, 85, 0.3);
}

/* Form validation toast */
.form-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #2c2c2c;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid rgba(231, 76, 60, 0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    white-space: nowrap;
}

.form-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.form-toast-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

[data-theme="ivory"] .form-toast {
    background: #fff;
    color: #2c2c2c;
    border-color: rgba(231, 76, 60, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Field error highlight */
.field-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
    animation: field-shake 0.4s ease;
}

@keyframes field-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.btn-full {
    width: 100%;
    margin-top: 4px;
}

/* Split Action Layout */
.summary-split-action {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.split-main {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 24px;
}

.split-preview .preview-box-large {
    aspect-ratio: 16/10;
    padding: 20px;
}

.split-sidebar {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.split-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--medium-gray);
    margin: 0 0 16px 0;
}

.split-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.split-item {
    font-size: 0.9rem;
    color: var(--off-white);
    padding: 4px 0;
    border-bottom: 1px solid var(--dark-gray);
}

.split-price {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gold);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.split-price-label {
    font-size: 0.75rem;
    color: var(--medium-gray);
}

.split-price-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--gold);
}

.split-action {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.split-action-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.split-action-label {
    font-size: 0.85rem;
    color: var(--off-white);
    font-weight: 500;
    white-space: nowrap;
}

.split-email-input {
    flex: 1;
    max-width: 300px;
    padding: 12px 16px;
    border: 1px solid var(--dark-gray);
    background: var(--dark-gray);
    color: var(--white);
    font-size: 0.95rem;
}

.split-email-input:focus {
    outline: none;
    border-color: var(--gold);
}

.split-submit {
    padding: 12px 24px;
    white-space: nowrap;
}

.split-action-alt {
    font-size: 0.85rem;
    color: var(--medium-gray);
}

.split-phone {
    color: var(--gold);
    text-decoration: none;
    font-weight: 500;
}

.split-phone:hover {
    text-decoration: underline;
}

/* Detailed Layout - New improved summary */
.summary-layout.summary-detailed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: none;
}

.detailed-header-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.detailed-header-compact .detailed-collection {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold);
}

.detailed-header-compact .detailed-type {
    font-size: 0.8rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detailed-sep {
    color: var(--medium-gray);
    font-size: 0.8rem;
}

.detailed-total-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold);
}

.detailed-total-eur {
    font-size: 0.85rem;
    color: var(--medium-gray);
}

.detailed-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
}

.detailed-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-box-detailed {
    aspect-ratio: 1;
    padding: 12px;
}

.preview-box-detailed::before {
    font-size: 0.55rem;
}

.detailed-config-info {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 16px;
}

.config-info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.config-info-note .config-info-value {
    font-style: italic;
    color: var(--medium-gray);
    font-size: 0.8rem;
}

.config-info-item:last-child {
    border-bottom: none;
}

.config-info-label {
    font-size: 0.75rem;
    color: var(--medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-info-value {
    font-size: 0.85rem;
    color: var(--off-white);
    text-align: right;
    max-width: 60%;
}

.detailed-breakdown {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 0;
    overflow: hidden;
}

.breakdown-section {
    border-bottom: 1px solid var(--dark-gray);
}

.breakdown-section:last-of-type {
    border-bottom: none;
}

.breakdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.breakdown-header:hover {
    background: rgba(255,255,255,0.03);
}

.breakdown-toggle {
    font-size: 0.7rem;
    color: var(--medium-gray);
    width: 12px;
    flex-shrink: 0;
}

.breakdown-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--medium-gray);
    margin: 0;
    flex: 1;
}

.breakdown-header-price {
    font-size: 0.85rem;
    color: var(--off-white);
    font-weight: 600;
    white-space: nowrap;
}

.breakdown-body {
    padding: 0 16px 12px;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    max-height: 500px;
    opacity: 1;
}

.breakdown-body.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 16px;
}

.breakdown-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.breakdown-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.breakdown-row:last-child {
    border-bottom: none;
}

.breakdown-name {
    font-size: 0.8rem;
    color: var(--off-white);
}

.breakdown-qty {
    font-size: 0.8rem;
    color: var(--medium-gray);
    min-width: 30px;
    text-align: center;
}

.breakdown-price {
    font-size: 0.8rem;
    color: var(--off-white);
    font-weight: 500;
    min-width: 80px;
    text-align: right;
}

.breakdown-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--dark-gray) 0%, transparent 100%);
    border-top: 1px solid var(--gold);
}

.grand-total-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--off-white);
}

.grand-total-values {
    text-align: right;
}

.grand-total-pln {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold);
}

.grand-total-eur {
    font-size: 0.85rem;
    color: var(--medium-gray);
}

.breakdown-estimate-note {
    padding: 8px 16px 10px;
    font-size: 0.7rem;
    color: var(--medium-gray);
    font-style: italic;
    line-height: 1.4;
}

.detailed-form-card {
    background: var(--charcoal);
    border: 1px solid var(--dark-gray);
    padding: 16px 20px;
}

.detailed-form-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 4px 0;
    color: var(--off-white);
}

.detailed-form-subtitle {
    font-size: 0.8rem;
    color: var(--medium-gray);
    margin: 0 0 14px 0;
}

/* Ivory theme for detailed layout */
[data-theme="ivory"] .detailed-config-info,
[data-theme="ivory"] .detailed-breakdown,
[data-theme="ivory"] .detailed-form-card {
    background: #f8f5f0;
    border-color: #d4c9b0;
}

[data-theme="ivory"] .detailed-collection,
[data-theme="ivory"] .detailed-total-value,
[data-theme="ivory"] .grand-total-pln {
    color: #8b7355;
}

[data-theme="ivory"] .breakdown-grand-total {
    background: linear-gradient(90deg, #ebe5d9 0%, transparent 100%);
    border-top-color: #8b7355;
}

[data-theme="ivory"] .breakdown-section {
    border-bottom-color: #d4c9b0;
}

[data-theme="ivory"] .breakdown-row {
    border-bottom-color: rgba(0,0,0,0.05);
}

[data-theme="ivory"] .breakdown-header:hover {
    background: rgba(0,0,0,0.03);
}

[data-theme="ivory"] .breakdown-header-price {
    color: #2c2c2c;
}

[data-theme="ivory"] .config-info-item {
    border-bottom-color: rgba(0,0,0,0.05);
}

/* Midnight theme for detailed layout */
[data-theme="midnight"] .detailed-collection,
[data-theme="midnight"] .detailed-total-value,
[data-theme="midnight"] .grand-total-pln {
    color: #7eb8da;
}

[data-theme="midnight"] .breakdown-grand-total {
    border-top-color: #7eb8da;
}

/* Responsive detailed layout */
@media (max-width: 768px) {
    .detailed-content {
        grid-template-columns: 1fr;
    }

    .detailed-preview {
        order: -1;
    }

    .preview-box-detailed {
        aspect-ratio: 4/3;
        max-height: 200px;
    }

    .detailed-config-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .config-info-item {
        flex-direction: column;
        gap: 4px;
        padding: 12px;
    }

    .config-info-item:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,0.05);
    }

    .config-info-value {
        text-align: left;
        max-width: 100%;
    }

    .detailed-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .detailed-total {
        text-align: left;
    }

    .breakdown-row {
        grid-template-columns: 1fr auto;
    }

    .breakdown-qty {
        display: none;
    }

    .breakdown-name::after {
        content: attr(data-qty);
        color: var(--medium-gray);
        margin-left: 8px;
    }
}

/* Ivory Theme - Summary Variants */
[data-theme="ivory"] .hero-price-header {
    background: linear-gradient(180deg, #ebe5d9 0%, transparent 100%);
}

[data-theme="ivory"] .hero-price-value,
[data-theme="ivory"] .stack-collection,
[data-theme="ivory"] .stack-price,
[data-theme="ivory"] .split-price-value {
    color: #8b7355;
}

[data-theme="ivory"] .stack-config-card,
[data-theme="ivory"] .stack-form-card,
[data-theme="ivory"] .split-sidebar,
[data-theme="ivory"] .split-action {
    background: #f8f5f0;
    border-color: #d4c9b0;
}

[data-theme="ivory"] .stack-header {
    background: linear-gradient(90deg, #ebe5d9 0%, transparent 100%);
    border-bottom-color: #d4c9b0;
}

[data-theme="ivory"] .split-item {
    border-bottom-color: #d4c9b0;
}

[data-theme="ivory"] .split-price,
[data-theme="ivory"] .price-estimate {
    border-top-color: #8b7355;
}

[data-theme="ivory"] .split-email-input {
    background: #ebe5d9;
    border-color: #d4c9b0;
    color: #2d2416;
}

[data-theme="ivory"] .split-phone {
    color: #8b7355;
}

/* ========================================
   Navigation Buttons - Premium (Sticky Bottom)
   ======================================== */
.navigation {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
    padding: 20px 60px;
    background: linear-gradient(to top, var(--charcoal) 0%, var(--charcoal) 80%, transparent 100%);
    z-index: 90;
}

.navigation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 60px;
    right: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.3;
}

/* Wymiary w nawigacji */
.nav-dimensions {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--light-gray);
}

.nav-dims-label {
    opacity: 0.6;
}

.nav-dims-text {
    color: var(--gold);
    font-weight: 500;
}

.nav-dims-separator {
    opacity: 0.4;
}

.nav-dims-area {
    color: var(--off-white);
}

@media (max-width: 480px) {
    .nav-dimensions {
        flex-direction: column;
        gap: 2px;
        font-size: 0.75rem;
    }
    .nav-dims-separator,
    .nav-dims-label {
        display: none;
    }
}

.btn {
    width: var(--sidebar-width);
    padding: 16px 0;
    border: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: var(--transition-slow);
}

.btn:hover::before {
    left: 100%;
}

.btn-back {
    background: transparent;
    border: 1px solid var(--dark-gray);
    color: var(--light-gray);
}

.btn-back:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-back:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-left {
    display: flex;
    gap: 8px;
}

.btn-reset {
    background: transparent;
    border: 1px solid var(--dark-gray);
    color: var(--medium-gray);
    font-size: 0.7rem;
    padding: 10px 16px;
}

.btn-reset:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-reset::before {
    content: none;
}

.btn-next,
.btn-submit,
.btn-primary {
    background: var(--gold);
    color: var(--black);
    border: 1px solid var(--gold);
}

.btn-next:hover,
.btn-submit:hover,
.btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-submit {
    width: 100%;
    padding: 14px;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ========================================
   Guided Tour Overlay
   ======================================== */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.tour-overlay.show {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s 0s;
}

/* Spotlight — highlights the target element */
.tour-spotlight {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1501;
    pointer-events: none;
}

.tour-spotlight::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 2px solid var(--gold);
    border-radius: 10px;
    animation: tourPulse 2s ease-in-out infinite;
}

@keyframes tourPulse {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(183, 153, 98, 0.3); }
    50% { opacity: 1; box-shadow: 0 0 12px 4px rgba(183, 153, 98, 0.2); }
}

/* Click-through zone over spotlight */
.tour-click-zone {
    position: absolute;
    z-index: 1502;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 8px;
}

/* Animated cursor */
.tour-cursor {
    position: absolute;
    z-index: 1510;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.tour-cursor.visible {
    opacity: 1;
}

.tour-cursor.clicking {
    animation: tourCursorClick 0.3s ease;
}

@keyframes tourCursorClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

/* Tooltip */
.tour-tooltip {
    position: absolute;
    z-index: 1520;
    pointer-events: auto;
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--charcoal) 100%);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 20px 24px 16px;
    width: 320px;
    max-width: 90vw;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.tour-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.tour-tooltip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Arrow */
.tour-tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--dark-gray);
    border: 1px solid var(--gold);
    transform: rotate(45deg);
}

.tour-tooltip[data-position="bottom"] .tour-tooltip-arrow {
    top: -7px;
    left: 24px;
    border-right: none;
    border-bottom: none;
}

.tour-tooltip[data-position="top"] .tour-tooltip-arrow {
    bottom: -7px;
    left: 24px;
    border-left: none;
    border-top: none;
}

.tour-tooltip[data-position="left"] .tour-tooltip-arrow {
    right: -7px;
    top: 20px;
    border-left: none;
    border-bottom: none;
}

.tour-tooltip[data-position="right"] .tour-tooltip-arrow {
    left: -7px;
    top: 20px;
    border-right: none;
    border-top: none;
}

/* Tooltip text */
.tour-tooltip-text {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.tour-tooltip-subtext {
    font-size: 0.85rem;
    color: var(--light-gray);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 14px;
}

/* Progress dots */
.tour-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--medium-gray);
    transition: all 0.3s ease;
}

.tour-dot.active {
    background: var(--gold);
    box-shadow: 0 0 6px rgba(183, 153, 98, 0.5);
}

.tour-dot.done {
    background: var(--gold);
    opacity: 0.5;
}

/* Actions row */
.tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tour-skip {
    color: var(--medium-gray);
    font-size: 0.75rem;
    font-family: var(--font-body);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
}

.tour-skip:hover {
    color: var(--gold);
}

.tour-next {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    border: none;
    color: var(--charcoal);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.tour-next:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(183, 153, 98, 0.4);
}

/* Fallback single-point (steps 3-7): centered tooltip */
.tour-tooltip.fallback-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    text-align: center;
}

.tour-tooltip.fallback-center.visible {
    transform: translate(-50%, -50%);
}

.tour-tooltip.fallback-center .tour-tooltip-arrow {
    display: none;
}

.tour-tooltip.fallback-center .tour-dots {
    display: none;
}

/* Theme overrides */
[data-theme="ivory"] .tour-tooltip {
    background: linear-gradient(135deg, #f5f0e8 0%, #ebe4d8 100%);
    border-color: var(--gold);
}

[data-theme="ivory"] .tour-tooltip-text {
    color: var(--charcoal);
}

[data-theme="ivory"] .tour-tooltip-subtext {
    color: #6b6355;
}

[data-theme="ivory"] .tour-tooltip-arrow {
    background: #f5f0e8;
}

[data-theme="ivory"] .tour-skip {
    color: #9a9080;
}

[data-theme="ivory"] .tour-next {
    color: #fff;
}

/* ========================================
   Lightbox - Premium Image Zoom
   ======================================== */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--lightbox-bg, radial-gradient(ellipse at center, rgba(20, 18, 15, 0.97) 0%, rgba(0, 0, 0, 0.99) 100%));
    backdrop-filter: blur(20px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 60px;
}

.lightbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(201, 169, 98, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(201, 169, 98, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.lightbox.show {
    display: flex;
    animation: lightboxFadeIn 0.4s ease;
}

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

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: transparent;
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    line-height: 1;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 169, 98, 0.1);
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(201, 169, 98, 0.3);
    width: auto;
    height: 50px;
    padding: 0 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 25px;
}

/* Pozycja ustawiana dynamicznie przez JS */
.lightbox-prev { left: 4%; }
.lightbox-next { right: 4%; }

.lightbox-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: var(--gold);
}

/* Strzałki chevron */
.arrow-chevron {
    width: 12px;
    height: 12px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: rgba(201, 169, 98, 0.3);
    transition: border-color 0.15s ease;
}

.lightbox-prev .arrow-chevron {
    transform: rotate(-135deg);
}

.lightbox-next .arrow-chevron {
    transform: rotate(45deg);
}

/* Animacja sekwencyjna - dynamiczne kierunkowskazy */
.lightbox-prev .arrow-chevron:nth-child(1) { animation: chevronPrev 1.5s ease-in-out infinite; animation-delay: 0.3s; }
.lightbox-prev .arrow-chevron:nth-child(2) { animation: chevronPrev 1.5s ease-in-out infinite; animation-delay: 0.15s; }
.lightbox-prev .arrow-chevron:nth-child(3) { animation: chevronPrev 1.5s ease-in-out infinite; animation-delay: 0s; }

.lightbox-next .arrow-chevron:nth-child(1) { animation: chevronNext 1.5s ease-in-out infinite; animation-delay: 0s; }
.lightbox-next .arrow-chevron:nth-child(2) { animation: chevronNext 1.5s ease-in-out infinite; animation-delay: 0.15s; }
.lightbox-next .arrow-chevron:nth-child(3) { animation: chevronNext 1.5s ease-in-out infinite; animation-delay: 0.3s; }

@keyframes chevronPrev {
    0%, 45%, 100% { border-color: rgba(201, 169, 98, 0.3); }
    20%, 35% { border-color: var(--gold); }
}

@keyframes chevronNext {
    0%, 45%, 100% { border-color: rgba(201, 169, 98, 0.3); }
    20%, 35% { border-color: var(--gold); }
}

/* Hover - wszystkie świecą */
.lightbox-arrow:hover .arrow-chevron {
    animation: none;
    border-color: var(--gold);
}

.lightbox-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


.lightbox-counter {
    display: none;
}

.lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lightboxIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-frame {
    position: relative;
    padding: 12px;
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.15) 0%, rgba(201, 169, 98, 0.05) 100%);
    border: 1px solid var(--gold);
}

.lightbox-frame::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.lightbox-frame::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.lightbox-img-wrapper {
    overflow: hidden;
    max-width: 85vw;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

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

.lightbox-caption {
    margin-top: 30px;
    text-align: center;
}

.lightbox-caption-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lightbox-caption-sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Lightbox image transitions */
.lightbox-img {
    --lb-transition-speed: 0.8s;
}

.lightbox-img.transitioning {
    pointer-events: none;
}

/* Fade transition */
.lightbox-img.transition-fade {
    animation: lbFade var(--lb-transition-speed) ease;
}

@keyframes lbFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Zoom transition */
.lightbox-img.transition-zoom {
    animation: lbZoom var(--lb-transition-speed) ease;
}

@keyframes lbZoom {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}

/* Slide transition */
.lightbox-img.transition-slide {
    animation: lbSlide var(--lb-transition-speed) ease;
}

.lightbox-img.transition-slide-reverse {
    animation: lbSlideReverse var(--lb-transition-speed) ease;
}

@keyframes lbSlide {
    0% { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes lbSlideReverse {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Blur transition */
.lightbox-img.transition-blur {
    animation: lbBlur var(--lb-transition-speed) ease;
}

@keyframes lbBlur {
    0% { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: blur(0); }
}

/* Ken Burns effect - subtle breathing zoom */
/* Zdjęcie zawsze powiększone (1.03-1.08) żeby maska je przycinała */
.lightbox-img.ken-burns {
    transform: scale(1.03);
}

.lightbox-img.ken-burns:not(.transitioning) {
    animation: kenBurns 12s ease-in-out infinite;
}

@keyframes kenBurns {
    0%, 100% { transform: scale(1.03); }
    50% { transform: scale(1.08); }
}

/* Corner accents */
.lightbox-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--gold);
    border-style: solid;
    border-width: 0;
    opacity: 0.6;
}

.lightbox-corner--tl {
    top: -8px;
    left: -8px;
    border-top-width: 1px;
    border-left-width: 1px;
}

.lightbox-corner--tr {
    top: -8px;
    right: -8px;
    border-top-width: 1px;
    border-right-width: 1px;
}

.lightbox-corner--bl {
    bottom: -8px;
    left: -8px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.lightbox-corner--br {
    bottom: -8px;
    right: -8px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* Zoom button - right bottom of image, appears on hover */
.option-image .zoom-btn {
    position: absolute;
    bottom: -18px;
    right: 28px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border: 1.5px solid var(--gold);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0;
    opacity: 0;
    transform: translateY(6px) scale(0.5);
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.option-card:hover .option-image .zoom-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.option-image .zoom-btn:hover {
    background: var(--gold);
    color: var(--black);
}

/* Selected card checkmark - right top corner */
.option-card.selected::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    background: var(--gold);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 600;
    z-index: 5;
}

.option-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.05) 0%, transparent 50%);
    opacity: 1;
    pointer-events: none;
}

/* ========================================
   Modal - Elegant Confirmation
   ======================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--dark-gray);
    border: 1px solid var(--gold);
    padding: 60px 80px;
    text-align: center;
    max-width: 480px;
    animation: modalIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
}

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

.modal-icon {
    width: 70px;
    height: 70px;
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 28px;
}

.modal-content h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--white);
}

.modal-content p {
    color: var(--light-gray);
    margin-bottom: 16px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.modal-content p strong {
    color: var(--gold);
    font-weight: 600;
}

.modal-content .modal-subtext {
    font-size: 0.9rem;
    margin-bottom: 24px;
    color: var(--light-gray);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.modal-content .btn {
    width: auto;
    padding: 14px 28px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-content .btn-whatsapp {
    background: #25D366;
    color: #fff;
    border: 1px solid #25D366;
    display: none;
}

@media (max-width: 768px) {
    .modal-content .btn-whatsapp {
        display: inline-flex;
    }
}

.modal-content .btn-whatsapp:hover {
    background: #20bd5a;
    border-color: #20bd5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.modal-content .btn-secondary.modal-new-config {
    background: transparent;
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
    font-size: 0.75rem;
    padding: 12px 24px;
    margin-top: 16px;
}

.modal-content .btn-secondary.modal-new-config:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Step Confirmation Modal */
.step-confirm-modal .modal-content {
    max-width: 420px;
    padding: 48px 40px;
}

.step-confirm-modal .modal-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.step-confirm-modal .modal-actions {
    gap: 12px;
    margin-bottom: 0;
}

.step-confirm-modal .btn-secondary {
    background: transparent;
    border: 1px solid var(--medium-gray);
    color: var(--light-gray);
}

.step-confirm-modal .btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* ========================================
   Quality Badge (floating)
   ======================================== */
.quality-badge {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dark-gray);
    border: 1px solid var(--gold);
    padding: 14px 20px;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    z-index: 100;
}

.quality-badge::before {
    content: '★';
    font-size: 1rem;
}

.quality-badge.hidden {
    display: none;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
    .main-content {
        flex-direction: column;
    }

    .configurator {
        padding: 30px 40px;
    }

    .main-content > .config-step {
        padding: 40px 50px;
    }

    .live-summary {
        display: none;
    }

    .summary-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .accessories-summary {
        position: static;
        order: -1;
    }

    .options-grid.collections {
        grid-template-columns: repeat(3, 1fr);
    }

    .options-grid.furniture-types {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Summary layout variants - tablet */
    .hero-content {
        grid-template-columns: 160px 1fr 1fr;
    }

    .split-main {
        grid-template-columns: 1fr 220px;
    }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .configurator {
        padding: 24px 30px;
    }

    .navigation {
        padding: 16px 30px;
    }

    .navigation::before {
        left: 30px;
        right: 30px;
    }

    .options-grid.collections {
        grid-template-columns: repeat(2, 1fr);
    }

    .options-grid.furniture-types {
        grid-template-columns: repeat(2, 1fr);
    }

    .step6-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .accessories-grid,
    .pillows-grid,
    .other-accessories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillow-fabric-selector {
        flex-wrap: wrap;
    }

    .cover-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .logo img {
        height: 52px;
    }

    :root {
        --sidebar-width: 180px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 16px;
    }

    .configurator {
        padding: 16px 16px 70px;
    }

    /* Module palette - horizontal scroll, single row */
    .module-palette {
        padding: 4px 8px;
    }

    .palette-items {
        gap: 5px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .palette-item {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .palette-swatch {
        width: 36px;
        height: 36px;
        font-size: 0.5rem;
    }

    .palette-hint {
        font-size: 0.55rem;
        margin-bottom: 2px;
    }

    .header {
        padding: 12px 0 16px;
        margin-bottom: 12px;
    }

    .logo img {
        height: 46px;
    }

    .tagline {
        font-size: 0.65rem;
        letter-spacing: 2px;
    }

    .tagline-highlight {
        font-size: 0.75rem;
    }

    .progress-bar {
        margin-bottom: 12px;
    }

    .progress-steps {
        gap: 2px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .step-label {
        display: none;
    }

    .step.active .step-label {
        display: block;
        font-size: 0.55rem;
        max-width: 60px;
        text-align: center;
        line-height: 1.2;
    }

    .progress-line {
        left: 20px;
        right: 20px;
        top: 16px;
    }

    /* Mobile: dots variant - smaller gaps */
    .progress-bar.progress-style-dots .progress-steps {
        gap: 12px;
    }

    /* Mobile: breadcrumb - smaller text, wrap */
    .progress-bar.progress-style-breadcrumb .progress-breadcrumb {
        font-size: 0.7rem;
    }

    .progress-bar.progress-style-breadcrumb .breadcrumb-sep {
        margin: 0 4px;
    }

    /* Mobile: minimal - smaller text */
    .progress-bar.progress-style-minimal .progress-text {
        font-size: 0.75rem;
    }

    .main-content > .config-step {
        padding: 2px;
        min-height: 0;
        overflow-x: hidden;
    }

    .config-step h2 {
        font-size: 1.4rem;
    }

    .step-description {
        margin-bottom: 8px;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .options-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .options-grid.collections,
    .options-grid.furniture-types {
        grid-template-columns: 1fr 1fr;
    }

    .accessories-grid,
    .other-accessories-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

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

    .pillow-fabric-selector {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pillow-fabric-chips {
        gap: 4px;
        flex-wrap: wrap;
    }

    .fabric-chip {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    .pillows-section {
        margin-bottom: 16px;
    }

    .pillows-title {
        font-size: 1.05rem;
        margin-bottom: 6px;
    }

    .other-accessories-section {
        margin-top: 16px;
        padding-top: 12px;
    }

    .other-accessories-title {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .cover-items-grid {
        grid-template-columns: 1fr;
    }

    .cover-section {
        min-width: 0;
        overflow: hidden;
    }

    .cover-title {
        font-size: 1.1rem;
    }

    .cover-subtitle {
        font-size: 0.75rem;
        margin-top: 4px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .cover-header {
        margin-bottom: 12px;
    }

    .cover-item-card {
        padding: 8px;
    }

    .cover-item-header {
        margin-bottom: 4px;
    }

    .cover-item-card .cover-item-name {
        font-size: 0.75rem;
    }

    .cover-item-seasons {
        gap: 6px;
    }

    .cover-season-toggle {
        padding: 6px 4px;
        gap: 4px;
    }

    .cover-season-toggle .season-icon {
        font-size: 0.85rem;
    }

    .cover-season-toggle .season-label {
        font-size: 0.6rem;
    }

    .cover-season-toggle .season-price {
        font-size: 0.65rem;
    }

    .cover-total {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 10px;
    }

    .cover-total-breakdown {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cover-total-label {
        font-size: 0.8rem;
    }

    .cover-total-price {
        font-size: 1rem;
    }

    .cover-season-btn {
        padding: 8px 10px;
    }

    .cover-season-buttons {
        gap: 6px;
    }

    .season-icon {
        font-size: 1rem;
    }

    .season-name {
        font-size: 0.8rem;
    }

    .cover-item {
        padding: 8px 10px;
        gap: 6px;
    }

    /* Summary layout variants - mobile */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-preview {
        order: -1;
    }

    .hero-preview .preview-box-mini {
        max-width: 200px;
        margin: 0 auto;
    }

    .hero-form .form-row {
        grid-template-columns: 1fr;
    }

    .stack-body {
        grid-template-columns: 1fr;
    }

    .stack-preview {
        order: -1;
    }

    .stack-preview .preview-box-compact {
        max-width: 200px;
        margin: 0 auto;
    }

    .stack-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .stack-price-group {
        text-align: center;
    }

    .form-inline .form-row,
    .form-inline .form-row.form-row-4 {
        grid-template-columns: 1fr 1fr;
    }

    .split-main {
        grid-template-columns: 1fr;
    }

    .split-sidebar {
        order: -1;
    }

    .split-action {
        flex-direction: column;
        gap: 16px;
    }

    .split-action-form {
        flex-direction: column;
        width: 100%;
    }

    .split-email-input {
        max-width: none;
        width: 100%;
    }

    .accessory-card {
        flex-direction: row;
        align-items: center;
        padding: 8px 10px;
        gap: 8px;
    }

    .accessory-image {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .accessory-info {
        flex: 1;
        min-width: 0;
    }

    .accessory-info h4 {
        font-size: 0.8rem;
    }

    .accessory-description {
        font-size: 0.7rem;
        display: none;
    }

    .accessory-price {
        font-size: 0.85rem;
    }

    .accessory-controls {
        margin-top: 0;
        gap: 4px;
    }

    .acc-btn {
        width: 26px;
        height: 26px;
        font-size: 0.9rem;
    }

    .acc-quantity {
        font-size: 0.85rem;
        min-width: 18px;
    }

    .pillows-grid .accessory-card {
        padding: 6px 10px;
        gap: 6px;
    }

    .pillows-grid .accessory-info h4 {
        font-size: 0.8rem;
    }

    .option-card {
        padding: 16px 12px;
    }

    /* Zoom button always visible on mobile, bottom-right of card */
    .config-step[data-step="1"] .option-image .zoom-btn,
    .config-step[data-step="2"] .option-image .zoom-btn {
        opacity: 1;
        transform: none;
        position: absolute;
        top: auto;
        left: auto;
        bottom: 6px;
        right: 6px;
        width: 32px;
        height: 32px;
        font-size: 1.5rem;
        background: rgba(0, 0, 0, 0.35);
        color: #1a5276;
    }

    .config-step[data-step="1"] .option-image,
    .config-step[data-step="2"] .option-image {
        position: static;
    }

    .config-step[data-step="1"] .option-card,
    .config-step[data-step="2"] .option-card {
        position: relative;
    }

    .option-card h3 {
        font-size: 1rem;
    }

    .option-card p {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .card-price {
        font-size: 0.7rem;
    }

    .placeholder-image {
        height: 90px;
    }

    .option-icon {
        font-size: 2rem;
    }

    .custom-size-form {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .size-type-selector {
        flex-direction: column;
        gap: 12px;
    }

    /* Step 3: no scroll — flex fills available space, planner has own zoom/pan */
    .config-step[data-step="3"].active {
        overflow: hidden;
        min-height: 0;
    }

    .config-step[data-step="3"] .step-description {
        flex-shrink: 0;
    }

    /* Layout diagram — flex fills remaining height exactly */
    .layout-diagram {
        min-height: 0;
        height: auto;
        max-height: 100%;
        flex: 1 1 0;
        overflow: visible;
    }

    .canvas-wrapper {
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    .canvas-wrapper svg {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        height: 100%;
    }

    /* Wymiary + kontrolki pod canvasem w jednym wierszu */
    .canvas-toolbar {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-top: 1px solid var(--dark-gray);
        background: rgba(0, 0, 0, 0.15);
        flex-shrink: 0;
        pointer-events: auto;
    }

    .module-palette {
        flex-shrink: 0;
    }

    /* Wymiary + kontrolki w jednym wierszu */
    .canvas-dims-badge {
        position: static;
        order: 2;
        align-self: stretch;
        text-align: left;
        background: none;
        padding: 2px 0 2px 8px;
        margin: 0;
        border-radius: 0;
        width: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        color: var(--off-white);
        font-size: 12px;
        opacity: 0.7;
    }

    .canvas-dims-badge .canvas-dims-area {
        display: inline;
        font-size: 12px;
    }

    .canvas-controls,
    .canvas-controls.faded,
    .canvas-controls:hover {
        position: static;
        order: 3;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: clamp(2px, 0.5vw, 4px);
        opacity: 1;
        padding: 4px clamp(4px, 1vw, 8px);
        margin: 0;
        background: none;
        border-top: none;
        flex: 1;
        min-width: 0;
    }

    .canvas-controls button {
        padding: clamp(2px, 0.5vw, 6px);
        font-size: 0.55rem;
        min-width: clamp(22px, 6vw, 29px);
        min-height: clamp(22px, 6vw, 29px);
        flex-shrink: 1;
    }

    .canvas-control-rotate,
    .canvas-control-row {
        display: contents;
    }

    /* Fabric tabs & lines - compact on mobile */
    .fabric-group-tab {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    .fabric-group-tabs {
        gap: 8px;
        margin-bottom: 12px;
    }

    .fabric-group-label {
        font-size: 0.75rem;
    }

    .fabric-line-header {
        padding: 10px 14px;
    }

    .fabric-line-header .line-name {
        font-size: 0.9rem;
    }

    .fabric-line-header .line-count {
        display: none;
    }

    /* Fabric colors grid - 5 columns on tablet */
    .fabric-line-colors {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }

    .preview-box {
        aspect-ratio: 16/9;
        padding: 30px;
    }

    /* Color options - grid wrapping on mobile */
    .color-options,
    .config-step[data-step="4"] .color-options {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .color-option {
        padding: 10px 4px;
        min-width: 0;
        width: auto;
    }

    .color-option span {
        font-size: 0.65rem;
    }

    .color-swatch {
        width: 44px;
        height: 44px;
    }

    /* Materials */
    .material-options {
        flex-direction: column;
        gap: 10px;
    }

    .material-option {
        min-width: 100%;
        padding: 14px;
    }

    .material-icon {
        font-size: 1.2rem;
    }

    .material-info strong {
        font-size: 0.85rem;
    }

    .material-info span {
        font-size: 0.7rem;
    }

    /* Step 3 chips - compact, don't shrink so planner gets remaining space */
    .step3-chips {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        flex-shrink: 0;
    }

    .step3-chip {
        padding: 6px 10px;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    /* Step 3 mode toggle */
    .step3-mode-toggle {
        width: auto;
        flex-shrink: 0;
    }

    .mode-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .mode-icon {
        font-size: 0.85rem;
    }

    .step3-layout-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .step3-layout-card .card-label {
        font-size: 0.7rem;
    }

    .step3-layout-card .card-desc {
        display: none;
    }

    .step3-chip:has(.chip-desc) {
        min-height: auto;
        padding: 6px 10px;
    }

    .step3-chip .chip-desc {
        font-size: 0.6rem;
    }

    /* Step 3 expanded layout sections - compact */
    .step3-options-container {
        gap: 12px;
    }

    .step3-layout-section {
        gap: 6px;
    }

    .step3-section-header {
        font-size: 0.6rem;
        gap: 4px;
        margin-bottom: 0;
    }

    .step3-section-header .section-icon {
        font-size: 0.8rem;
    }

    .step3-layout-card {
        padding: 6px 6px 6px;
    }

    .step3-layout-card .card-thumb {
        margin-bottom: 4px;
    }

    /* Module legend */
    .module-legend-content {
        padding: 5px 8px;
    }

    .legend-items {
        gap: 3px 10px;
        font-size: 0.65rem;
    }

    .module-legend-tab {
        padding: 3px 10px;
        font-size: 0.6rem;
    }

    .layout-change-tab {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    /* Layout dimensions - more visible on mobile */
    .layout-dimensions {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .layout-dimensions .dimensions-text strong {
        font-size: 0.9rem;
    }

    /* Module labels larger on mobile */
    .layout-diagram .mod-label {
        font-size: 13px;
        opacity: 0.9;
        font-weight: 600;
    }

    /* Step 3 Layout Modes - Mobile */
    .step3-accordion-bar {
        padding: 6px 10px;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .accordion-selection {
        flex: 1;
        min-width: 0;
        gap: 4px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .accordion-mode {
        font-size: 0.65rem;
    }

    .accordion-arrow {
        font-size: 0.7rem;
    }

    .accordion-layout {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .accordion-desc {
        display: none;
    }

    .accordion-change-btn {
        width: auto;
        padding: 4px 10px;
        font-size: 0.65rem;
        margin-left: 6px;
    }

    .step3-sidebar-panel {
        width: 100%;
        max-width: 100%;
        right: -100%;
        top: 0;
        bottom: 0;
        transform: none;
        max-height: 100vh;
    }

    .step3-sidebar-panel.open {
        right: 0;
    }

    .step3-compact-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px 10px;
        margin: 0 0 8px;
    }

    .step3-compact-toggle {
        width: 100%;
    }

    .compact-mode-btn {
        flex: 1;
    }

    .step3-compact-chips {
        justify-content: flex-start;
    }

    .compact-chip {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Summary */
    .summary-card {
        padding: 20px;
    }

    .summary-card h3 {
        font-size: 1.1rem;
    }

    .summary-item {
        font-size: 0.85rem;
    }

    .price-estimate {
        padding: 16px;
    }

    .price-value {
        font-size: 1.6rem;
    }

    /* Form */
    .contact-form {
        padding: 20px;
    }

    .form-group label {
        font-size: 0.75rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 12px;
        font-size: 0.9rem;
    }

    /* Navigation - compact row on mobile */
    .navigation {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--charcoal);
    }

    .navigation::before {
        left: 16px;
        right: 16px;
    }

    .btn {
        width: auto;
        text-align: center;
        padding: 10px 16px;
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }

    .btn-next {
        margin-left: auto;
    }

    .nav-left {
        display: flex;
        gap: 6px;
    }

    .btn-reset {
        width: auto;
        padding: 10px 16px;
        font-size: 0.7rem;
        min-height: 44px;
        position: relative;
        z-index: 2;
        -webkit-tap-highlight-color: rgba(201, 169, 98, 0.3);
        touch-action: manipulation;
    }

    .btn-back:disabled {
        pointer-events: none;
    }

    /* Hide dimensions from nav on mobile - shown in canvas area */
    .nav-dimensions {
        display: none !important;
    }

    /* Badges and settings */
    .quality-badge {
        bottom: 14px;
        right: 14px;
        padding: 8px 12px;
        font-size: 0.55rem;
    }

    .settings-drawer {
        left: auto;
        right: 14px;
        bottom: auto;
        top: 0;
        flex-direction: column;
        align-items: flex-end;
        transform: none !important;
        pointer-events: none;
    }

    .settings-drawer-handle,
    .settings-panels {
        pointer-events: auto;
    }

    .settings-drawer-handle {
        order: 2;
        border-radius: 0 0 8px 8px;
        border: 1px solid var(--medium-gray);
        border-top: none;
        padding: 6px 12px;
        font-size: 0.7rem;
        transform: rotate(180deg);
    }

    .settings-panels {
        order: 1;
        gap: 4px;
        width: auto;
        background: var(--dark-gray);
        border: 1px solid var(--medium-gray);
        border-radius: 0;
        padding: 6px !important;
        max-height: 200px;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
    }

    .settings-drawer.collapsed .settings-panels {
        max-height: 0;
        padding: 0 !important;
        border: none;
    }

    .theme-switcher,
    .font-settings-panel {
        padding: 4px 6px;
        margin: 0;
        border: none;
    }

    .theme-dot {
        width: 22px;
        height: 22px;
    }

    .font-panel-label,
    .theme-btn-label {
        display: none;
    }

    .font-btn,
    .weight-btn {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    /* Guided Tour */
    .tour-cursor {
        display: none !important;
    }

    .tour-tooltip {
        width: 90vw;
        max-width: 90vw;
        padding: 16px 18px 12px;
    }

    .tour-tooltip-text {
        font-size: 1rem;
    }

    .tour-tooltip-subtext {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    body {
        line-height: 1.4;
    }

    .configurator {
        padding: 12px 12px 70px;
    }

    .header {
        padding: 10px 0 12px;
        margin-bottom: 10px;
    }

    .logo img {
        height: 40px;
    }

    .tagline {
        font-size: 0.6rem;
        letter-spacing: 1.5px;
    }

    .tagline-highlight {
        font-size: 0.65rem;
    }

    .progress-steps {
        gap: 0;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .step.active .step-label {
        font-size: 0.6rem;
        max-width: 50px;
    }

    .progress-line {
        left: 16px;
        right: 16px;
        top: 16px;
    }

    .main-content > .config-step {
        padding: 2px;
    }

    .step-description {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }

    /* Single column grid for very small screens */
    .options-grid,
    .options-grid.collections,
    .options-grid.furniture-types {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .option-card {
        padding: 12px;
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto auto;
        gap: 4px 12px;
        text-align: left;
    }

    .option-card .option-image {
        grid-row: 1 / 4;
        grid-column: 1;
        margin-bottom: 0;
    }

    .option-card .placeholder-image,
    .option-card .gallery-slider {
        height: 80px;
        width: 80px;
    }

    .option-card h3 {
        grid-column: 2;
        font-size: 0.95rem;
        margin-bottom: 0;
        align-self: end;
    }

    .option-card p {
        grid-column: 2;
        font-size: 0.7rem;
        margin-bottom: 0;
        align-self: center;
    }

    .option-card .card-price {
        grid-column: 2;
        font-size: 0.65rem;
        align-self: start;
    }

    .config-step[data-step="1"] .option-image .zoom-btn,
    .config-step[data-step="2"] .option-image .zoom-btn {
        bottom: 4px;
        right: 4px;
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    /* Module palette - even more compact on small screens */
    .module-palette {
        padding: 3px 6px;
    }

    .palette-item {
        width: 42px;
        height: 42px;
    }

    .palette-swatch {
        width: 32px;
        height: 32px;
        font-size: 0.45rem;
    }

    .palette-hint {
        display: none;
    }

    .palette-tooltip {
        padding: 8px;
    }

    .tooltip-image {
        width: 80px;
        height: 80px;
    }

    /* Module modal */
    .module-modal-content {
        padding: 16px;
        max-width: 290px;
    }

    .module-modal-image {
        width: 234px;
        height: 234px;
    }

    .module-modal-name {
        font-size: 1.1rem;
    }

    /* Layout diagram — flex already handles height from 768px breakpoint */

    .canvas-controls {
        gap: clamp(2px, 0.4vw, 3px);
        padding: 3px clamp(3px, 0.8vw, 6px);
    }

    .canvas-controls button {
        padding: clamp(2px, 0.4vw, 5px);
        font-size: 0.5rem;
        min-width: clamp(20px, 5.5vw, 26px);
        min-height: clamp(20px, 5.5vw, 26px);
    }

    /* Fabric colors grid - 4 columns on mobile */
    .fabric-line-colors {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .color-option span {
        font-size: 0.6rem;
    }

    .color-options,
    .config-step[data-step="4"] .color-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Materials */
    .material-option {
        padding: 12px;
        flex-direction: row;
        gap: 12px;
    }

    .material-icon {
        font-size: 1.4rem;
        margin-bottom: 0;
    }

    .material-info {
        text-align: left;
    }

    /* Step 3 chips */
    .step3-chips {
        gap: 4px;
    }

    .step3-chip {
        padding: 5px 8px;
        font-size: 0.65rem;
    }

    .step3-layout-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .step3-layout-card {
        padding: 5px 4px;
    }

    .step3-layout-card .card-label {
        font-size: 0.6rem;
    }

    .step3-layout-card .card-desc {
        font-size: 0.58rem;
    }

    .step3-section-header {
        font-size: 0.7rem;
    }

    /* Summary */
    .summary-card {
        padding: 16px;
    }

    .summary-item {
        font-size: 0.8rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .summary-item .label {
        font-size: 0.7rem;
    }

    .price-estimate {
        padding: 14px;
    }

    .price-label {
        font-size: 0.7rem;
    }

    .price-value {
        font-size: 1.4rem;
    }

    .price-note {
        font-size: 0.65rem;
    }

    /* Fabric Lines - Mobile */
    .fabric-lines-container {
        gap: 16px;
    }

    .fabric-line-header {
        padding: 8px 10px;
    }

    .fabric-line-header .line-name {
        font-size: 0.8rem;
    }

    .fabric-line-header .line-count {
        display: none;
    }

    .fabric-color-name {
        font-size: 0.7rem;
    }

    .fabric-lines-dropdown .line-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }

    .fabric-lines-dropdown .line-selector select {
        max-width: 100%;
    }

    /* Form */
    .contact-form {
        padding: 16px;
    }

    .contact-form h3 {
        font-size: 1rem;
    }

    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        font-size: 0.7rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 10px;
        font-size: 0.85rem;
    }

    .btn-submit {
        padding: 14px;
        font-size: 0.8rem;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Navigation */
    .navigation {
        padding: 12px 12px;
        gap: 8px;
    }

    .navigation::before {
        left: 12px;
        right: 12px;
    }

    .btn {
        padding: 14px;
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }

    /* Modal */
    .modal-content {
        padding: 30px 20px;
        margin: 16px;
    }

    .modal-icon {
        font-size: 2.5rem;
    }

    .modal-content h2 {
        font-size: 1.3rem;
    }

    .modal-content p {
        font-size: 0.85rem;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-content .btn {
        width: 100%;
        justify-content: center;
    }

    /* Lightbox */
    .lightbox {
        padding: 12px;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .lightbox-arrow {
        top: auto;
        bottom: 20px;
        transform: none;
        height: 44px;
        width: 60px;
        padding: 0 10px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 22px;
    }

    .arrow-chevron {
        width: 8px;
        height: 8px;
    }

    .lightbox-prev { left: calc(50% - 70px); }
    .lightbox-next { right: calc(50% - 70px); }

    .lightbox-frame {
        padding: 6px;
    }

    .lightbox-caption-title {
        font-size: 1rem;
        letter-spacing: 1.5px;
    }

    .lightbox-caption-sub {
        font-size: 0.6rem;
    }

    .lightbox-counter {
        font-size: 0.55rem;
    }

    /* Settings */
    .quality-badge {
        bottom: 12px;
        right: 12px;
        padding: 6px 10px;
        font-size: 0.5rem;
    }

    .settings-drawer {
        right: 10px;
    }

    .settings-drawer-handle {
        padding: 5px 10px;
        font-size: 0.65rem;
    }

    .theme-dot {
        width: 20px;
        height: 20px;
    }

    .font-btn,
    .weight-btn {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    /* Guided Tour */
    .tour-tooltip {
        padding: 14px 16px 10px;
    }

    .tour-tooltip-text {
        font-size: 0.9rem;
    }

    .tour-tooltip-subtext {
        font-size: 0.75rem;
    }

    .tour-actions {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .tour-next {
        width: 100%;
        padding: 10px;
    }

    /* Section titles */
    .section-title {
        font-size: 0.9rem;
    }

    .upholstery-section {
        margin-bottom: 24px;
    }
}

/* ========================================
   Premium Animations
   ======================================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 98, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(201, 169, 98, 0); }
}

.btn-next:focus,
.btn-submit:focus {
    animation: pulse-gold 1.5s infinite;
}

/* Subtle loading state */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 98, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ========================================
   Theme: Ivory Champagne
   ======================================== */
[data-theme="ivory"] {
    --black: #2c2520;
    --charcoal: #faf8f4;
    --dark-gray: #ede9e2;
    --medium-gray: #b8b0a4;
    --light-gray: #6b6358;
    --off-white: #2c2520;
    --cream: #f5f1eb;
    --white: #1a1510;

    --gold: #b8943f;
    --gold-light: #c9a962;
    --gold-dark: #9a7a30;

    --shadow-subtle: 0 2px 20px rgba(0,0,0,0.04);
    --shadow-medium: 0 8px 40px rgba(0,0,0,0.07);
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.1);
    --shadow-gold: 0 4px 20px rgba(184, 148, 63, 0.2);
}

[data-theme="ivory"] .color-swatch {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.3);
}

[data-theme="ivory"] .color-option:hover .color-swatch {
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

[data-theme="ivory"] .color-option.selected .color-swatch {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 2px var(--gold);
}

[data-theme="ivory"] ::selection {
    background: var(--gold);
    color: var(--cream);
}

/* ========================================
   Theme: Midnight Sapphire
   ======================================== */
[data-theme="midnight"] {
    --black: #060a12;
    --charcoal: #0c1524;
    --dark-gray: #162038;
    --medium-gray: #3a4a6a;
    --light-gray: #8a96b0;
    --off-white: #e0e4ec;
    --cream: #f0f2f7;
    --white: #f5f7fa;

    --gold: #b0bcd0;
    --gold-light: #c8d2e2;
    --gold-dark: #8a9ab8;

    --success: #4a7c6a;
    --error: #8b4a4a;

    --shadow-subtle: 0 2px 20px rgba(0,0,0,0.15);
    --shadow-medium: 0 8px 40px rgba(0,0,0,0.25);
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.35);
    --shadow-gold: 0 4px 20px rgba(176, 188, 208, 0.2);
}

[data-theme="midnight"] ::selection {
    background: var(--gold);
    color: var(--black);
}

/* Theme-specific: Palette & Modal - IVORY */
[data-theme="ivory"] .module-palette {
    background: rgba(0, 0, 0, 0.04);
    border-color: #d4cfc5;
}

[data-theme="ivory"] .palette-hint {
    color: #6b6358;
}

[data-theme="ivory"] .palette-item {
    background: #fff;
    border-color: #d4cfc5;
}

[data-theme="ivory"] .palette-item:hover {
    background: #faf8f4;
    box-shadow: 0 4px 12px rgba(184, 148, 63, 0.25);
}

[data-theme="ivory"] .palette-tooltip {
    background: #fff;
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="ivory"] .palette-tooltip::after {
    border-top-color: var(--gold);
}

[data-theme="ivory"] .tooltip-image {
    background: #f5f1eb;
}

[data-theme="ivory"] .palette-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(184, 148, 63, 0.2), rgba(184, 148, 63, 0.08));
}

[data-theme="ivory"] .palette-swatch.swatch-table {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.08));
}

[data-theme="ivory"] .module-modal {
    background: rgba(44, 37, 32, 0.6);
}

[data-theme="ivory"] .module-modal-content {
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

[data-theme="ivory"] .module-modal-image {
    background: #f5f1eb;
}

[data-theme="ivory"] .modal-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(184, 148, 63, 0.2), rgba(184, 148, 63, 0.08));
}

[data-theme="ivory"] .modal-swatch.swatch-table {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.08));
}

[data-theme="ivory"] .module-modal-nav {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--gold);
    color: var(--gold);
}

[data-theme="ivory"] .module-modal-nav:hover {
    background: var(--gold);
    color: #fff;
}

/* Theme-specific: Palette & Modal - MIDNIGHT */
[data-theme="midnight"] .palette-item:hover {
    box-shadow: 0 4px 12px rgba(176, 188, 208, 0.25);
}

[data-theme="midnight"] .palette-tooltip {
    background: #0c1524;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="midnight"] .tooltip-image {
    background: #162038;
}

[data-theme="midnight"] .palette-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(176, 188, 208, 0.25), rgba(176, 188, 208, 0.1));
}

[data-theme="midnight"] .module-modal-content {
    background: #0c1524;
}

[data-theme="midnight"] .module-modal-image {
    background: #162038;
}

[data-theme="midnight"] .modal-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(176, 188, 208, 0.25), rgba(176, 188, 208, 0.1));
}

[data-theme="midnight"] .module-modal-nav {
    background: rgba(12, 21, 36, 0.8);
    border-color: var(--gold);
}

[data-theme="midnight"] .module-modal-nav:hover {
    background: var(--gold);
    color: #0c1524;
}

/* Theme-specific: Table dimensions modal - IVORY */
[data-theme="ivory"] .table-dims-modal {
    background: rgba(44, 37, 32, 0.6);
}

[data-theme="ivory"] .table-dims-content {
    background: #fff;
    border-color: #8b7340;
}

[data-theme="ivory"] .table-dims-input-wrap {
    background: rgba(0, 0, 0, 0.06);
    border-color: #c4bfb5;
}

[data-theme="ivory"] .table-dims-input-wrap:focus-within {
    border-color: #8b7340;
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="ivory"] .table-dims-input-wrap input {
    color: #1a1a1a;
}

[data-theme="ivory"] .table-dims-preview {
    background: rgba(139, 115, 64, 0.06);
    border-color: rgba(139, 115, 64, 0.15);
}

[data-theme="ivory"] .table-dims-cancel {
    color: #1a1a1a;
    border-color: #c4bfb5;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="ivory"] .table-dims-cancel:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: #8b7340;
}

/* Theme-specific: Table dimensions modal - MIDNIGHT */
[data-theme="midnight"] .table-dims-content {
    background: #0c1524;
}

[data-theme="midnight"] .table-dims-input-wrap {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(176, 188, 208, 0.2);
}

[data-theme="midnight"] .table-dims-preview {
    background: rgba(176, 188, 208, 0.06);
    border-color: rgba(176, 188, 208, 0.1);
}

/* Theme-specific: Option Cards & Placeholders - IVORY */
[data-theme="ivory"] .option-card {
    background: #fff;
    border-color: #d4cfc5;
}

[data-theme="ivory"] .option-card.selected {
    border-color: #8b7340;
    background: linear-gradient(180deg, rgba(184, 148, 63, 0.12) 0%, #fff 100%);
    box-shadow: 0 0 12px rgba(139, 115, 64, 0.3);
}

[data-theme="ivory"] .option-card::before {
    background: linear-gradient(135deg, rgba(184, 148, 63, 0.05) 0%, transparent 50%);
}

[data-theme="ivory"] .placeholder-image::after,
[data-theme="ivory"] .gallery-slider::after {
    background: linear-gradient(to top, #fff, transparent);
}

[data-theme="ivory"] .placeholder-image.type-sofa-narozna {
    background: linear-gradient(135deg, #e8e4dc 0%, #d4cfc5 50%, #e0dbd2 100%);
}

[data-theme="ivory"] .placeholder-image.type-fotel {
    background: linear-gradient(135deg, #dce4e8 0%, #c5d0d8 50%, #d2dce2 100%);
}

[data-theme="ivory"] .placeholder-image.type-stolik,
[data-theme="ivory"] .placeholder-image.type-kawowy {
    background: linear-gradient(135deg, #e8e2d8 0%, #d8cfc0 50%, #e0d8cc 100%);
}

[data-theme="ivory"] .placeholder-image.type-lezak {
    background: linear-gradient(135deg, #dce8e0 0%, #c5d8cc 50%, #d2e0d8 100%);
}

[data-theme="ivory"] .placeholder-image.type-zestaw {
    background: linear-gradient(135deg, #e2dce8 0%, #d0c8d8 50%, #d8d0e0 100%);
}

[data-theme="ivory"] .placeholder-image.type-inny {
    background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 50%, #e0e0e0 100%);
}

[data-theme="ivory"] .placeholder-image.type-inny .type-icon {
    color: #8b7355;
}

[data-theme="ivory"] .placeholder-image.ibiza {
    background: linear-gradient(135deg, #d8e8ec 0%, #c0d8e0 50%, #cce0e8 100%);
}

[data-theme="ivory"] .placeholder-image.na-wymiar {
    background: linear-gradient(135deg, #e0e0e8 0%, #d0d0dc 50%, #d8d8e0 100%);
}

/* Theme-specific: Option Cards & Placeholders - MIDNIGHT */
[data-theme="midnight"] .placeholder-image::after,
[data-theme="midnight"] .gallery-slider::after {
    background: linear-gradient(to top, #0c1524, transparent);
}

[data-theme="midnight"] .placeholder-image.type-sofa-narozna {
    background: linear-gradient(135deg, #0c1524 0%, #162038 50%, #101a2c 100%);
}

[data-theme="midnight"] .placeholder-image.type-fotel {
    background: linear-gradient(135deg, #0a1320 0%, #142030 50%, #0c1828 100%);
}

[data-theme="midnight"] .placeholder-image.type-stolik,
[data-theme="midnight"] .placeholder-image.type-kawowy {
    background: linear-gradient(135deg, #10141c 0%, #1a202c 50%, #141824 100%);
}

[data-theme="midnight"] .placeholder-image.type-lezak {
    background: linear-gradient(135deg, #0c1820 0%, #142830 50%, #101c28 100%);
}

[data-theme="midnight"] .placeholder-image.type-zestaw {
    background: linear-gradient(135deg, #0e1228 0%, #161c38 50%, #121830 100%);
}

[data-theme="midnight"] .placeholder-image.type-inny {
    background: linear-gradient(135deg, #0c1420 0%, #141c28 50%, #101824 100%);
}

[data-theme="midnight"] .placeholder-image.type-inny .type-icon {
    color: #7aa2f7;
}

[data-theme="midnight"] .placeholder-image.ibiza {
    background: linear-gradient(135deg, #081828 0%, #0c2438 50%, #0a1c30 100%);
}

[data-theme="midnight"] .placeholder-image.na-wymiar {
    background: linear-gradient(135deg, #0c1228 0%, #141a30 50%, #10162c 100%);
}

/* ========================================
   Theme: MODU (Dark Blue)
   ======================================== */
[data-theme="modu"] {
    --black: #0a0e17;
    --charcoal: #111827;
    --dark-gray: #1e293b;
    --medium-gray: #475569;
    --light-gray: #94a3b8;
    --off-white: #e2e8f0;
    --cream: #f0f4f8;
    --white: #f8fafc;

    --gold: #50B2F4;
    --gold-light: #7cc8f7;
    --gold-dark: #3498db;

    --success: #4a7c6a;
    --error: #8b4a4a;

    --shadow-subtle: 0 2px 20px rgba(0,0,0,0.15);
    --shadow-medium: 0 8px 40px rgba(0,0,0,0.25);
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.35);
    --shadow-gold: 0 4px 20px rgba(80, 178, 244, 0.25);
}

[data-theme="modu"] ::selection {
    background: var(--gold);
    color: var(--black);
}

/* Theme-specific: Palette & Modal - MODU */
[data-theme="modu"] .palette-item:hover {
    box-shadow: 0 4px 12px rgba(80, 178, 244, 0.25);
}

[data-theme="modu"] .palette-tooltip {
    background: #111827;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="modu"] .tooltip-image {
    background: #1e293b;
}

[data-theme="modu"] .palette-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.25), rgba(80, 178, 244, 0.1));
}

[data-theme="modu"] .module-modal-content {
    background: #111827;
}

[data-theme="modu"] .module-modal-image {
    background: #1e293b;
}

[data-theme="modu"] .modal-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.25), rgba(80, 178, 244, 0.1));
}

[data-theme="modu"] .module-modal-nav {
    background: rgba(17, 24, 39, 0.8);
    border-color: var(--gold);
}

[data-theme="modu"] .module-modal-nav:hover {
    background: var(--gold);
    color: #111827;
}

/* Theme-specific: Table dimensions modal - MODU */
[data-theme="modu"] .table-dims-content {
    background: #111827;
}

[data-theme="modu"] .table-dims-input-wrap {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(80, 178, 244, 0.2);
}

[data-theme="modu"] .table-dims-preview {
    background: rgba(80, 178, 244, 0.06);
    border-color: rgba(80, 178, 244, 0.1);
}

/* Theme-specific: Option Cards & Placeholders - MODU */
[data-theme="modu"] .placeholder-image::after,
[data-theme="modu"] .gallery-slider::after {
    background: linear-gradient(to top, #111827, transparent);
}

[data-theme="modu"] .placeholder-image.type-sofa-narozna {
    background: linear-gradient(135deg, #111827 0%, #1e293b 50%, #151d2e 100%);
}

[data-theme="modu"] .placeholder-image.type-fotel {
    background: linear-gradient(135deg, #0e1825 0%, #182840 50%, #12202e 100%);
}

[data-theme="modu"] .placeholder-image.type-stolik,
[data-theme="modu"] .placeholder-image.type-kawowy {
    background: linear-gradient(135deg, #131822 0%, #1c2430 50%, #171c28 100%);
}

[data-theme="modu"] .placeholder-image.type-lezak {
    background: linear-gradient(135deg, #101c25 0%, #182c38 50%, #142028 100%);
}

[data-theme="modu"] .placeholder-image.type-zestaw {
    background: linear-gradient(135deg, #111630 0%, #1a2040 50%, #151c38 100%);
}

[data-theme="modu"] .placeholder-image.type-inny {
    background: linear-gradient(135deg, #111825 0%, #182030 50%, #141c28 100%);
}

[data-theme="modu"] .placeholder-image.type-inny .type-icon {
    color: #50B2F4;
}

[data-theme="modu"] .placeholder-image.ibiza {
    background: linear-gradient(135deg, #0c1c30 0%, #102840 50%, #0e2038 100%);
}

[data-theme="modu"] .placeholder-image.na-wymiar {
    background: linear-gradient(135deg, #101630 0%, #181e38 50%, #141a30 100%);
}

/* Theme-specific: Progress & Header accents - MODU */
[data-theme="modu"] .header {
    border-bottom-color: rgba(80, 178, 244, 0.2);
}

[data-theme="modu"] .step.active .step-number {
    background: rgba(80, 178, 244, 0.1);
}

[data-theme="modu"] .step.completed:hover .step-number {
    box-shadow: 0 0 12px rgba(80, 178, 244, 0.4);
}

[data-theme="modu"] .step.completed:hover .step-number::after {
    border-color: rgba(80, 178, 244, 0.3);
}

/* Theme-specific: Option Cards - MODU */
[data-theme="modu"] .option-card::before {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.05) 0%, transparent 50%);
}

[data-theme="modu"] .option-card.selected {
    background: linear-gradient(180deg, rgba(80, 178, 244, 0.1) 0%, var(--charcoal) 100%);
    box-shadow: 0 0 12px rgba(80, 178, 244, 0.25);
}

/* Theme-specific: Fabric tabs - MODU */
[data-theme="modu"] .fabric-group-tab.active {
    color: #111827;
}

[data-theme="modu"] .fabric-line-chip.active {
    color: #111827;
}

/* Theme-specific: Canvas module accents - MODU */
[data-theme="modu"] .palette-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.25), rgba(80, 178, 244, 0.1));
}

[data-theme="modu"] .modal-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.25), rgba(80, 178, 244, 0.1));
}

/* Theme-specific: Included pillows - MODU */
[data-theme="modu"] .included-pillows-info {
    background: rgba(80, 178, 244, 0.08);
    border: 1px solid rgba(80, 178, 244, 0.2);
}

/* Theme-specific: Loading shimmer - MODU */
[data-theme="modu"] .loading::after {
    background: linear-gradient(90deg, transparent, rgba(80, 178, 244, 0.1), transparent);
    background-size: 200% 100%;
}

/* Theme-specific: Summary - MODU */
[data-theme="modu"] .detailed-collection,
[data-theme="modu"] .detailed-total-value,
[data-theme="modu"] .grand-total-pln {
    color: #50B2F4;
}

[data-theme="modu"] .breakdown-grand-total {
    border-top-color: #50B2F4;
}

/* ========================================
   Theme: MODU Light
   ======================================== */
[data-theme="modu-light"] {
    --black: #1e293b;
    --charcoal: #ffffff;
    --dark-gray: #f1f5f9;
    --medium-gray: #94a3b8;
    --light-gray: #64748b;
    --off-white: #1e293b;
    --cream: #f8fafc;
    --white: #0f172a;

    --gold: #50B2F4;
    --gold-light: #7cc8f7;
    --gold-dark: #3498db;

    --shadow-subtle: 0 2px 20px rgba(0,0,0,0.04);
    --shadow-medium: 0 8px 40px rgba(0,0,0,0.07);
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.1);
    --shadow-gold: 0 4px 20px rgba(80, 178, 244, 0.2);

    /* Czcionki jak na modu.pl */
    --font-display: 'DM Sans', 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Satoshi', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --lightbox-bg: radial-gradient(ellipse at center, rgba(241, 245, 249, 0.98) 0%, rgba(255, 255, 255, 0.99) 100%);
}

/* Theme-specific: Lightbox - MODU Light */
[data-theme="modu-light"] .lightbox-caption-title {
    color: #0f172a;
}

[data-theme="modu-light"] .lightbox-caption-sub {
    color: #3498db;
}

[data-theme="modu-light"] .lightbox-close {
    color: #64748b;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .lightbox-close:hover {
    color: #3498db;
    border-color: #3498db;
}

[data-theme="modu-light"] .lightbox-arrow {
    background: rgba(255, 255, 255, 0.8);
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #3498db;
}

[data-theme="modu-light"] .lightbox-arrow .arrow-chevron {
    border-color: #64748b;
}

[data-theme="modu-light"] .lightbox-frame {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.1) 0%, rgba(80, 178, 244, 0.03) 100%);
    border-color: #3498db;
}

/* Theme-specific: Progress & Header accents - MODU Light */
[data-theme="modu-light"] .header {
    border-bottom-color: rgba(80, 178, 244, 0.2);
}

[data-theme="modu-light"] .step.active .step-number {
    background: rgba(80, 178, 244, 0.1);
}

[data-theme="modu-light"] .step.completed:hover .step-number {
    box-shadow: 0 0 12px rgba(80, 178, 244, 0.4);
}

[data-theme="modu-light"] .step.completed:hover .step-number::after {
    border-color: rgba(80, 178, 244, 0.3);
}

/* Logo: modu-light uses ivory logo (dark letters on light bg) */
[data-theme="modu-light"] .logo .logo-dark {
    display: none;
}

[data-theme="modu-light"] .logo .logo-ivory {
    display: block;
}

[data-theme="modu-light"] .color-swatch {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.3);
}

[data-theme="modu-light"] .color-option:hover .color-swatch {
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

[data-theme="modu-light"] .color-option.selected .color-swatch {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 2px var(--gold);
}

[data-theme="modu-light"] ::selection {
    background: var(--gold);
    color: var(--cream);
}

/* Theme-specific: Fabric tabs - MODU Light */
[data-theme="modu-light"] .fabric-group-tab {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}

[data-theme="modu-light"] .fabric-group-tab:hover {
    border-color: var(--gold);
    color: var(--gold);
}

[data-theme="modu-light"] .fabric-group-tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #ffffff;
}

[data-theme="modu-light"] .fabric-line-chip {
    border-color: #cbd5e1;
    color: #1e293b;
}

[data-theme="modu-light"] .fabric-line-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

[data-theme="modu-light"] .fabric-line-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #ffffff;
}

/* Theme-specific: Fabric overlay/preview - MODU Light */
[data-theme="modu-light"] .fabric-overlay-cancel {
    color: #1e293b;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .fabric-overlay-cancel:hover {
    border-color: #1e293b;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="modu-light"] .fabric-preview-popup {
    background: #f8fafc;
    border-color: #3498db;
}

[data-theme="modu-light"] .fabric-popup-name,
[data-theme="modu-light"] .fabric-lightbox-name,
[data-theme="modu-light"] .fabric-modal-name,
[data-theme="modu-light"] .fabric-panel-name {
    color: #1e293b;
}

[data-theme="modu-light"] .fabric-preview-panel {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .fabric-modal-content {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .fabric-line {
    background: rgba(0, 0, 0, 0.03);
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .fabric-line-header {
    background: rgba(80, 178, 244, 0.1);
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .fabric-pattern {
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .fabric-lines-dropdown .line-selector {
    background: rgba(80, 178, 244, 0.08);
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .fabric-lines-dropdown .line-selector select {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* Theme-specific: Accessory prices - MODU Light */
[data-theme="modu-light"] .accessory-prices-by-group .group-price {
    color: #94a3b8;
}

[data-theme="modu-light"] .accessory-prices-by-group .group-price.active {
    color: #3498db;
}

/* Theme-specific: Pillows & fabric chips - MODU Light */
[data-theme="modu-light"] .included-pillows-info {
    background: rgba(80, 178, 244, 0.08);
    border-color: rgba(80, 178, 244, 0.2);
}

[data-theme="modu-light"] .included-pillows-text strong {
    color: #3498db;
}

[data-theme="modu-light"] .pillows-title,
[data-theme="modu-light"] .other-accessories-title {
    color: #0f172a;
}

[data-theme="modu-light"] .pillow-fabric-label {
    color: #64748b;
}

[data-theme="modu-light"] .fabric-chip {
    border-color: #cbd5e1;
    color: #64748b;
}

[data-theme="modu-light"] .fabric-chip:hover {
    border-color: #3498db;
    color: #3498db;
}

[data-theme="modu-light"] .fabric-chip.selected {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

[data-theme="modu-light"] .other-accessories-section {
    border-top-color: #cbd5e1;
}

/* Theme-specific: Accessory cards - MODU Light */
[data-theme="modu-light"] .accessory-card {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .accessory-card.selected {
    border-color: #3498db;
    box-shadow: 0 0 0 1px #3498db;
}

[data-theme="modu-light"] .accessory-image {
    background: #e2e8f0;
}

[data-theme="modu-light"] .accessory-info h4 {
    color: #0f172a;
}

[data-theme="modu-light"] .accessories-summary {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .acc-btn {
    border-color: #cbd5e1;
    color: #0f172a;
}

/* Theme-specific: Cover items - MODU Light */
[data-theme="modu-light"] .cover-item {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .cover-item.selected {
    background: rgba(80, 178, 244, 0.1);
    border-color: #3498db;
}

[data-theme="modu-light"] .cover-season-btn {
    border-color: #cbd5e1;
    color: #1e293b;
}

[data-theme="modu-light"] .cover-season-btn.active {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

[data-theme="modu-light"] .cover-total {
    background: #e2e8f0;
    border-color: #3498db;
}

[data-theme="modu-light"] .cover-title {
    color: #0f172a;
}

[data-theme="modu-light"] .cover-subtitle {
    color: #64748b;
}

[data-theme="modu-light"] .cover-item-card {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .cover-item-card.has-selection {
    border-color: #3498db;
    background: rgba(80, 178, 244, 0.08);
}

[data-theme="modu-light"] .cover-item-card .cover-item-name {
    color: #0f172a;
}

[data-theme="modu-light"] .cover-season-toggle {
    border-color: #cbd5e1;
    color: #64748b;
}

[data-theme="modu-light"] .cover-season-toggle:hover {
    border-color: #3498db;
    color: #0f172a;
}

[data-theme="modu-light"] .cover-season-toggle.active {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

[data-theme="modu-light"] .cover-total-season {
    color: #0f172a;
}

[data-theme="modu-light"] .cover-total-sum {
    color: #3498db;
}

/* Theme-specific: Layout preview - MODU Light */
[data-theme="modu-light"] .layout-preview-content {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .layout-preview-canvas-wrap {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .layout-preview-legend-item {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .preview-box {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border-color: #cbd5e1;
}

/* Theme-specific: Form elements - MODU Light */
[data-theme="modu-light"] .form-privacy-note a {
    color: #3498db;
    text-decoration-color: rgba(52, 152, 219, 0.3);
}

[data-theme="modu-light"] .form-toast {
    background: #fff;
    color: #1e293b;
    border-color: rgba(231, 76, 60, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Theme-specific: Summary/detailed layouts - MODU Light */
[data-theme="modu-light"] .detailed-config-info,
[data-theme="modu-light"] .detailed-breakdown,
[data-theme="modu-light"] .detailed-form-card {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .detailed-collection,
[data-theme="modu-light"] .detailed-total-value,
[data-theme="modu-light"] .grand-total-pln {
    color: #3498db;
}

[data-theme="modu-light"] .breakdown-grand-total {
    background: linear-gradient(90deg, #e2e8f0 0%, transparent 100%);
    border-top-color: #3498db;
}

[data-theme="modu-light"] .breakdown-section {
    border-bottom-color: #cbd5e1;
}

[data-theme="modu-light"] .breakdown-row {
    border-bottom-color: rgba(0,0,0,0.05);
}

[data-theme="modu-light"] .breakdown-header:hover {
    background: rgba(0,0,0,0.03);
}

[data-theme="modu-light"] .breakdown-header-price {
    color: #1e293b;
}

[data-theme="modu-light"] .config-info-item {
    border-bottom-color: rgba(0,0,0,0.05);
}

/* Theme-specific: Summary variants - MODU Light */
[data-theme="modu-light"] .hero-price-header {
    background: linear-gradient(180deg, #e2e8f0 0%, transparent 100%);
}

[data-theme="modu-light"] .hero-price-value,
[data-theme="modu-light"] .stack-collection,
[data-theme="modu-light"] .stack-price,
[data-theme="modu-light"] .split-price-value {
    color: #3498db;
}

[data-theme="modu-light"] .stack-config-card,
[data-theme="modu-light"] .stack-form-card,
[data-theme="modu-light"] .split-sidebar,
[data-theme="modu-light"] .split-action {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .stack-header {
    background: linear-gradient(90deg, #e2e8f0 0%, transparent 100%);
    border-bottom-color: #cbd5e1;
}

[data-theme="modu-light"] .split-item {
    border-bottom-color: #cbd5e1;
}

[data-theme="modu-light"] .split-price,
[data-theme="modu-light"] .price-estimate {
    border-top-color: #3498db;
}

[data-theme="modu-light"] .split-email-input {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #0f172a;
}

[data-theme="modu-light"] .split-phone {
    color: #3498db;
}

/* Theme-specific: Palette & Modal - MODU Light */
[data-theme="modu-light"] .module-palette {
    background: rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .palette-hint {
    color: #64748b;
}

[data-theme="modu-light"] .palette-item {
    background: #fff;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .palette-item:hover {
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(80, 178, 244, 0.25);
}

[data-theme="modu-light"] .palette-tooltip {
    background: #fff;
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="modu-light"] .palette-tooltip::after {
    border-top-color: var(--gold);
}

[data-theme="modu-light"] .tooltip-image {
    background: #f1f5f9;
}

[data-theme="modu-light"] .palette-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.2), rgba(80, 178, 244, 0.08));
}

[data-theme="modu-light"] .palette-swatch.swatch-table {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.08));
}

[data-theme="modu-light"] .module-modal {
    background: rgba(30, 41, 59, 0.6);
}

[data-theme="modu-light"] .module-modal-content {
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

[data-theme="modu-light"] .module-modal-image {
    background: #f1f5f9;
}

[data-theme="modu-light"] .modal-swatch.swatch-cushion {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.2), rgba(80, 178, 244, 0.08));
}

[data-theme="modu-light"] .modal-swatch.swatch-table {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.08));
}

[data-theme="modu-light"] .module-modal-nav {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--gold);
    color: var(--gold);
}

[data-theme="modu-light"] .module-modal-nav:hover {
    background: var(--gold);
    color: #fff;
}

/* Theme-specific: Table dimensions modal - MODU Light */
[data-theme="modu-light"] .table-dims-modal {
    background: rgba(30, 41, 59, 0.6);
}

[data-theme="modu-light"] .table-dims-content {
    background: #fff;
    border-color: #3498db;
}

[data-theme="modu-light"] .table-dims-input-wrap {
    background: rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .table-dims-input-wrap:focus-within {
    border-color: #3498db;
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="modu-light"] .table-dims-input-wrap input {
    color: #1e293b;
}

[data-theme="modu-light"] .table-dims-preview {
    background: rgba(52, 152, 219, 0.06);
    border-color: rgba(52, 152, 219, 0.15);
}

[data-theme="modu-light"] .table-dims-cancel {
    color: #1e293b;
    border-color: #cbd5e1;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="modu-light"] .table-dims-cancel:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: #3498db;
}

/* Theme-specific: Option Cards & Placeholders - MODU Light */
[data-theme="modu-light"] .option-card {
    background: #fff;
    border-color: #cbd5e1;
}

[data-theme="modu-light"] .option-card.selected {
    border-color: #3498db;
    background: linear-gradient(180deg, rgba(80, 178, 244, 0.12) 0%, #fff 100%);
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.3);
}

[data-theme="modu-light"] .option-card::before {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.05) 0%, transparent 50%);
}

[data-theme="modu-light"] .placeholder-image::after,
[data-theme="modu-light"] .gallery-slider::after {
    background: linear-gradient(to top, #fff, transparent);
}

[data-theme="modu-light"] .placeholder-image.type-sofa-narozna {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #dce4ec 100%);
}

[data-theme="modu-light"] .placeholder-image.type-fotel {
    background: linear-gradient(135deg, #dce8f0 0%, #c5d5e4 50%, #d2e0ec 100%);
}

[data-theme="modu-light"] .placeholder-image.type-stolik,
[data-theme="modu-light"] .placeholder-image.type-kawowy {
    background: linear-gradient(135deg, #e2e6f0 0%, #d0d8e8 50%, #dce2ec 100%);
}

[data-theme="modu-light"] .placeholder-image.type-lezak {
    background: linear-gradient(135deg, #dce8ec 0%, #c5d8e4 50%, #d2e0e8 100%);
}

[data-theme="modu-light"] .placeholder-image.type-zestaw {
    background: linear-gradient(135deg, #dce0f0 0%, #ccd2e8 50%, #d4d8ec 100%);
}

[data-theme="modu-light"] .placeholder-image.type-inny {
    background: linear-gradient(135deg, #e4e8ec 0%, #d4d8e0 50%, #dce0e4 100%);
}

[data-theme="modu-light"] .placeholder-image.type-inny .type-icon {
    color: #3498db;
}

[data-theme="modu-light"] .placeholder-image.ibiza {
    background: linear-gradient(135deg, #d4e4f0 0%, #c0d8ec 50%, #cce0f0 100%);
}

[data-theme="modu-light"] .placeholder-image.na-wymiar {
    background: linear-gradient(135deg, #dce0ec 0%, #ccd0e0 50%, #d4d8e4 100%);
}

/* Theme-specific: Loading shimmer - MODU Light */
[data-theme="modu-light"] .loading::after {
    background: linear-gradient(90deg, transparent, rgba(80, 178, 244, 0.1), transparent);
    background-size: 200% 100%;
}

/* ========================================
   Settings Drawer (Theme & Font)
   ======================================== */
.settings-drawer {
    position: fixed;
    bottom: 0;
    left: 30px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-drawer.collapsed {
    transform: translateY(calc(100% - 36px));
}

.settings-drawer-handle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--gold);
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition-smooth);
}

.settings-drawer-handle:hover {
    background: var(--charcoal);
}

.settings-drawer-handle .handle-icon {
    font-size: 1rem;
}

.settings-drawer-handle .handle-arrow {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.settings-drawer.collapsed .handle-arrow {
    transform: rotate(-180deg);
}

.settings-panels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}

/* Theme Switcher */
.theme-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    padding: 10px 14px;
}

.theme-switcher.hidden {
    display: none !important;
}

.theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.theme-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    transition: var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.theme-btn.active .theme-dot {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(0,0,0,0.3);
}

.theme-dot--dark {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
}

.theme-dot--ivory {
    background: linear-gradient(135deg, #faf8f4, #ede9e2);
}

.theme-dot--midnight {
    background: linear-gradient(135deg, #0c1524, #162038);
}

.theme-dot--modu {
    background: linear-gradient(135deg, #111827, #50B2F4);
}

.theme-dot--modu-light {
    background: linear-gradient(135deg, #ffffff, #50B2F4);
}

.theme-btn-label {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--light-gray);
    font-family: var(--font-body);
    transition: var(--transition-smooth);
}

.theme-btn.active .theme-btn-label {
    color: var(--gold);
}

/* Font Settings Panel */
.font-settings-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    background: var(--dark-gray);
    border: 1px solid var(--medium-gray);
    padding: 10px 14px;
}

.font-settings-panel.hidden {
    display: none !important;
}

.font-panel-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.font-panel-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--medium-gray);
    min-width: 55px;
}

.font-size-options,
.font-weight-options {
    display: flex;
    gap: 4px;
}

.font-btn,
.weight-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--light-gray);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-btn:hover,
.weight-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.font-btn.active,
.weight-btn.active {
    background: rgba(201, 169, 98, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

[data-theme="modu"] .font-btn.active,
[data-theme="modu"] .weight-btn.active,
[data-theme="modu-light"] .font-btn.active,
[data-theme="modu-light"] .weight-btn.active {
    background: rgba(80, 178, 244, 0.15);
}

.font-btn[data-size="small"] { font-size: 0.7rem; }
.font-btn[data-size="medium"] { font-size: 0.9rem; }

/* Tutorial toggle */
.tutorial-toggle-options {
    display: flex;
    gap: 4px;
}

.tutorial-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--medium-gray);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}

.tutorial-toggle-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.tutorial-toggle-btn.active {
    background: rgba(201, 169, 98, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.tutorial-toggle-icon {
    font-size: 0.5rem;
    transition: color 0.2s;
}

.tutorial-toggle-btn.active .tutorial-toggle-icon {
    color: var(--gold);
}

[data-theme="modu"] .tutorial-toggle-btn.active,
[data-theme="modu-light"] .tutorial-toggle-btn.active {
    background: rgba(80, 178, 244, 0.15);
}

.weight-btn { font-size: 0.8rem; }
.weight-btn[data-weight="bold"] { font-weight: 700; }

/* Font Size Variants */
[data-font-size="small"] {
    font-size: 15px;
}

[data-font-size="medium"] {
    font-size: 18px;
}

/* Font Weight Variants */
[data-font-weight="bold"] .option-card h3,
[data-font-weight="bold"] .config-step h2,
[data-font-weight="bold"] .step-description,
[data-font-weight="bold"] .option-card p,
[data-font-weight="bold"] .summary-item .label,
[data-font-weight="bold"] .summary-item .value,
[data-font-weight="bold"] .material-info span,
[data-font-weight="bold"] .color-option span {
    font-weight: 700;
}

[data-font-weight="bold"] .btn {
    font-weight: 700;
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .option-card {
        min-height: 60px;
    }

    .color-option {
        min-height: 70px;
        min-width: 70px;
    }

    .material-option {
        min-height: 60px;
    }

    .step3-chip {
        min-height: 44px;
    }

    .btn {
        min-height: 48px;
    }

    /* Remove hover effects that don't work on touch */
    .option-card:hover .placeholder-image {
        transform: none;
    }

    .option-card:active .placeholder-image {
        transform: scale(1.05);
    }

    .btn:hover::before {
        display: none;
    }

    /* Touch feedback */
    .option-card:active,
    .color-option:active,
    .material-option:active,
    .step3-chip:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Canvas & planner touch targets */
    .canvas-controls button,
    .rotate-btn, .zoom-btn,
    .canvas-control-center, .canvas-control-mirror,
    .canvas-control-fit, .canvas-control-fullscreen {
        min-width: clamp(22px, 6vw, 29px);
        min-height: clamp(22px, 6vw, 29px);
    }

    .acc-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .pillows-grid .acc-btn {
        min-width: 38px;
        min-height: 38px;
    }

    .fabric-overlay-close {
        min-width: 44px;
        min-height: 44px;
    }

    .palette-item {
        min-width: 42px;
        min-height: 42px;
    }

    .cover-season-toggle {
        min-height: 48px;
    }

    /* Scrollbar styling for horizontal scroll areas */
    .color-options::-webkit-scrollbar,
    .palette-items::-webkit-scrollbar,
    .step3-chips::-webkit-scrollbar {
        height: 3px;
    }

    .color-options::-webkit-scrollbar-thumb,
    .palette-items::-webkit-scrollbar-thumb,
    .step3-chips::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 2px;
    }
}

/* ========================================
   Landscape Phone Orientation
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 8px 0;
        margin-bottom: 8px;
    }

    .logo img {
        height: 35px;
    }

    .tagline {
        display: none;
    }

    .progress-bar {
        margin-bottom: 8px;
    }

    .step-number {
        width: 28px;
        height: 28px;
    }

    .progress-line {
        top: 14px;
    }

    .step-label {
        display: none !important;
    }

    .main-content > .config-step {
        padding: 2px;
    }

    .step-description {
        margin-bottom: 6px;
        font-size: 0.8rem;
    }

    .options-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .option-card {
        padding: 10px;
    }

    .placeholder-image {
        height: 60px;
    }

    .navigation {
        padding: 10px 16px;
        flex-direction: row;
        gap: 16px;
    }

    .btn {
        width: auto;
        flex: 1;
        padding: 10px;
    }

    .configurator {
        padding-bottom: 80px;
    }
}