@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');

/* === GLOBALNE ZMIENNE === */
:root {
    --primary: #293976;
    --secondary: #F0E5CF;
    --light: #F7F6F2;
    --text: #2D2D2D;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(41, 57, 118, 0.1);
}

.dark {
    --light: #1a1a1a;
    --text: #f7f6f2;
    --glass-bg: rgba(30, 30, 30, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --secondary: #2D2D2D;
    --primary: #4f64b0; /* Lighter blue for dark mode visibility */
}

/* === HOST-THEME CSS ISOLATION ===
   WP motyw gospodarza umie przebić nasze style przez globalne reguły typu
   `body { font-family / font-size / line-height }`, `button { text-transform }`,
   `* { box-sizing }` etc. Przy instalacji pluginu na nowej stronie elementy
   konfiguratora potrafiły nagle zmienić wielkość liter, spacing albo przyjąć
   wielkimi literami tekst przycisków. Wszystkie wyglądowe fundamenty
   ustawiamy tu explicite na #app-container z !important, i neutralizujemy
   najczęstsze reguły dziedziczone z motywu na elementach formularzy,
   nagłówkach, linkach. Niczego nie wychodzi poza plugin (żadnej globalnej
   reguły `body`) — tym samym plugin nie psuje hostowego themu. */

#app-container,
#app-container *,
#app-container *::before,
#app-container *::after {
    box-sizing: border-box;
}

#app-container {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--text) !important;
    background-color: var(--light);
    overflow: hidden;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: normal;
    text-transform: none;
}

/* Re-assert inheritance on form controls — motywy potrafią forsować
   własny font-family / size / text-transform na <button> i <input>. */
#app-container button,
#app-container input,
#app-container select,
#app-container textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-indent: 0;
    margin: 0;
}

/* Nagłówki pluginu — skasuj motywowe marginesy/line-heighty. */
#app-container h1,
#app-container h2,
#app-container h3,
#app-container h4,
#app-container h5,
#app-container h6 {
    margin: 0;
    padding: 0;
    font-family: inherit;
    line-height: 1.25;
    color: inherit;
}

#app-container p {
    margin: 0;
}

#app-container a {
    color: inherit;
    text-decoration: none;
}

#app-container img,
#app-container svg {
    vertical-align: middle;
    max-width: 100%;
}

#app-container ul,
#app-container ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Utility: hide scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Glassmorphism - Light Theme */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--glass-border);
    box-shadow: 10px 0 30px rgba(0,0,0,0.05);
    overflow-x: hidden;
}

.dark .glass-panel {
    box-shadow: 10px 0 30px rgba(0,0,0,0.5);
    background: rgba(30, 30, 30, 0.95);
    border-color: #404040;
}

.glass-card {
    background: white;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.dark .glass-card {
    background: #2a2a2a;
    border-color: #404040;
    color: var(--text);
}

.glass-card:hover {
    background: #fff;
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark .glass-card:hover {
    background: #333;
    border-color: var(--primary);
}

/* Shared selected accent style */
.glass-card.selected,
.wall-type-tile.selected {
    border-color: var(--primary);
    background-color: #EEF2FF;
}

.dark .glass-card.selected,
.dark .wall-type-tile.selected {
    background-color: rgba(79, 100, 176, 0.2);
    border-color: var(--primary);
}

/* Aktywny element nawigacji — #app-container needed to override Tailwind important mode */
#app-container .nav-item.active {
    background-color: var(--primary);
    color: white !important;
    box-shadow: 0 4px 15px rgba(41, 57, 118, 0.3);
}

#app-container .nav-item.active .material-symbols-rounded,
#app-container .nav-item.active span {
    color: white !important;
}

#app-container .dark .nav-item.active {
    background-color: var(--primary);
    color: white !important;
    box-shadow: 0 4px 15px rgba(79, 100, 176, 0.3);
}

#app-container .dark .nav-item.active .material-symbols-rounded,
#app-container .dark .nav-item.active span {
    color: white !important;
}

/* Pasek przewijania — scope'ed do pluginu. Wcześniej globalny selektor
   `::-webkit-scrollbar` wchodził w hostową stronę i zmieniał wygląd
   scrollbarów w całym WP. */
#app-container ::-webkit-scrollbar { width: 6px; }
#app-container ::-webkit-scrollbar-track { background: transparent; }
#app-container ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
#app-container ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

#app-container.dark ::-webkit-scrollbar-thumb,
.dark #app-container ::-webkit-scrollbar-thumb { background: #4a4a4a; }
#app-container.dark ::-webkit-scrollbar-thumb:hover,
.dark #app-container ::-webkit-scrollbar-thumb:hover { background: #666; }

/* Animacje */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
.fade-in { animation: slideIn 0.3s ease-out forwards; }

/* Loader Spinner */
.loader-spinner {
    border: 3px solid rgba(41, 57, 118, 0.1);
    border-left-color: var(--primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
.dark .loader-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-left-color: var(--primary);
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* PDF Overlay */
#pdf-overlay.pdf-complete #pdf-progress-ring {
    animation: none !important;
    border-color: #22c55e !important;
}
#pdf-overlay.pdf-complete #pdf-overlay-icon {
    color: #22c55e;
}

/* Ukrywanie strzałek input number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Walidacja paneli – wizualny feedback */
.panel-input-wrap { position: relative; }
.panel-input-wrap input.input-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
.panel-input-hint {
    display: none;
    font-size: 11px;
    color: #ef4444;
    margin-top: 2px;
    line-height: 1.3;
}
.panel-input-wrap input.input-invalid ~ .panel-input-hint { display: block; }
.dark .panel-input-wrap input.input-invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15);
}
.dark .panel-input-hint { color: #f87171; }

/* Styl suwaka */
input[type=range] { -webkit-appearance: none; background: transparent; touch-action: manipulation; }
/* WebKit (Chrome, Safari, Edge) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px; width: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 0 2px white;
}
.dark input[type=range]::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px #333;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px;
    cursor: pointer;
    background: #CBD5E1;
    border-radius: 2px;
}
.dark input[type=range]::-webkit-slider-runnable-track {
    background: #4a4a4a;
}

/* Firefox */
input[type=range]::-moz-range-thumb {
    height: 16px; width: 16px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 0 0 2px white;
}
.dark input[type=range]::-moz-range-thumb {
    box-shadow: 0 0 0 2px #333;
}
input[type=range]::-moz-range-track {
    width: 100%; height: 4px;
    cursor: pointer;
    background: #CBD5E1;
    border-radius: 2px;
}
.dark input[type=range]::-moz-range-track {
    background: #4a4a4a;
}

/* 3D Overlay Elements */
#dimensions-container, #segment-labels-container {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

#compass {
    position: absolute;
    bottom: 20px;
    left: 440px; /* Offset for sidebar + drawer */
    width: 80px;
    height: 80px;
    z-index: 10;
    pointer-events: none;
    transition: left 0.3s;
}

/* Swatches */
.ral-swatch-grid,
.wood-swatch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.ral-swatch,
.wood-swatch {
    width: 100%;
    height: 5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.1s;
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 2px solid white;
}

.dark .ral-swatch, .dark .wood-swatch {
    border-color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ral-swatch:hover {
    transform: scale(1.1);
}

.wood-swatch:hover {
    transform: scale(1.02);
}
.ral-swatch.ring-2, .wood-swatch.ring-2 {
    /* Tailwind ring-2 equivalent */
    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px white;
}
.dark .ral-swatch.ring-2, .dark .wood-swatch.ring-2 {
    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px #333;
}

/* Vertical Text */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Wall Selector Zones */
.wall-select-zone.selected span {
    color: white;
}
.wall-select-zone.selected {
    background-color: var(--primary) !important;
}

.dark .wall-select-zone.selected {
    background-color: var(--primary) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Corner Selector Zones */
.corner-select-zone.selected {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.corner-select-zone.selected > div {
    background-color: white !important;
}
.dark .corner-select-zone.selected {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.dark .corner-select-zone.selected > div {
    background-color: white !important;
}

/* Info Bubbles (Tooltip) */
.info-bubble {
    position: absolute;
    bottom: 110%; /* Above the element */
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: var(--primary);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: normal;
    min-width: 140px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 50;
    visibility: hidden;
}

.group:hover .info-bubble,
.group:focus-within .info-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.info-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--primary) transparent transparent transparent;
}

.dark .info-bubble {
    background-color: var(--primary);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

.dark .info-bubble::after {
    border-color: var(--primary) transparent transparent transparent;
}

/* Prevent wall config options from causing horizontal overflow */
.wall-config-options {
    max-width: 100%;
    min-width: 0;
}

.aluminum-auto-options,
.glass-sliding-options,
.sliding-louver-options {
    overflow-x: hidden;
    max-width: 100%;
    min-width: 0;
}

/* Wall Type Icon Grid */
.wall-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.dark .wall-type-grid {
    border-color: #404040;
}

.wall-type-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px 8px;
    gap: 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
}

.wall-type-tile:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.wall-type-tile.selected {
    box-shadow: 0 0 0 1px var(--primary);
}

.wall-type-tile.selected .wall-type-icon svg {
    opacity: 1;
    color: var(--primary);
}

.wall-type-tile.selected .wall-type-icon img {
    box-shadow: 0 0 0 2px var(--primary);
}

.wall-type-tile.selected .wall-type-label {
    color: var(--primary);
    font-weight: 600;
}

.wall-type-icon {
    width: 100%;
    max-width: 100px;
    aspect-ratio: 4 / 3;
    color: var(--text);
    transition: color 0.2s;
}

.dark .wall-type-icon {
    color: #e0e0e0;
}

.wall-type-icon svg,
.wall-type-icon img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
}

.wall-type-icon img {
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease-in-out;
}

.wall-type-tile:hover .wall-type-icon img {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.wall-type-label {
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dark .wall-type-label {
    color: #e0e0e0;
}

/* Compact mode for wall type tiles */
#infill-type-selector.compact .wall-type-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

#infill-type-selector.compact .wall-type-tile {
    padding: 6px 4px 5px;
    gap: 3px;
}

#infill-type-selector.compact .wall-type-icon {
    max-width: 72px;
}

#infill-type-selector.compact .wall-type-label {
    font-size: 0.55rem;
}

/* === Wall type icon hover animations === */

/* Inline SVG base styles - clip to prevent overflow */
.wall-type-icon svg {
    overflow: hidden;
}

/* --- Glass sliding: panels 1 & 2 slide right, panel 3 stays --- */
.wall-type-tile:hover .anim-glass-p1 {
    animation: glassSlide1 1.4s ease-in-out infinite alternate;
}
.wall-type-tile:hover .anim-glass-p2 {
    animation: glassSlide2 1.4s ease-in-out infinite alternate;
}
@keyframes glassSlide1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(55px); }
}
@keyframes glassSlide2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(28px); }
}

/* --- Aluminum louver sliding: panel 1 slides behind panel 2 --- */
.wall-type-tile:hover .anim-alum-p1 {
    animation: alumSlide 1.4s ease-in-out infinite alternate;
}
@keyframes alumSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(52px); }
}

/* --- ZIP fabric: bottom rises, top stays fixed (no overflow) --- */
.anim-zip-fabric {
    transform-box: fill-box;
    transform-origin: top center;
}
.wall-type-tile:hover .anim-zip-fabric {
    animation: zipRollUp 1.5s ease-in-out infinite alternate;
}
@keyframes zipRollUp {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0.15); }
}

/* --- Horizontal louver slats: each rect scales Y (opens/closes) --- */
.anim-h-slats rect {
    transform-box: fill-box;
    transform-origin: center center;
}
.wall-type-tile:hover .anim-h-slats rect {
    animation: hSlatOpen 1.4s ease-in-out infinite alternate;
}
@keyframes hSlatOpen {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0.25); }
}

/* --- Vertical louver slats: each rect scales X (opens/closes) --- */
.anim-v-slats rect {
    transform-box: fill-box;
    transform-origin: center center;
}
.wall-type-tile:hover .anim-v-slats rect {
    animation: vSlatOpen 1.4s ease-in-out infinite alternate;
}
@keyframes vSlatOpen {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0.25); }
}

/* Hover effect for 3D segment selection */
canvas {
    cursor: default; /* Reset to default, changed dynamically by JS */
}
canvas.hover-segment {
    cursor: pointer;
}

/* ZIP Color Carousel */

/* Filter Section & Label */
.zip-filter-section {
    width: calc(100% - 16px);
    margin: 6px 8px 2px;
}

.zip-filter-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.dark .zip-filter-label {
    color: #9ca3af;
}

/* Filter Tabs — chip / segmented-control buttons.
   Visual properties carry !important because the plugin loads on top of
   Tailwind CDN JIT and its base button resets (background: transparent,
   border: none) were winning the cascade on some tenants, leaving the
   chips looking like plain inline text that nobody recognised as
   clickable (same collision documented at .color-type-toggle-btn). */
.zip-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.zip-filter-tab {
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    min-height: 32px;
    padding: 6px 12px !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.zip-filter-tab:hover {
    background: #f8fafc !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(41, 57, 118, 0.18);
}

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

/* Keyboard focus — visible ring, distinct from hover (a11y) */
.zip-filter-tab:focus-visible {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(41, 57, 118, 0.35) !important;
}

/* Active chip — primary fill, white text, halo ring + checkmark prefix,
   same visual language as .color-type-toggle-btn.active. */
.zip-filter-tab.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 3px rgba(41, 57, 118, 0.18),
        0 2px 6px rgba(41, 57, 118, 0.30) !important;
}

.zip-filter-tab.active::before {
    content: '\2713'; /* ✓ */
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.dark .zip-filter-tab {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.dark .zip-filter-tab:hover {
    background: #3f4a5e !important;
    color: #c5d0f0 !important;
    border-color: #5a6478 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.40);
}

.dark .zip-filter-tab:focus-visible {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 100, 176, 0.45) !important;
}

.dark .zip-filter-tab.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 3px rgba(79, 100, 176, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

.zip-carousel-search {
    width: calc(100% - 16px);
    margin: 4px 8px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.zip-carousel-search:focus {
    border-color: var(--primary);
}

.dark .zip-carousel-search {
    background: #2a2a2a;
    border-color: #404040;
    color: #e5e7eb;
}

.zip-carousel-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    padding: 4px 0;
}

.dark .zip-carousel-container {
    background: rgba(255, 255, 255, 0.04);
}

/* Nav buttons removed — carousel is scrollable list only */

.zip-carousel-list {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.zip-carousel-list::-webkit-scrollbar {
    width: 4px;
}

.zip-carousel-list::-webkit-scrollbar-track {
    background: transparent;
}

.zip-carousel-list::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 2px;
}

.dark .zip-carousel-list {
    background: rgba(255, 255, 255, 0.02);
    border-color: #404040;
}

.zip-carousel-cell {
    width: 100%;
    min-height: 72px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 10px;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    flex-shrink: 0;
    user-select: none;
}

.dark .zip-carousel-cell {
    background: #2a2a2a;
    border-color: #404040;
}

.zip-carousel-cell:hover {
    border-color: #93a3d8;
}

.dark .zip-carousel-cell:hover {
    border-color: #6878b0;
}

.zip-carousel-cell.selected {
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(41, 57, 118, 0.2);
    background-color: #f0f3ff;
}

.dark .zip-carousel-cell.selected {
    background-color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.zip-color-swatch {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dark .zip-color-swatch {
    border-color: rgba(255, 255, 255, 0.1);
}

.zip-color-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.zip-color-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.zip-color-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.zip-color-code {
    font-size: 10px;
    font-weight: 600;
    color: #374151;
    font-family: monospace;
    letter-spacing: 0.05em;
}

.dark .zip-color-code {
    color: #d1d5db;
}

.zip-color-transparency {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.02em;
}

.dark .zip-color-transparency {
    color: #9ca3af;
}

/* === Custom Checkbox & Radio Button Styles === */

/* Custom Radio Button */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
    position: relative;
}

input[type="radio"]:hover {
    border-color: var(--primary);
}

input[type="radio"]:checked {
    border-color: var(--primary);
    background: white;
}

input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dark input[type="radio"] {
    background: #333;
    border-color: #555;
}

.dark input[type="radio"]:checked {
    border-color: var(--primary);
    background: #333;
}

.dark input[type="radio"]:checked::after {
    background: var(--primary);
}

/* sr-only radios should stay hidden */
input[type="radio"].sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Custom Checkbox — !important to override Tailwind utility classes */
input[type="checkbox"]:not(.sr-only),
.accessory-checkbox {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    flex-shrink: 0 !important;
    position: relative !important;
    accent-color: auto !important;
    color: inherit !important;
}

input[type="checkbox"]:not(.sr-only):hover,
.accessory-checkbox:hover {
    border-color: var(--primary) !important;
}

input[type="checkbox"]:not(.sr-only):checked,
.accessory-checkbox:checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

input[type="checkbox"]:not(.sr-only):checked::after,
.accessory-checkbox:checked::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2.5px 2.5px 0 !important;
}

input[type="checkbox"]:not(.sr-only):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dark input[type="checkbox"]:not(.sr-only),
.dark .accessory-checkbox {
    background: #333 !important;
    border-color: #555 !important;
}

.dark input[type="checkbox"]:not(.sr-only):checked,
.dark .accessory-checkbox:checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.dark input[type="checkbox"]:not(.sr-only):checked::after,
.dark .accessory-checkbox:checked::after {
    border-color: white !important;
}

/* Accessory card visual selected state */
label:has(> .accessory-checkbox:checked),
label:has(.accessory-checkbox:checked) {
    border-color: var(--primary) !important;
    background-color: #EEF2FF !important;
}

.dark label:has(> .accessory-checkbox:checked),
.dark label:has(.accessory-checkbox:checked) {
    background-color: rgba(79, 100, 176, 0.2) !important;
    border-color: var(--primary) !important;
}

/* ============================================================
   RESPONSIVE STYLES - Mobile & Tablet
   All mobile/tablet overrides below. Desktop styles above remain untouched.
   Breakpoints:
   - max-width: 767px  → Mobile (portrait + landscape)
   - 768px - 1023px    → Tablet
   - orientation: portrait/landscape → Orientation-specific
   ============================================================ */

/* --- iOS Safe Area Support --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #config-panel,
    #right-config-panel,
    .dashboard-tab-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
    #pdf-overlay {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
}

/* --- Touch-friendly targets on all touch devices --- */
@media (pointer: coarse) {
    input[type=range]::-webkit-slider-thumb {
        height: 24px;
        width: 24px;
        margin-top: -10px;
    }
    input[type=range]::-moz-range-thumb {
        height: 24px;
        width: 24px;
    }
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    input[type="radio"]:checked::after {
        width: 10px;
        height: 10px;
    }
    input[type="checkbox"]:not(.sr-only) {
        width: 24px;
        height: 24px;
    }
    .zip-carousel-nav {
        width: 36px;
        height: 36px;
    }
    /* Language switcher - proper touch targets without overlap */
    .lang-btn {
        width: 1.75rem !important;
        height: 1.75rem !important;
        padding: 0.15rem;
        /* Prevent accidental taps on adjacent buttons */
        touch-action: manipulation;
    }
    /* Prevent SVGs from stealing touch/click events */
    .lang-btn svg,
    .lang-btn svg * {
        pointer-events: none;
    }
    /* Nav buttons in right panel */
    #wall-nav-prev, #wall-nav-next {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* === TABLET-LANDSCAPE TOUCH FIXES ===
       Tablets in landscape (≥1024 px) sit in the small-laptop CSS bracket,
       which is mostly correct — but several touch targets and the colour
       palette were sized for mouse precision. Override them here so the
       fixes apply to every touch device regardless of viewport width. */

    /* Step 2 dimension inputs: were w-20 (80 px) text-sm (14 px) p-1 (4 px)
       which is hard to tap and triggers iOS auto-zoom on focus (any
       sub-16 px font does). Bump to a comfortable touch target plus
       16 px font so iOS no longer zooms the whole layout. */
    #width-input,
    #depth-input,
    #height-input,
    #module-width-input,
    #module-depth-input {
        width: 6.5rem !important;
        height: 2.75rem !important;
        font-size: 16px !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* RAL / wood swatches: were repeat(2, 1fr) at 5rem tall — that's two
       80 px tiles wasting most of the colour panel. Switch to 3 columns
       and shrink to 4rem so a typical palette fits in a single visible
       page on tablet without scrolling. */
    .ral-swatch-grid,
    .wood-swatch-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    .ral-swatch,
    .wood-swatch {
        height: 4rem !important;
    }

    /* Camera lock toggle: tablets at 768-1023 px get the mobile bottom-sheet
       layout (desktop nav force-hidden) AND the floating-controls mobile
       button is hidden by md:hidden — so users in that range have no way
       to lock/unlock the camera at all. Tablets ≥1024 do have the side-nav
       button but it's tucked into a 56 px-wide rail and easy to miss. Force
       the floating-controls button visible on every touch device so the
       primary action is always one tap away. */
    #mobile-camera-lock-btn {
        display: flex !important;
    }
}

/* ========================
   MOBILE STYLES (< 768px)
   ======================== */
@media (max-width: 767px) {

    /* --- Dashboard Overlay --- */
    #dashboard-overlay header {
        padding: 0.75rem 1rem;
    }
    #dashboard-overlay header .text-lg {
        font-size: 0.875rem;
    }
    /* Shrink logo on mobile */
    #dashboard-overlay header img {
        height: 1.5rem;
    }
    /* Separator line */
    #dashboard-overlay header .border-l {
        padding-left: 0.5rem;
        margin-left: 0.5rem;
    }

    /* Dashboard mobile nav - horizontal scrollable tabs at top instead of sidebar */
    #dashboard-overlay .flex.flex-1.overflow-hidden {
        flex-direction: column;
    }

    /* Dashboard main content */
    #dashboard-overlay main {
        padding: 1rem;
    }
    #dashboard-overlay main .max-w-5xl {
        max-width: 100%;
    }

    /* Stats row - stack on small mobile */
    #dashboard-tab-pulpit .grid.grid-cols-1.md\:grid-cols-3 {
        gap: 0.75rem;
    }
    #dashboard-tab-pulpit .grid.grid-cols-1.md\:grid-cols-3 > div {
        padding: 1rem;
    }
    #dashboard-tab-pulpit .grid.grid-cols-1.md\:grid-cols-3 .text-3xl {
        font-size: 1.5rem;
    }

    /* Dashboard actions row */
    .dashboard-tab-content .flex.justify-between.items-center.mb-6 {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    /* Search inputs - full width on mobile */
    #my-offers-search,
    #all-offers-search,
    #designer-project-search,
    #designer-user-search {
        width: 100% !important;
    }

    /* Tables - horizontal scroll wrapper */
    #dashboard-tab-projects .bg-white,
    #dashboard-tab-projects .dark\:bg-darkpanel,
    #dashboard-tab-users .bg-white,
    #dashboard-tab-users .dark\:bg-darkpanel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #dashboard-tab-projects table,
    #dashboard-tab-users table {
        min-width: 600px;
    }
    #dashboard-tab-projects th,
    #dashboard-tab-projects td,
    #dashboard-tab-users th,
    #dashboard-tab-users td {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Configs grid - single column */
    #dashboard-configs-list {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    /* --- Canvas touch behavior --- */
    #canvas-container {
        touch-action: none; /* Let Three.js OrbitControls handle all gestures */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* --- Compass --- */
    #compass {
        left: 20px;
        bottom: 12px;
        width: 50px;
        height: 50px;
    }

    /* --- Floating controls --- */
    #floating-controls {
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.25rem;
    }
    #floating-controls button,
    #floating-controls a {
        padding: 0.5rem;
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #floating-controls .material-symbols-rounded {
        font-size: 20px;
    }
    /* Hide dividers on mobile to save space */
    #floating-controls > .h-8.w-px {
        display: none;
    }

    /* --- Visualizer Side Panel --- */
    #viz-side-panel {
        width: 280px;
    }

    /* --- Hide dimension labels on mobile — values are in the config panel --- */
    #dimensions-container {
        display: none !important;
    }

    /* --- Floating Price Bar — tiny badge next to buttons --- */
    #floating-price-bar {
        position: static !important;
        transform: none !important;
        width: auto;
        border-radius: 0.5rem !important;
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem !important;
        gap: 0.35rem !important;
        opacity: 0.95;
        border: 1px solid rgba(0,0,0,0.1) !important;
        box-shadow: none !important;
    }
    .dark #floating-price-bar {
        border-color: rgba(255,255,255,0.1) !important;
    }
    #floating-price-bar button {
        padding: 0.1rem 0.4rem;
        font-size: 0.6rem;
    }

    /* --- Bottom Slider Bar — minimal at very bottom of canvas --- */
    #bottom-slider-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 0.25rem 0.5rem !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
        background: linear-gradient(transparent, rgba(255,255,255,0.85));
        touch-action: manipulation;
    }
    .dark #bottom-slider-bar {
        background: linear-gradient(transparent, rgba(0,0,0,0.6));
    }
    #bottom-slider-bar .slider-pill {
        min-width: 0 !important;
        padding: 0.15rem 0.5rem !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    #bottom-slider-bar .slider-pill span.min-w-\[100px\] {
        min-width: 0 !important;
    }
    #bottom-slider-bar .slider-pill input[type="range"] {
        min-width: 50px !important;
    }

    /* --- Side Panels (env, library) - full screen overlay on mobile --- */
    #env-panel,
    #library-panel {
        width: 100%;
        z-index: 60; /* Above mobile step nav (z-50) */
    }

    /* --- Modals --- */
    #louver-wall-choice-modal > div,
    #inquiry-modal > div {
        margin: 1rem;
        max-width: calc(100% - 2rem) !important; /* Override Tailwind max-w-md */
        max-height: 85vh;
        overflow-y: auto;
    }
    /* --- PDF overlay - landscape scrollable --- */
    #pdf-overlay > div {
        max-height: 85vh;
        overflow-y: auto;
    }

    /* --- All inputs/selects: prevent iOS auto-zoom on focus (requires >= 16px) --- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* --- Config Panel (Bottom Sheet) --- */
    #config-panel .p-4.md\:p-6 {
        padding: 0.75rem 1rem;
    }

    /* --- Module selector grid - allow horizontal scroll if wider than screen --- */
    .module-selector-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Module widget above the full-width slider bar on mobile --- */
    #module-selector-widget {
        bottom: 5rem !important;
        right: 0.5rem !important;
        z-index: 37 !important;
    }

    /* --- Right Config Panel (Wall Editor) --- */
    #right-config-panel {
        border-radius: 1rem 1rem 0 0;
        max-height: calc(100vh - 3rem); /* Leave space at top */
    }

    /* Right panel hidden: slide down off-screen on mobile */
    #right-config-panel.wall-panel-hidden {
        transform: translateY(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Right panel visible */
    #right-config-panel:not(.wall-panel-hidden) {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* --- Step 4: Wall Selector minimap - smaller on mobile --- */
    #combined-wall-selector {
        width: 10rem;
        height: 10rem;
    }

    /* --- Wall type tiles - compact on mobile --- */
    .wall-type-tile {
        padding: 6px 4px;
        gap: 2px;
    }
    .wall-type-icon {
        max-width: 50px;
    }
    .wall-type-label {
        font-size: 0.5625rem; /* 9px */
    }

    /* --- Info bubbles - hide on mobile (use touch instead) --- */
    .info-bubble {
        display: none !important;
    }

    /* --- Client data dialog - stack grid on small screens --- */
    #pdf-client-dialog .grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }
    #pdf-client-dialog-inner {
        max-height: 85vh;
        overflow-y: auto;
    }

    /* --- Language switcher --- */
    #language-switcher {
        gap: 0.25rem;
    }
    /* Reduce flag size in config panel header on mobile */
    #config-panel .lang-btn {
        width: 1.25rem !important;
        height: 1.25rem !important;
        padding: 0;
    }

    /* --- Mount type cards: compact on mobile --- */
    .type-tile {
        padding: 0.5rem !important;
    }
    .type-tile .material-symbols-rounded.text-3xl {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem;
    }
    .type-tile h3 {
        font-size: 0.75rem !important;
    }
    .type-tile p {
        font-size: 0.5625rem !important;
        margin-top: 0.125rem;
    }

    /* --- Roof model tiles: compact --- */
    .model-tile {
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }
    .model-tile .w-10 {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.625rem !important;
    }
    .model-tile h4 {
        font-size: 0.75rem !important;
    }
    .model-tile p {
        font-size: 0.625rem !important;
    }

    /* --- Dimension inputs: more compact --- */
    #step-2 .space-y-2 {
        gap: 0.375rem;
    }
    #step-2 label.text-sm {
        font-size: 0.75rem;
    }

    /* --- Config panel header: compact --- */
    #config-panel > div:first-child {
        padding: 0.5rem 0.75rem !important;
    }
    #config-panel .text-lg {
        font-size: 0.9375rem !important;
    }

    /* --- Step labels: compact --- */
    .config-step > label:first-child {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
}

/* ========================
   MOBILE PORTRAIT (< 768px, portrait)
   ======================== */
@media (max-width: 767px) and (orientation: portrait) {
    /* Config panel takes 55% of screen — use dvh for dynamic viewport (address bar) */
    #config-panel {
        height: 55vh;
        height: 55dvh; /* modern browsers: accounts for address bar hide/show */
    }
    /* Canvas takes remaining space */
    #canvas-container {
        height: 45vh;
        height: 45dvh;
    }

    /* Right config panel (wall editor) - taller to fit all wall options */
    #right-config-panel {
        height: 70vh;
        height: 70dvh;
    }
    /* Reduce excessive bottom padding on mobile so more content is visible */
    #right-config-panel .pb-48 {
        padding-bottom: 6rem;
    }
}

/* ========================
   MOBILE LANDSCAPE (< 767px height OR landscape on small devices)
   ======================== */
@media (max-width: 767px) and (orientation: landscape) {
    /* In landscape, use side-by-side layout like desktop */
    #config-panel {
        height: 100%;
        width: 280px;
    }
    #canvas-container {
        height: 100%;
    }
    #right-config-panel {
        height: 100%;
        width: 260px;
        border-radius: 0;
    }
    #right-config-panel.wall-panel-hidden {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #right-config-panel:not(.wall-panel-hidden) {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
    /* Safe-area for bottom slider bar with notched phones in landscape */
    #bottom-slider-bar {
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    }

    /* Floating controls more compact + safe area for notched phones */
    #floating-controls {
        top: 0.25rem;
        right: max(0.25rem, env(safe-area-inset-right, 0px));
    }

    /* Language switcher compact for landscape */
    #language-switcher {
        gap: 0.15rem;
    }
    #config-panel .lang-btn {
        width: 1.1rem !important;
        height: 1.1rem !important;
    }

    /* Hide step indicator text to save space */
    #step-indicator {
        font-size: 0.6rem;
    }
}

/* Prevent swatch hover scale from causing overflow in right panel */
#active-wall-config-panel .ral-swatch:hover,
#active-wall-config-panel .wood-swatch:hover {
    transform: scale(1.05);
}

/* ========================
   TABLET STYLES (768px - 1023px)
   Tablet uses MOBILE layout: vertical stack, no sidebar nav,
   bottom sheet panels, mobile step nav visible.
   ======================== */
@media (min-width: 768px) and (max-width: 1023px) {

    /* --- CORE LAYOUT: Force mobile vertical stack --- */
    #app-container {
        flex-direction: column !important;
    }

    /* Hide desktop left nav sidebar */
    #app-container > nav {
        display: none !important;
    }

    /* Show mobile step nav on tablet */
    #mobile-step-nav {
        display: flex !important;
    }

    /* Canvas: full width, top, fixed height like mobile */
    #canvas-container {
        order: 1 !important;
        width: 100% !important;
        height: 45vh !important;
        height: 45dvh !important; /* dynamic viewport for address bar */
        flex: none !important; /* Override flex-1 from Tailwind */
    }

    /* Config panel: full width bottom sheet like mobile */
    #config-panel {
        order: 2 !important;
        width: 100% !important;
        height: 55vh !important;
        height: 55dvh !important;
        flex: none !important;
    }

    /* Config panel header: mobile compact sizing */
    #config-panel > div:first-child {
        padding: 0.75rem 1rem !important;
    }
    #config-panel .text-lg {
        font-size: 1rem !important;
    }

    /* Config panel scrollable content: mobile padding — keep large bottom
       padding (8 rem / 128 px) so even on a 55vh-tall tablet bottom sheet
       the LAST element of every step (Step 3 "Inny kolor RAL", Step 6
       PDF/Inquiry buttons after a long accessory list) stays reachable. */
    #config-panel .flex-1.overflow-y-auto {
        padding: 1rem 1rem 8rem 1rem !important;
    }

    /* --- RIGHT CONFIG PANEL: Bottom sheet --- */
    #right-config-panel {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 65vh !important;
        border-radius: 1rem 1rem 0 0 !important;
        border-left: none !important;
        border-top: 1px solid;
        max-height: calc(100vh - 3rem);
    }

    /* Right panel hidden state: slide down (Y-axis) instead of right */
    #right-config-panel.wall-panel-hidden {
        transform: translateX(0) translateY(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Right panel visible state */
    #right-config-panel:not(.wall-panel-hidden) {
        transform: translateX(0) translateY(0) !important;
    }

    /* Show ALL md:hidden elements on tablet (drag handle, tabs, structure controls, footer) */
    #right-config-panel .md\:hidden {
        display: flex !important;
    }
    /* Fix: structure-controls-mobile should be block, not flex */
    #structure-controls-mobile {
        display: block !important;
    }

    /* Hide desktop structure controls on tablet (has hidden md:block — md:block would show it) */
    #structure-controls-desktop {
        display: none !important;
    }

    /* Right panel tab contents: on tablet, override md:block to respect mobile tab behavior.
       .hidden should mean hidden, even though md:block normally overrides it. */
    #tab-content-structure.hidden,
    #tab-content-infill.hidden {
        display: none !important;
    }
    /* Override md:block on infill tab so it's hidden by default (mobile uses JS tabs) */
    #tab-content-infill.tab-content {
        display: none;
    }
    #tab-content-infill.tab-content:not(.hidden) {
        display: block;
    }

    /* --- STRUCTURE CONTROLS: Tablet-sized post management --- */
    #structure-controls-mobile h4 {
        font-size: 0.9375rem;
    }
    /* Add/Remove post bar */
    #structure-controls-mobile .flex.items-center.justify-between {
        padding: 0.875rem !important;
        border-radius: 0.75rem;
    }
    #structure-controls-mobile .flex.items-center.justify-between > span {
        font-size: 0.875rem;
    }
    /* +/- buttons: bigger for tablet touch */
    #structure-controls-mobile .structure-remove-post-btn,
    #structure-controls-mobile .structure-add-post-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.25rem;
        font-weight: 700;
        border-radius: 0.5rem;
    }
    /* Post count value */
    #structure-controls-mobile .structure-post-count-value {
        font-size: 1rem !important;
        min-width: 1.5rem;
        text-align: center;
    }
    /* Segment dimension inputs */
    #structure-controls-mobile .wall-segment-dimension-input {
        padding: 0.625rem !important;
        font-size: 0.9375rem !important;
    }
    #structure-controls-mobile label.block {
        font-size: 0.8125rem;
    }
    /* Corner config: bigger toggles and controls */
    #structure-controls-mobile .corner-count-slider {
        height: 6px;
    }
    #structure-controls-mobile input[type="range"] {
        height: 8px;
    }

    /* Right panel scrollable content: tablet padding */
    #right-config-panel .flex-1.overflow-y-auto {
        padding: 1rem 1.25rem !important;
        padding-bottom: 6rem !important;
    }

    /* Wall nav header: bigger on tablet */
    #right-config-panel .p-4.border-b {
        padding: 0.75rem 1rem !important;
    }
    #wall-nav-title {
        font-size: 0.875rem;
    }
    #wall-nav-prev,
    #wall-nav-next {
        width: 2.25rem;
        height: 2.25rem;
    }

    /* Right panel tabs: bigger on tablet */
    #right-config-panel .config-tab {
        padding: 0.875rem 0 !important;
        font-size: 0.875rem;
    }

    /* Right panel footer safe-area padding */
    #right-config-panel > .p-4.border-t {
        padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
    }

    /* Config panel footer safe-area padding */
    #config-panel > .p-4.border-t {
        padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
    }

    /* --- FLOATING ELEMENTS: Mobile sizes --- */
    #floating-controls {
        top: 0.5rem !important;
        right: 0.5rem !important;
        gap: 0.25rem;
    }
    #floating-controls > .h-8.w-px {
        display: none; /* Hide dividers */
    }

    #floating-price-bar {
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        max-width: 100%;
        width: 100%;
        border-radius: 0 !important;
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem !important;
        gap: 0.5rem !important;
        justify-content: center;
    }

    #compass {
        left: 20px;
        bottom: 12px;
        width: 55px;
        height: 55px;
    }

    /* Canvas touch behavior */
    #canvas-container {
        touch-action: none;
    }

    /* Wall type grid - always 3x3 on tablet for better visibility */
    .wall-type-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem;
    }

    /* Wall type tiles - good size for tablet touch */
    .wall-type-tile {
        padding: 10px 6px 8px;
        gap: 4px;
    }
    .wall-type-icon {
        max-width: 60px;
    }
    .wall-type-label {
        font-size: 0.65rem; /* Larger labels for tablet readability */
    }

    /* Mount type cards - compact */
    .type-tile {
        padding: 0.625rem !important;
    }
    .type-tile .material-symbols-rounded.text-3xl {
        font-size: 1.75rem !important;
    }

    /* Dashboard grid - 2 columns */
    #dashboard-configs-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #dashboard-overlay main {
        padding: 1.5rem;
    }
    #my-offers-search,
    #all-offers-search,
    #designer-project-search,
    #designer-user-search {
        width: 12rem;
    }

    /* Visualizer side panel - mobile full-width bottom sheet */
    #visualizer-toolbar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        max-height: 60vh;
    }
    #viz-side-panel {
        width: 100%;
        height: auto;
        max-height: 60vh;
        border-left: none;
        border-top: 1px solid;
        border-radius: 1rem 1rem 0 0;
    }
    #viz-panel-toggle {
        top: auto;
        bottom: 1rem;
        right: 1rem;
    }
    .viz-panel-toggle-visible {
        display: flex !important;
    }

    /* Side panels (env, library) - full screen overlay */
    #env-panel,
    #library-panel {
        width: 100%;
        z-index: 60;
    }
}

/* ========================
   TABLET PORTRAIT (768px - 1023px, portrait)
   ======================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    #config-panel {
        height: 50vh !important;
    }
    #canvas-container {
        height: 50vh !important;
    }
}

/* ========================
   ALL DESKTOP (≥1024px): Auto-hide left panel when wall config panel opens
   ======================== */
@media (min-width: 1024px) {
    /* Wall config panel: desktop position — slides out to the right of the config panel */
    #right-config-panel {
        left: calc(5rem + 340px); /* nav(80px) + config(340px) = 420px */
    }

    /* Wall config panel hidden: slide left off-screen, invisible, non-interactive */
    #right-config-panel.wall-panel-hidden {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Wall config panel visible */
    #right-config-panel:not(.wall-panel-hidden) {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ========================
   SMALL LAPTOP (1024px - 1366px)
   ======================== */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* Aggressively narrower left panel */
    #config-panel {
        width: 260px !important;
        transition: transform 0.3s ease, width 0.3s ease;
    }

    /* Right panel: overlay on top of the left config panel (same position) */
    #right-config-panel {
        width: 260px !important;
        left: 3.5rem !important; /* same as nav width — covers config panel */
        z-index: 35 !important; /* above config-panel (z-30) */
    }
    #right-config-panel:not(.wall-panel-hidden) {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    #right-config-panel.wall-panel-hidden {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Nav bar narrower */
    nav.w-20 {
        width: 3.5rem;
    }
    nav.w-20 .material-symbols-rounded {
        font-size: 20px;
    }
    nav.w-20 .text-\[10px\] {
        font-size: 0;
        overflow: hidden;
        height: 0;
    }

    /* Config panel content - compact padding, but keep generous bottom
       padding so long sections (Step 3 colour panel with both frame and
       roof RAL grids) can scroll past the prev/next footer. The dealer
       reported the "Inny kolor RAL" input was getting clipped at the
       bottom on tablet-landscape iPads — only 12 px of bottom padding
       wasn't enough for the swatch grid to overflow comfortably. */
    #config-panel > div:first-child {
        padding: 0.5rem 0.75rem !important;
    }
    #config-panel .text-lg {
        font-size: 0.9375rem !important;
    }
    /* 8 rem (128 px) of bottom padding so the LAST element of every step
       — Step 3's "Inny kolor RAL" input/button under the roof swatches,
       Step 6's PDF/Inquiry buttons after a long accessory list — is
       always reachable via scroll on small viewports. The previous 5 rem
       wasn't enough on iPad-landscape with iOS Safari's bottom safe-area
       and the prev/next footer eating into the visible scroll range. */
    #config-panel .flex-1.overflow-y-auto {
        padding: 0.75rem 0.75rem 8rem 0.75rem !important;
    }

    /* Header: wrap title + flags onto two rows so they don't overflow */
    #config-panel > div:first-child .flex.items-center.gap-3 {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }
    #language-switcher {
        margin-left: 0 !important;
        gap: 0.25rem !important;
    }
    #language-switcher .lang-btn {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* Footer nav buttons - ensure they don't get covered */
    #config-panel > div:last-child {
        padding: 0.5rem 0.75rem !important;
    }

    /* Compass - account for narrower nav + panel */
    #compass {
        left: calc(3.5rem + 260px + 0.75rem);
    }

    /* Edit indicator - position after narrower nav + panel */
    #edit-indicator {
        left: calc(3.5rem + 260px + 0.75rem) !important;
        top: 3.5rem !important;
        max-width: 220px;
    }

    /* Bottom slider bar (roof openness + per-wall openness pills) used
       to be `position: absolute` inside #canvas-container with `left-4`,
       which on small-laptop landed it at viewport ~332 px — exactly at
       the right edge of the right-config-panel overlay. The previous
       attempt to push it further with `left: calc(3.5rem + 260px + ...)`
       was wrong because absolute-positioning is canvas-container-relative
       and the calc was viewport-relative, double-counting the nav +
       config-panel and pushing the bar mostly off-screen.
       Switch to `position: fixed` anchored to the bottom-right of the
       VIEWPORT so the math is unambiguous and the pills always sit in
       the bottom-right corner. z-index above #right-config-panel (z-35)
       so the pills stay visible even when the wall-edit overlay is open. */
    #bottom-slider-bar {
        position: fixed !important;
        left: auto !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        max-width: calc(100vw - 3.5rem - 260px - 1.5rem);
        flex-wrap: wrap;
        justify-content: flex-end;
        z-index: 36 !important;
    }
    /* Keep module widget above fixed slider bar */
    #module-selector-widget {
        bottom: 4rem !important;
        z-index: 37 !important;
    }
}

/* ========================
   MID LAPTOP (1367px - 1599px) — overlay the wall edit panel
   These laptops have full-size desktop chrome (5rem nav + 340px config
   panel) but limited horizontal canvas. When the dealer opens a wall to
   edit, show the wall-options panel ON TOP of the config panel instead
   of beside it, so the canvas keeps its full width. The arrow_back
   button in the wall-options header (already wired to closeWallStepPanel)
   slides the overlay back off-screen, revealing the underlying config
   panel and its prev/next-step buttons.
   ======================== */
@media (min-width: 1367px) and (max-width: 1599px) {
    #right-config-panel {
        left: 5rem !important;     /* same as nav width — covers config panel */
        width: 340px !important;   /* match config panel exactly */
        z-index: 35 !important;    /* above #config-panel (z-30) */
    }
    #right-config-panel:not(.wall-panel-hidden) {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    #right-config-panel.wall-panel-hidden {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Slider bar uses fixed-to-viewport positioning so the pills always
       sit in the bottom-right corner regardless of which panel is open.
       Same reasoning as the small-laptop block above — the bar is
       absolute-positioned inside canvas-container by default, so any
       nav-+-panel offsets in `left` would double-count. */
    #bottom-slider-bar {
        position: fixed !important;
        left: auto !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        max-width: calc(100vw - 5rem - 340px - 1.5rem);
        flex-wrap: wrap;
        justify-content: flex-end;
        z-index: 36 !important;
    }
    /* Keep module widget above fixed slider bar */
    #module-selector-widget {
        bottom: 4rem !important;
        z-index: 37 !important;
    }

    /* Same generous bottom padding as the small-laptop block — the
       config-panel scroll area must let every step's last element
       (Step 3 "Inny kolor RAL", Step 6 PDF buttons) become reachable
       via scroll even on iPad-landscape with iOS Safari's safe-area
       quirks. The base Tailwind pb-16 (64 px) was insufficient. */
    #config-panel .flex-1.overflow-y-auto {
        padding-bottom: 8rem !important;
    }
}

/* ========================
   OFFER/CONFIG CARDS - Mobile
   ======================== */
/* ========================
   OFFER TABLE ROWS
   ======================== */
.offer-row {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dark .offer-row {
    border-bottom-color: rgba(255,255,255,0.08);
}
.offer-row:hover {
    background-color: rgba(0,0,0,0.02);
}
.dark .offer-row:hover {
    background-color: rgba(255,255,255,0.04);
}
.offer-detail-row td {
    padding-top: 0;
}
.offer-detail-row .notes-input-mini {
    max-height: 120px;
    overflow-y: auto;
}
.offer-chevron {
    transition: transform 0.2s ease;
}

@media (max-width: 767px) {
    /* Make action buttons larger for touch on mobile */
    #my-offers-list .p-1\.5,
    #all-offers-list .p-1\.5,
    #dashboard-configs-list .p-2 {
        padding: 0.5rem;
    }
    /* Status select easier to tap */
    .status-select-mini {
        padding: 0.25rem 0;
        min-height: 32px;
    }
    /* Notes textarea */
    .notes-input-mini {
        font-size: 14px; /* Prevent iOS zoom */
    }
}

/* ========================
   MOBILE STEP NAVIGATION BAR
   ======================== */
#mobile-step-nav {
    padding-bottom: max(0.375rem, env(safe-area-inset-bottom, 0px));
}
.mobile-nav-step.active {
    color: var(--primary);
    background-color: rgba(41, 57, 118, 0.08);
}
.dark .mobile-nav-step.active {
    color: white;
    background-color: rgba(79, 100, 176, 0.15);
}

/* Mobile dashboard nav scrollbar hide */
#dashboard-mobile-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#dashboard-mobile-nav::-webkit-scrollbar {
    display: none;
}
#dashboard-mobile-nav .dashboard-nav-btn.active {
    background-color: rgba(41, 57, 118, 0.1);
    color: var(--primary);
}
.dark #dashboard-mobile-nav .dashboard-nav-btn.active {
    background-color: rgba(79, 100, 176, 0.2);
    color: white;
}

/* When mobile step nav is visible, add bottom padding to config panel */
@media (max-width: 767px) {
    #config-panel {
        padding-bottom: 0;
    }
    /* Ensure config panel footer buttons don't overlap with mobile nav */
    #config-panel > .p-4.border-t {
        padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
    }
    /* Right panel footer too */
    #right-config-panel > .p-4.border-t {
        padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
    }
}

/* Hide mobile step nav when dashboard is open */
#dashboard-overlay:not(.hidden) ~ #mobile-step-nav {
    display: none;
}

/* ========================
   SMALL PHONES (< 375px)
   ======================== */
@media (max-width: 375px) {
    /* Even more compact config panel header */
    #config-panel .text-lg {
        font-size: 0.9375rem;
    }

    /* Smaller swatches */
    .ral-swatch,
    .wood-swatch {
        height: 3.5rem;
    }

    /* Dashboard stats - smaller text */
    #dashboard-tab-pulpit .text-3xl {
        font-size: 1.25rem;
    }

    /* Floating controls - even more compact */
    #floating-controls button,
    #floating-controls a {
        padding: 0.25rem;
    }
    #floating-controls .material-symbols-rounded {
        font-size: 18px;
    }
}

/* ========================
   SHORT PHONES (< 600px height) - more space for canvas
   ======================== */
@media (max-height: 600px) and (max-width: 767px) {
    #config-panel {
        height: 45vh;
    }
    #right-config-panel {
        max-height: 60vh;
    }
    #right-config-panel .pb-48 {
        padding-bottom: 4rem;
    }
    #canvas-container {
        min-height: 35vh;
    }
    /* Compact mobile step nav */
    #mobile-step-nav {
        padding-top: 0.125rem;
        padding-bottom: max(0.125rem, env(safe-area-inset-bottom, 0px));
    }
    #mobile-step-nav .mobile-nav-step {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    /* ZIP carousel cells - compact on short screens */
    .zip-carousel-cell {
        min-height: 56px;
        padding: 4px 8px;
        gap: 8px;
    }
    .zip-color-swatch {
        width: 44px !important;
        height: 44px !important;
    }
}

/* --- Touch Device Active States --- */
@media (hover: none) and (pointer: coarse) {
    /* Buttons: scale down slightly on tap for visual feedback */
    button:active,
    .nav-item:active,
    .mobile-nav-step:active,
    .wall-select-zone:active,
    .module-selector-item:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    /* Floating control buttons: highlight on tap */
    #floating-controls button:active {
        background-color: rgba(0, 0, 0, 0.15);
    }

    /* Disable sticky hover states on touch */
    button:hover,
    a:hover {
        transition: none;
    }
}

/* ================================================================
   NAWIGACJA KROKÓW (lewa kolumna)
   ================================================================ */

.nav-item {
    position: relative;
    border: 2px solid transparent;
}

.nav-item.active {
    color: var(--primary) !important;
    background: rgba(41, 57, 118, 0.1); /* fallback for older browsers */
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: var(--primary);
    border-radius: 0.75rem;
}

.dark .nav-item.active {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.nav-item:not(.active):hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}

.dark .nav-item:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Mobile step nav */
.mobile-nav-step.active {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: 0.5rem;
}

/* ================================================================
   NOWE UI ŚCIAN: kroki + panel opcji
   ================================================================ */

/* ── Krok w liście kroków ── */
.wall-step-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
    user-select: none;
}

.dark .wall-step-item {
    background: #1f2937;
    border-color: #374151;
}

.wall-step-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(41, 57, 118, 0.12);
    transform: translateX(2px);
}

.wall-step-item.active {
    border-color: var(--primary);
    background: rgba(41, 57, 118, 0.08); /* fallback */
    background: color-mix(in srgb, var(--primary) 8%, #fff);
    box-shadow: 0 2px 10px rgba(41, 57, 118, 0.15);
}

.dark .wall-step-item.active {
    background: rgba(41, 57, 118, 0.15); /* fallback */
    background: color-mix(in srgb, var(--primary) 15%, #1f2937);
}

.wall-step-number {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: rgba(41, 57, 118, 0.12); /* fallback */
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.wall-step-item.active .wall-step-number {
    background: var(--primary);
    color: #fff;
}

.wall-step-body {
    flex: 1;
    min-width: 0;
}

.wall-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}

.dark .wall-step-label {
    color: #e5e7eb;
}

.wall-step-item.active .wall-step-label {
    color: var(--primary);
}

.wall-step-value {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .wall-step-value {
    color: #9ca3af;
}

.wall-step-chevron {
    font-size: 1.1rem;
    color: #d1d5db;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}

.wall-step-item:hover .wall-step-chevron,
.wall-step-item.active .wall-step-chevron {
    color: var(--primary);
    transform: translateX(2px);
}

/* ── Segment tabs ── */
.wall-segment-tabs-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 2px;
}

.wall-seg-tab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem !important;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 0.625rem;
    border: 2px solid #e5e7eb !important;
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.dark .wall-seg-tab {
    border-color: #4b5563 !important;
    background-color: #374151 !important;
    color: #9ca3af;
}

.wall-seg-tab:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, #e5e7eb) !important;
}

.wall-seg-tab.active {
    border-color: var(--primary) !important;
    background-color: color-mix(in srgb, var(--primary) 10%, #fff) !important;
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(41, 57, 118, 0.12);
}

.dark .wall-seg-tab.active {
    background-color: color-mix(in srgb, var(--primary) 15%, #1f2937) !important;
}

.wall-seg-tab-all {
    font-weight: 600;
    margin-left: auto !important;
    font-size: 11px !important;
    border-style: dashed !important;
    opacity: 0.7;
}

.wall-seg-tab-all.active {
    border-style: solid !important;
    opacity: 1;
}

/* ── Przycisk wstecz w panelu opcji ── */
/* Back arrow in the wall-options panel header — closes the entire
   right-config-panel via closeWallStepPanel() and on small/mid laptops
   reveals the underlying config panel that the overlay was covering.
   Sized comfortably for both mouse and touch (44 px ≥ recommended
   touch target) and tinted with the primary colour so dealers spot
   it immediately as the way back. */
#wall-options-back {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    border: 2px solid color-mix(in srgb, var(--primary) 25%, #e5e7eb);
    background: color-mix(in srgb, var(--primary) 6%, #ffffff);
    color: var(--primary);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
    flex-shrink: 0;
}

#wall-options-back .material-symbols-rounded {
    font-size: 22px !important;
    line-height: 1;
}

.dark #wall-options-back {
    border-color: color-mix(in srgb, var(--primary) 40%, #4b5563);
    background: color-mix(in srgb, var(--primary) 18%, #374151);
    color: #c5d0f0;
}

#wall-options-back:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
    transform: translateX(-1px);
}

.dark #wall-options-back:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* ── Tytuł kroku w panelu opcji ── */
#wall-options-title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ── Sekcje etykiet w panelu opcji ── */
#wall-options-content > div > p:first-child,
#wall-options-content .text-xs.font-bold.uppercase {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #9ca3af !important;
    margin-bottom: 0.75rem !important;
}

.dark #wall-options-content > div > p:first-child,
.dark #wall-options-content .text-xs.font-bold.uppercase {
    color: #9ca3af !important;
}

/* ── Siatka typów zabudowy w panelu opcji ── */
.wall-type-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.wall-options-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem 0.625rem;
    border-radius: 0.875rem;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.dark .wall-options-tile {
    background: #1f2937;
    border-color: #4b5563;
}

.wall-options-tile:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(41, 57, 118, 0.12);
}

.wall-options-tile.selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, #fff);
    box-shadow: 0 2px 8px rgba(41, 57, 118, 0.15);
}

.dark .wall-options-tile.selected {
    background: color-mix(in srgb, var(--primary) 15%, #1f2937);
}

.wall-options-tile-icon {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: 80px;
}

.wall-options-tile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s;
}

.wall-options-tile:hover .wall-options-tile-icon img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.wall-options-tile.selected .wall-options-tile-icon img {
    box-shadow: 0 0 0 2px var(--primary);
}

.wall-options-tile-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
    text-align: center;
}

.dark .wall-options-tile-label {
    color: #e5e7eb;
}

.wall-options-tile.selected .wall-options-tile-label {
    color: var(--primary);
}

/* ── Przełącznik zakładek RAL/Drewno (legacy) ── */
.wall-opt-color-tab {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}

.dark .wall-opt-color-tab {
    border-color: #4b5563;
    background: #374151;
    color: #9ca3af;
}

.wall-opt-color-tab:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, #e5e7eb);
}

.wall-opt-color-tab.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(41, 57, 118, 0.12);
}

.dark .wall-opt-color-tab.active {
    background: color-mix(in srgb, var(--primary) 18%, #1f2937);
}

/* ── Segmented toggle RAL/Drewno ── */
.color-type-toggle {
    /* RAL ←————→ Drewno: two real card-shaped buttons pinned to the
       left and right edges of the panel with a deliberate empty gap in
       between, so the dealer can never accidentally hit the wrong one.
       `justify-content: space-between` plus a fixed flex-basis on each
       button (set in .color-type-toggle-btn) gives us the "one on each
       side of the panel" layout the dealer asked for. */
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: transparent;
    border-radius: 0;
    padding: 0.5rem 0;
}

.dark .color-type-toggle {
    background: transparent;
}

.color-type-toggle-btn {
    /* Vertical card: icon on top, big bold label below. Inactive state is a
       light grey tint with a visible border, active state is primary with
       a checkmark badge — !important on the visual properties because the
       plugin loads on top of Tailwind CDN JIT utility classes and their
       atomic rules (e.g. base `button { background: transparent }` resets)
       were winning the cascade on some tenants, leaving the buttons as
       unstyled icon+text labels. */
    flex: 0 0 42% !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 14px 10px !important;
    min-height: 82px !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    border-radius: 14px !important;
    border: 2px solid #cbd5e1 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.color-type-toggle-btn:hover {
    background: #f8fafc;
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.dark .color-type-toggle-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
}

.dark .color-type-toggle-btn:hover {
    background: #3f4a5e;
    color: #c5d0f0;
    border-color: #5a6478;
}

.color-type-toggle-btn.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    /* Outer ring + stronger drop shadow so the selected card clearly pops
       against siblings. The inset halo lightens the inside edge so the
       border reads as a double rim instead of a flat block. !important
       matches the base rule above (Tailwind JIT cascade collision). */
    box-shadow:
        0 0 0 3px rgba(41, 57, 118, 0.18),
        inset 0 0 0 2px rgba(255, 255, 255, 0.22),
        0 8px 20px rgba(41, 57, 118, 0.35),
        0 2px 4px rgba(41, 57, 118, 0.25) !important;
    transform: translateY(-1px);
    position: relative;
}

/* Checkmark badge in the top-right corner of the active card — impossible
   to miss even if you glance at the panel quickly. */
.color-type-toggle-btn.active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: var(--primary);
    background: #ffffff;
    border-radius: 999px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dark .color-type-toggle-btn.active {
    background: #4f64b0;
    color: #ffffff;
    border-color: #4f64b0;
    box-shadow:
        0 0 0 3px rgba(79, 100, 176, 0.30),
        inset 0 0 0 2px rgba(255, 255, 255, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.35);
}

.dark .color-type-toggle-btn.active::after {
    color: #4f64b0;
    background: #ffffff;
}

/* Smaller variant — used inline in the Step 3 frame/roof colour
   sections (narrower 260-340 px panel) and the per-wall louver colour
   step. Same vertical card layout as the base, just with slightly
   smaller padding so two cards still fit comfortably with the gap
   between them on the narrowest panel. */
.color-type-toggle-sm .color-type-toggle-btn {
    flex: 0 0 44%;
    padding: 12px 8px;
    min-height: 74px;
    font-size: 12px;
    gap: 4px;
}

/* Grid variant — 2x2 layout for pickers with FOUR mutually-exclusive
   options (currently the glass roof type picker: Przezroczysta /
   Matowa / Grafit / Brąz). Same card chrome as the 2-button toggle,
   but distributed in a CSS grid so they stack 2x2 on narrow panels. */
.color-type-toggle.color-type-toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    justify-content: stretch;
}
.color-type-toggle.color-type-toggle-grid .color-type-toggle-btn {
    flex: none;        /* override flex: 0 0 42% from the base rule */
    width: 100%;
}

/* Icons inside the toggle buttons are inline-styled at 14-18 px in the
   template (the wall-config copy uses 18, the Step 3 copy uses 14).
   With the new vertical card layout we want a much bigger icon so the
   button reads as an icon-with-label, not a label-with-decoration —
   force it to 26 px (22 px in the -sm variant) via !important. */
.color-type-toggle-btn .material-symbols-rounded {
    font-size: 26px !important;
    line-height: 1;
}
.color-type-toggle-sm .color-type-toggle-btn .material-symbols-rounded {
    font-size: 22px !important;
}

/* Defensive: every "RAL/Wood" radio input that's now driven by visible
   .color-type-toggle-btn cards (Step 3 frame/roof, Step 4 corner colour)
   is wrapped in a hidden <div> in the markup, but on tablet some
   browsers were rendering bare radio circles below the toggles anyway —
   the dealer described them as "kółka od nawigacji". Force every such
   input off regardless of any parent display state. The corner radios
   use a dynamic name (corner-${id}-color-type-${suffix}) so we match
   on a name prefix via attribute substring selector. */
input[name="frame-color-type"],
input[name="roof-color-type"],
input.corner-color-type-radio,
input[name*="-color-type-"] {
    display: none !important;
}

/* ── "Inny kolor RAL" button (dealer-only RAL code entry) ──
   Shared style for the three "other RAL colour" entry buttons — frame
   (#frame-color-btn), roof (#roof-color-btn) and per-wall louver
   (.wall-louver-other-ral-btn). Nadaje ten sam "card" language co
   .color-type-toggle-btn (RAL / Drewno) — ikona na górze, etykieta pod
   spodem, wyśrodkowany layout, identyczny chrome — żeby dealer widział
   spójny toggle zamiast przycisku-paska sklejonego ze swatchami. */
.more-ral-btn {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    width: auto !important;
    max-width: 260px;
    margin: 14px auto 4px !important;
    padding: 14px 12px !important;
    min-height: 82px !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center !important;
    color: var(--primary);
    background: #eef2ff;
    border: 2px solid var(--primary) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.more-ral-btn:hover {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(41, 57, 118, 0.25), 0 2px 4px rgba(41, 57, 118, 0.15);
    transform: translateY(-1px);
}

.more-ral-btn .material-symbols-rounded {
    font-size: 26px !important;
    line-height: 1;
    color: inherit;
}

.dark .more-ral-btn {
    color: #c5d0f0;
    background: rgba(79, 100, 176, 0.18);
    border-color: #4f64b0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.40);
}

.dark .more-ral-btn:hover {
    background: #4f64b0;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Aktywny stan — dealer wpisał własny RAL (etykieta zawiera kod zamiast
   "Inny kolor RAL"). Wizualnie odpowiednik .color-type-toggle-btn.active
   żeby język toggle'a pozostał spójny. */
.more-ral-btn.more-ral-btn-active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 3px rgba(41, 57, 118, 0.18),
        inset 0 0 0 2px rgba(255, 255, 255, 0.22),
        0 8px 20px rgba(41, 57, 118, 0.35),
        0 2px 4px rgba(41, 57, 118, 0.25) !important;
    transform: translateY(-1px);
}

.more-ral-btn.more-ral-btn-active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: var(--primary);
    background: #ffffff;
    border-radius: 999px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dark .more-ral-btn.more-ral-btn-active {
    background: #4f64b0 !important;
    color: #ffffff !important;
    border-color: #4f64b0 !important;
    box-shadow:
        0 0 0 3px rgba(79, 100, 176, 0.30),
        inset 0 0 0 2px rgba(255, 255, 255, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.35) !important;
}

.dark .more-ral-btn.more-ral-btn-active::after {
    color: #4f64b0;
    background: #ffffff;
}

/* ── Globalny styl przycisków opcji w prawym panelu ── */
#wall-options-content button {
    outline: none;
}

#wall-options-content button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Option buttons (glass color, finish, tracks, panels, angle, count) */
#wall-options-content .glass-color-opt-btn,
#wall-options-content .glass-finish-opt-btn,
#wall-options-content .glass-tracks-opt-btn,
#wall-options-content .glass-count-opt-btn,
#wall-options-content .fixed-louver-angle-btn,
#wall-options-content .sliding-tracks-radio-btn,
#wall-options-content .sliding-count-btn,
#wall-options-content .alum-mode-btn,
#wall-options-content .louver-panel-count-btn {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #e5e7eb !important;
    border-radius: 0.875rem !important;
    background: #fff !important;
    color: #374151 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

.dark #wall-options-content .glass-color-opt-btn,
.dark #wall-options-content .glass-finish-opt-btn,
.dark #wall-options-content .glass-tracks-opt-btn,
.dark #wall-options-content .glass-count-opt-btn,
.dark #wall-options-content .fixed-louver-angle-btn,
.dark #wall-options-content .sliding-tracks-radio-btn,
.dark #wall-options-content .sliding-count-btn,
.dark #wall-options-content .alum-mode-btn,
.dark #wall-options-content .louver-panel-count-btn {
    border-color: #4b5563 !important;
    background: #1f2937 !important;
    color: #d1d5db !important;
}

/* Hover state */
#wall-options-content .glass-color-opt-btn:hover,
#wall-options-content .glass-finish-opt-btn:hover,
#wall-options-content .glass-tracks-opt-btn:hover,
#wall-options-content .glass-count-opt-btn:hover,
#wall-options-content .fixed-louver-angle-btn:hover,
#wall-options-content .sliding-tracks-radio-btn:hover,
#wall-options-content .sliding-count-btn:hover,
#wall-options-content .alum-mode-btn:hover,
#wall-options-content .louver-panel-count-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 60%, #e5e7eb) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(41, 57, 118, 0.1);
}

/* Selected/active state for option buttons */
#wall-options-content .glass-color-opt-btn[class*="border-primary"],
#wall-options-content .glass-finish-opt-btn[class*="border-primary"],
#wall-options-content .glass-tracks-opt-btn[class*="border-primary"],
#wall-options-content .glass-count-opt-btn[class*="border-primary"],
#wall-options-content .fixed-louver-angle-btn[class*="border-primary"],
#wall-options-content .sliding-tracks-radio-btn[class*="border-primary"],
#wall-options-content .sliding-count-btn[class*="border-primary"],
#wall-options-content .alum-mode-btn[class*="border-primary"],
#wall-options-content .louver-panel-count-btn[class*="border-primary"] {
    border-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 8%, #fff) !important;
    color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(41, 57, 118, 0.15);
}

.dark #wall-options-content .glass-color-opt-btn[class*="border-primary"],
.dark #wall-options-content .glass-finish-opt-btn[class*="border-primary"],
.dark #wall-options-content .glass-tracks-opt-btn[class*="border-primary"],
.dark #wall-options-content .glass-count-opt-btn[class*="border-primary"],
.dark #wall-options-content .fixed-louver-angle-btn[class*="border-primary"],
.dark #wall-options-content .sliding-tracks-radio-btn[class*="border-primary"],
.dark #wall-options-content .sliding-count-btn[class*="border-primary"],
.dark #wall-options-content .alum-mode-btn[class*="border-primary"],
.dark #wall-options-content .louver-panel-count-btn[class*="border-primary"] {
    border-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 15%, #1f2937) !important;
    color: var(--primary) !important;
}

/* +/- buttons for post count */
#wall-options-content .structure-add-post-btn,
#wall-options-content .structure-remove-post-btn {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #e5e7eb !important;
    border-radius: 0.75rem !important;
    background: #fff !important;
    color: #374151 !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    flex-shrink: 0;
    line-height: 1 !important;
    padding: 0 !important;
}

.dark #wall-options-content .structure-add-post-btn,
.dark #wall-options-content .structure-remove-post-btn {
    border-color: #4b5563 !important;
    background: #374151 !important;
    color: #e5e7eb !important;
}

#wall-options-content .structure-add-post-btn:hover {
    border-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 8%, #fff) !important;
    color: var(--primary) !important;
}

.dark #wall-options-content .structure-add-post-btn:hover {
    border-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 15%, #1f2937) !important;
    color: var(--primary) !important;
}

#wall-options-content .structure-remove-post-btn:hover {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

.dark #wall-options-content .structure-remove-post-btn:hover {
    border-color: #f87171 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
}

/* Inputs in right panel */
#wall-options-content input[type="number"],
#wall-options-content input[type="text"] {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #e5e7eb !important;
    border-radius: 0.75rem !important;
    background: #fff !important;
    color: #1f2937 !important;
    font-size: 0.875rem !important;
    padding: 0.625rem 0.75rem !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    width: 100%;
    box-sizing: border-box;
}

.dark #wall-options-content input[type="number"],
.dark #wall-options-content input[type="text"] {
    border-color: #4b5563 !important;
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

#wall-options-content input[type="number"]:focus,
#wall-options-content input[type="text"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* Swatches in right panel — smaller for tighter space */
#wall-options-content .ral-swatch-grid,
#wall-options-content .wood-swatch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

#wall-options-content .ral-swatch,
#wall-options-content .wood-swatch {
    height: 4rem;
    border-radius: 0.625rem;
    border: 2px solid #e5e7eb;
}

.dark #wall-options-content .ral-swatch,
.dark #wall-options-content .wood-swatch {
    border-color: #4b5563;
}

#wall-options-content .ral-swatch.ring-2,
#wall-options-content .wood-swatch.ring-2 {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px #fff;
}

.dark #wall-options-content .ral-swatch.ring-2,
.dark #wall-options-content .wood-swatch.ring-2 {
    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px #1f2937;
}

/* ── Karuzela ZIP w panelu opcji ── */
.zip-carousel-in-panel {
    width: 100%;
}

/* ── Poprawki istniejących swatchy w nowym panelu ── */
#wall-options-content .ral-swatch:hover,
#wall-options-content .wood-swatch:hover {
    transform: scale(1.05);
}

/* ── Inline SVG tile icon sizing ── */
.wall-options-tile-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s;
}
.wall-options-tile:hover .wall-options-tile-icon svg {
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.wall-options-tile.selected .wall-options-tile-icon svg {
    box-shadow: 0 0 0 2px var(--primary);
}

/* ── ZIP fabric roll-up on hover ── */
.anim-zip-fabric {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.wall-options-tile:hover .anim-zip-fabric {
    transform: scaleY(0.12);
}

/* ── Glass panels slide open on hover ── */
.anim-glass-p1 {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.anim-glass-p2 {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.wall-options-tile:hover .anim-glass-p1 {
    transform: translateX(35px);
}
.wall-options-tile:hover .anim-glass-p2 {
    transform: translateX(35px);
}

/* ── Aluminum panel slides open on hover ── */
.anim-alum-p1 {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wall-options-tile:hover .anim-alum-p1 {
    transform: translateX(50px);
}

/* ── Horizontal louver slats rotate on hover ── */
.anim-h-slats rect {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wall-options-tile:hover .anim-h-slats rect {
    transform: scaleY(0.15);
}

/* ── Vertical louver slats rotate on hover ── */
.anim-v-slats rect {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wall-options-tile:hover .anim-v-slats rect {
    transform: scaleX(0.15);
}

/* === RAL FINISH TYPE SELECTOR === */
#app-container .ral-finish-btn {
    border-color: #e5e7eb !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    cursor: pointer;
}
#app-container .ral-finish-btn:hover {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}
#app-container .ral-finish-btn.active {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(41, 57, 118, 0.25);
}
#app-container .ral-finish-btn.active span {
    color: rgba(255, 255, 255, 0.85) !important;
}
.dark #app-container .ral-finish-btn {
    border-color: #374151 !important;
    background: #1f2937 !important;
    color: #9ca3af !important;
}
.dark #app-container .ral-finish-btn:hover {
    border-color: #60a5fa !important;
    background: #1e3a5f !important;
    color: #93c5fd !important;
}
.dark #app-container .ral-finish-btn.active {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: white !important;
}

/* ========================
   VISUALIZER COMPONENT STYLES
   ======================== */

/* Visualizer fullscreen mode - hide everything */
body.visualizer-active #config-panel,
body.visualizer-active #right-config-panel,
body.visualizer-active #floating-controls,
body.visualizer-active #bottom-slider-bar,
body.visualizer-active #mobile-step-nav,
body.visualizer-active #floating-price-bar,
body.visualizer-active #edit-indicator,
body.visualizer-active #restore-left-panel-btn,
body.visualizer-active #main-side-nav {
    display: none !important;
}

body.visualizer-active #app-container {
    display: block !important;
}

body.visualizer-active #canvas-container {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 50 !important;
}

/* Visualizer section styling */
.viz-section {
    background: rgba(0,0,0,0.03);
    border-radius: 0.75rem;
    padding: 0.75rem;
}
.dark .viz-section {
    background: rgba(255,255,255,0.05);
}
.viz-section-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.dark .viz-section-header {
    color: #9ca3af;
}

/* Visualizer buttons */
.viz-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.625rem;
    background: rgba(0,0,0,0.05);
    color: #374151;
    font-weight: 600;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    user-select: none;
}
.dark .viz-btn {
    background: rgba(255,255,255,0.1);
    color: #d1d5db;
}
.viz-btn:hover {
    background: rgba(0,0,0,0.1);
}
.dark .viz-btn:hover {
    background: rgba(255,255,255,0.15);
}
.viz-btn:active {
    background: rgba(0,0,0,0.15);
    transform: scale(0.95);
}

.viz-btn-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(0,0,0,0.05);
    color: #6b7280;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.dark .viz-btn-sm {
    background: rgba(255,255,255,0.1);
    color: #9ca3af;
}
.viz-btn-sm:hover {
    background: rgba(0,0,0,0.1);
}
.viz-btn-sm:active {
    background: rgba(0,0,0,0.15);
    transform: scale(0.95);
}

/* Visualizer sliders */
.viz-slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.viz-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.12);
    outline: none;
    cursor: pointer;
}
.dark .viz-slider {
    background: rgba(255,255,255,0.15);
}
.viz-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary, #1d4ed8);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.viz-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary, #1d4ed8);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Large visualizer sliders — easier to grab */
.viz-slider-lg {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.1);
    outline: none;
    cursor: pointer;
    transition: background 0.15s;
}
.dark .viz-slider-lg {
    background: rgba(255,255,255,0.12);
}
.viz-slider-lg:hover {
    background: rgba(0,0,0,0.15);
}
.viz-slider-lg::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary, #1d4ed8);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}
.viz-slider-lg::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.viz-slider-lg::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary, #1d4ed8);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Arrow buttons for position control */
.viz-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(0,0,0,0.05);
    color: #6b7280;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    font-size: 0;
}
.viz-btn-arrow .material-symbols-rounded {
    font-size: 20px;
}
.dark .viz-btn-arrow {
    background: rgba(255,255,255,0.1);
    color: #9ca3af;
}
.viz-btn-arrow:hover {
    background: rgba(0,0,0,0.12);
    color: #374151;
}
.dark .viz-btn-arrow:hover {
    background: rgba(255,255,255,0.18);
    color: #e5e7eb;
}
.viz-btn-arrow:active {
    background: rgba(0,0,0,0.18);
    transform: scale(0.92);
}

/* Scrollbar for visualizer panel */
.viz-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.viz-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.viz-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
}
.dark .viz-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}

/* Panel collapsed state */
#visualizer-toolbar.viz-collapsed #viz-side-panel {
    transform: translateX(100%);
}
#visualizer-toolbar.viz-collapsed #viz-panel-toggle {
    display: flex;
}
#visualizer-toolbar:not(.viz-collapsed) #viz-panel-toggle {
    display: none;
}

@media (max-width: 767px) {
    #visualizer-toolbar.viz-collapsed #viz-side-panel {
        transform: translateY(100%);
    }
    #visualizer-toolbar.viz-collapsed #viz-panel-toggle {
        display: flex;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
    }
}

/* Preview mode: disable all interactive elements except camera/3D */
body.pergola-preview-mode #config-panel input,
body.pergola-preview-mode #config-panel select,
body.pergola-preview-mode #config-panel textarea,
body.pergola-preview-mode #config-panel button:not(#prev-step-btn):not(#next-step-btn),
body.pergola-preview-mode #right-config-panel input,
body.pergola-preview-mode #right-config-panel select,
body.pergola-preview-mode #right-config-panel textarea,
body.pergola-preview-mode #right-config-panel button,
body.pergola-preview-mode #floating-controls button:not(#btn-undo):not(#btn-redo) {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}
body.pergola-preview-mode #config-panel label {
    cursor: not-allowed;
}
body.pergola-preview-mode #floating-controls #btn-save {
    pointer-events: none;
    opacity: 0.4;
}