/* DogeVolt Custom Styles */

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1A1A1A; }
::-webkit-scrollbar-thumb { background: #FF9C00; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #FFB800; }

/* ── Transitions ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

.sidebar-transition { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.fade-in  { animation: fadeIn  0.3s ease-in; }
.slide-up { animation: slideUp 0.4s ease-out; }

@keyframes fadeIn  { from { opacity: 0; }              to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; translateY(20px); } to { opacity: 1; translateY(0); } }

/* ── Mining animation bars ─────────────────────────────────────────────────── */
.mining-bar { animation: miningPulse 1.5s ease-in-out infinite; }
@keyframes miningPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(0.6); }
    50%       { opacity: 1;   transform: scaleY(1); }
}

/* ── Pulse glow ────────────────────────────────────────────────────────────── */
.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 8px  rgba(255,156,0,0.3); }
    50%       { box-shadow: 0 0 24px rgba(255,156,0,0.7); }
}

/* ── Password strength bar ─────────────────────────────────────────────────── */
.strength-bar-fill { transition: width 0.3s ease, background-color 0.3s ease; }

/* ── Flash messages ────────────────────────────────────────────────────────── */
.flash-message { animation: slideDown 0.4s ease-out; }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Card hover ────────────────────────────────────────────────────────────── */
.card-hover { transition: transform 0.2s ease, border-color 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); border-color: #FF9C00; }

/* ── Input focus glow ──────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,156,0,0.4);
}

/* ── Table row hover ───────────────────────────────────────────────────────── */
.table-row-hover { transition: background-color 0.15s ease; }
.table-row-hover:hover { background-color: #222; }

/* ── Overlay ───────────────────────────────────────────────────────────────── */
#sidebar-overlay, #admin-sidebar-overlay {
    transition: opacity 0.3s ease;
}

/* ── Loader spinner ────────────────────────────────────────────────────────── */
.spinner {
    border: 3px solid #2A2A2A;
    border-top-color: #FF9C00;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }