/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Hoofdlayout: flex op body zodat canvas en sidebar naast elkaar staan */
body {
    display: flex;
    height: 100vh; /* fallback voor browsers zonder dvh-support */
    height: 100dvh; /* volgt de ECHTE zichtbare hoogte mee als Safari's eigen balk in-/uitklapt bij scrollen/kantelen — met vaste 100vh (de vroegere waarde bij ingeklapte balk) kon de pagina daardoor een stukje "verspringen"/onbereikbaar worden na het draaien van het toestel */
    overflow: hidden;
    font-family: sans-serif;
}

/* 3D viewer: neemt de resterende ruimte na de sidebar */
#canvas-container {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}

/* Canvas element dat Three.js aanmaakt vult de container */
#canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Sidebar wrapper: ~20% breedte, geklemd tussen 280-380px zodat 'm op iPad-landscape (waar 20%
   zou uitkomen op ~205px) niet te smal wordt voor de 2-koloms catalogus-grid. Op desktop-breedtes
   (vanaf ~1400px) zit 20% al middenin deze range, dus geen zichtbaar verschil daar. */
#sidebar {
    flex: 0 0 clamp(280px, 20%, 380px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #f7f7f7;
    border-left: 1px solid #ccc;
}

/* Sidebar branding */
#sidebar-brand {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 14px 18px;
}

#brand-logo {
    width: 100%;
    height: auto;
    display: block;
    filter: invert(1);
}

/* Dealer co-branding — verschijnt alleen bij ?dealer=<id> (zie js/ui/dealer.js). Alleen het
   dealer-logo, clean en gecentreerd, subtiel gescheiden van het Pillar-logo erboven. */
#dealer-brand {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
#dealer-brand .dealer-logo {
    display: block;
    max-width: 100%;
    max-height: 52px;
    height: auto;
    border-radius: 8px;
}
#dealer-brand .dealer-name {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

/* Module selector panel */
#module-panel {
    padding: 16px;
}

#module-panel h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Panel-secties: duidelijke genummerde groepen met scheidingslijn ertussen */
.panel-section + .panel-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e4e4e4;
}
.section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
#module-panel .section-head h3 { margin-bottom: 0; }
.section-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Werkruimte-invoer als gegroepeerd kaartje */
.room-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 12px;
}

/* 4 inklapbare hoofdstappen (Workspace / Ready-made sets / Modules / Placed modules) */
.step-section { border-top: 1px solid #e4e4e4; }
.step-section:first-child { border-top: none; }
.step-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
}
.step-label {
    flex: 1;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.step-body { display: none; padding-bottom: 12px; }
.step-section.open .step-body { display: block; }
.step-section.open > .step-header .cat-chevron { transform: rotate(180deg); }

/* Ready-made sets (presets) in de sidebar */
#preset-cards { display: flex; flex-direction: column; gap: 8px; }
.preset-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.preset-card:hover { border-color: #222; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); }
.preset-thumb-wrap {
    width: 64px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.preset-thumb { width: 100%; height: 100%; object-fit: contain; display: block; }
.preset-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preset-name { font-size: 0.82rem; font-weight: 700; color: #222; }
.preset-desc { font-size: 0.72rem; color: #777; line-height: 1.25; }

.room-size-controls {
    display: flex;
    gap: 10px;
}

.room-label {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.room-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.room-input-row input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
}

.room-input-row span {
    font-size: 0.8rem;
    color: #888;
    flex-shrink: 0;
}

/* Kamervorm: rechthoek of L. Twee knoppen naast elkaar met een plattegrondje erin, want de vorm
   uitleggen in woorden kost meer ruimte dan hem tekenen. */
.room-shape-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.shape-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 6px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #666;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.shape-btn.is-active { border-color: #222; color: #222; }

.room-notch { margin-top: 12px; }
.room-notch[hidden] { display: none; }
.room-sublabel {
    display: block;
    margin: 12px 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Hoekkiezer: vier miniplattegrondjes in een 2×2 raster, in dezelfde stand als de 3D-weergave.
   De camera staat standaard op +Z, dus BOVEN is achterin de kamer en RECHTS is rechts in beeld. */
.corner-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-width: 150px;
}
.corner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #999;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.corner-btn.is-active { border-color: #222; color: #222; }

/* Module catalogus — accordion */
#module-catalog {
    margin-top: 4px;
}

.cat-section { border-bottom: 1px solid #e8e8e8; }

.cat-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #222;
}
.cat-icon { display: flex; align-items: center; color: #555; }
.cat-label { flex: 1; text-align: left; }
.cat-chevron {
    transition: transform 0.22s ease;
    color: #888;
    flex-shrink: 0;
}
.cat-section.open .cat-chevron { transform: rotate(180deg); }

.cat-body {
    display: none;
    padding-bottom: 10px;
}
.cat-section.open .cat-body { display: block; }

/* Module kaartjes grid */
.mod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mod-card {
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand,
   zodat 'm niet blijft "plakken" na een tik op een touchscreen zonder echte hover. */

/* Info-kaartje (bv. maat-overzicht rij-werkblad): puur ter overzicht, geen klik-actie */
.mod-card-info { cursor: default; }
.mod-card-info:hover { border-color: #e0e0e0; box-shadow: none; }
.mod-card.active {
    border-color: #222;
    box-shadow: 0 0 0 2px rgba(34,34,34,0.12);
}

.mod-thumb-wrap {
    aspect-ratio: 4/3;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mod-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mod-thumb-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top-color: #888;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mod-name {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #333;
    padding: 5px 6px 6px;
    line-height: 1.25;
    text-align: center;
}

.catalog-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: #1a1a1a;
    color: #fff;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    opacity: 0.92;
    user-select: none;
    transform: rotate(-2deg);
}

.placement-hint {
    font-size: 0.75rem;
    color: #555;
    background: #f0f0f0;
    border-radius: 5px;
    padding: 6px 10px;
    margin-top: 8px;
    text-align: center;
}

.rotation-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.rotation-controls button {
    flex: 1;
    padding: 6px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.rotation-controls button:hover { background: #eee; }

#rotation-display {
    flex: 0 0 36px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
}

/* Grid maataanduidingen */
.grid-label {
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid #ccc;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Camera navigatie pijltjes */
#camera-nav {
    position: absolute;
    /* zelfde reden als #sidebar-toggle: houdt de knoppen weg bij de notch/dynamic-island/
       statusbalk-zone, relevant zodra de site als "Add to Home Screen"-app draait (zie index.html) */
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 5;
    user-select: none;
}

.cam-row {
    display: flex;
    gap: 3px;
}

.cam-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: rgba(28, 28, 28, 0.72);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
    touch-action: none;
}
.cam-btn:active { background: rgba(0, 0, 0, 0.95); }
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */

.cam-row-actions {
    margin-top: 4px;
}
.cam-btn--active {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #111 !important;
}
.cam-btn--active svg { stroke: #111 !important; }

/* Maataanduiding labels (CSS2D) */
.dim-label {
    background: rgba(10, 10, 10, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    backdrop-filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

/* Circulair context menu */
#model-context-menu {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.15s ease;
}

.ctx-disk {
    width: 90px;
    height: 90px;
    background: rgba(22, 22, 22, 0.50);
    border-radius: 50%;
    position: relative;
    pointer-events: all;
    box-shadow: 0 3px 14px rgba(0,0,0,0.28);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
}

.ctx-btn {
    position: absolute;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.12s;
}

/* Centraal: move handle — 28px, radius 0 */
.ctx-move {
    width: 28px;
    height: 28px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.92);
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0,0,0,0.30);
    z-index: 1;
    touch-action: none;
}
.ctx-move:active { cursor: grabbing; transform: translate(-50%, -50%) scale(0.96); }
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */

/* Links — W: midden-links */
.ctx-add-left {
    width: 22px;
    height: 22px;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    color: white;
    border: 1px solid rgba(255,255,255,0.22);
}
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */

/* Rechts — E: midden-rechts */
.ctx-add-right {
    width: 22px;
    height: 22px;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    color: white;
    border: 1px solid rgba(255,255,255,0.22);
}
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */

.ctx-btn.ctx-blocked {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

/* Boven — N: draaien */
.ctx-rotate {
    width: 22px;
    height: 22px;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.18);
    color: white;
    border: 1px solid rgba(255,255,255,0.22);
}
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */

/* Onder — S: center=(45,45+30)=(45,75) → 22px btn: bottom=90-75-11=4 */
.ctx-delete {
    width: 22px;
    height: 22px;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(210, 45, 35, 0.82);
    color: white;
    border: 1px solid rgba(0,0,0,0.1);
}
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */

/* Materiaalknoppen hoekwerkblad — hoekjes boven, naast de draai-knop (N) */
.ctx-material {
    width: 18px;
    height: 18px;
    top: 10px;
    border: 1.5px solid rgba(255,255,255,0.55);
}
.ctx-material-hout {
    left: 8px;
    background: radial-gradient(circle at 35% 30%, #d9a866, #8b5a2b 65%, #6b4423);
}
.ctx-material-staal {
    right: 8px;
    background: radial-gradient(circle at 35% 30%, #e8ebee, #9aa1a8 65%, #6b7278);
}
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */
.ctx-material.ctx-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 2px 6px rgba(0,0,0,0.3);
}
.ctx-material.ctx-hidden { display: none; }

/* "Move whole setup" — een chip MET tekst onder de schijf, geen achtste icoonknop erop.
   Een modus verandert wat de andere knoppen doen; dat legt een pictogram niet uit, en de
   title-tooltip die het wél uitlegde bestond alleen bij muis-hover (op touch dus niets).
   Hangt absoluut onder .ctx-disk, zodat de schijf zelf op het ankerpunt gecentreerd blijft.
   Icoon werkt op currentColor, zodat de actieve (witte) staat vanzelf een donker icoon krijgt. */
.ctx-setup {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    /* Eén maat voor muis én vinger. Op de telefoon was de chip ruimer en daardoor duidelijker
       leesbaar dan op de laptop; die versie is nu de standaard, zodat je op beide schermen
       hetzelfde ziet. Alleen de afstand tot de schijf verschilt nog (die is op touch groter). */
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(22, 22, 22, 0.72);
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px rgba(0,0,0,0.28);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
/* :hover-regel voor dit element staat in het "@media (hover: hover)"-blok onderaan dit bestand. */
.ctx-setup.ctx-active {
    color: #1a1a1a;
    background: rgba(255,255,255,0.94);
    border-color: #fff;
}
.ctx-setup.ctx-hidden { display: none; }

.selection-actions button {
    flex: 1;
    padding: 8px 6px;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

#sel-rotate-btn { background: #e8e8e8; color: #222; }
#sel-rotate-btn:hover { background: #d0d0d0; }

#sel-delete-btn { background: #c0392b; color: #fff; }
#sel-delete-btn:hover { background: #a93226; }

#placed-list {
    list-style: none;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.placed-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
}

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 0.75rem;
    padding: 0 2px;
}
.remove-btn:hover { color: #c00; }

/* Offerte form container */
/* Sidebar toggle-knop */
#quote-form-container {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #e4e4e4;
}
/* "3 Your quote"-kop: zelfde stijl als de secties in het module-panel, uitgelijnd met widget/knop */
.quote-section-head {
    margin: 0 12px 8px;
}
.quote-section-head h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#quote-toggle {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 14px 16px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.03em;
    transition: background 0.15s;
}
#quote-toggle:hover { background: #333; }

/* ==================== PRICE WIDGET ==================== */

#price-widget {
    margin: 0 12px 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    min-height: 44px;
}

#price-widget-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 2px;
}

#price-widget-value {
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
}

#price-widget-value small {
    font-size: 0.7rem;
    font-weight: 400;
    color: #888;
}

.pw-incl {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: #555;
}

/* ==================== SNAP POINTS ==================== */


/* ==================== WELCOME MODAL ==================== */

#welcome-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(6px);
    pointer-events: none;
}
#welcome-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

#welcome-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 700px;
    width: calc(100% - 40px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    transform: translateY(18px);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
#welcome-overlay.is-open #welcome-card { transform: translateY(0); }

#welcome-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #111;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
#welcome-sub {
    font-size: 0.875rem;
    color: #777;
    margin: 0 0 24px;
}

#welcome-presets {
    display: grid;
    /* auto-fit i.p.v. een vaste 3: er kunnen meer kant-en-klare sets bijkomen, en die horen dan
       netjes over meerdere rijen te vallen i.p.v. samengeperst te worden. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.welcome-preset {
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.welcome-preset:hover {
    border-color: #222;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.welcome-thumb-wrap {
    aspect-ratio: 16/9;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.welcome-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.welcome-thumb-spinner {
    width: 22px; height: 22px;
    border: 2px solid #ddd;
    border-top-color: #888;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.welcome-preset-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #222;
    padding: 10px 12px 2px;
}
.welcome-preset-desc {
    display: block;
    font-size: 0.72rem;
    color: #999;
    padding: 0 12px 10px;
}

#welcome-custom {
    width: 100%;
    padding: 13px 16px;
    background: #f4f4f4;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
    margin-top: 4px;
}
#welcome-custom:hover { background: #eaeaea; color: #111; }

/* Modal overlay */
#quote-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(2px);
}
#quote-modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

/* Modal card */
#quote-modal-card {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.28);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#quote-modal-overlay.is-open #quote-modal-card {
    transform: translateY(0) scale(1);
}

#quote-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #eee;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
#quote-modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
#quote-modal-close:hover { color: #111; background: #f0f0f0; }

#quote-modal-body {
    padding: 20px;
}

/* Form binnen modal */
#quote-form label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin-top: 12px;
    margin-bottom: 4px;
}
#quote-form input,
#quote-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.88rem;
    background: #fafafa;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
#quote-form input:focus,
#quote-form textarea:focus {
    outline: none;
    border-color: #222;
    background: #fff;
}
#quote-form textarea { resize: vertical; }

.qf-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
#quote-form .qf-btn-primary {
    flex: 7;
    padding: 11px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
#quote-form .qf-btn-primary:hover { background: #444; }
#quote-form .qf-btn-secondary {
    flex: 3;
    padding: 11px 8px;
    background: #fff;
    color: #222;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}
#quote-form .qf-btn-secondary:hover { border-color: #222; background: #f5f5f5; }
#quote-form .qf-btn-primary:disabled,
#quote-form .qf-btn-secondary:disabled { opacity: 0.6; cursor: default; }

/* Succes-scherm */
#quote-success {
    text-align: center;
    padding: 16px 8px;
}
#quote-success-icon {
    width: 52px;
    height: 52px;
    background: #222;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 16px;
}
#quote-success h3 { margin: 0 0 8px; font-size: 1.1rem; }
#quote-success p  { color: #555; font-size: 0.88rem; margin: 0 0 20px; }
#quote-success-close {
    padding: 9px 24px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}
#quote-success-close:hover { background: #444; }

/* Configuratie-samenvatting */
#qf-config-summary {
    background: #f7f7f7;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 4px;
    font-size: 0.82rem;
}
.qf-summary-empty { color: #aaa; margin: 0; }

.qf-summary-label {
    font-weight: 600;
    color: #555;
    margin: 0 0 6px;
}

.qf-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.qf-summary-list li {
    color: #222;
    display: flex;
    justify-content: space-between;
}

.qf-summary-list li span {
    color: #888;
    font-weight: 600;
}

/* Prijstabel in offerte-modal */
.qf-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    margin-top: 4px;
}

.qf-price-table th {
    text-align: left;
    color: #888;
    font-weight: 600;
    padding: 4px 6px 6px;
    border-bottom: 1px solid #e8e8e8;
}

.qf-price-table th:last-child,
.qf-price-table td:last-child {
    text-align: right;
}

.qf-price-table td {
    padding: 5px 6px;
    color: #222;
    border-bottom: 1px solid #f0f0f0;
}

.qf-price-table tfoot td {
    border-bottom: none;
    padding-top: 6px;
    color: #555;
}

.qf-total-row td {
    font-weight: 700;
    color: #111 !important;
    border-top: 1px solid #ddd;
}

.qf-grand-total td {
    font-size: 0.95rem;
    color: #000 !important;
    padding-top: 8px;
}

/* Deellink knop */
.share-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.share-btn:hover {
    background: #f0f0f0;
    color: #222;
}

/* Succesbericht na verzenden */
#quote-success {
    line-height: 1.6;
    color: #333;
    font-size: 0.9rem;
}

/* ==================== LAADSCHERM ==================== */

#loading-screen {
    position: fixed;
    inset: 0;
    background: #0d0d0d;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.7s ease;
}
#loading-screen.ls-fade-out {
    opacity: 0;
    pointer-events: none;
}

/* 3D perspectief vloer-grid */
.ls-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ls-grid::before {
    content: '';
    position: absolute;
    left: -50%;
    width: 200%;
    height: 260%;
    bottom: -40%;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 55px 55px;
    transform: perspective(480px) rotateX(74deg);
    transform-origin: center bottom;
    animation: ls-grid-fade 1.2s ease 0.3s both;
}
.ls-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 65%, transparent 25%, #0d0d0d 72%);
}
@keyframes ls-grid-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Centraal blok */
.ls-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    user-select: none;
}

/* Stage: verborgen in fase 1, zichtbaar zodra .ls-animate wordt toegevoegd */
.ls-stage {
    position: relative;
    width: 300px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ls-animate .ls-stage {
    opacity: 1;
}

/* Echt Pillar-logo: animatie alleen actief in fase 2 */
.ls-real-logo {
    width: 274px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    will-change: clip-path, opacity, transform, filter;
}
.ls-animate .ls-real-logo {
    animation: ls-logo-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
@keyframes ls-logo-in {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(0.97);
           filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    20%  { opacity: 1; }
    65%  { clip-path: inset(0 0 0 0); transform: scale(1.01);
           filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1);
           filter: drop-shadow(0 0 4px rgba(255,255,255,0.12)); }
}

/* Lichtveeg: alleen actief in fase 2 */
.ls-logo-shine {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 274px;
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    filter: brightness(1.8) drop-shadow(0 0 5px rgba(255,255,255,0.9));
    will-change: clip-path, opacity, transform;
}
.ls-animate .ls-logo-shine {
    animation: ls-shine 1.3s ease 1.2s both;
}
@keyframes ls-shine {
    0%   { opacity: 0; transform: translate(-50%, -50%);
           clip-path: polygon(-30% 0, -10% 0, -25% 100%, -45% 100%); }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%);
           clip-path: polygon(115% 0, 135% 0, 120% 100%, 100% 100%); }
}

/* Voortgangsbalk: meteen zichtbaar in fase 1 */
.ls-progress-wrap {
    width: 180px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.ls-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(255,255,255,0.45), #fff);
    border-radius: 2px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ls-status {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.08em;
    margin-top: -10px;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Fase 2: balk en status weggefaded zodra animatie begint */
.ls-animate .ls-progress-wrap,
.ls-animate .ls-status {
    opacity: 0;
}

/* ==================== GEEN DUBBELTIK-ZOOM OP UI-BEDIENING ====================
   iOS Safari interpreteert twee snelle tikken op hetzelfde element als "dubbeltik om in te
   zoomen" — irritant op een dropdown/kaartje/knop die je per ongeluk (of expres, omdat de eerste
   tik leek te mislukken) twee keer aantikt. `touch-action: manipulation` schakelt specifiek DIE
   dubbeltik-zoom-gebaar uit (en de oude 300ms-tikvertraging) terwijl scrollen en tikken zelf
   gewoon blijven werken — in tegenstelling tot een pagina-brede `user-scalable=no` blijft
   pinch-zoom op de rest van de pagina (bv. voor slechtzienden) gewoon bruikbaar. Op containerniveau
   gezet i.p.v. los per knop/kaartje: de regel werkt via dezelfde "strenger-wint"-optelling als
   touch-action elders (zie reference_touch_action_timing), dus een kind met een eigen striktere
   waarde (bv. `.ctx-move`/`.mod-card` op coarse+brede schermen, die `none` nodig hebben om een
   sleepgebaar vast te houden) blijft gewoon werken — dat wordt niet "losser" gemaakt door deze
   regel op de ouder. Geen effect op muis (het dubbeltik-zoom-gebaar bestaat daar niet). */
#sidebar, #sidebar-toggle, #camera-nav, #model-context-menu,
#welcome-card, #quote-modal-card {
    touch-action: manipulation;
}

/* ==================== HOVER-ONLY (alleen echte hover-apparaten) ====================
   Op een touchscreen bestaat er geen echte hover-status — een tik kan een :hover-regel laten
   "plakken" tot de volgende tik ergens anders. Deze staat daarom alleen aan op apparaten die
   écht kunnen hoveren (muis/trackpad), niet op coarse-pointer/touch. Puur cosmetisch, geen enkele
   regel hier bepaalt functioneel gedrag. */
@media (hover: hover) and (pointer: fine) {
    .mod-card:hover { border-color: #aaa; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .cam-btn:hover { background: rgba(28, 28, 28, 0.92); }
    .ctx-move:hover { background: #fff; transform: translate(-50%, -50%) scale(1.1); }
    .ctx-add-left:hover  { background: rgba(255,255,255,0.35); }
    .ctx-add-right:hover { background: rgba(255,255,255,0.35); }
    .ctx-rotate:hover { background: rgba(255,255,255,0.35); }
    .ctx-delete:hover { background: #e74c3c; }
    .ctx-material:hover { transform: scale(1.15); }
    .shape-btn:hover:not(.is-active)  { border-color: #aaa; color: #444; }
    .corner-btn:hover:not(.is-active) { border-color: #aaa; color: #555; }
    .ctx-setup:hover { background: rgba(22, 22, 22, 0.88); }
    .ctx-setup.ctx-active:hover { background: #fff; }
}

/* ==================== TOUCH TARGETS (coarse pointer = vinger, niet muis) ====================
   Alleen groottes/posities aanpassen — desktop-muisgebruikers zien hier niets van veranderen.
   De satellietknoppen in het contextmenu zijn absoluut gepositioneerd t.o.v. de schijf-straal
   (zie het commentaar bij .ctx-delete hierboven), dus .ctx-disk MOET evenredig meegroeien en elke
   knop-offset opnieuw berekend — anders overlappen de vergrote knoppen elkaar of vallen ze buiten
   de cirkel. */
@media (pointer: coarse) {
    #camera-nav { gap: 6px; }
    .cam-row { gap: 6px; }
    .cam-btn { width: 46px; height: 46px; }

    .ctx-disk { width: 128px; height: 128px; }
    .ctx-move { width: 44px; height: 44px; }

    .ctx-add-left,
    .ctx-add-right,
    .ctx-rotate,
    .ctx-delete {
        width: 34px;
        height: 34px;
    }
    .ctx-add-left  { left: 6px; }
    .ctx-add-right { right: 6px; }
    .ctx-rotate    { top: 6px; }
    .ctx-delete    { bottom: 6px; }

    .ctx-material { width: 26px; height: 26px; top: 18px; }
    .ctx-material-hout  { left: 16px; }
    .ctx-material-staal { right: 16px; }

    /* Alleen de afstand tot de schijf: die is hier 128px i.p.v. 90px. Maat en tekstgrootte staan
       al in de basisregel, want die gelden nu op elk scherm. */
    .ctx-setup { top: calc(100% + 14px); }
}

/* Slepen van een catalogus-kaartje náár de canvas is alleen een zinvol gebaar wanneer canvas én
   sidebar TEGELIJK zichtbaar zijn (desktop/iPad-landscape, boven de 900px-drawer-grens hieronder)
   — in de drawer (telefoon/iPad-portrait) zit de canvas achter de opengeschoven sidebar, dus daar
   is tikken-om-te-plaatsen (al werkend, zie onClick) de enige zinvolle route. touch-action moet
   declaratief in CSS staan vóórdat het gebaar begint (een class pas TOEVOEGEN in de eigen
   pointerdown-handler is te laat — de browser heeft de scroll-vs-drag-beslissing dan al genomen),
   dus dit staat hier permanent aan i.p.v. pas tijdens het slepen. Bewuste trade-off: op een
   coarse-pointer/iPad-landscape-scherm kan de catalogus niet meer ScrollEN door een vinger recht
   op een kaartje te zetten — scrollen kan wel via de kop van elke categorie of de rand ernaast.  */
@media (pointer: coarse) and (min-width: 901px) {
    .mod-card { touch-action: none; }
}

/* ==================== RESPONSIEVE LAYOUT (telefoon + iPad-portrait) ====================
   Boven 900px (desktop + iPad-landscape) blijft de layout naast-elkaar zoals hij is. Daaronder
   (telefoon, iPad-portrait ~768-834px) kan een 20%-sidebar de 2-koloms catalogus-grid niet meer
   dragen, dus wordt de sidebar een uitschuifbare drawer vanaf rechts — zelfde .is-open-toggle-
   patroon als de bestaande offerte-modal hierboven, dus stilistisch consistent. */
#sidebar-toggle {
    display: none;
    /* fixed i.p.v. absolute: blijft op zijn plek t.o.v. het ECHTE zichtbare scherm, ongeacht
       document-scroll — absolute kon na het kantelen van het toestel (Safari's eigen balk klapt
       dan in/uit) buiten beeld terechtkomen. safe-area-inset houdt 'm ook weg bij de notch/
       dynamic-island en bij Safari's eigen "veeg-om-de-balk-terug-te-halen"-zone bovenaan. */
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    z-index: 20;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: rgba(28, 28, 28, 0.72);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

#sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 40;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#sidebar-backdrop.is-open {
    display: block;
    opacity: 1;
}

@media (max-width: 900px) {
    #sidebar-toggle { display: flex; }

    #canvas-container { flex: 1 1 100%; }

    #sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh; /* fallback */
        height: 100dvh; /* zie body hierboven */
        width: min(85vw, 360px);
        flex: none;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 50;
        box-shadow: -8px 0 24px rgba(0,0,0,0.25);
    }
    #sidebar.is-open {
        transform: translateX(0);
    }
    /* Drawer begint op top:0 van het ECHTE scherm — in standalone/"Add to Home Screen"-modus
       (zie index.html) zou het Pillar-logo anders onder de notch/dynamic-island vallen. */
    #sidebar-brand {
        padding-top: max(14px, env(safe-area-inset-top));
    }
}