/* ==========================================================================
   blaturidebucatarie.ro — „Blatul tău în 3D” (partials/vizual3d.blade.php + js/vizual3d.js), după blocul topblat.ro.
   Doar blatul, într-un studio neutru (degradeul de sub pânza transparentă), cu cote fine și rândul cu ce se vede.
   Aici e DOAR blocul; locul lui în pagina produsului (sub galerie / deasupra calculatorului, lipicios) îl pune pagina:
   clasa .bbv--lipit pe bloc = lipit sus pe telefon (variabila --bbv-sus = înălțimea antetului lipit).
   ========================================================================== */

.bbv { --bbv-sus: 80px; --bbv-g: 20px; --bbv-accent: #7d5f40; min-width: 0; color: #111; }
.bbv[hidden] { display: none !important; }

/* titlul și uneltele */
.bbv__cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.bbv__titlu { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: #111; letter-spacing: -.005em; }
.bbv__unelte { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.bbv__btn {
    display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #8a9096; border-radius: 4px;
    background: #fff; color: #111; cursor: pointer; font: inherit; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.bbv__btn svg { display: block; }
.bbv__btn:hover { border-color: #111; }
.bbv__btn:focus-visible { outline: 2px solid var(--bbv-accent); outline-offset: 2px; }
.bbv__btn[aria-pressed="true"] { background: var(--bbv-accent); border-color: var(--bbv-accent); color: #fff; }

/* comutatorul „Bucătărie | Insulă” (doar când sunt bifate amândouă în calculator) */
.bbv__viste { display: inline-flex; margin-right: 6px; }
.bbv__viste[hidden] { display: none; }
.bbv__vista {
    height: 38px; padding: 0 12px; border: 1px solid #8a9096; background: #fff; color: #111; font: inherit; font-size: 13.5px;
    font-weight: 500; line-height: 1; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.bbv__vista:first-child { border-radius: 4px 0 0 4px; }
.bbv__vista + .bbv__vista { margin-left: -1px; border-radius: 0 4px 4px 0; }
.bbv__vista:hover { border-color: #111; position: relative; }
.bbv__vista:focus-visible { outline: 2px solid var(--bbv-accent); outline-offset: 2px; position: relative; }
.bbv__vista[aria-pressed="true"] { background: var(--bbv-accent); border-color: var(--bbv-accent); color: #fff; position: relative; }

/* scena: fundalul de studio (continuu, neutru, deschis); pânza 3D e transparentă peste el */
.bbv__scena {
    position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 4px;
    background: #e6e4df radial-gradient(130% 95% at 50% 36%, #f4f3f0 0%, #eae8e4 50%, #dddad4 100%);
}
.bbv__scena canvas {
    position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none;
    touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .3s ease;
}
.bbv__scena.is-gata canvas { opacity: 1; }
/* dimensiunile încă necompletate în calculator: forma-exemplu, estompată */
.bbv__scena.is-gata.is-exemplu canvas { opacity: .55; }
.bbv__scena canvas:active { cursor: grabbing; }
.bbv__scena canvas:focus { outline: none; }
.bbv__scena canvas:focus-visible { outline: 2px solid var(--bbv-accent); outline-offset: -2px; }
.bbv__stare {
    position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; padding: 16px;
    text-align: center; font-size: 14px; line-height: 20px; color: #4b5563;
}
.bbv__stare[hidden] { display: none; }
.bbv__nota {
    position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 3; margin: 0; text-align: center;
    font-size: 12.5px; line-height: 16px; color: #3a3f45; pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.bbv__scena.is-gata .bbv__nota { opacity: 1; }

/* cotele: linii fine (SVG) și etichete sobre */
.bbv-cote { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.bbv__scena.is-gata .bbv-cote { opacity: 1; }
.bbv-cote path { fill: none; stroke: #2c302e; stroke-width: 1; stroke-linecap: butt; opacity: .78; }
.bbv-cote path.bbv-cote__decupaj { stroke: #fff; opacity: .5; stroke-linejoin: round; }
.bbv-cota {
    position: absolute; left: 0; top: 0; z-index: 2; padding: 1px 6px; border-radius: 2px; background: rgba(255, 255, 255, .92);
    color: #111; font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em;
    white-space: nowrap; pointer-events: none; will-change: transform; visibility: hidden;
}
.bbv-cota.is-gol { color: #6b7076; }
.bbv__scena:not(.is-gata) .bbv-cota { opacity: 0; }

/* numerele pieselor blatului U, cu numele din formular (Piesa 1 / 2 / 3) */
.bbv-piesa {
    position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 2px;
    border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); color: #111;
    font-size: 12.5px; line-height: 18px; font-weight: 600; white-space: nowrap; pointer-events: none; will-change: transform; visibility: hidden;
}
.bbv-piesa b {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    background: var(--bbv-accent); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bbv__scena:not(.is-gata) .bbv-piesa { opacity: 0; }

/* ce se vede, cu denumirile din calculator; înălțimea rezervată de la început (fără deplasarea paginii) */
.bbv__rezumat { margin: 10px 0 0; min-height: 40px; font-size: 13.5px; line-height: 20px; color: #3a3f45; }

/* fără WebGL: poza plăcii, cu un mesaj */
.bbv__poza { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.bbv.is-indisponibil .bbv__unelte, .bbv.is-indisponibil .bbv__nota, .bbv.is-indisponibil .bbv__rezumat { display: none; }
.bbv.is-indisponibil .bbv__stare {
    inset: auto 0 0 0; z-index: 2; display: block; padding: 10px 14px; text-align: left; background: rgba(255, 255, 255, .94);
    color: #111; font-size: 13px;
}

/* ecranul complet: tot blocul (titlul cu uneltele + scena + rândul de sub ea) */
.bbv:fullscreen { display: flex; flex-direction: column; padding: 14px 18px 18px; background: #fff; }
.bbv.is-ecran-plin, .bbv.is-ecran { display: flex; flex-direction: column; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); background: #fff; }
.bbv.is-ecran {
    position: fixed !important; inset: 0 !important; top: 0 !important; z-index: 100000 !important; margin: 0 !important;
    padding: calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
}
.bbv:fullscreen .bbv__scena, .bbv.is-ecran-plin .bbv__scena, .bbv.is-ecran .bbv__scena { flex: 1 1 auto; aspect-ratio: auto; height: auto !important; min-height: 0; max-height: none; }
.bbv.is-ecran-plin .bbv__cap, .bbv.is-ecran .bbv__cap { position: static; margin: 0 0 10px; }
html.bbv-fara-derulare { overflow: hidden; }

/* ---------- telefon / tabletă: scena compactă, titlul și uneltele peste ea ---------- */
@media (max-width: 991px) {
    .bbv { --bbv-sus: 61px; }
    .bbv__scena { aspect-ratio: auto; height: 34vh; height: 34svh; min-height: 220px; max-height: 440px; }
    .bbv__cap {
        position: absolute; top: 10px; left: 10px; right: 8px; z-index: 4; margin: 0; pointer-events: none;
    }
    .bbv { position: relative; }
    .bbv__cap > * { pointer-events: auto; }
    .bbv__titlu { font-size: 15px; line-height: 20px; }
    .bbv__unelte { gap: 5px; }
    .bbv__btn { width: 40px; height: 40px; }
    .bbv__vista { height: 40px; padding: 0 10px; font-size: 13px; }
    /* cu comutatorul: titlul cedează locul uneltelor */
    .bbv.is-viste .bbv__titlu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .bbv__nota { font-size: 12px; }
    .bbv__scena.is-atins .bbv__nota { opacity: 0; }
    .bbv__rezumat { margin-top: 6px; min-height: 51px; font-size: 12.5px; line-height: 17px; }
    .bbv-cota { font-size: 11.5px; line-height: 15px; padding: 0 5px; }
    .bbv--lipit { position: sticky; top: var(--bbv-sus); z-index: 20; background: #fff; padding: 8px 0; }
    .bbv--lipit.is-liber, .bbv--lipit.is-mic, .bbv--lipit.is-indisponibil { position: relative; top: auto; }
}
@media (max-width: 991px) and (max-height: 480px) {
    .bbv--lipit { position: relative; top: auto; }
}
@media (max-width: 640px) {
    .bbv { --bbv-g: 16px; }
}
@media (max-width: 360px) {
    .bbv__titlu { font-size: 14px; }
    .bbv__btn { width: 36px; height: 36px; }
    .bbv__vista { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .bbv *, .bbv { transition: none !important; }
}