/* ========== ENHANCED CUSTOM STYLES FOR SIVA TYPE & COMPUTERS ========== */

/* Reading / Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6, #3b82f6);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* Floating Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-12px) rotate(2deg);
    }

    66% {
        transform: translateY(-6px) rotate(-1.5deg);
    }
}

.floating-icon {
    animation: float 5s ease-in-out infinite;
}

/* Glow Pulse for Badges & Buttons */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.35);
    }

    50% {
        box-shadow: 0 0 35px rgba(245, 158, 11, 0.65);
    }
}

.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Typewriter Cursor */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: #f59e0b;
    margin-left: 4px;
    animation: blink 0.8s infinite;
    vertical-align: text-bottom;
}

/* Infinite Marquee */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-track {
    animation: marquee 35s linear infinite;
    will-change: transform;
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* Service & Course Card Hover Shine */
.service-card,
.service-catalog-item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card::before,
.service-catalog-item::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
    transform: rotate(45deg);
    transition: all 0.7s;
    opacity: 0;
    pointer-events: none;
}

.service-card:hover::before,
.service-catalog-item:hover::before {
    opacity: 1;
    top: -110%;
    left: -110%;
}

/* Option Bar Nav Link Active & Hover Styles */
.nav-link {
    position: relative;
    transition: all 0.2s ease-in-out;
}

.nav-link:hover {
    background-color: #f0f5fa;
    color: #0f2b4c;
}

.nav-link.active {
    background: linear-gradient(135deg, #0f2b4c, #13355d) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 43, 76, 0.25);
}

.nav-link::after {
    display: none;
}

/* Course Card Lift */
.course-card {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-8px);
}

/* Smooth HTML scroll */
html {
    scroll-behavior: smooth;
}

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #13355d, #f59e0b);
    border-radius: 4px;
}

/* Canvas Particle Layer in Hero */
#particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Testimonial Slider Transitions */
.testimonial-slider {
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.testimonial-slide {
    min-width: 100%;
    padding: 0 1rem;
}

/* Modal Backdrops with Blur */
.modal-backdrop {
    background: rgba(5, 15, 27, 0.7);
    backdrop-filter: blur(6px);
}

/* Floating WhatsApp Pulse Ring */
@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.whatsapp-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #25d366;
    animation: pulseRing 2.2s ease-out infinite;
    z-index: -1;
}

/* Floating Cart Bounce on Item Added */
@keyframes cartBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.cart-bump {
    animation: cartBounce 0.4s ease;
}

/* FAQ Accordion Transitions */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 350px;
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

/* Tab Filter Active Glow */
.filter-btn-active {
    background-color: #13355d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(19, 53, 93, 0.25);
}

/* Print Styles */
@media print {

    nav,
    .whatsapp-btn,
    #cart-floating-btn,
    #back-to-top,
    #scroll-progress,
    #announcement-bar,
    #fee-calculator-modal {
        display: none !important;
    }
}


/* ========== DARK MODE STYLES ========== */
/* Applied when <html class="dark"> is set */

.dark body {
    background-color: #0b1120;
    color: #d1d5db;
}

/* Top info bar */
.dark .bg-primary-900 {
    background-color: #050a14;
}

/* Header & Navbar */
.dark header,
.dark #navbar {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

.dark .bg-white\/98 {
    background-color: rgba(17, 24, 39, 0.98) !important;
}

/* Nav links */
.dark .nav-link {
    color: #d1d5db;
}

.dark .nav-link:hover {
    background-color: #1f2937;
    color: #f9fafb;
}

.dark .nav-link.active {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    color: #ffffff !important;
}

/* Generic white backgrounds */
.dark .bg-white,
.dark .bg-gray-50 {
    background-color: #1f2937 !important;
}

/* Borders */
.dark .border-gray-100,
.dark .border-gray-200 {
    border-color: #374151 !important;
}

/* Text colors */
.dark .text-gray-700,
.dark .text-gray-800 {
    color: #d1d5db !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

.dark .text-gray-500 {
    color: #6b7280 !important;
}

.dark .text-primary-700 {
    color: #93c5fd !important;
}

.dark .text-primary-600 {
    color: #60a5fa !important;
}

/* Cards */
.dark .service-card,
.dark .service-catalog-item,
.dark .course-card,
.dark .faq-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .service-card:hover,
.dark .service-catalog-item:hover,
.dark .course-card:hover {
    border-color: #60a5fa !important;
}

/* Sections with bg-gray-50 or similar */
.dark section {
    border-color: #1e293b !important;
}

.dark .bg-primary-50,
.dark .bg-blue-50,
.dark .bg-emerald-50,
.dark .bg-indigo-50,
.dark .bg-yellow-50,
.dark .bg-sky-50,
.dark .bg-purple-50,
.dark .bg-teal-50,
.dark .bg-red-50,
.dark .bg-orange-50 {
    background-color: #1e293b !important;
}

/* Hero section */
.dark .from-primary-700 {
    --tw-gradient-from: #0c1e3a;
}

/* Footer */
.dark footer {
    background-color: #050a14 !important;
}

/* Modals */
.dark .modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
}

/* Announcement bar in dark mode */
.dark #announcement-bar {
    background: linear-gradient(to right, #92400e, #b45309, #92400e) !important;
    color: #fef3c7 !important;
}

/* Buttons - keep accent colors visible */
.dark .bg-gray-100 {
    background-color: #374151 !important;
}

.dark .bg-gray-100:hover,
.dark .hover\:bg-gray-200:hover {
    background-color: #4b5563 !important;
}

/* Mobile menu */
.dark #mobile-menu {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

.dark .mobile-nav-link {
    color: #d1d5db !important;
}

.dark .mobile-nav-link:hover {
    background-color: #1f2937 !important;
}

/* Form inputs */
.dark input,
.dark select,
.dark textarea {
    background-color: #1e293b !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Scrollbar dark */
.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #f59e0b);
}

/* Tab filter buttons */
.dark .filter-btn-active {
    background-color: #1e40af !important;
}

/* No scrollbar utility for nav */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* Google Translate widget styles - hide banner & tooltips cleanly */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body {
    top: 0px !important;
    position: static !important;
}

.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
}

.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
}

font {
    background-color: transparent !important;
    box-shadow: none !important;
}