/*
 *  v360 — stili del visualizzatore di panorami 360°.
 *  Tutte le classi sono prefissate .v360- e vivono dentro il contenitore
 *  passato alla classe V360 (v360.js, accanto a questo file nel toolkit):
 *  niente stili globali.
 */

.v360 {
    position: relative;
    overflow: hidden;
    background: #111;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    touch-action: none;          /* il pan lo gestisce il viewer */
    outline: none;
}
.v360:focus-visible { box-shadow: inset 0 0 0 2px #7cc7ff; }

.v360-tela, .v360-tela canvas { display: block; width: 100%; height: 100%; }
.v360-tela { cursor: grab; }
.v360-tela:active { cursor: grabbing; }

.v360-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;        /* passa il trascinamento alla tela */
}
.v360-overlay button,
.v360-overlay a,
.v360-avanzamento { pointer-events: auto; }

/* In VR l'interfaccia 2D non serve */
.v360-in-vr .v360-overlay { display: none; }

/* --- Stato e suggerimenti --- */

.v360-stato {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .65);
    padding: .6em 1em;
    border-radius: 4px;
    font-size: .9rem;
}
.v360-errore { background: rgba(150, 20, 20, .85); }

.v360-suggerimento {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .55);
    padding: .4em .9em;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
}

/* --- Avvio del video (pulsante grande al centro) --- */

.v360-avvia {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 76px; height: 76px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
}
.v360-avvia svg { display: block; width: 100%; height: 100%; }
.v360-avvia-disco   { fill: rgba(0, 0, 0, .55); stroke: rgba(255, 255, 255, .85); stroke-width: 3; }
.v360-avvia-freccia { fill: #fff; }
.v360-avvia:hover .v360-avvia-disco,
.v360-avvia:focus-visible .v360-avvia-disco { fill: rgba(0, 0, 0, .75); }
.v360-avvia:hover { transform: translate(-50%, -50%) scale(1.06); }
.v360-avvia { transition: transform .12s ease; }

@media (prefers-reduced-motion: reduce) {
    .v360-avvia { transition: none; }
    .v360-avvia:hover { transform: translate(-50%, -50%); }
}

/* --- Bussola --- */

.v360-bussola {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(0, 0, 0, .55);
    border-radius: 4px;
    padding: .35em .7em;
    font-size: .8rem;
    line-height: 1.2;
    text-align: center;
}
.v360-card  { display: block; font-weight: 700; letter-spacing: .05em; }
.v360-gradi { display: block; opacity: .75; font-variant-numeric: tabular-nums; }

/* --- Hotspot --- */

.v360-hs {
    position: absolute;
    display: none;               /* il viewer lo porta a flex quando è in vista */
    align-items: center;
    gap: .45em;
    transform: translate(-50%, -50%);
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.v360-hs-punto {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #ffd24d;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 4px rgba(255, 210, 77, .25);
    flex: 0 0 auto;
    transition: transform .15s ease;
}
.v360-hs:hover .v360-hs-punto,
.v360-hs-attivo .v360-hs-punto { transform: scale(1.25); }
.v360-hs-eti {
    background: rgba(0, 0, 0, .5);
    padding: .15em .5em;
    border-radius: 3px;
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v360-hs-eti:empty { display: none; }

/* Colore del pallino per tipo di hotspot (campo `hotspot` di contenuto_360).
   Il modificatore è .v360-hs-t-{tipo}: .v360-hs-punto è già il pallino. */
.v360-hs-t-testo .v360-hs-punto {
    background: #7cc7ff;
    box-shadow: 0 0 0 4px rgba(124, 199, 255, .25);
}
.v360-hs-t-punto .v360-hs-punto {
    background: #86d17a;
    box-shadow: 0 0 0 4px rgba(134, 209, 122, .25);
}
.v360-hs-t-media .v360-hs-punto {
    background: #d19bff;
    box-shadow: 0 0 0 4px rgba(209, 155, 255, .25);
}
.v360-hs-t-url .v360-hs-punto {
    background: #ffa96b;
    box-shadow: 0 0 0 4px rgba(255, 169, 107, .25);
}
/* .v360-hs-t-nota resta sul giallo di base */

/* --- Scheda dell'hotspot (modale) --- */

.v360-modale {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 5;
}
.v360-modale[hidden] { display: none; }

.v360-modale-sfondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.v360-modale-box {
    position: relative;
    width: min(460px, calc(100% - 2rem));
    max-height: calc(100% - 2rem);
    overflow-y: auto;
    background: rgba(20, 20, 20, .97);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 1em 1.1em 1.1em;
    font-size: .85rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.v360-modale-tit { margin: 0 1.4em .6em 0; font-size: 1.05rem; }

/* Galleria: una miniatura grande e la striscia per cambiarla */

.v360-modale-figura { margin: 0 0 .7em; }
.v360-modale-figura[hidden] { display: none; }
.v360-modale-img {
    display: block;
    width: 100%;
    max-height: 45vh;
    object-fit: contain;
    background: #000;
    border-radius: 4px;
}
.v360-modale-dida {
    margin-top: .3em;
    font-size: .78rem;
    opacity: .8;
}
.v360-modale-dida a { color: #7cc7ff; }

.v360-modale-strip {
    display: flex;
    gap: .35em;
    overflow-x: auto;
    padding-bottom: .3em;
    margin-bottom: .7em;
}
.v360-modale-strip[hidden] { display: none; }
.v360-modale-mini {
    flex: 0 0 auto;
    width: 54px; height: 40px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    opacity: .65;
}
.v360-modale-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v360-modale-mini:hover { opacity: 1; }
.v360-modale-mini-sel { border-color: #7cc7ff; opacity: 1; }

/* Campi essenziali */

.v360-modale-campi {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15em .8em;
    margin: 0 0 .7em;
}
.v360-modale-campi[hidden] { display: none; }
.v360-modale-campi dt { opacity: .6; font-weight: 400; }
.v360-modale-campi dd { margin: 0; }

.v360-modale-txt { margin: 0; opacity: .9; line-height: 1.45; }
.v360-modale-txt p:first-child { margin-top: 0; }
.v360-modale-txt p:last-child  { margin-bottom: 0; }

.v360-modale-link {
    display: inline-block;
    margin-top: .8em;
    color: #7cc7ff;
}
.v360-chiudi {
    position: absolute;
    top: .3em; right: .4em;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}
.v360-chiudi:hover { opacity: 1; }

/* --- Barra dei comandi --- */

.v360-barra {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .5em .7em;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
.v360-spazio { flex: 1 1 auto; }

.v360-btn {
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: 4px;
    min-width: 2.1em;
    height: 2.1em;
    padding: 0 .5em;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
}
.v360-btn:hover { background: rgba(255, 255, 255, .18); }

.v360-tempo {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    opacity: .85;
    white-space: nowrap;
}

.v360-avanzamento {
    position: relative;
    flex: 1 1 8em;
    height: 6px;
    background: rgba(255, 255, 255, .25);
    border-radius: 3px;
    cursor: pointer;
}
.v360-buffer, .v360-progresso {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    border-radius: 3px;
}
.v360-buffer    { background: rgba(255, 255, 255, .3); width: 0; }
.v360-progresso { background: #ffd24d; width: 0; }

@media (max-width: 560px) {
    .v360-suggerimento { font-size: .7rem; }
    .v360-hs-eti { max-width: 8em; }
}