/*
 * German Experts - Mobile Responsiveness & Touch Optimizations CSS Fixes
 * Targets viewport widths: 320px, 375px, 390px, 414px, 768px
 */

/* 1. Global Viewport & Container Fixes */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Enforce borders to count in padding and widths */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 2. Responsive Grid & Stacking Controls for Tablets/Phones */
@media screen and (max-width: 768px) {
    /* Touch-Friendly Inputs & Fields (iOS Safari Zoom Prevention) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
        min-height: 46px !important; /* Enforces touch-friendly targets */
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    /* Touch-Friendly Buttons */
    button, 
    .btn, 
    .button, 
    a.btn, 
    input[type="submit"], 
    input[type="button"],
    .proceed-payment-btn,
    .cancel-btn,
    .login-button,
    .signup-button,
    .continue-shopping-btn,
    .explore-btn,
    .booking-btn {
        min-height: 46px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        touch-action: manipulation;
        box-sizing: border-box !important;
    }

    /* Main Content Containers */
    .content {
        padding: 24px 16px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Grids to collapse and stack */
    .services-grid, 
    .specialists-grid, 
    .brands-specialization,
    .about-grid,
    .products-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    /* Cards adaptations */
    .card, .service-card, .product-card, .stats-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* About page stats container */
    .stats-container {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 16px !important;
        width: 100% !important;
    }

    .stats-box {
        width: 100% !important;
    }

    /* Contact Us layout stacking */
    .contact-container {
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .contact-info, .contact-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* Map iframe responsive sizing */
    .map-container, .map-container iframe {
        width: 100% !important;
        height: 250px !important;
        border-radius: 12px !important;
    }

    /* Tables to scroll horizontally instead of overflowing parent containers */
    table, .order-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-collapse: collapse;
    }

    /* Modals sizing on mobile */
    .cart-modal-content, .modal-content, .payment-success-content {
        width: 92% !important;
        max-width: 400px !important;
        padding: 24px 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .cart-modal-close, .modal-close {
        top: 12px !important;
        right: 12px !important;
    }

    html[dir="rtl"] .cart-modal-close, html[dir="rtl"] .modal-close {
        right: auto !important;
        left: 12px !important;
    }

    /* Hide scroll indicator on mobile */
    .scroll-indicator {
        display: none !important;
    }
}

/* 3. Hero Banner Mobile Fluid layout */
@media screen and (max-width: 768px) {
    .banner {
        height: auto !important;
        min-height: 420px !important;
        padding: 80px 16px 40px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .banner-content {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .hero-brand-title {
        font-size: 2.8rem !important;
        letter-spacing: 1.5px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    html[dir="rtl"] .hero-brand-title {
        font-size: 2.4rem !important;
        letter-spacing: 0 !important;
    }

    .hero-tagline {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    html[dir="rtl"] .hero-tagline {
        font-size: 1.2rem !important;
    }

    .hero-specs {
        font-size: 0.95rem !important;
        margin-bottom: 24px !important;
        line-height: 1.4 !important;
    }

    html[dir="rtl"] .hero-specs {
        font-size: 0.9rem !important;
    }

    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .hero-actions .explore-btn, 
    .hero-actions .booking-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
    }
}

/* 4. Mobile Adjustments for Smartphones (width <= 480px, covers 375px, 390px, 414px) */
@media screen and (max-width: 480px) {
    /* Header/Navbar Brand Spacing and Wrapping */
    .navbar {
        padding: 8px 10px !important;
    }

    .logo {
        height: 32px !important;
        margin-right: 2px !important;
    }

    /* Hide country flag to fit icons cleanly */
    .flag, #lang-flag {
        display: none !important;
    }

    .navbar-right {
        gap: 6px !important;
    }

    .user-icon, .cart-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .lang {
        font-size: 12px !important;
        margin-left: 2px !important;
    }

    /* Headings font sizes downscaling for smaller displays */
    h1, .content h1, .page-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    h2, .content h2 {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
    }

    h3, .content h3 {
        font-size: 1.15rem !important;
    }

    .content p, p.lead {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
    }

    /* Form and Login boxes padding adjustments */
    .login-container, .signup-container, .checkout-container {
        padding: 16px 12px !important;
        margin: 10px auto 24px auto !important;
        width: 100% !important;
        max-width: 95vw !important;
        border-radius: 12px !important;
    }

    .login-box, .signup-box {
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        width: 100% !important;
    }

    /* Products Category buttons wrap cleanly */
    .category-tabs, .product-categories {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .category-tab, .category-btn {
        font-size: 13px !important;
        padding: 8px 12px !important;
        min-height: auto !important;
    }

    /* Footer Social list wrap */
    .footer-social {
        gap: 6px !important;
    }

    .footer-payments {
        gap: 6px !important;
    }
}

/* 5. Extra Small Screens Adjustments (width <= 320px) */
@media screen and (max-width: 320px) {
    .navbar-right {
        gap: 4px !important;
    }

    h1, .content h1, .page-title {
        font-size: 1.5rem !important;
    }

    /* Cart/User icon downsize */
    .user-icon, .cart-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    .cart-count {
        top: -8px !important;
        right: -6px !important;
        font-size: 10px !important;
        padding: 1px 3px !important;
    }
}

/* 6. RTL (Arabic) Specific Mobile Flex Adjustments */
html[dir="rtl"] .navbar-menu {
    left: auto !important;
    right: -100% !important;
}

html[dir="rtl"] .navbar-menu.active {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .navbar-left, 
html[dir="rtl"] .navbar-right {
    flex-direction: row-reverse !important;
}