/* =============================================================================
 * css/MI_pagine.css - PAGINE INTERNE del sito pubblico (nuovo aspetto)
 * -----------------------------------------------------------------------------
 * Chi siamo (about-us.php), Prezzi (pricing.php), FAQ (faq/index.php),
 * Contatti (captcha/contact-us.php), Accedi (login.php), Registrazione
 * (registration.php), Recupero e cambio password (password_recovery.php,
 * password_reset.php), Gallery (gallery/gallery.php). Usa variabili, bottoni e contenitori di
 * css/MI_sito.css (MIS_wrap, MIS_btn, MIS_occhiello...). Prefisso MIP_.
 * Prezzi e FAQ sono anche nell'area riservata (adm_index.php): li' la classe
 * MIP_admin aggiunge lo spazio per l'header fisso dell'area admin.
 *
 * Sezioni: 1 testata e blocchi comuni  2 moduli  3 chi siamo  4 prezzi
 * 5 FAQ  6 contatti  7 accesso / registrazione / password  8 schermi piccoli.
 * ============================================================================= */

/* ------------------------------------------------- 1. testata e blocchi comuni */
.MIP_admin { padding-top: 110px; }
.MIP_testa { background: var(--MIS-fondo); border-bottom: 1px solid var(--MIS-bordo); padding: 56px 0 48px; }
.MIP_testa h1 { margin: 0 0 14px; font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.4px; max-width: 900px; }
.MIP_testa_intro { font-size: 18px; line-height: 1.65; color: var(--MIS-testo-2); max-width: 820px; }

.MIP_sez { padding-top: 64px; padding-bottom: 8px; }
.MIP_sez_ultima { padding-bottom: 80px; }
.MIP_h2 { margin: 0 0 24px; font-size: 28px; line-height: 1.25; font-weight: 800; }
.MIP_testo p { font-size: 16px; color: var(--MIS-testo-2); margin-bottom: 14px !important; max-width: 860px; }

.MIP_griglia { display: flex; flex-wrap: wrap; gap: 20px; }
.MIP_card { flex: 1 1 260px; min-width: 0; padding: 26px; border: 1px solid var(--MIS-bordo); border-radius: 12px; background: #ffffff; }
.MIP_card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.MIP_card p { font-size: 15px; color: var(--MIS-testo-3); }
.MIP_card_grande { flex-basis: 420px; padding: 30px; }
.MIP_card_grande h3 { font-size: 22px; }
.MIP_card_fondo { background: var(--MIS-fondo); border-color: transparent; }
.MIP_icona { color: var(--MIS-primario); display: block; margin-bottom: 14px; }

.MIP_banda {
    margin-top: 64px; background: var(--MIS-blu-notte); color: #ffffff; border-radius: 16px; padding: 40px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.MIP_banda h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: #ffffff; }
.MIP_banda p { color: #d4e2ee; font-size: 16px; }
.MIP_banda > div:first-child { flex: 1 1 420px; min-width: 0; }

.MIP_nota { font-size: 14px !important; color: var(--MIS-testo-3); }
.MIP_spazio_su { margin-top: 18px !important; }
.MIP_spazio_giu { margin-bottom: 16px !important; }
.MIP_card_piena { flex-basis: 100%; }
.MIP_lista_ok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.MIP_lista_ok li { display: flex; gap: 10px; font-size: 15px; color: var(--MIS-testo-2); margin: 0; }
.MIP_lista_ok svg { color: var(--MIS-verde); flex: 0 0 auto; margin-top: 3px; }

/* -------------------------------------------------------------------- 2. moduli */
.MIP_form { display: flex; flex-direction: column; gap: 18px; }
.MIP_campo { display: flex; flex-direction: column; gap: 6px; }
.MIP_campo label, .MIP_etichetta { font-size: 14px; font-weight: 600; color: var(--MIS-testo); margin: 0; }
.MIP_campo small, .MIP_aiuto { font-size: 13px; color: var(--MIS-testo-3); }
.MIP_input {
    display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 11px 14px;
    font: 400 16px/1.4 'Montserrat', Arial, sans-serif; color: var(--MIS-testo);
    background: #ffffff; border: 1px solid var(--MIS-bordo-2); border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
textarea.MIP_input { min-height: 140px; resize: vertical; }
.MIP_input:focus { outline: none; border-color: var(--MIS-primario); box-shadow: 0 0 0 3px rgba(0, 123, 255, .18); }
.MIP_input:disabled, .MIP_input[readonly] { background: var(--MIS-fondo); color: var(--MIS-testo-2); }
.MIP_input.MIP_errato { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .12); }
.MIP_err { font-size: 13px; font-weight: 600; color: #b42318; min-height: 0; }
.MIP_err:empty { display: none; }
.MIP_avviso { padding: 12px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.MIP_avviso_ko { background: #fdecea; color: #8a1c13; border: 1px solid #f5c2bd; }
.MIP_avviso_ok { background: #e7f6ed; color: #14532d; border: 1px solid #b7e1c6; }
.MIP_form .MIS_btn { width: 100%; border: 0; cursor: pointer; }
.MIP_form .MIS_btn:disabled { opacity: .55; cursor: not-allowed; }
.MIP_spunta { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--MIS-testo-2); }
.MIP_spunta input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--MIS-primario); }
.MIP_link_btn { background: none; border: 0; padding: 0; color: var(--MIS-primario-scuro); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.MIP_forza { height: 6px; border-radius: 3px; background: var(--MIS-bordo); overflow: hidden; }
.MIP_forza span { display: block; height: 100%; width: 0; transition: width .2s, background-color .2s; }
.MIP_forza_1 span { width: 33%; background: #d9480f; }
.MIP_forza_2 span { width: 66%; background: #e8a400; }
.MIP_forza_3 span { width: 100%; background: var(--MIS-verde); }
.MIP_flash { animation: MIS_flash 1.4s ease-out; }
@keyframes MIS_flash { from { background-color: #fff3a0; } to { background-color: transparent; } }

/* ---------------------------------------------------------------- 3. chi siamo */
.MIP_cosa { display: flex; flex-wrap: wrap; gap: 20px; }
.MIP_cosa .MIP_card_grande h3 { display: flex; align-items: center; gap: 10px; }
.MIP_principi .MIP_card { flex-basis: 240px; }
.MIP_due_col { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.MIP_due_col > * { flex: 1 1 380px; min-width: 0; }

/* -------------------------------------------------------------------- 4. prezzi */
.MIP_promo { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.MIP_promo .MIP_campo { flex: 0 1 340px; }
.MIP_promo .MIS_btn { min-height: 48px; }
.MIP_prezzi { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; padding-top: 56px; }
.MIP_prezzo {
    flex: 1 1 300px; min-width: 0; position: relative; display: flex; flex-direction: column;
    background: #ffffff; border: 1px solid var(--MIS-bordo); border-radius: 14px; padding: 32px 28px 28px;
}
.MIP_prezzo_top { border: 2px solid var(--MIS-primario); box-shadow: 0 18px 40px rgba(21, 71, 108, .12); }
.MIP_prezzo_nastro {
    position: absolute; top: -14px; left: 28px; background: var(--MIS-primario); color: #ffffff;
    font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.MIP_prezzo h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.MIP_prezzo_desc { font-size: 14px; color: var(--MIS-testo-3); min-height: 22px; }
.MIS_pagina .MIP_prezzo_cifra { margin: 22px 0 22px; display: flex; align-items: baseline; gap: 6px; color: var(--MIS-blu); }
.MIP_prezzo_cifra span { font-size: 22px; font-weight: 700; }
.MIP_prezzo_cifra strong { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.MIP_prezzo dl { margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid var(--MIS-bordo); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.MIP_prezzo dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.MIP_prezzo dt { font-weight: 500; color: var(--MIS-testo-2); }
.MIP_prezzo dd { margin: 0; font-weight: 700; color: var(--MIS-blu); text-align: right; }
.MIP_prezzo .MIS_btn { width: 100%; cursor: pointer; }
.MIP_prezzo .MIS_btn_primario { border-color: transparent; }
.MIS_pagina .MIP_pagamento { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--MIS-testo-3); }
.MIP_pagamento img { height: 30px; width: auto; }
.MIP_vuoto { margin-top: 48px; text-align: center; padding: 40px 24px; border: 1px dashed var(--MIS-bordo-2); border-radius: 14px; }
.MIP_vuoto h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.MIP_vuoto p { color: var(--MIS-testo-2); margin-bottom: 18px !important; }
.MIP_incluso { columns: 2; column-gap: 32px; }
.MIP_incluso li { break-inside: avoid; margin-bottom: 10px !important; }
#myModal .modal-body { font-size: 15px; text-align: left; }

/* ------------------------------------------------------------------- gallery */
.MIP_galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.MIP_foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; border: 1px solid var(--MIS-bordo); background: var(--MIS-fondo); }
.MIP_foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.MIP_foto:hover img { transform: scale(1.04); }
.MIP_foto:focus-visible { outline: 3px solid rgba(0, 123, 255, .45); outline-offset: 2px; }

/* ----------------------------------------------------------------------- 5. FAQ */
.MIP_faq_corpo { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-top: 48px; padding-bottom: 80px; }
.MIP_faq_main { flex: 999 1 560px; min-width: 0; }
.MIP_faq_lato { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--MIS-h-header) + 24px); }
.MIP_faq_cerca { margin-bottom: 22px; }
.MIP_faq_cerca .MIP_input { padding-left: 42px; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235d6b78' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center; }
.MIP_faq_lista { display: flex; flex-direction: column; gap: 12px; }
.MIP_faq_voce { border: 1px solid var(--MIS-bordo); border-radius: 12px; background: #ffffff; }
.MIP_faq_voce[open] { border-color: var(--MIS-bordo-2); box-shadow: 0 8px 22px rgba(21, 71, 108, .06); }
.MIP_faq_voce > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; font-size: 16px; font-weight: 700; color: var(--MIS-blu);
}
.MIP_faq_voce > summary::-webkit-details-marker { display: none; }
.MIP_faq_voce > summary::after {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--MIS-blu); border-bottom: 2px solid var(--MIS-blu);
    transform: rotate(45deg); margin-top: -4px; transition: transform .2s;
}
.MIP_faq_voce[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.MIP_faq_voce > summary:focus-visible { outline: 3px solid rgba(0, 123, 255, .45); outline-offset: 2px; border-radius: 10px; }
.MIP_faq_risp { padding: 0 20px 18px; border-top: 1px solid var(--MIS-bordo); }
.MIP_faq_risp > div { padding-top: 14px; }
.MIP_faq_risp h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--MIS-testo); }
.MIP_faq_risp p { font-size: 15px; line-height: 1.65; color: var(--MIS-testo-2); }
.MIP_faq_figli { margin-left: 16px; padding-left: 14px; border-left: 2px solid var(--MIS-bordo); }
.MIP_faq_nessuna { padding: 18px 0; color: var(--MIS-testo-3); font-size: 15px; }
.MIP_faq_lato .MIP_card { flex: 0 0 auto; }
.MIP_faq_lato .MIP_card p { margin-bottom: 14px !important; }
.MIP_faq_lato .MIS_btn { min-height: 42px; font-size: 15px; padding: 0 18px; }

/* ------------------------------------------------------------------ 6. contatti */
.MIP_contatti { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-top: 48px; padding-bottom: 80px; }
.MIP_contatti_info { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.MIP_contatti_info .MIP_card { flex: 0 0 auto; }
.MIP_contatti_form { flex: 999 1 520px; min-width: 0; background: #ffffff; border: 1px solid var(--MIS-bordo); border-radius: 14px; padding: 32px; box-shadow: 0 18px 40px rgba(21, 71, 108, .08); }
.MIP_contatti_form h2 { margin: 0 0 20px; font-size: 22px; font-weight: 800; }
.MIP_due_campi { display: flex; flex-wrap: wrap; gap: 18px; }
.MIP_due_campi .MIP_campo { flex: 1 1 220px; min-width: 0; }
.MIP_mail { font-size: 18px; font-weight: 700; color: var(--MIS-primario-scuro) !important; word-break: break-all; }
.MIP_contatti_info ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; color: var(--MIS-testo-2); }
.MIP_contatti_info ul li { list-style: disc; }
.MIP_fatto { text-align: center; padding: 24px 8px; }
.MIP_fatto_icona { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #e7f6ed; color: var(--MIS-verde); display: flex; align-items: center; justify-content: center; }
.MIP_fatto h2 { margin: 0 0 8px; }
.MIP_fatto p { color: var(--MIS-testo-2); }

/* ------------------------------------------- 7. accesso / registrazione / password */
.MIP_auth_sfondo { background: var(--MIS-fondo); padding: 56px 0 80px; min-height: calc(100vh - var(--MIS-h-header) - 200px); }
.MIP_auth {
    max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; background: #ffffff;
    border: 1px solid var(--MIS-bordo); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(21, 71, 108, .12);
}
.MIP_auth_lato { flex: 1 1 340px; min-width: 0; background: var(--MIS-blu); color: #ffffff; padding: 44px 40px; display: flex; flex-direction: column; gap: 22px; }
.MIP_auth_lato .MIS_marchio_t { color: #ffffff; font-size: 28px; }
.MIP_auth_lato h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 800; color: #ffffff; }
.MIP_auth_lato ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.MIP_auth_lato li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: #d4e2ee; margin: 0; }
.MIP_auth_lato li svg { color: var(--MIS-arancio-chiaro); flex: 0 0 auto; margin-top: 2px; }
.MIP_auth_lato a { color: #ffffff; font-weight: 600; margin-top: auto; }
.MIP_auth_lato a:hover { color: #ffffff; }
.MIP_auth_form { flex: 999 1 420px; min-width: 0; padding: 44px 44px 40px; }
.MIP_auth_form h1 { margin: 0 0 8px; font-size: 30px; font-weight: 800; }
.MIP_auth_form > p { font-size: 15px; color: var(--MIS-testo-2); margin-bottom: 26px !important; }
.MIP_auth_link { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; }
.MIP_auth_link a { color: var(--MIS-primario-scuro); font-weight: 600; }
.MIP_auth_piede { margin-top: 24px !important; padding-top: 20px; border-top: 1px solid var(--MIS-bordo); font-size: 15px; color: var(--MIS-testo-2); text-align: center; }
.MIP_auth_piede a { color: var(--MIS-primario-scuro); font-weight: 700; }
.MIP_occhio { position: relative; }
.MIP_occhio .MIP_input { padding-right: 52px; }
.MIP_occhio button {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px;
    background: none; border: 0; border-radius: 6px; color: var(--MIS-testo-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.MIP_occhio button:hover { color: var(--MIS-blu); }
.MIP_occhio button:focus-visible { outline: 3px solid rgba(0, 123, 255, .45); }
.MIP_auth .modal-body { text-align: left; }

/* ------------------------------------------------------------- 8. schermi piccoli */
@media (max-width: 991px) {
    .MIP_faq_lato { position: static; max-width: none; }
}
@media (max-width: 768px) {
    .MIP_testa { padding: 40px 0 34px; }
    .MIP_testa h1 { font-size: 30px; }
    .MIP_testa_intro { font-size: 16px; }
    .MIP_sez { padding-top: 48px; }
    .MIP_h2 { font-size: 23px; }
    .MIP_banda { padding: 28px 24px; }
    .MIP_banda h2 { font-size: 22px; }
    .MIP_incluso { columns: 1; }
    .MIP_contatti_form { padding: 24px 20px; }
    .MIP_auth_sfondo { padding: 24px 0 48px; }
    .MIP_auth { border-radius: 14px; margin: 0 16px; }
    .MIP_auth_lato { padding: 28px 24px; }
    .MIP_auth_form { padding: 28px 22px 28px; }
    .MIP_auth_form h1 { font-size: 25px; }
    .MIP_admin { padding-top: 90px; }
}
@media (max-width: 480px) {
    .MIP_auth_lato ul { display: none; }
    .MIP_auth_lato { gap: 10px; }
}