﻿/* ===========================================
   Dark Theme - ENHANCED & MODERN
   =========================================== */

body.dark-theme {
    background-color: #0b0b0b !important;
    color: #f0f0f0 !important;
}

    body.dark-theme .content-wrapper,
    body.dark-theme main,
    body.dark-theme .breadcrumb-section,
    body.dark-theme section:not(.sst-particle-hero) {
        background-color: #0b0b0b !important;
        color: #f0f0f0 !important;
    }

    /* ✅ Hero exception: keep particle/gradient hero transparent so glow/shapes are visible */
    body.dark-theme .sst-particle-hero,
    body.dark-theme .sst-particle-hero .container,
    body.dark-theme .sst-particle-hero .container-fluid {
        background-color: transparent !important;
    }
    /* ✅ Cards - Enhanced with glow effect */
    body.dark-theme .card,
    body.dark-theme .product-card,
    body.dark-theme .news-card,
    body.dark-theme .service-main-card,
    body.dark-theme .service-card,
    body.dark-theme .client-card,
    body.dark-theme .vision-mission-card,
    body.dark-theme .rating-stat-item,
    body.dark-theme .google-rating-item,
    body.dark-theme .review-slide-card,
    body.dark-theme .add-review-card,
    body.dark-theme .platform-card {
        background: linear-gradient(145deg, #121212, #1a1a1a) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #f0f0f0 !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease !important;
    }

        body.dark-theme .card:hover,
        body.dark-theme .product-card:hover,
        body.dark-theme .news-card:hover {
            transform: translateY(-8px) !important;
            border-color: rgba(77, 171, 247, 0.4) !important;
            box-shadow: 0 15px 40px rgba(77, 171, 247, 0.15), 0 0 30px rgba(77, 171, 247, 0.1) !important;
        }

    /* ✅ Buttons - Enhanced gradients */
    body.dark-theme .btn-custom {
        background: linear-gradient(135deg, #0096ff 0%, #0056cc 100%) !important;
        border: none !important;
        color: white !important;
        padding: 12px 30px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 8px 20px rgba(0, 150, 255, 0.3) !important;
        position: relative;
        overflow: hidden;
    }

        body.dark-theme .btn-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        body.dark-theme .btn-custom:hover::before {
            left: 100%;
        }

        body.dark-theme .btn-custom:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 30px rgba(0, 150, 255, 0.5) !important;
            background: linear-gradient(135deg, #00a8ff 0%, #0066ff 100%) !important;
        }

    body.dark-theme .btn-outline-custom {
        background: transparent !important;
        border: 2px solid #0096ff !important;
        color: #0096ff !important;
        padding: 12px 30px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

        body.dark-theme .btn-outline-custom:hover {
            background: rgba(0, 150, 255, 0.15) !important;
            color: #ffffff !important;
            border-color: #00a8ff !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 25px rgba(0, 150, 255, 0.3) !important;
        }

    /* ✅ News Section - Enhanced */
    body.dark-theme .news-section {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
        padding: 80px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        position: relative;
    }

        body.dark-theme .news-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(77, 171, 247, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(0, 150, 255, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }

        body.dark-theme .news-section .section-title {
            color: #ffffff !important;
            opacity: 1 !important;
            background: none !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            -webkit-text-fill-color: #ffffff !important;
            font-size: 2.5rem !important;
            font-weight: 700 !important;
            text-shadow: 0 2px 18px rgba(0,0,0,.75) !important;
        }

    body.dark-theme .news-date {
        color: #4dabf7 !important;
        background: rgba(77, 171, 247, 0.15) !important;
        padding: 6px 15px !important;
        border-radius: 20px !important;
        display: inline-block !important;
        border: 1px solid rgba(77, 171, 247, 0.3) !important;
    }

    body.dark-theme .news-title {
        color: #ffffff !important;
        font-size: 1.3rem !important;
        font-weight: 600 !important;
    }

    body.dark-theme .news-excerpt {
        color: #aaaaaa !important;
        font-size: 1rem !important;
        opacity: 0.9 !important;
    }

    /* ✅ Support Contact - Enhanced */
    body.dark-theme .support-contact {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
        padding: 80px 0 !important;
        position: relative;
        overflow: hidden;
    }

        body.dark-theme .support-contact:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(600px 400px at 10% 20%, rgba(77, 171, 247, 0.15) 0%, transparent 60%), radial-gradient(500px 350px at 90% 80%, rgba(0, 150, 255, 0.12) 0%, transparent 60%);
            z-index: 0;
        }

        body.dark-theme .support-contact .container {
            position: relative;
            z-index: 1;
        }

        body.dark-theme .support-contact h2 {
            color: #ffffff !important;
            opacity: 1 !important;
            background: none !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            -webkit-text-fill-color: #ffffff !important;
            text-shadow: 0 2px 18px rgba(0,0,0,.75) !important;
            font-size: 2.5rem !important;
            font-weight: 700 !important;
        }

    /* ✅ Rating Stats - Enhanced with animation */
    body.dark-theme .rating-stats-section {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
        padding: 40px !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    }

    body.dark-theme .google-rating-item {
        position: relative;
        overflow: hidden;
    }

        body.dark-theme .google-rating-item:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #34a853, #0f9d58, #34a853) !important;
            background-size: 200% 100% !important;
            animation: shimmer 2s infinite linear;
        }

        body.dark-theme .google-rating-item .stat-number,
        body.dark-theme .google-rating-item .google-rating-number {
            background: linear-gradient(135deg, #34a853 0%, #0f9d58 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            font-size: 3.5rem !important;
            font-weight: 800 !important;
            filter: drop-shadow(0 0 20px rgba(52, 168, 83, 0.4));
        }

    body.dark-theme .rating-stat-item .stat-number {
        background: linear-gradient(135deg, #4dabf7 0%, #339af0 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        font-size: 3.5rem !important;
        font-weight: 800 !important;
        filter: drop-shadow(0 0 20px rgba(77, 171, 247, 0.4));
    }

    body.dark-theme .rating-stat-item:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #4dabf7, #339af0, #4dabf7) !important;
        background-size: 200% 100% !important;
        animation: shimmer 2s infinite linear;
    }

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ✅ Reviews Section - Enhanced with stars */
body.dark-theme .reviews-section,
body.dark-theme .testimonials-section {
    background: linear-gradient(135deg, #140c08 0%, #0b0705 100%) !important;
    border: 1px solid rgba(120, 60, 20, 0.25) !important;
    position: relative;
    overflow: hidden;
}

    body.dark-theme .reviews-section::before,
    body.dark-theme .testimonials-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.6;
        background-image: radial-gradient(3px 3px at 8% 18%, rgba(255,255,255,0.95) 55%, transparent 60%), radial-gradient(2.5px 2.5px at 22% 80%, rgba(173,216,230,0.8) 55%, transparent 60%), radial-gradient(3px 3px at 55% 40%, rgba(255,255,255,0.85) 55%, transparent 60%), radial-gradient(2.5px 2.5px at 85% 85%, rgba(255,255,255,0.75) 55%, transparent 60%);
        animation: sstStarsDrift 26s linear infinite;
    }

@keyframes sstStarsDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-3%, -6%, 0);
    }
}

/* ✅ Tables */
body.dark-theme .table {
    color: #f0f0f0 !important;
}

    body.dark-theme .table thead th,
    body.dark-theme .table-dark th {
        background-color: #111 !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.12) !important;
    }

    body.dark-theme .table tbody td,
    body.dark-theme .table tbody th {
        background-color: transparent !important;
        border-color: rgba(255,255,255,.08) !important;
    }

body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.04) !important;
    color: #f0f0f0 !important;
}

body.dark-theme .table-hover > tbody > tr:hover > * {
    background-color: rgba(77,171,247,.12) !important;
    color: #fff !important;
}

/* ✅ Forms */
body.dark-theme .form-control,
body.dark-theme .form-select {
    background-color: #222 !important;
    border-color: #444 !important;
    color: #f0f0f0 !important;
}

    body.dark-theme .form-control:focus,
    body.dark-theme .form-select:focus {
        background-color: #2a2a2a !important;
        border-color: #4dabf7 !important;
        box-shadow: 0 0 0 0.2rem rgba(77,171,247,0.25) !important;
    }

/* ✅ Dropdowns */
body.dark-theme .dropdown-menu {
    background: linear-gradient(145deg, #121212, #1a1a1a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
}

body.dark-theme .dropdown-item {
    color: #f0f0f0 !important;
    background: transparent !important;
    transition: all 0.2s ease;
}

    body.dark-theme .dropdown-item:hover {
        background: rgba(77, 171, 247, 0.15) !important;
        color: #fff !important;
        padding-right: 25px;
    }

/* ✅ Scrollbar */
body.dark-theme::-webkit-scrollbar {
    width: 10px;
    background-color: #0b0b0b;
}

body.dark-theme::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 5px;
}

    body.dark-theme::-webkit-scrollbar-thumb:hover {
        background-color: #444;
    }

/* ✅ Mobile optimizations */
@media (max-width: 768px) {
    body.dark-theme .news-section,
    body.dark-theme .support-contact,
    body.dark-theme .about-section {
        padding: 60px 0 !important;
    }

        body.dark-theme .news-section .section-title,
        body.dark-theme .support-contact h2 {
            color: #ffffff !important;
            opacity: 1 !important;
            background: none !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            -webkit-text-fill-color: #ffffff !important;
            text-shadow: 0 2px 18px rgba(0,0,0,.75) !important;
            font-size: 2.5rem !important;
            font-weight: 700 !important;
        }
}


/* ============================
   V15: Bright text overrides (dark UI)
   ============================ */
.subnav-floating .text-dark,
.subnav-floating .text-muted,
.sub-navigation .text-dark,
.sub-navigation .text-muted,
.dropdown-menu .text-dark,
.dropdown-menu .text-muted {
    color: rgba(255,255,255,.96) !important;
}

.hero-luxe, .hero-luxe .hero-title, .hero-luxe .hero-subtitle, .hero-luxe .hero-note,
.hero-luxe .video-card .fw-semibold, .hero-luxe .video-sub,
.hero-luxe .icon-link-card span {
    color: rgba(255,255,255,.98) !important;
}

    .hero-luxe .video-sub {
        opacity: .88;
    }


/* ============================
   V16: Global bright text (dark UI)
   ============================ */
body.dark-theme,
body.dark-theme p,
body.dark-theme span,
body.dark-theme small,
body.dark-theme li,
body.dark-theme dt,
body.dark-theme dd,
body.dark-theme label,
body.dark-theme .section-subtitle,
body.dark-theme .text-muted,
body.dark-theme .breadcrumb,
body.dark-theme .breadcrumb * {
    color: rgba(255,255,255,.96) !important;
}

    body.dark-theme a,
    body.dark-theme a:visited {
        color: rgba(255,255,255,.98) !important;
    }

        body.dark-theme a:hover,
        body.dark-theme a:focus {
            color: #ffffff !important;
            text-decoration: none;
        }

    /* Sub-nav links (avoid faint blue) */
    body.dark-theme .sub-navigation .sub-nav-link,
    body.dark-theme .sub-navigation .sub-nav-link .nav-label,
    body.dark-theme .sub-navigation .sub-nav-link i {
        color: #ffffff !important;
    }

    /* User dropdown text inside dark menu */
    body.dark-theme .subnav-floating .text-dark,
    body.dark-theme .subnav-floating .text-muted,
    body.dark-theme .subnav-floating .dropdown-item-text,
    body.dark-theme .dropdown-menu .text-dark,
    body.dark-theme .dropdown-menu .text-muted {
        color: rgba(255,255,255,.96) !important;
    }

    /* Hero + video cards */
    body.dark-theme .hero-luxe .icon-link-card,
    body.dark-theme .hero-luxe .icon-link-card span,
    body.dark-theme .hero-luxe .video-card .fw-semibold,
    body.dark-theme .hero-luxe .video-sub,
    body.dark-theme .hero-luxe .hero-note {
        color: rgba(255,255,255,.98) !important;
    }

    /* Reviews */
    body.dark-theme .review-slide-card,
    body.dark-theme .review-slide-card * {
        color: rgba(255,255,255,.96) !important;
    }

        /* Force gold stars in dark theme (override global white) */
        body.dark-theme .review-rating .rating-stars i,
        body.dark-theme .review-slide-card .review-rating .rating-stars i {
            color: #ffc107 !important;
        }

    /* If you have interactive rating stars (labels) */
    body.dark-theme .review-stars label {
        color: rgba(255,255,255,.35) !important; /* unselected */
    }

        body.dark-theme .review-stars input:checked ~ label,
        body.dark-theme .review-stars label:hover,
        body.dark-theme .review-stars label:hover ~ label {
            color: #ffc107 !important; /* selected/hover = gold */
        }


    /* Platforms section */
    body.dark-theme .platforms-section {
        background: #0b0b0b !important;
        color: rgba(255,255,255,.96) !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

        body.dark-theme .platforms-title,
        body.dark-theme .platforms-section h3,
        body.dark-theme .platforms-section h4,
        body.dark-theme .platforms-section p {
            color: #ffffff !important;
        }

    /* ✅ Ensure all section titles are readable in dark theme */
    body.dark-theme .section-title {
        color: #ffffff !important;
        opacity: 1 !important;
        background: none !important;
        -webkit-text-fill-color: #ffffff !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        text-shadow: 0 2px 18px rgba(0,0,0,.75) !important;
    }

.sst-particle-hero {
    background: transparent !important;
}

/* === UI FIXES (added by ChatGPT) === */

/* Make support clients titles readable on dark backgrounds */
body.dark-theme .support-clients .client-card h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    letter-spacing: .2px;
}

body.dark-theme .support-clients .client-card p {
    color: rgba(255,255,255,.86) !important;
    font-size: 1rem !important;
}

/* Keep outline-light buttons readable in dark theme too */
body.dark-theme .btn-outline-light:hover,
body.dark-theme .btn-outline-light:focus,
body.dark-theme .btn-outline-light:active {
    background-color: #0f172a !important;
    border-color: rgba(255,255,255,.25) !important;
    color: #fff !important;
}
