/* Area "La mia prenotazione" (mybooking.php).

   Caricato DOPO base.css, custom-style.css, footer.css e header.css: qui non
   servono !important, basta la specificita' normale. L'unica eccezione sono i
   pulsanti fatti con un <a>, che devono dichiarare colore e sottolineatura nel
   proprio :hover perche' la regola globale a:hover di base.css (0,1,1) batte
   una classe sola (0,1,0). */

.mb-pagina {
    max-width: 640px;
    /* L'intestazione del sito e' fissa: 70px su desktop, 60 su telefono. */
    margin: 94px auto 70px;
    padding: 0 18px;
    box-sizing: border-box;
}

.mb-titolo {
    font-size: 1.6rem;
    font-weight: 700;
    color: #16202e;
    margin: 0 0 18px;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* ------------------------------------------------------------- riquadri */

.mb-scheda {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 4px 18px rgba(16, 26, 45, .05);
    margin-bottom: 16px;
}

.mb-intro {
    margin: 0 0 16px;
    font-size: .95rem;
    line-height: 1.6;
    color: #3d4756;
}

.mb-scheda-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.mb-scheda-testa h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #16202e; line-height: 1.3; }

/* --------------------------------------------------------------- moduli */

.mb-form { display: flex; flex-direction: column; gap: 6px; }
.mb-form label { font-size: .82rem; font-weight: 600; color: #667487; }
.mb-form input[type="email"],
.mb-form input[type="tel"],
.mb-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #cfd8e3;
    border-radius: 9px;
    font-family: inherit;
    font-size: 1rem;
    color: #16202e;
    background: #fff;
    margin-bottom: 6px;
}
.mb-form input:focus-visible { outline: 2px solid #137333; outline-offset: 1px; border-color: #137333; }

/* Il codice si legge a colpo d'occhio solo se le cifre sono staccate. */
.mb-cifre {
    letter-spacing: .5em;
    font-size: 1.3rem !important;
    font-weight: 700;
    text-align: center;
}

button.mb-btn,
a.mb-btn, a.mb-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 18px;
    border: none;
    border-radius: 10px;
    background: #137333;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
button.mb-btn:hover, a.mb-btn:hover, a.mb-btn:focus { background: #0f5e29; color: #fff; text-decoration: none; }
.mb-btn .ico { width: 16px; height: 16px; }

button.mb-btn-no, a.mb-btn-no, a.mb-btn-no:visited { background: #c5221f; }
button.mb-btn-no:hover, a.mb-btn-no:hover, a.mb-btn-no:focus { background: #a51917; color: #fff; }

button.mb-btn-neutro, a.mb-btn-neutro, a.mb-btn-neutro:visited {
    background: #fff;
    color: #16202e;
    border: 1px solid #cfd8e3;
}
button.mb-btn-neutro:hover, a.mb-btn-neutro:hover, a.mb-btn-neutro:focus {
    background: #f4f6f8;
    color: #16202e;
    border-color: #b9c4d2;
}

.mb-azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mb-azioni .mb-btn { width: auto; flex: 1 1 150px; }

.mb-secondaria { margin-top: 14px; }
button.mb-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: #137333;
    text-decoration: underline;
    cursor: pointer;
}
button.mb-link:hover { color: #0f5e29; }

/* --------------------------------------------------------------- avvisi */

.mb-avviso {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .92rem;
    line-height: 1.5;
    font-weight: 600;
}
.mb-avviso .ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.mb-avviso-si { background: #f2f9f4; border: 1px solid #cfe8d8; color: #0f5e29; }
.mb-avviso-no { background: #fce8e6; border: 1px solid #f5c9c5; color: #8c1d18; }

/* ---------------------------------------------------------- elenco righe */

.mb-testa-elenco {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.mb-testa-elenco h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #16202e; }
.mb-testa-elenco form { margin: 0; }

a.mb-riga, a.mb-riga:visited {
    display: block;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 15px 16px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #16202e;
    transition: border-color .15s, box-shadow .15s;
}
a.mb-riga:hover, a.mb-riga:focus {
    border-color: #137333;
    color: #16202e;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(16, 26, 45, .07);
}
.mb-riga-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.mb-riga-testa strong { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.mb-riga-dati {
    display: block;
    font-size: .85rem;
    color: #667487;
    line-height: 1.5;
}
.mb-riga-dati .ico { width: 13px; height: 13px; margin-right: 5px; vertical-align: -1px; }

/* Stato: la forma comunica quanto il colore, per chi il colore non lo vede. */
.mb-stato {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.mb-si     { background: #e6f4ea; color: #0f5e29; }
.mb-attesa { background: #fff6e5; color: #8a5117; }
.mb-no     { background: #fce8e6; color: #8c1d18; }
.mb-grigio { background: #eef1f5; color: #5a6675; }

/* ------------------------------------------------------------ dettaglio */

.mb-dati {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
    font-size: .95rem;
}
.mb-dati dt { color: #667487; font-weight: 600; }
.mb-dati dd { margin: 0; color: #16202e; font-weight: 600; }

.mb-regola {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid #cfe8d8;
    border-radius: 10px;
    background: #f2f9f4;
    font-size: .88rem;
    line-height: 1.5;
    color: #16202e;
}
.mb-regola .ico { width: 16px; height: 16px; color: #137333; flex-shrink: 0; margin-top: 2px; }

.mb-conferma {
    border: 2px solid #e6a23c;
    border-radius: 12px;
    background: #fffdf8;
    padding: 16px 16px 18px;
}
.mb-conferma h3 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 700; color: #7a4409; }
.mb-esito-si { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: #0f5e29; }
.mb-esito-no { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: #8c1d18; }
.mb-nota { margin: 0 0 12px; font-size: .85rem; line-height: 1.55; color: #667487; }
.mb-nota-forte { color: #8a5117; font-weight: 600; background: #fff6e5; border: 1px solid #f3ddc4; border-radius: 10px; padding: 11px 13px; margin: 0; }

.mb-torna { margin: 0; font-size: .9rem; }
.mb-torna a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mb-torna .ico { width: 12px; height: 12px; }

.mb-aiuto { margin-top: 22px; font-size: .85rem; color: #667487; text-align: center; }
.mb-aiuto a { font-weight: 600; }

/* ------------------------------------------------------- schermi stretti */

@media (max-width: 600px) {
    .mb-pagina { margin: 78px auto 50px; padding: 0 14px; }
    .mb-titolo { font-size: 1.32rem; }
    .mb-scheda { padding: 18px 15px; border-radius: 12px; }
    .mb-dati { grid-template-columns: 1fr; gap: 2px; }
    .mb-dati dd { margin-bottom: 8px; }
    .mb-azioni .mb-btn { flex: 1 1 100%; }
}

/* --- Passo del telefono e assistenza -------------------------------------- */

/* Il secondo riquadro della schermata del codice e' di contorno: se avesse lo
   stesso peso del primo, i due modi di entrare sembrerebbero alternativi
   invece che uno principale e uno di riserva. */
.mb-scheda-alt {
    background: #f7f9fb;
    box-shadow: none;
}
.mb-scheda-alt .mb-intro { font-size: .88rem; }

.mb-h2 {
    margin: 0 0 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #16202e;
    line-height: 1.3;
}

/* WhatsApp con il suo verde: qui e' l'azione che risolve, va riconosciuta
   prima di leggere. */
a.mb-btn-wa, a.mb-btn-wa:visited { background: #25d366; color: #0b3d1e; }
a.mb-btn-wa:hover, a.mb-btn-wa:focus { background: #1fbe5a; color: #0b3d1e; }
a.mb-btn-wa .ico { width: 18px; height: 18px; }