/* =============================================================================
   PrintPont — 3D-NYOMTATÁSI KONFIGURÁTOR (/3d) és a stúdióból való átadás (/3d-studio/nyomtatas/…).
   Az elrendezést (pp-urlap-racs, pp-lepes-blokk, pp-osszesito, pp-ar-sav) a printpont-konfig.css adja; ez csak a 3D-specifikus részeket tartalmazza.
   CSP-tiszta: nincs inline stílus — a szín-korong színét a JS a CSSOM-on át (style.setProperty) adja a --szin változónak a data-szin alapján.
   ============================================================================= */

/* --- 3D-előnézet ------------------------------------------------------------------ */
.pp-3d-nezo {
    position: relative; margin-top: 1rem; aspect-ratio: 4 / 3; max-height: 420px; width: 100%; overflow: hidden;
    border: 1px solid var(--f-border); border-radius: var(--f-radius-sm);
    background: radial-gradient(circle at 50% 35%, var(--f-white), var(--f-light));
    touch-action: pan-y; cursor: grab; /* a függőleges ujjmozdulat az oldalt görgeti, a vízszintes forgat */
}
.pp-3d-nezo:active { cursor: grabbing; }
.pp-3d-nezo canvas { display: block; width: 100%; height: 100%; }
.pp-3d-nezo__ures { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1.5rem; text-align: center; color: var(--f-grey); }
.pp-3d-nezo__ures[hidden] { display: none; }
.pp-3d-nezo__sugo { position: absolute; left: 0.75rem; bottom: 0.5rem; font-size: 0.75rem; color: var(--f-grey); pointer-events: none; }

/* --- Az elemzés kijelzése ----------------------------------------------------------- */
.pp-3d-elemzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem 1rem; margin: 1rem 0 0; }
.pp-3d-elemzes div { padding: 0.55rem 0.75rem; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-light); }
.pp-3d-elemzes dt { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--f-grey); }
.pp-3d-elemzes dd { margin: 0.1rem 0 0; font-variant-numeric: tabular-nums; font-weight: 500; overflow-wrap: anywhere; }
.pp-3d-figy { margin-top: 0.75rem; }
.pp-3d-figy li { font-weight: 500; }

/* --- Szín-korongok ---------------------------------------------------------------- */
.pp-szinek { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 1rem; }
.pp-szinek[hidden] { display: none; }
.pp-szinek .f-label { flex-basis: 100%; margin: 0; }
.pp-szin { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.pp-szin input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-szinkorong {
    --szin: var(--f-border); display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--szin); border: 2px solid var(--f-white); box-shadow: 0 0 0 1px var(--f-border);
    transition: box-shadow 0.15s var(--f-ease), transform 0.15s var(--f-ease);
}
.pp-szin:hover .pp-szinkorong { transform: scale(1.08); }
.pp-szin:has(input:checked) .pp-szinkorong { box-shadow: 0 0 0 3px var(--f-primary); }
.pp-szin:has(input:focus-visible) .pp-szinkorong { outline: 3px solid var(--f-ink); outline-offset: 3px; }
.pp-szin__nev { font-size: 0.85rem; }
.pp-szin:has(input:checked) .pp-szin__nev { font-weight: 600; }

/* --- Összesítő kiegészítői ----------------------------------------------------------- */
.pp-becsult-jelzes { margin: 0.5rem 0; padding: 0.55rem 0.75rem; border-radius: var(--f-radius-sm); background: var(--f-primary-soft); font-size: 0.85rem; }
.pp-nem-fer { margin: 0.75rem 0; padding: 0.75rem; border: 1px solid var(--f-danger); border-radius: var(--f-radius-sm); }
.pp-nem-fer[hidden] { display: none; }
.pp-nem-fer p { margin: 0 0 0.5rem; font-weight: 600; }
.pp-osszesito .pp-nem-fer .btn-f-outline { width: 100%; }

/* --- Átadó oldal (platform): a modell és a 3D-t vállaló nyomdák -------------------------- */
.pp-atadas { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pp-atadas__modell { padding: 1.25rem; }
.pp-atadas__kep { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--f-radius-sm); background: var(--f-light); }
.pp-atadas__modell dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 1rem 0 0; font-size: 0.9rem; }
.pp-atadas__modell dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pp-atadas__modell dt { color: var(--f-grey); }
.pp-atadas-lista { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.pp-atadas-nyomda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 1rem 1.25rem; }
.pp-atadas-nyomda h3 { margin: 0; font-size: 1.05rem; }
.pp-atadas-nyomda p { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--f-grey); }
.pp-atadas-varos { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin-bottom: 1rem; }
.pp-atadas-varos .f-form-group { flex: 1 1 220px; margin: 0; }

/* --- Rendelés- és kosárnézet: a 3D-tétel adatai ------------------------------------------ */
.pp-3d-tetel { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0; font-size: 0.9rem; }
.pp-3d-tetel dt { color: var(--f-grey); }
.pp-3d-tetel dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .pp-atadas { grid-template-columns: minmax(0, 1fr); }
    .pp-3d-nezo { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pp-szinkorong { transition: none; }
    .pp-szin:hover .pp-szinkorong { transform: none; }
}