/* app/css/50-misc.css — estratto da app.css (2026-07, split senza build). */
/* Toggle setting rows (notifiche) */
.toggle-row { background: var(--surface); padding: 16px 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .body { flex: 1; }
.toggle-row .ttl { font-size: 14px; font-weight: 600; color: var(--ink); }
.toggle-row .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.toggle-row .toggle { width: 50px; height: 30px; background: var(--line); border-radius: 15px; position: relative; flex-shrink: 0; cursor: pointer; transition: background 0.2s; }
.toggle-row .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: transform 0.2s; }
.toggle-row .toggle.on { background: var(--brand); }
.toggle-row .toggle.on::after { transform: translateX(20px); }

/* Receipt list */
.receipt-row { background: var(--surface); padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.receipt-row:last-child { border-bottom: none; }
.receipt-row:active { background: var(--bg); }
.receipt-row .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.receipt-row .body { flex: 1; min-width: 0; }
.receipt-row .ttl { font-size: 14px; font-weight: 700; }
.receipt-row .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.receipt-row .total { text-align: right; flex-shrink: 0; }
.receipt-row .total .v { font-size: 14px; font-weight: 700; color: var(--ink); }
.receipt-row .total .l { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.receipt-group { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); margin: 10px 18px 0; overflow: hidden; }

/* Plain content (terms, privacy) */
.content-page { padding: 14px 18px 24px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.content-page h2 { font-size: 16px; font-weight: 800; color: var(--ink); margin-top: 22px; margin-bottom: 8px; }
.content-page h2:first-child { margin-top: 0; }
.content-page p { margin-bottom: 12px; }
.content-page strong { color: var(--ink); }

/* Satispay flow */
.recharge-here { margin: 14px 18px 0; padding: 12px 14px; background: var(--brand-soft); border-radius: 10px; display:flex;align-items:center;gap:8px;font-size: 12px; color: var(--brand); }
.amount-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px; margin-top: 14px; }
.amount-tile { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 22px 12px; cursor: pointer; text-align: center; position: relative; }
.amount-tile.selected { border-color: var(--brand); background: var(--brand-soft); }
.amount-tile .amount { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.amount-tile.selected .amount { color: var(--brand); }
.amount-tile .bonus-pill { position: absolute; top: -10px; right: 10px; background: var(--ok); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; box-shadow: 0 4px 8px rgba(22,163,74,0.3); white-space: nowrap; }
.amount-tile .bonus-line { font-size: 11px; color: var(--ok); font-weight: 700; margin-top: 4px; }
/* Ricarica Satispay (Fase 1): radio nativo nascosto, selezione via :has (no JS) */
.amount-tile input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.amount-tile:has(input[type="radio"]:checked) { border-color: var(--brand); background: var(--brand-soft); }
.amount-tile:has(input[type="radio"]:checked) .amount { color: var(--brand); }
.amount-tile-custom { grid-column: 1 / -1; padding: 16px; text-align: left; }
.amount-custom-field { display: flex; align-items: center; gap: 8px; }
.amount-custom-field input[type="number"] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; -moz-appearance: textfield; outline: none; padding: 0; }
.amount-custom-field input[type="number"]::-webkit-outer-spin-button, .amount-custom-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-custom-field input[type="number"]::placeholder { font-weight: 700; font-size: 17px; letter-spacing: normal; }
.amount-custom-field .ac-cur { font-size: 24px; font-weight: 800; color: var(--ink-3); }
.amount-tile-custom:has(input[type="radio"]:checked) .amount-custom-field input,
.amount-tile-custom:has(input[type="radio"]:checked) .amount-custom-field .ac-cur { color: var(--brand); }
.form-error { margin: 14px 18px 0; padding: 10px 14px; background: #fdecea; color: #b3261e; border-radius: 10px; font-size: 13px; font-weight: 600; }
.bonus-active { margin: 14px 18px 0; padding: 14px; background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); border: 1px solid #6EE7B7; border-radius: 14px; display: flex; gap: 12px; align-items: flex-start; }
.bonus-active .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bonus-active .body .ttl { font-size: 13px; font-weight: 800; color: #065F46; }
.bonus-active .body .sub { font-size: 12px; color: #047857; margin-top: 2px; line-height: 1.4; }
.btn-pay-satispay { padding: 16px; background: var(--satispay); color: #fff; border-radius: 14px; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.btn-pay-satispay .ssp-mini { width: 24px; height: 24px; background: #fff; color: var(--satispay); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.btn-pay-satispay .ssp-mini svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.recap-card { margin: 18px 18px 0; padding: 14px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); }
.recap-card .row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.recap-card .row .lbl { color: var(--ink-3); }
.recap-card .row .v { font-weight: 700; }
.recap-card .row.bonus .lbl, .recap-card .row.bonus .v { color: var(--ok); }
.recap-card .row.total { font-size: 16px; padding-top: 10px; margin-top: 6px; border-top: 1.5px solid var(--ink-2); font-weight: 800; }
.recap-card .row.total .v { color: var(--brand); }

/* Success generic */
.success-screen { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
.success-screen .check-circle { width: 96px; height: 96px; border-radius: 50%; background: #DCFCE7; color: var(--ok); display: flex; align-items: center; justify-content: center; }
.success-screen h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 24px; text-align: center; }
.success-screen .lead { font-size: 14px; color: var(--ink-2); text-align: center; margin-top: 8px; line-height: 1.5; }

/* Video player mock */
.video-player { background: #000; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); position: relative; }
.video-player .play-btn { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.video-player .play-btn svg { margin-left: 4px; }
.video-player .vid-title { position: absolute; bottom: 14px; left: 18px; right: 18px; color: #fff; font-size: 16px; font-weight: 700; }

/* Hardening tap-friendly su aree interattive (no text selection, link clean) */
a.lab-switch-row, a.lab-availability, a.menu-row, a.purse-card, a.cm-card, a.wash-card,
a.satispay-cta, a.receipt-row, a.promo-card { text-decoration: none; color: inherit; }
.lab-switch-row, .lab-availability, .menu-row, .purse-card, .cm-card,
.wash-card, .satispay-cta, .receipt-row, .promo-card, .toggle-row,
.b-cta, .b-info, .btn-primary, .btn-cancel, .btn-confirm, .btn-danger, .submit-btn,
.bottom-nav button, .bottom-nav a, .menu-row .ttl, .menu-row .ico,
.amount-tile, .radio-tile { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* iOS tap delay kill */
a, button, .menu-row, .lab-switch-row, .lab-availability { touch-action: manipulation; }

/* Toast notification (auto-dismiss 3s).
   Posizionato in alto: evita conflitto con bottom-nav presente/assente e con
   keyboard mobile aperta sotto. translateY iniziale verso l'alto per slide-down. */
/* Toast con varianti semantiche (default=success verde, .warning=arancio, .error=rosso).
   Tutti i bg superano WCAG AA 4.5:1 con white text (success 5.02:1, warning 5.03:1, error 4.86:1). */
.toast { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-120%); width: calc(100% - 36px); max-width: 444px; background: var(--ok-text); color: #fff; padding: 14px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 24px rgba(21,128,61,0.25); z-index: 200; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.toast.warning { background: #B45309; box-shadow: 0 8px 24px rgba(180,83,9,0.25); }
.toast.error { background: var(--danger); box-shadow: 0 8px 24px rgba(220,38,38,0.25); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Desktop: limit width but keep mobile feel */
@media (min-width: 768px) {
  .app { box-shadow: 0 0 60px rgba(0,0,0,0.06); }
}