/*
 * Pagina "Prezzi dei servizi Rolex" (mod_wmkt_rolex_prezzi_servizi).
 * Autore: Mattia Di Giuseppe <sviluppo@flowence.it>, Flowence
 * Caratteri, colori, distanze (10vh) e fisarmonica sono quelli di rolex25.css: qui c'è solo quello che manca,
 * cioè la scheda dei prezzi e la finestra (pop-in).
 */

/* ---- scheda di un gruppo (moderni, classici, vintage) ---- */
.rlx_prezzi_scheda { background: #F4EFEA; padding: 10vh 10%; }

.rlx_prezzi_riga { margin: 0; padding: 3vh 0; border-top: 1px solid rgba(69, 44, 30, 0.2); }
.rlx_prezzi_riga > [class*="col-"] { padding-left: 0; padding-right: 0; }
.rlx_prezzi_voci { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.rlx_prezzi_voci li { break-inside: avoid; margin: 0 0 6px; }
.rlx_prezzi_cifra { text-align: right; }

.rlx_prezzi_note { border-top: 1px solid rgba(69, 44, 30, 0.2); padding-top: 3vh; }
.rlx_prezzi_note p { margin: 0 0 12px; }

.rlx_prezzi_restauro { text-align: center; padding-top: 10vh; }
.rlx_prezzi_restauro p { margin: 0 0 12px; }
.rlx_prezzi_logo { display: block; margin: 0 auto 20px; width: 180px; max-width: 60%; height: auto; }

/* ---- pulsante (i): l'icona è rlx_tooltip-icon del template ---- */
.rlx_prezzi_info { display: inline-block; vertical-align: middle; padding: 0; margin: 0 0 2px 4px;
    border: 0; background: none; box-shadow: none; cursor: pointer; line-height: 0; }
.rlx_prezzi_info:focus { outline: none; }
.rlx_prezzi_info:focus-visible { outline: 2px solid #127749; outline-offset: 2px; }

/* ---- pop-in ---- */
.rlx_popin { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .65); padding: 20px; }
.rlx_popin[hidden] { display: none; }
.rlx_popin_scheda { position: relative; background: #fff; border-radius: 28px; width: 70%; max-width: 1330px; max-height: 90vh; overflow: auto;
    padding: 7vh 8%; box-sizing: border-box; outline: none; }
.rlx_popin_chiudi { position: absolute; top: 20px; right: 24px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: #f1f1f1; color: #212121; box-shadow: none; outline: none; cursor: pointer; line-height: 0; display: flex; align-items: center; justify-content: center; }
.rlx_popin_chiudi:hover { background: #e4e4e4; }
.rlx_popin_chiudi:focus { outline: none; box-shadow: none; }
.rlx_popin_chiudi:focus-visible { outline: 2px solid #127749; outline-offset: 2px; }
.rlx_popin_contenuto span { display: block; }
.rlx_popin_contenuto p { margin: 0 0 10px; }
.rlx_popin_img { display: block; margin: 28px auto 0; max-width: 100%; height: auto; }

@media (max-width: 767px) {
    .rlx_prezzi_scheda { padding: 6vh 6%; }
    .rlx_prezzi_voci { columns: 1; }
    /* mockup mobile: elenco a sinistra e prezzo a destra, sulla stessa riga del primo nome */
    .rlx_prezzi_riga { flex-wrap: nowrap; justify-content: space-between; }
    .rlx_prezzi_riga > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; }
    .rlx_prezzi_riga > .col-md-9 { flex: 1 1 auto; padding-right: 16px; }
    .rlx_prezzi_cifra { text-align: right; white-space: nowrap; }
    /* pop-in a tutto schermo, senza angoli arrotondati */
    .rlx_popin { padding: 0; align-items: stretch; }
    .rlx_popin_scheda { width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; padding: 12vh 6% 5vh; }
}