/* ═══════════════════════════════════════════════
 * SISTEMA COUPON BAR — Validator Mobile (Barista)
 * Ottimizzato per smartphone al bancone del bar
 * ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ─── Wrapper globale ─── */
.scb-validator {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 480px;
    margin: 0 auto;
    padding: 15px;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Card base ─── */
.scb-validator__card {
    width: 100%;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    animation: scb-fade-in 0.4s ease-out;
}

@keyframes scb-fade-in {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Card Valida (verde) ─── */
.scb-validator__card--valid {
    background: #ffffff;
    border: 3px solid #28a745;
}

/* ─── Header card ─── */
.scb-validator__header {
    margin-bottom: 20px;
}

.scb-validator__icon {
    font-size: 48px;
    display: block;
    margin-bottom: 8px;
}

.scb-validator__title {
    font-size: 24px;
    font-weight: 800;
    color: #28a745;
    margin: 0;
}

/* ─── Dettagli coupon ─── */
.scb-validator__details {
    background: #f8faf8;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.scb-validator__detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.scb-validator__detail-row:not(:last-child) {
    border-bottom: 1px solid #e8ede8;
}

.scb-validator__detail-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.scb-validator__detail-value {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* ─── Divider ─── */
.scb-validator__divider {
    height: 1px;
    background: #e2e8f0;
    margin: 20px 0;
}

/* ─── Errore PIN ─── */
.scb-validator__error {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
    color: #c53030;
    font-weight: 600;
    font-size: 14px;
    animation: scb-shake 0.4s ease;
}

@keyframes scb-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* ─── Form PIN ─── */
.scb-validator__form {
    text-align: center;
}

.scb-validator__pin-label {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}

.scb-validator__pin-input {
    display: block;
    margin: 0 auto 20px;
    width: 160px;
    padding: 16px;
    font-size: 28px;
    font-weight: 700;
    font-family: 'Inter', monospace;
    text-align: center;
    letter-spacing: 6px;
    border: 3px solid #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
    color: #1a1a2e;
    outline: none;
    transition: all 0.25s ease;
    -webkit-appearance: none;
}

.scb-validator__pin-input:focus {
    border-color: #28a745;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2);
}

/* ─── Bottone Annulla ─── */
.scb-validator__submit {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.35);
    -webkit-appearance: none;
}

.scb-validator__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(40, 167, 69, 0.45);
}

.scb-validator__submit:active {
    transform: translateY(0);
}

.scb-validator__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ═══════════════════════════════════════════════
 * SCHERMATE DI STATO (Fullscreen)
 * ═══════════════════════════════════════════════ */

/* ─── Successo ─── */
.scb-validator__card--success {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: #fff;
    padding: 50px 30px;
    animation: scb-pulse-success 0.6s ease-out;
}

@keyframes scb-pulse-success {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ─── Errore / Scaduto / Usato ─── */
.scb-validator__card--error {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    border: none;
    color: #fff;
    padding: 50px 30px;
}

.scb-validator__card--expired {
    background: linear-gradient(135deg, #6c757d, #495057);
    border: none;
    color: #fff;
    padding: 50px 30px;
}

.scb-validator__card--used {
    background: linear-gradient(135deg, #e67e22, #d35400);
    border: none;
    color: #fff;
    padding: 50px 30px;
}

.scb-validator__card--idle {
    background: #f8f9fa;
    border: 2px dashed #d1d5db;
    color: #6c757d;
    padding: 50px 30px;
}

/* ─── Contenuto schermate stato ─── */
.scb-validator__status-icon {
    font-size: 72px;
    margin-bottom: 16px;
    line-height: 1;
}

.scb-validator__status-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
}

.scb-validator__status-subtitle {
    font-size: 16px;
    opacity: 0.85;
    margin: 0 0 12px;
    font-weight: 500;
}

.scb-validator__status-message {
    font-size: 15px;
    opacity: 0.8;
    margin: 0;
    line-height: 1.5;
}

.scb-validator__card--idle .scb-validator__status-title {
    color: #495057;
}

.scb-validator__card--idle .scb-validator__status-message {
    color: #6c757d;
}

/* ─── Pulsante "Scansiona un altro coupon" ─── */
.scb-validator__scan-again {
    display: inline-block;
    margin-top: 24px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.scb-validator__scan-again:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.scb-validator__scan-again:active {
    transform: translateY(0);
}

/* Variante per card con sfondo chiaro */
.scb-validator__card--idle .scb-validator__scan-again {
    color: #0073aa;
    background: rgba(0, 115, 170, 0.08);
    border-color: rgba(0, 115, 170, 0.3);
}

.scb-validator__card--idle .scb-validator__scan-again:hover {
    background: rgba(0, 115, 170, 0.15);
    color: #005a87;
}

/* ═══════════════════════════════════════════════
 * SCANNER QR INTEGRATO
 * ═══════════════════════════════════════════════ */

/* ─── Card Scanner ─── */
.scb-validator__card--scanner {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    padding: 24px;
}

.scb-validator__scanner-subtitle {
    font-size: 14px;
    color: #6c757d;
    margin: 4px 0 0;
    font-weight: 500;
}

/* ─── Viewport fotocamera ─── */
.scb-scanner__viewport {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    min-height: 0;
}

/* Override degli stili della libreria html5-qrcode */
.scb-scanner__viewport video {
    border-radius: 16px;
}

#scb-qr-reader {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

#scb-qr-reader img[alt="Info icon"],
#scb-qr-reader__header_message,
#scb-qr-reader__dashboard_section,
#scb-qr-reader__dashboard_section_swaplink,
#scb-qr-reader__status_span {
    display: none !important;
}

#scb-qr-reader__scan_region {
    min-height: 0 !important;
}

#scb-qr-reader__scan_region video {
    border-radius: 12px;
}

/* ─── Stato scanner ─── */
.scb-scanner__status {
    margin: 16px 0;
    min-height: 24px;
}

.scb-scanner__status p {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.scb-scanner__success-msg {
    color: #28a745 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.scb-scanner__error-msg {
    color: #dc3545 !important;
    font-weight: 600 !important;
}

/* ─── Pulsante toggle scanner ─── */
.scb-scanner__toggle-btn {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, #0073aa, #005a87);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 115, 170, 0.3);
    -webkit-appearance: none;
}

.scb-scanner__toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0, 115, 170, 0.4);
}

.scb-scanner__toggle-btn:active {
    transform: translateY(0);
}

.scb-scanner__toggle-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.scb-scanner__toggle-btn--active {
    background: linear-gradient(135deg, #dc3545, #c82333);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3);
}

.scb-scanner__toggle-btn--active:hover {
    box-shadow: 0 6px 22px rgba(220, 53, 69, 0.4);
}

/* ─── Divider "oppure" ─── */
.scb-scanner__divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    gap: 12px;
}

.scb-scanner__divider::before,
.scb-scanner__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.scb-scanner__divider span {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Form inserimento manuale ─── */
.scb-scanner__manual-form {
    text-align: left;
}

.scb-scanner__manual-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.scb-scanner__manual-row {
    display: flex;
    gap: 8px;
}

.scb-scanner__manual-input {
    flex: 1;
    padding: 12px 14px;
    font-size: 14px;
    font-family: 'Inter', monospace;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    transition: all 0.25s ease;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.scb-scanner__manual-input:focus {
    border-color: #0073aa;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

.scb-scanner__manual-submit {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: #0073aa;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    -webkit-appearance: none;
}

.scb-scanner__manual-submit:hover {
    background: #005a87;
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
    .scb-validator {
        padding: 10px;
        min-height: 70vh;
    }

    .scb-validator__card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .scb-validator__pin-input {
        font-size: 32px;
        width: 180px;
        padding: 18px;
    }

    .scb-validator__submit {
        font-size: 20px;
        padding: 18px;
    }

    .scb-validator__status-icon {
        font-size: 80px;
    }

    .scb-validator__status-title {
        font-size: 28px;
    }

    .scb-scanner__viewport {
        max-width: 100%;
    }

    .scb-scanner__toggle-btn {
        font-size: 20px;
        padding: 18px;
    }
}

/* ─── Per schermi molto piccoli ─── */
@media (max-width: 360px) {
    .scb-validator__detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .scb-validator__detail-value {
        text-align: left;
        max-width: 100%;
    }

    .scb-scanner__manual-row {
        flex-direction: column;
    }
}