/**
 * assets/css/nqt-phase7.css
 * NQT Phase 7 — Withdrawal + Lottery + Insurance + Dead Man's Switch
 * Variables CSS uniquement — mobile first
 */

/* ═══ Layout commun ═══════════════════════════════════════════════════════════ */
.nqt-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.nqt-info-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nqt-info-label  { font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.nqt-info-value  { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); }
.nqt-info-sub    { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.nqt-section-title { font-size: var(--font-size-base); font-weight: 600; margin-bottom: var(--space-4); color: var(--text-primary); }
.nqt-label       { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-1); }
.nqt-form-row    { margin-bottom: var(--space-4); }
.nqt-hint        { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: var(--space-1); display: block; }
.nqt-optional    { font-size: var(--font-size-xs); color: var(--text-tertiary); font-weight: 400; }
.nqt-green       { color: var(--success); }
.nqt-sep         { color: var(--text-tertiary); }
.nqt-link        { color: var(--accent); text-decoration: none; }
.nqt-link:hover  { text-decoration: underline; }
.nqt-mono        { font-family: var(--font-mono); font-size: var(--font-size-xs); }
.nqt-table-wrap  { overflow-x: auto; }

/* ═══ Progress bars ═══════════════════════════════════════════════════════════ */
.nqt-limits-bar  { margin-bottom: var(--space-5); }
.nqt-limit-item  { margin-bottom: var(--space-3); }
.nqt-limit-label { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: var(--space-1); }
.nqt-progress-track { background: var(--bg-tertiary); border-radius: var(--radius-full); height: 6px; overflow: hidden; }
.nqt-progress-fill  { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width .4s ease; }

/* ═══ Preview boxes ═══════════════════════════════════════════════════════════ */
.nqt-preview-box {
    background: var(--accent-bg);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-3) 0;
}
.nqt-preview-row       { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nqt-preview-fee       { color: var(--error); }
.nqt-preview-total     { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-2); color: var(--text-primary); font-size: var(--font-size-base); }

/* ═══ Badges & Tiers ═══════════════════════════════════════════════════════════ */
.nqt-badge         { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; }
.nqt-badge-success { background: var(--success-bg); color: var(--success); }
.nqt-badge-warning { background: var(--warning-bg); color: var(--warning); }
.nqt-badge-error   { background: var(--error-bg);   color: var(--error); }
.nqt-badge-neutral { background: var(--bg-tertiary); color: var(--text-secondary); }

.nqt-tier-badge    { display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 700; }
.nqt-tier-none     { background: var(--bg-tertiary); color: var(--text-secondary); }
.nqt-tier-bronze   { background: #FFF7ED; color: #C2410C; }
.nqt-tier-silver   { background: #F1F5F9; color: #475569; }
.nqt-tier-gold     { background: #FFFBEB; color: #B45309; }
.nqt-tier-diamond  { background: var(--accent-bg); color: var(--accent-text); }
[data-theme="dark"] .nqt-tier-bronze  { background: rgba(194,65,12,.15);  color: #FB923C; }
[data-theme="dark"] .nqt-tier-silver  { background: rgba(71,85,105,.2);   color: #94A3B8; }
[data-theme="dark"] .nqt-tier-gold    { background: rgba(180,83,9,.15);   color: #FCD34D; }

/* ═══ Alerts ═══════════════════════════════════════════════════════════════════ */
.nqt-alert         { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.nqt-alert-success { background: var(--success-bg); color: var(--success); }
.nqt-alert-error   { background: var(--error-bg);   color: var(--error); }
.nqt-alert-warning { background: var(--warning-bg); color: var(--warning); }

/* ═══ Tables ═══════════════════════════════════════════════════════════════════ */
.nqt-table           { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.nqt-table th,
.nqt-table td        { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-light); }
.nqt-table th        { font-weight: 600; color: var(--text-secondary); background: var(--bg-tertiary); white-space: nowrap; }
.nqt-table tbody tr:hover { background: var(--bg-secondary); }

/* ═══ Method tabs (withdrawal) ═════════════════════════════════════════════════ */
.nqt-method-tabs { display: flex; gap: var(--space-2); }
.nqt-method-btn  {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}
.nqt-method-btn:hover,
.nqt-method-btn.active {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent-text);
}

/* ═══ Fee table ═════════════════════════════════════════════════════════════════ */
.nqt-fee-tiers-info { margin-top: var(--space-4); }
.nqt-fee-tiers-info summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nqt-fee-table { width: 100%; margin-top: var(--space-2); font-size: var(--font-size-sm); }
.nqt-fee-table td { padding: var(--space-1) var(--space-3); }
.nqt-fee-green { color: var(--success); font-weight: 600; }

/* ═══ Input group ═══════════════════════════════════════════════════════════════ */
.nqt-input-group { display: flex; gap: var(--space-2); }
.nqt-input-group .input { flex: 1; }

/* ═══ Lottery Hero ══════════════════════════════════════════════════════════════ */
.nqt-lottery-hero {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    background: linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-elevated) 100%);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-5);
}
.nqt-lottery-jackpot-label { font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-2); }
.nqt-lottery-jackpot-amount {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 800;
    color: var(--accent);
    line-height: 1.1;
    margin-bottom: var(--space-3);
    text-shadow: 0 0 40px rgba(139,92,246,.3);
}
.nqt-lottery-meta    { font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.nqt-lottery-countdown { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-primary); margin-top: var(--space-4); font-variant-numeric: tabular-nums; }
.nqt-lottery-countdown .nqt-cd-unit { font-size: var(--font-size-xs); color: var(--text-tertiary); font-weight: 400; display: block; }

/* ═══ Lottery buy card ══════════════════════════════════════════════════════════ */
.nqt-lottery-buy-card { margin-bottom: var(--space-5); }
.nqt-lottery-balance  { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.nqt-qty-controls     { display: flex; align-items: center; gap: var(--space-3); }
.nqt-qty-display      { font-size: var(--font-size-xl); font-weight: 700; min-width: 40px; text-align: center; }
.nqt-lottery-cost-preview { background: var(--bg-tertiary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }

/* ═══ Lottery tickets ═══════════════════════════════════════════════════════════ */
.nqt-lottery-my-tickets  { margin-bottom: var(--space-5); }
.nqt-tickets-grid        { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.nqt-ticket-chip         { background: var(--accent-light); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
.nqt-ticket-num          { font-weight: 700; color: var(--accent-text); }
.nqt-lottery-odds-line   { font-size: var(--font-size-sm); color: var(--text-secondary); }
.btn-block               { width: 100%; }

/* ═══ Insurance hero ════════════════════════════════════════════════════════════ */
.nqt-insurance-hero {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    text-align: center;
}
.nqt-insurance-badge { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.nqt-insurance-desc  { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-4); max-width: 500px; margin-inline: auto; }
.nqt-insurance-stats-row { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.nqt-insurance-stat  { text-align: center; }
.nqt-stat-label      { font-size: var(--font-size-xs); color: var(--text-tertiary); display: block; }
.nqt-stat-value      { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); }

.nqt-insurance-form-card { margin-bottom: var(--space-5); }
.nqt-insurance-note  { margin-top: var(--space-3); font-size: var(--font-size-xs); color: var(--text-tertiary); }

/* ═══ Login prompt ══════════════════════════════════════════════════════════════ */
.nqt-login-prompt { text-align: center; padding: var(--space-8); margin-bottom: var(--space-5); }
.nqt-login-prompt p { margin-bottom: var(--space-4); color: var(--text-secondary); }

/* ═══ History sections ══════════════════════════════════════════════════════════ */
.nqt-history-section  { margin-top: var(--space-5); }
.nqt-lottery-history  { margin-top: var(--space-5); }
.nqt-insurance-history{ margin-top: var(--space-5); }

/* ═══ Responsive ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .nqt-info-grid  { grid-template-columns: repeat(2, 1fr); }
    .nqt-method-tabs { flex-wrap: wrap; }
    .nqt-insurance-stats-row { flex-direction: column; align-items: center; }
    .nqt-lottery-jackpot-amount { font-size: 2rem; }
    .nqt-form-inline { flex-direction: column; }
}