/* AlgoCheck Custom Styles */

/* Prevent horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* Paywall blur */
.blur-content {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
}

/* Grade badge typography */
.grade-badge {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.35);
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Card hover animation */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.6s ease-out;
}

/* Scrollbar (Dark Mode) */
.dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.dark ::-webkit-scrollbar-track {
    background: #0F172A;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Scrollbar (Light Mode) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F8FAFC;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* OTP Input */
.otp-digit {
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    font-size: 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 2px solid #334155;
    background: #0F172A;
    color: #F1F5F9;
    outline: none;
    transition: border-color 0.15s ease;
}
.otp-digit:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Light mode OTP */
html:not(.dark) .otp-digit {
    border-color: #E2E8F0;
    background: #FFFFFF;
    color: #0F172A;
}
html:not(.dark) .otp-digit:focus {
    border-color: #3B82F6;
}

/* Score breakdown bar */
.score-bar {
    height: 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
    background: #1E293B;
}
html:not(.dark) .score-bar {
    background: #E2E8F0;
}
.score-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.8s ease-out;
}

/* Saved money banner glow */
.saved-banner {
    animation: subtle-glow 3s ease-in-out infinite alternate;
}
@keyframes subtle-glow {
    from { box-shadow: 0 0 10px rgba(16, 185, 129, 0.05); }
    to   { box-shadow: 0 0 20px rgba(16, 185, 129, 0.1); }
}

/* Nav dropdown light mode */
html:not(.dark) .group:hover .card-elevated {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
}
html:not(.dark) .group .hover\:bg-surface-hover:hover {
    background-color: #F1F5F9 !important;
}

/* === DESIGN UPGRADE v2 === */

/* Body dot-pattern texture */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(59,130,246,0.025) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* Header accent line */
#header {
    position: relative;
}
#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1E3A5F 20%, #3B82F6 50%, #1E3A5F 80%, transparent);
    z-index: 60;
}

/* Hero glow */
.hero-glow {
    position: relative;
    overflow: visible;
}
.hero-glow::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(30,58,95,0.4) 0%, rgba(59,130,246,0.08) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Card depth system */
.card-elevated {
    background: #1E293B;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.12);
    transition: all 0.25s ease;
}
.card-elevated:hover {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 28px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}

/* A-grade glow animation */
.grade-glow-a {
    animation: gradeGlowA 3s ease-in-out infinite;
}
@keyframes gradeGlowA {
    0%, 100% { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.35), 0 0 0 0 rgba(16,185,129,0); }
    50% { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.35), 0 0 16px 3px rgba(16,185,129,0.15); }
}

/* Button glow hover effects */
.btn-glow {
    transition: all 0.2s ease;
}
.btn-glow:hover {
    box-shadow: 0 0 24px rgba(59,130,246,0.35);
    transform: translateY(-1px);
}
.btn-glow-emerald {
    transition: all 0.2s ease;
}
.btn-glow-emerald:hover {
    box-shadow: 0 0 24px rgba(16,185,129,0.3);
    transform: translateY(-1px);
}

/* Card entrance animation */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.card-enter {
    animation: fadeSlideUp 0.4s ease-out both;
}

/* Page content fade-in */
.page-enter {
    animation: fadeSlideUp 0.3s ease-out;
}

/* Gradient divider */
.divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, transparent, #334155 30%, #334155 70%, transparent);
}

/* Metric tabular numbers */
.metric-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Grade accent bar classes */
.grade-accent-a { border-left: 3px solid #10B981; }
.grade-accent-b { border-left: 3px solid #3B82F6; }
.grade-accent-c { border-left: 3px solid #F59E0B; }
.grade-accent-d { border-left: 3px solid #F87171; }
.grade-accent-f { border-left: 3px solid #EF4444; }

/* Rank styling for top 3 */
.rank-gold { color: #F59E0B; text-shadow: 0 0 12px rgba(245,158,11,0.3); background: transparent; padding: 0; }
.rank-silver { color: #94A3B8; text-shadow: 0 0 8px rgba(148,163,184,0.2); background: transparent; padding: 0; }
.rank-bronze { color: #D97706; text-shadow: 0 0 8px rgba(217,119,6,0.2); background: transparent; padding: 0; }
.rank-default { color: #9CA3AF; background: transparent; padding: 0; }

/* Light mode overrides for new classes */
html:not(.dark) .card-elevated {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
}
html:not(.dark) .card-elevated:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 8px 28px rgba(0,0,0,0.08);
}
html:not(.dark) .divider-gradient {
    background: linear-gradient(90deg, transparent, #E2E8F0 30%, #E2E8F0 70%, transparent);
}
html:not(.dark) body::after {
    background-image: radial-gradient(circle, rgba(30,58,95,0.03) 1px, transparent 1px);
}
/* Light mode: hero glow softer */
html:not(.dark) .hero-glow::before {
    background: radial-gradient(ellipse at center, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.03) 40%, transparent 70%);
}
/* Light mode: gradient text readable */
html:not(.dark) .bg-clip-text.text-transparent {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #1E293B, #1D4ED8, #3B82F6) !important;
}
/* Light mode: medal-style rank badges */
html:not(.dark) .rank-gold { color: #fff; background: linear-gradient(145deg, #F59E0B, #D97706); border-radius: 12px; padding: 4px 0; text-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 2px 6px rgba(217,119,6,0.35); }
html:not(.dark) .rank-silver { color: #fff; background: linear-gradient(145deg, #94A3B8, #64748B); border-radius: 12px; padding: 4px 0; text-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 2px 6px rgba(100,116,139,0.35); }
html:not(.dark) .rank-bronze { color: #fff; background: linear-gradient(145deg, #D97706, #92400E); border-radius: 12px; padding: 4px 0; text-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 2px 6px rgba(146,64,14,0.35); }
html:not(.dark) .rank-default { color: #64748B; background: #F1F5F9; border-radius: 12px; padding: 4px 0; }
/* Light mode: grade badge keep white text */
html:not(.dark) .grade-badge { color: #FFFFFF !important; }
/* Light mode: step numbers visible */
html:not(.dark) .text-white\/\[0\.04\] { color: rgba(0,0,0,0.04) !important; }
/* Light mode: "How It Works" band */
html:not(.dark) .bg-surface-card\/50 { background-color: rgba(241,245,249,0.7) !important; }
/* Light mode: trust badge pills */
html:not(.dark) .bg-surface-card\/60 { background-color: rgba(255,255,255,0.8) !important; }
/* Light mode: overline labels keep brand color */
html:not(.dark) .text-brand-400 { color: #2563EB !important; }
/* Light mode: btn-glow softer */
html:not(.dark) .btn-glow:hover { box-shadow: 0 0 20px rgba(59,130,246,0.2); }
html:not(.dark) .btn-glow-emerald:hover { box-shadow: 0 0 20px rgba(16,185,129,0.2); }
/* Light mode: header accent line subtler */
html:not(.dark) #header::before {
    background: linear-gradient(90deg, transparent, #93C5FD 20%, #3B82F6 50%, #93C5FD 80%, transparent);
}
/* Monthly Pass card: dark/light mode backgrounds */
.monthly-pass-card { background: linear-gradient(135deg, rgba(30,58,95,0.25) 0%, rgba(16,185,129,0.08) 100%); }
html:not(.dark) .monthly-pass-card { background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(30,58,95,0.04) 100%); box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); }
/* Light mode: mover/advisor badges need visible background */
html:not(.dark) .bg-surface-base\/80 { background-color: #E2E8F0 !important; }
html:not(.dark) [class*="bg-surface-base/80"] { background-color: #E2E8F0 !important; }

/* Light mode: ranking card badges - stronger backgrounds + darker text */
html:not(.dark) .bg-blue-500\/15 { background-color: rgba(59,130,246,0.12) !important; }
html:not(.dark) .bg-indigo-500\/15 { background-color: rgba(99,102,241,0.12) !important; }
html:not(.dark) .bg-purple-500\/15 { background-color: rgba(168,85,247,0.12) !important; }
html:not(.dark) .bg-teal-500\/15 { background-color: rgba(20,184,166,0.12) !important; }
html:not(.dark) .bg-cyan-500\/15 { background-color: rgba(6,182,212,0.12) !important; }
html:not(.dark) .bg-amber-500\/15 { background-color: rgba(245,158,11,0.12) !important; }
html:not(.dark) .bg-emerald-500\/15 { background-color: rgba(16,185,129,0.12) !important; }
html:not(.dark) .bg-slate-500\/15 { background-color: rgba(100,116,139,0.12) !important; }
html:not(.dark) .bg-red-500\/20 { background-color: rgba(239,68,68,0.12) !important; }

html:not(.dark) .text-blue-400 { color: #2563EB !important; }
html:not(.dark) .text-indigo-400 { color: #4F46E5 !important; }
html:not(.dark) .text-purple-400 { color: #7C3AED !important; }
html:not(.dark) .text-teal-400 { color: #0D9488 !important; }
html:not(.dark) .text-cyan-400 { color: #0891B2 !important; }
html:not(.dark) .text-amber-400 { color: #B45309 !important; }
html:not(.dark) .text-red-400 { color: #DC2626 !important; }
html:not(.dark) .text-slate-400 { color: #475569 !important; }