/*
 * Mobile Simple CSS - يعمل على جميع المتصفحات
 * بدون selectors معقدة
 */

@media screen and (max-width: 900px) {
    
    /* ===== RESET ===== */
    * {
        box-sizing: border-box !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* ===== DISABLE ALL ANIMATIONS ===== */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    
    /* ===== FORCE ALL VISIBLE - Override kota-animations ===== */
    .js-ready section,
    .js-ready section:not(.hero-video),
    .js-ready .reveal-child,
    .js-ready .card,
    .js-ready .service-card,
    .js-ready .stat-item,
    .js-ready .creative-card,
    .js-ready .glow-card,
    .stagger-children > *,
    .hero-title,
    .hero-subtitle,
    .cta-group,
    .trust-badges,
    section,
    article,
    .card,
    .spiral-card,
    .stats-card,
    .client-card,
    .service-card,
    .testimonial-card,
    .value-card,
    .creative-card,
    .glow-card,
    .stat-item,
    .reveal-child,
    .reveal-up,
    .reveal-scale,
    .reveal-bounce {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }
    
    img {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ===== NAVBAR - Styles moved to navbar.php ===== */

    /* ===== HERO ===== */
    .hero,
    .hero-section {
        min-height: 100vh !important;
        padding: 80px 1rem 2rem !important;
    }
    
    .hero-content,
    .hero-content-wrapper {
        text-align: center !important;
    }
    
    .hero h1,
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .cta-group {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .cta-btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    /* ===== SECTIONS ===== */
    section,
    .section {
        padding: 3rem 1rem !important;
    }
    
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    .section-title,
    .section-header h2 {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .section-subtitle {
        font-size: 0.95rem !important;
        text-align: center !important;
    }

    /* ===== SPIRAL SCROLL ===== */
    .spiral-scroll {
        height: auto !important;
        padding: 3rem 1rem !important;
    }
    
    .spiral-scroll__container {
        position: relative !important;
        height: auto !important;
    }
    
    .spiral-scroll__cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        height: auto !important;
    }
    
    .spiral-card {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    
    .spiral-card.is-active,
    .spiral-card.is-prev {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .spiral-card__inner {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    }
    
    .spiral-card__image {
        position: relative !important;
        width: 100% !important;
        height: 180px !important;
        order: 1 !important;
    }
    
    .spiral-card__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .spiral-card__content {
        position: relative !important;
        width: 100% !important;
        padding: 1.25rem !important;
        order: 2 !important;
        transform: none !important;
    }
    
    .spiral-card__num {
        font-size: 0.8rem !important;
        color: #5a8ad8 !important;
    }
    
    .spiral-card__title {
        font-size: 1.25rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .spiral-card__text {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #64748b !important;
    }

    /* ===== STATS ===== */
    .stats-scroll,
    .section-stats {
        height: auto !important;
        padding: 3rem 1rem !important;
    }
    
    .stats-scroll__container {
        position: relative !important;
        height: auto !important;
    }
    
    .stats-scroll__cards {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        height: auto !important;
    }
    
    .stats-card {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .stats-card.is-active,
    .stats-card.is-prev,
    .stats-card.is-next {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .stats-card__inner {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    }
    
    .stats-card__icon {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .stats-card__number {
        font-size: 2rem !important;
        font-weight: 700 !important;
        color: #5a8ad8 !important;
    }
    
    .stats-card__label {
        font-size: 0.875rem !important;
        color: #64748b !important;
    }

    /* ===== CLIENTS ===== */
    .clients-scroll,
    .section-clients {
        height: auto !important;
        padding: 3rem 1rem !important;
    }
    
    .clients-scroll__container {
        position: relative !important;
        height: auto !important;
    }
    
    .clients-scroll__cards {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        height: auto !important;
    }
    
    .client-card {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .client-card.is-active,
    .client-card.is-prev,
    .client-card.is-next {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .client-card__inner {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        text-align: center !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    }

    /* ===== VALUES / WHY CHOOSE US ===== */
    .values-grid,
    .features-grid,
    .why-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .value-card,
    .feature-card {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    }
    
    .value-card__icon,
    .feature-card__icon {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .value-card__title,
    .feature-card__title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .value-card__text,
    .feature-card__text {
        font-size: 0.9rem !important;
        color: #64748b !important;
    }

    /* ===== SERVICES ===== */
    .services-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .service-card {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    }

    /* ===== TESTIMONIALS ===== */
    .testimonials-grid,
    .testimonials-slider {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .testimonial-card {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    }

    /* ===== CTA SECTION ===== */
    .cta-section {
        padding: 3rem 1rem !important;
        text-align: center !important;
    }
    
    .cta-section h2 {
        font-size: 1.5rem !important;
    }

    /* ===== FOOTER ===== */
    .footer,
    footer {
        padding: 3rem 1rem 1.5rem !important;
    }
    
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    .footer-section h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .social-links {
        justify-content: center !important;
    }
    
    .footer-bottom {
        text-align: center !important;
        padding-top: 1.5rem !important;
        margin-top: 1.5rem !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* ===== CHAT WIDGET ===== */
    .chat-widget,
    .whatsapp-float {
        bottom: 20px !important;
        right: auto !important;
        left: 20px !important;
    }

    /* ===== GRIDS TO SINGLE COLUMN ===== */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* ===== HIDE DESKTOP ONLY ===== */
    .desktop-only,
    .hide-mobile {
        display: none !important;
    }
    
    /* ===== SHOW MOBILE ONLY ===== */
    .mobile-only,
    .show-mobile {
        display: block !important;
    }

}

/* ===== DARK MODE ===== */
@media screen and (max-width: 900px) {
    /* Navbar dark mode - moved to navbar.php */
    
    [data-theme="dark"] .spiral-card__inner,
    [data-theme="dark"] .stats-card__inner,
    [data-theme="dark"] .client-card__inner,
    [data-theme="dark"] .value-card,
    [data-theme="dark"] .service-card,
    [data-theme="dark"] .testimonial-card {
        background: #1e293b !important;
    }
    
    [data-theme="dark"] .spiral-card__text,
    [data-theme="dark"] .stats-card__label,
    [data-theme="dark"] .value-card__text {
        color: #94a3b8 !important;
    }
}