/* AdReward SA — Premium Fintech Design System (Light Mode) */

/* ===== BASE & SCROLLING ===== */
html { scroll-behavior: smooth; }
body { 
    background-color: #F8FAFC; /* surface-50 */
    color: #1E293B; /* slate-800 */
}

/* Custom Scrollbar — Subtle & Clean */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { 
    background: #CBD5E1; 
    border-radius: 20px;
    border: 2px solid #F1F5F9;
}
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ===== PREMIUM SHADOWS & CARDS ===== */
.shadow-premium {
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}
.shadow-premium-hover {
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.08);
}

/* ===== ANIMATIONS ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===== GLOW EFFECTS (Subtle) ===== */
.glow-green-subtle {
    box-shadow: 0 0 15px rgba(5, 150, 105, 0.1);
}

/* ===== TYPOGRAPHY ===== */
.font-display { font-family: 'Outfit', sans-serif; }

/* ===== UI COMPONENTS ===== */

/* Premium Glass effect (Light) */
.glass-light {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Card Hover State */
.card-hover-premium {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

/* Toast Animations */
@keyframes slide-in-bottom {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.toast-enter { animation: slide-in-bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Task Type Pills */
.badge-task-video { background-color: #EEF2FF; color: #4338CA; border: 1px solid #E0E7FF; }
.badge-task-survey { background-color: #ECFDF5; color: #047857; border: 1px solid #D1FAE5; }
.badge-task-quiz { background-color: #FFFBEB; color: #B45309; border: 1px solid #FEF3C7; }

/* ===== SELECTION ===== */
::selection {
    background-color: rgba(5, 150, 105, 0.15);
    color: #0F172A;
}

/* Mobile Menu Transition */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Form Styling Focus */
input:focus, select:focus, textarea:focus {
    border-color: #059669; /* accent-green */
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
    outline: none;
}

/* ===== ADVANCED PREMIUM UTILITIES ===== */

/* Mesh Gradient Underlays */
.bg-mesh-green {
    background-image: radial-gradient(at 0% 0%, rgba(5, 150, 105, 0.05) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(37, 99, 235, 0.05) 0px, transparent 50%);
}

.bg-mesh-brand {
    background-image: radial-gradient(at 100% 0%, rgba(30, 41, 59, 0.1) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(15, 23, 42, 0.05) 0px, transparent 50%);
}

/* Staggered Animation Logic (Helper Classes) */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Skeleton Loader (Subtle) */
.skeleton {
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Button Active Press Effect */
.btn-press:active {
    transform: scale(0.96) translateY(1px);
}

/* Glass Detail for Cards */
.glass-border {
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Custom Checkbox Hidden but accessible */
.custom-checkbox:checked + div {
    background-color: #059669;
    border-color: #059669;
}


/* ===== SKELETON LOADING CLASSES ===== */

/* Base shimmer animation */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-base {
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 37%, #F1F5F9 63%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* Text placeholder — single line shimmer */
.skeleton-text {
    display: block;
    height: 14px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 37%, #F1F5F9 63%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-text.w-3\/4 { width: 75%; }
.skeleton-text.w-1\/2 { width: 50%; }
.skeleton-text.w-1\/3 { width: 33%; }
.skeleton-text.lg { height: 20px; }
.skeleton-text.sm { height: 10px; }

/* Card placeholder — full card shimmer */
.skeleton-card {
    display: block;
    min-height: 180px;
    border-radius: 2rem;
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 37%, #F1F5F9 63%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border: 1px solid #E2E8F0;
}

/* Circle placeholder — avatar shimmer */
.skeleton-circle {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 37%, #F1F5F9 63%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-circle.sm { width: 32px; height: 32px; }
.skeleton-circle.lg { width: 64px; height: 64px; }
.skeleton-circle.xl { width: 80px; height: 80px; }

/* ===== MOBILE BOTTOM NAV ===== */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Add bottom padding to main content on mobile when bottom nav is visible */
@media (max-width: 767px) {
    main { padding-bottom: 80px !important; }

    /* Mobile-first ergonomics: keep controls finger-friendly */
    button,
    .btn,
    a[role="button"],
    input[type="submit"] {
        min-height: 44px;
    }

    /* Soften oversized desktop radii and spacing on phones */
    .rounded-\[3rem\],
    .rounded-\[2\.5rem\] {
        border-radius: 1.25rem !important;
    }

    /* Improve horizontal scroll ergonomics for data tables */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}