/* assets/css/nqt-staking.css — Phase 3 */

/* ═══ Container ═══ */
.nqt-st-container { display: flex; flex-direction: column; gap: var(--space-6); }

/* ═══ Tier Card ═══ */
.nqt-st-tier-card {
    background: var(--bg-elevated); border-radius: var(--radius-lg);
    padding: var(--space-6); box-shadow: var(--shadow-md);
}
.nqt-st-tier-header {
    display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.nqt-st-tier-icon { font-size: 2.5rem; }
.nqt-st-tier-name { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin: 0; }
.nqt-st-tier-label { font-size: var(--font-size-sm); color: var(--text-secondary); }
.nqt-st-tier-next { margin-left: auto; text-align: right; font-size: var(--font-size-sm); color: var(--text-secondary); }

/* Progress Bar */
.nqt-st-progress-wrap { margin-bottom: var(--space-5); }
.nqt-st-progress-bar {
    height: 10px; background: var(--bg-tertiary); border-radius: var(--radius-full);
    overflow: hidden; margin-bottom: var(--space-2);
}
.nqt-st-progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--accent), var(--color-accent-400));
    border-radius: var(--radius-full); transition: width var(--transition-slow);
}
.nqt-st-progress-labels {
    display: flex; justify-content: space-between;
    font-size: var(--font-size-xs); color: var(--text-secondary);
}

/* Benefits Grid */
.nqt-st-benefits {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
@media (min-width: 768px) { .nqt-st-benefits { grid-template-columns: repeat(4, 1fr); } }
.nqt-st-benefit {
    background: var(--bg-secondary); border-radius: var(--radius-md);
    padding: var(--space-3); text-align: center;
}
.nqt-st-benefit-label { display: block; font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: var(--space-1); }
.nqt-st-benefit-value { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); }
.nqt-st-accent { color: var(--accent) !important; }

/* ═══ Stake Form ═══ */
.nqt-st-form-card {
    background: var(--bg-elevated); border-radius: var(--radius-lg);
    padding: var(--space-6); box-shadow: var(--shadow-md);
}
.nqt-st-form-card h3 { margin: 0 0 var(--space-4); font-weight: 600; }
.nqt-st-balance-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary);
}
.nqt-st-input-group { margin-bottom: var(--space-4); }
.nqt-st-input-group .input { width: 100%; margin-bottom: var(--space-2); }
.nqt-st-quick-btns { display: flex; gap: var(--space-2); }
.nqt-st-quick-btns .btn-sm { flex: 1; padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); }

/* Type Selector */
.nqt-st-type-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
    margin-bottom: var(--space-4);
}
@media (max-width: 480px) { .nqt-st-type-grid { grid-template-columns: 1fr; } }
.nqt-st-type-option {
    border: 2px solid var(--border); border-radius: var(--radius-md);
    padding: var(--space-3); cursor: pointer; transition: all var(--transition-fast);
}
.nqt-st-type-option:hover { border-color: var(--accent); }
.nqt-st-type-option.selected { border-color: var(--accent); background: var(--accent-bg); }
.nqt-st-type-option input { display: none; }
.nqt-st-type-content { display: flex; flex-direction: column; gap: 2px; }
.nqt-st-type-content strong { font-size: var(--font-size-sm); }
.nqt-st-type-content span { font-size: var(--font-size-xs); color: var(--text-secondary); }
.nqt-st-type-content em { font-size: var(--font-size-sm); font-style: normal; font-weight: 700; color: var(--accent); }

/* Preview */
.nqt-st-preview {
    background: var(--bg-secondary); border-radius: var(--radius-md);
    padding: var(--space-4); margin-bottom: var(--space-4);
}
.nqt-st-preview-row {
    display: flex; justify-content: space-between; padding: var(--space-1) 0;
    font-size: var(--font-size-sm);
}

/* ═══ Stakes List ═══ */
.nqt-st-stakes-card {
    background: var(--bg-elevated); border-radius: var(--radius-lg);
    padding: var(--space-6); box-shadow: var(--shadow-md);
}
.nqt-st-stakes-card h3 { margin: 0 0 var(--space-4); font-weight: 600; }
.nqt-st-stake-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    padding: var(--space-4); border-bottom: 1px solid var(--border-light);
}
.nqt-st-stake-row:last-child { border-bottom: none; }
.nqt-st-stake-info { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 200px; }
.nqt-st-stake-type-badge {
    font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-full);
    background: var(--bg-tertiary); color: var(--text-secondary);
}
.nqt-st-badge-flexible { background: var(--success-bg); color: var(--success); }
.nqt-st-bonus-badge { font-size: var(--font-size-xs); color: var(--accent); font-weight: 600; }
.nqt-st-stake-meta { font-size: var(--font-size-xs); color: var(--text-secondary); flex: 1; }
.nqt-st-stake-actions { display: flex; gap: var(--space-2); }
.nqt-st-countdown { font-weight: 600; color: var(--warning); }

/* ═══ Tiers Grid ═══ */
.nqt-st-tiers-card {
    background: var(--bg-elevated); border-radius: var(--radius-lg);
    padding: var(--space-6); box-shadow: var(--shadow-md);
}
.nqt-st-tiers-card h3 { margin: 0 0 var(--space-4); font-weight: 600; }
.nqt-st-tiers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .nqt-st-tiers-grid { grid-template-columns: repeat(4, 1fr); } }
.nqt-st-tier-cell {
    border: 2px solid var(--border-light); border-radius: var(--radius-md);
    padding: var(--space-4); text-align: center; transition: all var(--transition-fast);
}
.nqt-st-tier-active { border-color: var(--accent); background: var(--accent-bg); }
.nqt-st-tier-cell-icon { font-size: 2rem; margin-bottom: var(--space-2); }
.nqt-st-tier-cell-name { font-weight: 700; font-size: var(--font-size-base); margin-bottom: var(--space-1); }
.nqt-st-tier-cell-threshold { font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: var(--space-2); }
.nqt-st-tier-cell-details { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-size-xs); color: var(--text-secondary); }

.btn-full { width: 100%; }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--font-size-lg); }