/* TechBudi Design System - Brand Colors: #DC2626 (red), #1E293B (dark navy) */

/* Prevent Alpine.js x-show flash before initialization */
[x-cloak] { display: none !important; }

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary: #DC2626;
    --secondary: #1E293B;
    --accent: #FFFFFF;
}

@layer components {
    .btn-primary {
        @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
    }
    
    .btn-secondary {
        @apply bg-slate-800 hover:bg-slate-900 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300;
    }
    
    .btn-outline {
        @apply border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300;
    }
    
    .card {
        @apply bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden;
    }
    
    .card-hover {
        @apply transform hover:-translate-y-2 transition-all duration-300;
    }
    
    .input-field {
        @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-600 focus:border-transparent transition-all duration-200;
    }
    
    .badge {
        @apply inline-block px-3 py-1 text-xs font-semibold rounded-full;
    }
    
    .badge-primary {
        @apply bg-red-100 text-red-800;
    }
    
    .badge-secondary {
        @apply bg-slate-100 text-slate-800;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.5s ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #DC2626;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #B91C1C;
}

/* ── Auth page enhancements ── */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%, 55%  { transform: translateX(-7px); }
    35%, 75%  { transform: translateX(7px); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.97) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.auth-card-enter {
    animation: fadeInScale 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-shake {
    animation: shake 0.55s ease-in-out;
}
/* Override browser autofill yellow/blue background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f9fafb inset !important;
    -webkit-text-fill-color: #111827 !important;
    transition: background-color 5000s ease-in-out 0s;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1f2937 inset !important;
    -webkit-text-fill-color: #f9fafb !important;
}
/* Mobile auth hero gradients */
.auth-hero-user      { background: linear-gradient(135deg,#dc2626 0%,#7c3aed 60%,#1e1b4b 100%); }
.auth-hero-tutor     { background: linear-gradient(135deg,#7c3aed 0%,#dc2626 60%,#ea580c 100%); }
.auth-hero-admin     { background: linear-gradient(135deg,#1e1b4b 0%,#4c1d95 50%,#dc2626 100%); }
.auth-hero-affiliate { background: linear-gradient(135deg,#7f1d1d 0%,#dc2626 50%,#9f1239 100%); }
/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.auth-spin { animation: spin 0.75s linear infinite; }
/* Input valid/invalid indicator */
.input-valid   { border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.12) !important; }
.input-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }

/* ─── Mobile button sizing ──────────────────────────────────────────────── */
/* Full-width CTA buttons look too wide on phones. Cap at ~half width and    */
/* center them. Excludes: sidebar nav items, dropdown menus (.absolute),     */
/* and flex-1 constrained contexts (e.g. sticky enroll bar, card action row) */
@media (max-width: 1023px) {
    button.w-full:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)),
    a.block.w-full:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)) {
        display: block !important;
        max-width: 55% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    
    /* Reduce padding and font-size on mobile so buttons look proportional */
    a.btn-primary, a.btn-secondary, a.btn-outline,
    .btn-primary, .btn-secondary, .btn-outline,
    button[type="submit"],
    button.w-full:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)),
    a.block.w-full:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)),
    a.inline-flex[href]:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)),
    a[class*="rounded-full"][class*="px-"]:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)),
    a[class*="rounded-xl"][class*="px-"]:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)),
    a[class*="rounded-lg"][class*="px-"]:not(:is(nav *)):not(:is(.absolute *)):not(:is(.flex-1 *)) {
        padding-top: 0.5625rem !important;    /* py-2.25 equivalent */
        padding-bottom: 0.5625rem !important; /* py-2.25 equivalent */
        padding-left: 1.25rem !important;     /* px-5 equivalent */
        padding-right: 1.25rem !important;    /* px-5 equivalent */
        font-size: 0.8125rem !important;      /* text-[13px] equivalent */
        line-height: 1.25rem !important;
    }
}