/**
 * Mobile No Shadows
 * Removes excessive shadows from boxes and cards on mobile devices
 */

/* Remove shadows on mobile */
@media (max-width: 767px) {
    /* General box shadows */
    .box,
    .card,
    .widget,
    .panel,
    [class*="shadow"],
    .shadow-sm,
    .shadow-md,
    .shadow-lg,
    .shadow-xl {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
    }
    
    /* Service boxes */
    .service,
    .service__item,
    .xb-service,
    .xb-service-box,
    .service-card {
        box-shadow: none !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    /* Blog cards */
    .xb-blog,
    .xb-blog .xb-item--inner,
    .blog-card,
    .post-card {
        box-shadow: none !important;
        border: 1px solid #e8e8e8 !important;
    }
    
    /* Team cards */
    .team__item,
    .xb-team,
    .team-card,
    .team-member {
        box-shadow: none !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    /* Testimonial cards */
    .testimonial-slide .xb-testimonial,
    .xb-testimonial,
    .testimonial-card,
    .review-card {
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* Pricing tables */
    .pricing__item,
    .xb-pricing,
    .pricing-card,
    .price-box {
        box-shadow: none !important;
        border: 1px solid #e8e8e8 !important;
    }
    
    /* Contact forms */
    .contact__form,
    .xb-contact-form,
    .form-wrapper,
    .contact-box {
        box-shadow: none !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    /* FAQ boxes */
    .accordion_box .block,
    .faq-item,
    .accordion-item {
        box-shadow: none !important;
        border: 1px solid #e8e8e8 !important;
    }
    
    /* Counter boxes */
    .counter__item,
    .xb-counter,
    .counter-box,
    .stat-box {
        box-shadow: none !important;
    }
    
    /* Feature boxes */
    .feature,
    .feature__item,
    .xb-feature,
    .feature-box {
        box-shadow: none !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    /* Portfolio items */
    .portfolio__item,
    .gallery__item,
    .work-item {
        box-shadow: none !important;
    }
    
    /* CTA sections */
    .cta,
    .xb-cta,
    .call-to-action {
        box-shadow: none !important;
    }
    
    /* Newsletter forms */
    .newsletter,
    .newsletter__form,
    .subscribe-form {
        box-shadow: none !important;
    }
    
    /* About sections */
    .about__img,
    .xb-about__img {
        box-shadow: none !important;
    }
    
    /* Video sections */
    .video__wrapper,
    .video-box {
        box-shadow: none !important;
    }
    
    /* Modal/Popup */
    .modal-content,
    .popup-content {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    /* Buttons - keep subtle shadow for depth */
    .btn,
    .xb-btn,
    .thm-btn,
    button {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }
    
    /* Cards with hover effects */
    .card:hover,
    .box:hover,
    .service__item:hover,
    .xb-blog:hover {
        box-shadow: none !important;
        transform: none !important;
    }
    
    /* Remove drop shadows from images */
    img {
        filter: none !important;
        -webkit-filter: none !important;
    }
    
    /* Remove text shadows */
    h1, h2, h3, h4, h5, h6,
    .title,
    .heading {
        text-shadow: none !important;
    }
    
    /* Specific component shadows */
    .swiper-slide {
        box-shadow: none !important;
    }
    
    .slick-slide {
        box-shadow: none !important;
    }
    
    /* Header/Navigation */
    .header-area,
    .navbar,
    .mobile-menu {
        box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
    }
    
    /* Footer */
    footer,
    .site-footer {
        box-shadow: none !important;
    }
    
    /* Sidebar widgets */
    .sidebar .widget,
    .widget-area .widget {
        box-shadow: none !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    /* Search forms */
    .search-form,
    .search-box {
        box-shadow: none !important;
        border: 1px solid #e8e8e8 !important;
    }
    
    /* Pagination */
    .pagination,
    .page-links {
        box-shadow: none !important;
    }
    
    /* Breadcrumb */
    .breadcrumb {
        box-shadow: none !important;
    }
    
    /* Back to top button */
    .xb-backtotop,
    .back-to-top {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    /* WhatsApp button */
    .whatsapp-button,
    .floating-whatsapp {
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }
}

/* Extra small devices - even less shadows */
@media (max-width: 480px) {
    /* Remove all borders too for cleaner look */
    .service__item,
    .xb-blog .xb-item--inner,
    .team__item,
    .pricing__item,
    .contact__form,
    .accordion_box .block,
    .feature__item {
        border: none !important;
        background: #fafafa !important;
    }
    
    /* Buttons completely flat */
    .btn,
    .xb-btn,
    .thm-btn,
    button {
        box-shadow: none !important;
    }
    
    /* Header completely flat */
    .header-area,
    .navbar {
        box-shadow: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
}

/* Ensure focus states are still visible */
@media (max-width: 767px) {
    *:focus {
        outline: 2px solid var(--color-primary) !important;
        outline-offset: 2px !important;
    }
    
    button:focus,
    .btn:focus,
    a:focus {
        box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
    }
}