/**
 * Infomir Store - Ultra-Responsive Mobile Engine
 * Ensures 100% mobile-friendly layout across all screen sizes (320px to 4K)
 * Fixes touch targets, eliminates horizontal scrolling, adapts grids, drawer navigation & checkout
 */

/* 1. Global Box Sizing & Fluid Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Fluid Images & Media */
img, picture, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* 3. Touch Optimizations & Form Zoom Prevention */
button, a, input, select, textarea {
    touch-action: manipulation;
}

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS Safari auto-zoom on input focus */
    }
}

/* 4. Responsive Containers & Header Wrappers */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.site-header,
.site-header .container,
.header,
.header .container,
.promo,
.promo__wrapper,
.main,
.footer {
    max-width: 100vw !important;
    overflow-x: hidden;
}

/* Prevent promo banner close button from overflowing viewport */
.promo .close-btn {
    right: 10px !important;
}

@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* 5. Mobile Drawer Navigation & Header */
@media (max-width: 991px) {
    .site-header .container,
    .header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .hamburger {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        z-index: 100000 !important;
    }

    /* Fixed full-height mobile drawer starting at top: 0 */
    .nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 30px 24px 40px !important;
        background: #1e2227 !important;
        color: #fff !important;
        z-index: 99999 !important;
        transform: translateX(-105%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        visibility: visible !important;
    }

    .nav.open,
    .nav.is-active,
    body.nav-open .nav {
        transform: translateX(0) !important;
    }

    /* Body scroll lock and dark backdrop when menu is open */
    body.nav-open {
        overflow: hidden !important;
        touch-action: none;
    }

    body.nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 99995 !important;
        pointer-events: auto;
    }

    .nav__wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .nav__header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .nav__login {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .nav__list_mob {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 24px 0 !important;
    }

    .nav__list_mob a {
        display: block !important;
        color: #f1f3f5 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 10px 0 !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: color 0.2s, padding-left 0.2s !important;
    }

    .nav__list_mob a:hover,
    .nav__list_mob a:active {
        color: #f91c3d !important;
        padding-left: 6px !important;
    }

    .nav__sub-menu {
        list-style: none !important;
        padding-left: 14px !important;
        margin: 4px 0 10px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .nav__sub-menu a {
        color: #9aa5b1 !important;
        font-size: 14px !important;
        padding: 6px 0 !important;
        border-bottom: none !important;
    }

    /* Language dropdown responsive positioning */
    .languages__drop-down {
        right: 0 !important;
        left: auto !important;
    }
}

/* 6. Checkout Page Ultra-Responsiveness */
@media (max-width: 991px) {
    .checkout-grid-wrap {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .checkout__box-card {
        padding: 2rem 1.5rem !important;
    }
}

/* Action button rows in checkout */
.checkout-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

@media (max-width: 640px) {
    .checkout-main-wrap {
        padding: 1.5rem 0 3.5rem !important;
    }

    .checkout__box-card {
        padding: 1.5rem 1rem !important;
        border-radius: 8px;
    }

    .checkout__box-title {
        font-size: 1.4rem !important;
        margin-bottom: 1.2rem !important;
    }

    /* Clean numbered stepper on mobile */
    .checkout__nav-list {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        margin: 0 auto 1.8rem !important;
        padding: 0 5px !important;
    }

    .checkout__nav-item {
        display: flex !important;
        align-items: center !important;
    }

    .checkout__nav-link {
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 2px !important;
        gap: 0 !important;
    }

    .checkout__nav-name {
        display: none !important; /* Hide long text on tiny mobile screens */
    }

    .checkout__nav-index {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .checkout__nav-list .line {
        flex: 1 !important;
        min-width: 25px !important;
        height: 2px !important;
        margin: 0 8px !important;
    }

    /* Cart item rows stacked on phone */
    .cart-tab__product {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        padding: 1.2rem 0 !important;
    }

    .cart-item-top {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    .cart-item-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-top: 0.8rem;
        border-top: 1px dashed #eef0f2;
    }

    /* Stack buttons vertically on mobile for thumb-friendly tap */
    .checkout-actions-row,
    #cart-actions-bar {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 2rem !important;
    }

    .checkout-btn,
    .checkout-actions-row .checkout-btn,
    #cart-actions-bar .checkout-btn,
    #btn-place-order {
        width: 100% !important;
        min-height: 50px !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Form rows 1-column on mobile */
    .form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Shipping & Payment Options */
    .shipping-option, .payment-option {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    /* Trust badges grid */
    .trust-badges-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .trust-badges-grid > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .trust-badge-icon {
        margin-bottom: 0 !important;
    }
}

/* Mobile Collapsible Order Summary Banner */
.mobile-summary-banner {
    display: none;
    background: #fbfcfd;
    border: 1px solid #e5e8eb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    cursor: pointer;
}

@media (max-width: 991px) {
    .mobile-summary-banner {
        display: block !important;
    }
}

.mobile-summary-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #edf0f2;
}

.mobile-summary-content {
    padding: 16px;
    background: #fff;
}

/* 7. Product Catalog & Grid Responsiveness */
@media (max-width: 768px) {
    .products,
    .products-grid,
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 15px !important;
    }

    .product-card,
    .products__item {
        margin-bottom: 0 !important;
    }

    /* Product Titles & Pricing readable on phone */
    .woocommerce-loop-product__title,
    .product__title {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .price {
        font-size: 16px !important;
    }
}

/* 8. Specifications Tables Mobile Scroll */
.product__specs-table,
.shop_attributes,
table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 9. Slide-out Mini-Cart Drawer on Mobile */
@media (max-width: 500px) {
    .mini-cart__wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}