/* FNF QR Rewards — front-end styles */

.fnf-qr-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    max-width: 420px;
    margin: 0 auto 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.fnf-qr-header h3 { margin: 0 0 4px; }
.fnf-qr-header p { margin: 0 0 16px; color: #64748b; font-size: 14px; }
.fnf-input-group { margin-bottom: 14px; }
.fnf-input-group label { display: block; font-size: 13px; margin-bottom: 6px; color: #334155; }
.fnf-input-group input {
    width: 100%; padding: 10px 12px; border: 1px solid #d8dee7; border-radius: 8px; font-size: 15px;
}
.fnf-qr-canvas-wrap { text-align: center; margin: 16px 0; }
.fnf-qr-canvas-wrap canvas { max-width: 100%; border: 1px solid #eee; border-radius: 8px; }
.fnf-qr-meta { width: 100%; font-size: 13px; margin-bottom: 12px; }
.fnf-qr-meta td { padding: 4px 0; color: #475569; }
.fnf-qr-meta td:first-child { font-weight: 600; width: 100px; }
.fnf-qr-actions { display: flex; gap: 10px; }
.fnf-badge { font-weight: 600; font-size: 13px; }
.fnf-badge-generated { color: #94a3b8; }

#fnf-qr-val { font-weight: 700; color: #1e293b; }

/* Customer scan section — sits inside the same coupon entry card */
.ml-scan-qr-divider {
    display: flex; align-items: center; gap: 10px; margin: 18px 0; color: #94a3b8; font-size: 13px;
}
.ml-scan-qr-divider::before, .ml-scan-qr-divider::after {
    content: ''; flex: 1; height: 1px; background: #e2e8f0;
}
#ml-scan-qr-btn {
    width: 100%; padding: 12px; border-radius: 10px; border: 1px dashed #94a3b8;
    background: #f8fafc; color: #334155; font-weight: 600; cursor: pointer;
}
#ml-qr-scanner-wrap {
    position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 99999;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
#ml-qr-video { width: 90%; max-width: 420px; border-radius: 12px; }
#ml-qr-scanner-close {
    margin-top: 16px; padding: 10px 22px; border-radius: 8px; border: none;
    background: #fff; color: #111; font-weight: 600; cursor: pointer;
}
#ml-qr-manual-wrap { margin-top: 12px; display: flex; gap: 8px; }
#ml-qr-manual-input {
    flex: 1; padding: 10px 12px; border: 1px solid #d8dee7; border-radius: 8px;
}
#ml-qr-manual-submit {
    padding: 10px 16px; border-radius: 8px; border: none; background: #3b82f6; color: #fff; cursor: pointer;
}
#ml-qr-scan-status { margin-top: 10px; font-size: 14px; font-weight: 600; }

/* Scratch-card page: pending QR approval state */
.ml-pending-reward h4 { color: #b45309; }
.ml-pending-subtext { font-size: 13px; color: #94a3b8; margin-top: 10px; }