/*
 * 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;
}

/* ==========================================================================
   7. Premium Light / Dark Theme Support
   ========================================================================== */

/* Theme variables and tokens */
:root {
    --theme-transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                        color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Theme Toggle Button Styling */
    --toggle-bg: rgba(255, 255, 255, 0.1);
    --toggle-color: #ffffff;
    --toggle-hover-bg: rgba(255, 255, 255, 0.2);
}

/* Base body transition */
body, .page-wrapper {
    transition: var(--theme-transition);
}

/* Light Theme Variables (Default) */
:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-navbar: #000000;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --border-color: #e0e0e0;
    --border-input: #cccccc;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --modal-overlay: rgba(0, 0, 0, 0.5);
}

/* Dark Theme Variables */
html.dark-theme {
    --bg-primary: #0f0f11;
    --bg-secondary: #16161a;
    --bg-navbar: #08080a;
    --text-primary: #f3f3f5;
    --text-secondary: #c2c2cb;
    --text-muted: #8e8e9a;
    --border-color: #2b2b35;
    --border-input: #3e3e4a;
    --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    --modal-overlay: rgba(0, 0, 0, 0.75);

    /* Local variables mapping */
    --text-main: #f3f3f5;
    --bg-light: #0f0f11;
    --bg-dark: #0f0f11;
    --bg-card: #16161a;
    --input-bg: #1e1e24;
    
    /* checkout.css variables */
    --primary-color: #f3f3f5;
    --secondary-color: #c2c2cb;
    --background-color: #0f0f11;
    --card-background: #16161a;
    --text-color: #f3f3f5;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: var(--toggle-bg) !important;
    border: none !important;
    cursor: pointer !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--toggle-color) !important;
    transition: background-color 0.2s, transform 0.2s !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.theme-toggle-btn:hover {
    background: var(--toggle-hover-bg);
    transform: scale(1.05);
}

.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show/Hide icons based on theme state */
html.dark-theme .theme-toggle-btn .sun-icon {
    display: block;
}
html.dark-theme .theme-toggle-btn .moon-icon {
    display: none;
}
.theme-toggle-btn .sun-icon {
    display: none;
}
.theme-toggle-btn .moon-icon {
    display: block;
}

/* --- Dark Theme Overrides --- */
html.dark-theme body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-theme .page-wrapper {
    background-color: var(--bg-primary) !important;
}

/* Navbar adaptations */
html.dark-theme .navbar {
    background-color: var(--bg-navbar) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Content cards and boxes */
html.dark-theme .card,
html.dark-theme .service-card,
html.dark-theme .service-quick-card,
html.dark-theme .product-card,
html.dark-theme .stats-box,
html.dark-theme .contact-card,
html.dark-theme .form-card,
html.dark-theme .payment-choice-content,
html.dark-theme .cart-modal-content,
html.dark-theme .payment-success-content,
html.dark-theme .service-modal-content,
html.dark-theme .location-row-card,
html.dark-theme .user-dropdown-content,
html.dark-theme .login-container,
html.dark-theme .signup-container,
html.dark-theme .checkout-container,
html.dark-theme .profile-card {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
    transition: var(--theme-transition);
}

/* Inputs, Textareas, Selects */
html.dark-theme input[type="text"],
html.dark-theme input[type="email"],
html.dark-theme input[type="tel"],
html.dark-theme input[type="password"],
html.dark-theme input[type="number"],
html.dark-theme select,
html.dark-theme textarea {
    background-color: #1e1e24 !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-input) !important;
    transition: var(--theme-transition);
}

html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Typography Overrides */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme .content h1,
html.dark-theme .content h2,
html.dark-theme .content h3,
html.dark-theme .content p,
html.dark-theme p,
html.dark-theme li,
html.dark-theme label,
html.dark-theme .dropdown-item,
html.dark-theme #cart-total,
html.dark-theme .payment-choice-message,
html.dark-theme .about-text p,
html.dark-theme .service-card-title,
html.dark-theme .product-title,
html.dark-theme .product-desc {
    color: var(--text-primary) !important;
}

html.dark-theme .content p,
html.dark-theme .hero-subtitle-en,
html.dark-theme .hero-subtitle-ar,
html.dark-theme .text-muted,
html.dark-theme .contact-card p,
html.dark-theme .stats-box p {
    color: var(--text-secondary) !important;
}

/* Icons, Borders, and Dividers */
html.dark-theme .info-text-block p {
    color: var(--text-secondary) !important;
}

html.dark-theme hr,
html.dark-theme .divider,
html.dark-theme .dropdown-item {
    border-color: var(--border-color) !important;
}

html.dark-theme .user-dropdown-content a {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color);
}

html.dark-theme .user-dropdown-content a:hover {
    background-color: var(--bg-primary) !important;
}

/* Tables and order summaries */
html.dark-theme table,
html.dark-theme th,
html.dark-theme td,
html.dark-theme .order-table,
html.dark-theme .order-table th,
html.dark-theme .order-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
}

html.dark-theme th {
    background-color: #22222a !important;
}

/* WhatsApp float adjustment for Dark Mode */
html.dark-theme .whatsapp-float {
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
}

/* Form focus border colors */
html.dark-theme input:focus,
html.dark-theme select:focus,
html.dark-theme textarea:focus,
html.dark-theme .input-wrapper input:focus {
    background-color: var(--input-bg) !important;
    background: var(--input-bg) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2) !important;
    color: var(--text-primary) !important;
}

/* Hardcoded text & bg adjustments for Dark Mode */

/* Form Group Labels in Login / Profile / Checkout */
html.dark-theme label,
html.dark-theme label.ar,
html.dark-theme .form-group label {
    color: var(--text-secondary) !important;
}

/* Links & buttons */
html.dark-theme .forgot-password a,
html.dark-theme .signup-link a,
html.dark-theme .back-to-login a,
html.dark-theme .resend-button,
html.dark-theme .resend-text {
    color: var(--text-secondary) !important;
}
html.dark-theme .forgot-password a:hover,
html.dark-theme .signup-link a:hover,
html.dark-theme .back-to-login a:hover,
html.dark-theme .resend-button:hover {
    color: var(--gold) !important;
}

/* Profile inputs border and navigation */
html.dark-theme .input-wrapper input {
    border-color: var(--border-input) !important;
}
html.dark-theme .tabs-navigation {
    border-color: var(--border-color) !important;
}
html.dark-theme .profile-actions .button,
html.dark-theme .orders-actions .button {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: transparent !important;
}
html.dark-theme .profile-actions .button:hover,
html.dark-theme .orders-actions .button:hover {
    border-color: var(--gold-dark) !important;
    color: var(--gold) !important;
    background-color: rgba(236, 201, 75, 0.05) !important;
}

/* Orders Page dark mode enhancements */
html.dark-theme .order-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
html.dark-theme .order-card-header {
    background: #1f1f26 !important;
}
html.dark-theme .items-list li {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}
html.dark-theme .order-card.expanded .order-card-body {
    border-color: var(--border-color) !important;
}
html.dark-theme .arrow-icon {
    color: var(--text-muted) !important;
}

/* Checkout Page dark mode enhancements */
html.dark-theme .cart-summary {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
html.dark-theme .cart-item {
    border-bottom-color: var(--border-color) !important;
}
html.dark-theme .item-name {
    color: var(--text-primary) !important;
}
html.dark-theme .item-price-sar {
    color: var(--text-muted) !important;
}
html.dark-theme .cart-total {
    color: var(--text-primary) !important;
    border-top-color: var(--border-color) !important;
}
html.dark-theme button[type="submit"] {
    color: #000 !important; /* Keep button text black/dark for contrast against gold background */
}
html.dark-theme .order-success-content {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Homepage & general layout elements text overrides */
html.dark-theme #home-title,
html.dark-theme #home-title-ar,
html.dark-theme .section-title,
html.dark-theme .service-quick-card h3,
html.dark-theme .location-details h3,
html.dark-theme .payment-choice-content h3,
html.dark-theme #payment-success-message {
    color: var(--text-primary) !important;
}

html.dark-theme .section-desc,
html.dark-theme .service-quick-card p,
html.dark-theme .location-details p,
html.dark-theme .payment-choice-content p {
    color: var(--text-secondary) !important;
}

/* Dropdown icons */
html.dark-theme .dropdown-icon {
    color: var(--text-muted) !important;
}
html.dark-theme .dropdown-item:hover .dropdown-icon {
    color: var(--gold) !important;
}

/* Modal text overrides in main pages */
html.dark-theme .cart-modal-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
html.dark-theme .cart-modal-content h1,
html.dark-theme .cart-modal-content h2,
html.dark-theme .cart-modal-content h3,
html.dark-theme .cart-modal-content div,
html.dark-theme .cart-modal-content span {
    color: var(--text-primary) !important;
}
html.dark-theme #cart-empty-msg {
    color: var(--text-muted) !important;
}
html.dark-theme .proceed-payment-btn {
    color: #000 !important; /* Keep black text for contrast against gold background */
}
html.dark-theme .proceed-payment-btn:hover {
    color: #000 !important;
}

/* Sleek Cancel / Secondary Buttons in Dark Mode */
html.dark-theme .cancel-btn,
html.dark-theme .payment-choice-btn.cancel-btn {
    background: #2b2b35 !important;
    color: var(--text-primary) !important;
}
html.dark-theme .cancel-btn:hover,
html.dark-theme .payment-choice-btn.cancel-btn:hover {
    background: #3e3e4a !important;
    color: var(--text-primary) !important;
}

/* Services Page detail modal overrides */
html.dark-theme .service-modal-body,
html.dark-theme .service-modal-body h2,
html.dark-theme .service-modal-body p,
html.dark-theme .service-modal-body ul li {
    color: var(--text-primary) !important;
}
html.dark-theme .service-modal-close {
    color: var(--text-muted) !important;
}
html.dark-theme .service-modal-close:hover {
    color: var(--text-primary) !important;
}

/* Services page intro box override */
html.dark-theme .services-intro {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.04) 0%, rgba(22, 22, 26, 0.85) 100%) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    box-shadow: var(--card-shadow) !important;
}
html.dark-theme .services-intro p {
    color: var(--text-primary) !important;
}

/* About Us & Contact Us Containers */
html.dark-theme .content {
    background-color: var(--bg-main) !important;
    background: var(--bg-main) !important;
}
html.dark-theme .intro-glass-box,
html.dark-theme .feature-card,
html.dark-theme .contact-section {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
}
html.dark-theme .intro-glass-box:before,
html.dark-theme .contact-section {
    border-right-color: var(--gold) !important;
    border-left-color: var(--gold) !important;
}
html.dark-theme .info-row {
    border-bottom-color: var(--border-color) !important;
}
html.dark-theme .map-container {
    border-color: var(--border-color) !important;
}

/* About Us, Contact Us, & Products Specific Text Overrides */
html.dark-theme #about-title,
html.dark-theme #about-title-ar,
html.dark-theme #contact-title,
html.dark-theme #contact-title-ar,
html.dark-theme #products-title,
html.dark-theme #products-title-ar,
html.dark-theme .product-name-en,
html.dark-theme .product-name-ar,
html.dark-theme .intro-text .lead-text,
html.dark-theme .intro-glass-box h3,
html.dark-theme .feature-card h4,
html.dark-theme .form-card h3,
html.dark-theme .contact-section h3,
html.dark-theme .info-text-block h4,
html.dark-theme .outro-text {
    color: var(--text-primary) !important;
}

html.dark-theme #contact-desc,
html.dark-theme #contact-desc-ar,
html.dark-theme #products-desc,
html.dark-theme #products-desc-ar,
html.dark-theme .intro-text p,
html.dark-theme .intro-glass-box p,
html.dark-theme .feature-card p,
html.dark-theme .form-card p,
html.dark-theme .contact-section p,
html.dark-theme .info-text-block p,
html.dark-theme .info-text-block .accent-link {
    color: var(--text-secondary) !important;
}

html.dark-theme .product-image {
    background-color: var(--bg-main) !important;
}

/* Premium Form Input styling overrides */
html.dark-theme .premium-form input,
html.dark-theme .premium-form select,
html.dark-theme .premium-form textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
}
html.dark-theme .premium-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}