/* HADDO (03/10/2026) — pagina "VIP" (views/community/vip.blade.php). La pelle e' quella del Centro aiuto, gia' nel
   tema (box .hh-aside-box blu nel Classic, petrolio con cornice nel New): qui solo i pezzi nuovi, con colori che
   stanno bene su tutti e due (fondi scuri trasparenti, testo chiaro). Fuori dal build: il tema non si ricompila
   sul server. Le immagini restano a grandezza naturale (rimpicciolite o ingrandite si rovinano i pixel). */

.hh-vip .hh-help-content p + p {
    margin-top: 10px;
}

/* in cima: il distintivo e un fumetto della chat come in gioco */
.hh-vip-vetrina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 26px;
    margin-top: 14px;
    padding: 18px 20px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .18);
}

.hh-vip-distintivo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(255, 214, 102, .5) 0, rgba(203, 145, 0, .16) 62%, transparent 72%);
}

.hh-vip-distintivo img {
    object-fit: none;
}

/* la bolla Nirvana del client (bolla_235.png 52x28: zona della testa a sinistra, corpo elastico) con le stesse
   misure di BolleNuove.scss: slice 13 5 5 28, testo con interlinea 22 e margini 5 11 1 4 */
.hh-vip-bolla {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    min-height: 28px;
    padding-left: 28px;
    border: 0 solid transparent;
    border-image-source: url("bolla-nirvana.png");
    border-image-slice: 13 5 5 28 fill;
    border-image-width: 13px 5px 5px 28px;
    border-image-repeat: stretch;
    color: #000;
    font: 13px/22px Ubuntu, "Trebuchet MS", Arial, sans-serif;
    text-align: left;
}

.hh-vip-bolla-testa {
    position: absolute;
    left: 0;
    top: -12px;
    width: 28px;
    height: 40px;
    overflow: hidden;
    pointer-events: none;
}

.hh-vip-bolla-testa img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.hh-vip-bolla-testo {
    padding: 5px 11px 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hh-vip-prefisso {
    font-weight: bold;
}

/* i vantaggi: icona a sinistra, titolo e spiegazione a destra */
.hh-vip-vantaggi {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hh-vip-vantaggi li {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: center;
    gap: 14px;
}

.hh-vip-vantaggi strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.hh-vip-vantaggi p {
    margin: 2px 0 0;
}

.hh-vip-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .18);
}

.hh-vip-icona img {
    object-fit: none;
}

.hh-vip-icona .hh-vip-prefisso {
    padding: 2px 6px;
    border-radius: 3px;
    background: #fff;
    font: bold 13px/18px Ubuntu, "Trebuchet MS", Arial, sans-serif;
}

.hh-vip-icona--comandi {
    color: #fff;
    font: bold 18px/1 Consolas, "Courier New", monospace;
}

/* i comandi: nome a sinistra, spiegazione a destra */
.hh-vip-comandi {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    gap: 9px 16px;
    margin: 0;
}

.hh-vip-comandi dt,
.hh-vip-comandi dd {
    margin: 0;
}

.hh-vip-comandi code {
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font: bold 13px/1.4 Consolas, "Courier New", monospace;
    white-space: nowrap;
}

.hh-vip-comandi i {
    font-weight: normal;
    opacity: .7;
}

.hh-vip-nota {
    margin: 14px 0 0;
    font-size: 12px;
    opacity: .85;
}

.hh-vip-elenco {
    margin: 10px 0 0;
    padding-left: 18px;
    list-style: disc;
}

.hh-vip-elenco li + li {
    margin-top: 6px;
}

.hh-vip .hh-help-button {
    margin-top: 14px;
}

@media (max-width: 600px) {
    .hh-vip-comandi {
        grid-template-columns: 1fr;
    }

    .hh-vip-comandi dd {
        margin-bottom: 6px;
    }
}

/* la nota sotto i comandi: il tema azzera i margini dei paragrafi del Centro aiuto */
.hh-vip .hh-help-content .hh-vip-nota {
    margin-top: 16px;
}

/* HADDO (18/10/2026): stile unico delle pagine. Ogni riquadro e' una scheda con testata e icona
   (x-content.content-card, classe hh-vip-scheda): il corpo e' chiaro in tutti e due i temi (crema nel New, bianco
   nel Classic), quindi testi scuri come nel resto del sito invece del bianco dei vecchi box blu. */
.hh-vip .hh-vip-scheda + .hh-vip-scheda {
    margin-top: 24px;
}

.hh-vip-scheda {
    color: #4b5563;
    line-height: 1.5;
}

.hh-vip-scheda .hh-vip-vetrina,
.hh-vip-scheda .hh-vip-prezzi li {
    background: #dcdcd2;
}

.hh-vip-scheda .hh-vip-vantaggi strong,
.hh-vip-scheda .hh-vip-prezzi strong {
    color: #2c3440;
}

.hh-vip-scheda .hh-vip-icona {
    background-color: #377998;
}

.hh-vip-scheda .hh-vip-comandi code {
    border: 1px solid #96a2b1;
    background: #fff;
    color: #2c3440;
}

.hh-vip-scheda .hh-vip-elenco {
    margin-top: 0;
}

.hh-vip-scheda a:not(.hh-aside-button) {
    color: #1e7295;
    text-decoration: underline;
}

/* i prezzi: una casella per durata, col distintivo, il prezzo grande e quanto viene al mese */
.hh-vip-prezzi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hh-vip-prezzi li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 10px 12px;
    border-radius: 3px;
    text-align: center;
}

.hh-vip-prezzi img {
    margin-bottom: 4px;
    object-fit: none;
}

.hh-vip-prezzi strong {
    font-size: 15px;
}

.hh-vip-prezzo {
    color: #b86e00;
    font: bold 22px/1.2 "Ubuntu Condensed", "Trebuchet MS", sans-serif;
}

.hh-vip-prezzi small {
    color: #6a7688;
    font-size: 12px;
}