/*
* (c)2026 MAF Loyalty Program (MAF Card)
* Ceccacci Systems & Software | www.raxmania.com
*/
:root { --primary: #A42A2E; --accent: #D4AF37; --bg: #F4F4F4; --text-dark: #333333; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: var(--bg); color: var(--text-dark); display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: flex-start; padding: 35px 20px; overflow-x: hidden; }
.container { width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.logo-box { margin-bottom: 28px; width: 100%; }
.card-panel { background: #FFFFFF; color: var(--text-dark); padding: 30px 24px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border: 2px solid var(--accent); position: relative; width: 100%; min-height: 440px; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; }
input[type="tel"], select { padding: 16px; font-size: 1.1rem; border: 2px solid #ddd; border-radius: 12px; text-align: center; background: #FFFFFF; width: 100%; }
input[type="tel"]:focus, select:focus { outline: none; border-color: var(--primary); }
button { background-color: var(--primary); color: #FFFFFF; font-weight: bold; font-size: 1.05rem; padding: 16px; width: 100%; border: none; border-radius: 12px; cursor: pointer; text-transform: uppercase; transition: transform 0.1s; }
button:active { transform: scale(0.98); }
button:disabled { background-color: #cccccc; cursor: not-allowed; border-color: #cccccc; color: #666666; }
.error-msg { color: var(--primary); font-weight: bold; margin-bottom: 18px; display: none; font-size: 0.95rem; }
.card-result h2 { color: var(--primary); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 4px; text-align: center; }
.card-result .card-code { font-size: 1.35rem; font-family: monospace; letter-spacing: 2px; margin-bottom: 12px; background: #F4F4F4; color: var(--primary); padding: 8px; border-radius: 10px; border: 1px dashed var(--primary); text-align: center; }
.card-result .points { font-size: 1.8rem; font-weight: bold; color: var(--primary); text-align: center; margin-top: 4px; margin-bottom: 2px; }
.qr-placeholder { width: 230px; height: 230px; background: #fff; margin: 26px auto 26px auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.external-actions { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; align-items: center; }
.btn-privacy { background: none; border: none; color: var(--primary); font-size: 0.85rem; font-weight: bold; text-decoration: underline; cursor: pointer; padding: 6px; margin-bottom: 2px; text-transform: uppercase; }
.btn-logout { background: transparent; border: 2px solid var(--primary); color: var(--primary); padding: 14px; font-size: 0.95rem; font-weight: bold; border-radius: 12px; cursor: pointer; text-transform: uppercase; width: 100%; }
.btn-delete { background-color: var(--primary); color: #FFFFFF; font-weight: bold; font-size: 0.95rem; padding: 14px; width: 100%; border: none; border-radius: 12px; cursor: pointer; text-transform: uppercase; }
.top-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 420px; margin-bottom: 20px; }
.tab-link { width: 100%; background: #e0e0e0; border: none; padding: 10px 4px; font-size: 0.7rem; font-weight: bold; color: #555; border-radius: 10px; cursor: pointer; text-transform: uppercase; white-space: nowrap; text-align: center; transition: 0.2s; position: relative; }
.tab-link.active { background: var(--primary); color: #FFF; }
.tabs-viewport { width: 100%; max-width: 420px; margin: 0 auto; }
.scheda { display: none; width: 100%; }
.scheda.active { display: block; }
.scrollable-content { padding-right: 2px; }
.reward-item { border: 1px solid #ddd; padding: 14px; border-radius: 12px; margin-bottom: 12px; background: #fafafa; position: relative; }
.reward-status { font-size: 0.8rem; font-weight: bold; color: var(--accent); text-transform: uppercase; }
.reward-date { color: green; font-weight: bold; font-size: 0.85rem; }
.notification-badge { display: inline-block; background: var(--primary); color: #FFF; font-size: 0.7rem; padding: 3px 8px; border-radius: 6px; font-weight: bold; margin-bottom: 6px; text-transform: uppercase; }
.movement-item { border-bottom: 1px solid #eee; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; text-align: left; }
.movement-points { font-weight: bold; font-size: 1rem; }
.movement-points.positive { color: #2e7d32; }
.movement-points.negative { color: var(--primary); }
.faq-item { margin-bottom: 16px; text-align: left; background: #f9f9f9; padding: 12px; border-radius: 10px; border-left: 3px solid var(--accent); }
.faq-item h4 { font-size: 0.9rem; color: var(--primary); margin-bottom: 6px; }
.faq-item p { font-size: 0.85rem; color: #555; line-height: 1.4; }
.info-box h3 { color: var(--primary); font-size: 1.1rem; margin-bottom: 10px; text-transform: uppercase; text-align: center; }
.info-box p { font-size: 0.95rem; margin-bottom: 10px; }
.network-list-item { background: #f9f9f9; border-left: 4px solid var(--accent); padding: 12px 14px; margin-bottom: 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: center; padding: 20px; }
.modal-content { background: #fff; padding: 24px; border-radius: 14px; max-width: 380px; width: 100%; text-align: left; border: 2px solid var(--primary); max-height: 80vh; overflow-y: auto; }
.modal-content h3 { color: var(--primary); margin-bottom: 12px; font-size: 1.1rem; text-transform: uppercase; text-align: center; }
.modal-content p { font-size: 0.85rem; color: #444; margin-bottom: 12px; line-height: 1.5; }
.install-banner { display: none; background: var(--primary); color: #FFF; padding: 16px; border-radius: 12px; font-weight: bold; margin-bottom: 20px; cursor: pointer; border: none; box-shadow: 0 6px 15px rgba(0,0,0,0.1); text-transform: uppercase; width: 100%; font-size: 0.9rem; }
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}
.dot-active { background-color: #2e7d32; }
.dot-inactive { background-color: var(--primary); }
@media (display-mode: standalone) { .install-banner { display: none !important; } }
.ios-tooltip { display: none; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--primary); padding: 18px; border: 2px solid var(--primary); border-radius: 12px; font-weight: bold; z-index: 9999; text-align: center; width: 90%; max-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.btn-regolamento { display: block; width: 100%; text-align: center; margin-top: 16px; padding: 14px; background: var(--primary); color: #FFF; font-weight: bold; font-size: 0.85rem; text-transform: uppercase; text-decoration: none; border-radius: 12px; }
.btn-regolamento:active { transform: scale(0.98); }
.saldo-label { font-size: 0.82rem; color: #888; text-align: center; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.6px; }
.saldo-dettaglio { margin: 18px auto 0 auto; background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 6px 14px; max-width: 300px; }
.saldo-riga { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 0.88rem; color: #666; border-bottom: 1px solid #f0f0f0; }
.saldo-riga:last-child { border-bottom: none; }
.saldo-riga b { color: var(--text-dark); font-size: 0.95rem; white-space: nowrap; }
.saldo-riga.totale { border-top: 2px solid #e6e6e6; margin-top: 2px; padding-top: 11px; }
.saldo-riga.totale span { color: var(--text-dark); font-weight: bold; }
.saldo-riga.totale b { color: var(--primary); font-size: 1.05rem; }
.salvadanaio { margin: 14px auto 0 auto; max-width: 300px; background: #fffdf5; border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; }
.sal-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sal-tit { font-size: 0.78rem; font-weight: bold; color: #8a6d00; text-transform: uppercase; letter-spacing: 0.6px; }
.sal-val { font-size: 1.05rem; font-weight: bold; color: var(--primary); white-space: nowrap; }
.sal-txt { font-size: 0.76rem; color: #8a7a4a; line-height: 1.45; margin-top: 6px; text-align: left; }
.btn-segnala { display: inline-flex; align-items: center; width: auto; margin-top: 10px; padding: 7px 12px; background: #fff; border: 1px solid #e3c9ca; border-radius: 8px; color: var(--primary); font-size: 0.72rem; font-weight: bold; text-transform: none; letter-spacing: 0.1px; cursor: pointer; }
.btn-segnala:hover { background: #fdf6f6; border-color: var(--primary); }
.btn-segnala:active { transform: scale(0.97); }
.tri { position: relative; display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--primary); margin-right: 8px; flex-shrink: 0; }
.tri::after { content: "!"; position: absolute; top: 2px; left: -1.5px; width: 3px; font-size: 8px; line-height: 9px; font-weight: 900; color: #fff; text-align: center; }
.btn-chiudi-modal { background: transparent; border: 2px solid var(--primary); color: var(--primary); padding: 13px; font-size: 0.9rem; font-weight: bold; border-radius: 12px; cursor: pointer; text-transform: uppercase; width: 100%; margin-top: 10px; }
.btn-chiudi-modal:active { transform: scale(0.98); }