/* ==========================================================================
   Pres 3D-voertuigselector — viewer + visuele voertuigkaarten
   Stijl volgt de bestaande Pres-huisstijl: donker (#0e0e12), kaartgradients,
   oranje (#df7b2a / #f79233) uitsluitend als accent voor selectie/hover/focus.
   ========================================================================== */

/* ---------- Visuele voertuigkaarten ---------- */

.ps-dienst-hero__vehicle-option--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 96px;
    padding: 12px 8px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.84), rgba(19, 19, 23, 0.92));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}

.ps-dienst-hero__vehicle-figure {
    display: block;
    width: 100%;
    max-width: 116px;
    color: rgba(255, 255, 255, 0.82);
    transition: color .18s ease, transform .18s ease;
    pointer-events: none;
}

.ps-dienst-hero__vehicle-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.ps-dienst-hero__vehicle-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #f2f2f2;
    pointer-events: none;
}

.ps-dienst-hero__vehicle-option--card:hover .ps-dienst-hero__vehicle-figure,
.ps-dienst-hero__vehicle-option--card:focus-visible .ps-dienst-hero__vehicle-figure {
    color: #f79233;
    transform: translateY(-2px);
}

.ps-dienst-hero__vehicle-option--card:focus-visible {
    outline: 2px solid #df7b2a;
    outline-offset: 2px;
}

.ps-dienst-hero__vehicle-option--card.is-active .ps-dienst-hero__vehicle-figure {
    color: #f79233;
}

.ps-dienst-hero__vehicle-option--card.is-active .ps-dienst-hero__vehicle-name {
    color: #fff;
}

@media (max-width: 1080px) {
    .ps-dienst-hero__vehicle-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    /* Twee kolommen op mobiel (overschrijft de generieke 1-koloms fallback),
       touch targets ruim boven 44x44. */
    .ps-dienst-hero__vehicle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .ps-dienst-hero__vehicle-option--card {
        min-height: 88px;
    }
}

/* ---------- 3D-viewer ---------- */

.ps-v3d {
    margin: 0 0 14px;
}

.ps-v3d__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8.5;
    min-height: 280px;
    max-height: 560px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(ellipse at 50% 78%, rgba(255, 255, 255, 0.055), transparent 42%),
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.035), transparent 48%),
        linear-gradient(180deg, rgba(25, 26, 30, 0.82), rgba(11, 12, 15, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 22px 54px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    isolation: isolate;
}

.ps-v3d__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: pan-y;          /* verticaal blijven scrollen op mobiel */
    cursor: grab;
    outline: none;
}

.ps-v3d__canvas.is-pickable { cursor: pointer; }
.ps-v3d__canvas.is-dragging { cursor: grabbing; }

.ps-v3d__canvas:focus-visible {
    box-shadow: inset 0 0 0 2px #df7b2a;
}

.ps-v3d__hover-label {
    position: absolute;
    z-index: 3;
    padding: 5px 10px;
    border-radius: 10px;
    background: rgba(14, 14, 18, 0.92);
    border: 1px solid rgba(223, 123, 42, 0.65);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}


.ps-v3d__selected-labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ps-v3d__selected-label {
    --ps-v3d-callout-line: 22px;
    position: absolute;
    transform: translate(-50%, -100%);
    padding-bottom: var(--ps-v3d-callout-line);
    opacity: 1;
    animation: ps-v3d-callout-in .22s ease both;
    animation-delay: var(--ps-v3d-label-delay, 0ms);
}

.ps-v3d__selected-label.is-below {
    transform: translate(-50%, 0);
    padding-top: var(--ps-v3d-callout-line);
    padding-bottom: 0;
}

.ps-v3d__selected-label-text {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(242, 124, 36, 0.72);
    background: rgba(12, 13, 16, 0.90);
    color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(9px);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.ps-v3d__selected-label.is-current .ps-v3d__selected-label-text {
    background: linear-gradient(180deg, rgba(86, 43, 17, 0.96), rgba(35, 22, 15, 0.96));
    border-color: rgba(255, 137, 48, 0.96);
}

.ps-v3d__selected-label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 1px;
    height: calc(var(--ps-v3d-callout-line) - 3px);
    background: linear-gradient(180deg, rgba(244, 127, 39, 0.85), rgba(244, 127, 39, 0.36));
}

.ps-v3d__selected-label::before {
    content: "";
    position: absolute;
    left: calc(50% - 3px);
    bottom: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f47f27;
    box-shadow: 0 0 0 3px rgba(244, 127, 39, 0.16);
}

.ps-v3d__selected-label.is-below::after {
    top: 3px;
    bottom: auto;
    background: linear-gradient(0deg, rgba(244, 127, 39, 0.85), rgba(244, 127, 39, 0.36));
}

.ps-v3d__selected-label.is-below::before {
    top: 0;
    bottom: auto;
}

@keyframes ps-v3d-callout-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ps-v3d__hint {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(13, 14, 17, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(8px);
    font-size: 12px;
    pointer-events: none;
}

.ps-v3d__controls {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 8px;
}

.ps-v3d__rotate {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(13, 14, 17, 0.78);
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(9px);
    color: #f2f2f2;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.ps-v3d__rotate:hover,
.ps-v3d__rotate:focus-visible {
    border-color: rgba(223, 123, 42, 0.9);
    color: #f79233;
    outline: none;
}

/* [hidden] wint anders niet van de expliciete display-waarden hieronder */
.ps-v3d [hidden],
.ps-v3d[hidden] {
    display: none !important;
}

.ps-v3d__loading,
.ps-v3d__error {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent; /* geen donker vlak meer over het transparante podium */
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

.ps-v3d__error > span {
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(19, 19, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.ps-v3d__spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: #df7b2a;
    animation: ps-v3d-spin 0.9s linear infinite;
}

@keyframes ps-v3d-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-v3d__spinner { animation: none; border-top-color: #f79233; }
    .ps-dienst-hero__vehicle-option--card:hover .ps-dienst-hero__vehicle-figure { transform: none; }
}

.ps-v3d__retry {
    padding: 9px 16px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(223, 123, 42, 0.8);
    background: rgba(223, 123, 42, 0.16);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.ps-v3d__retry:hover,
.ps-v3d__retry:focus-visible {
    background: rgba(223, 123, 42, 0.30);
    outline: none;
}

.ps-v3d__status {
    min-height: 18px;
    margin-top: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
}

/* ---------- Compacte fallback-chips (alleen niet-visuele onderdelen) ---------- */

.ps-v3d__fallback {
    margin-top: 10px;
}

.ps-v3d__fallback-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.ps-v3d__fallback-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ps-v3d__chip {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #f2f2f2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.ps-v3d__chip:hover,
.ps-v3d__chip:focus-visible {
    border-color: rgba(223, 123, 42, 0.85);
    outline: none;
}

.ps-v3d__chip.is-active {
    background: linear-gradient(180deg, rgba(223, 123, 42, 0.42), rgba(223, 123, 42, 0.22));
    border-color: rgba(223, 123, 42, 0.92);
    box-shadow: 0 8px 20px rgba(223, 123, 42, 0.16);
    color: #fff;
}

.ps-v3d__chip.is-in-cart:not(.is-active) {
    border-color: rgba(223, 123, 42, 0.55);
    background: rgba(223, 123, 42, 0.10);
}

/* ---------- Matrix verbergen zodra 3D actief is ----------
   Het hele matrixpaneel gaat dicht (anders blijft een lege kaart met border
   over); het werkzaamhedenpaneel eronder blijft gewoon in de flow staan. */

.ps-dienst-hero--v3d-active .ps-dienst-hero__selected-view-panel {
    display: none !important;
}

/* ---------- Responsive hoogtes ---------- */

@media (max-width: 1080px) {
    .ps-v3d__stage {
        min-height: 360px;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 782px) {
    .ps-v3d__stage {
        min-height: 300px;
        max-height: 380px;
        aspect-ratio: auto;
        height: min(62vw, 380px);
        border-radius: 16px;
    }

    .ps-v3d__hint {
        left: 10px;
        top: 10px;
        font-size: 11px;
        max-width: calc(100% - 20px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ps-v3d__selected-label {
        --ps-v3d-callout-line: 16px;
    }

    .ps-v3d__selected-label-text {
        padding: 5px 8px;
        font-size: 10.5px;
    }
}