/**
 * ============================================
 * SMALL SCREEN HEADER FIX
 * ============================================
 * Fix header icon positioning and spacing on small mobile devices
 * Prevents language button from overlapping account icon
 * IMPORTANT: Uses screen and orientation queries to target specific devices
 */

/* ============================================
 * TARGET SPECIFIC SMALL MOBILE DEVICES
 * iPhone SE, small Androids (< 480px width)
 * ============================================ */
@media screen and (max-width: 480px) {
    /* Reduce header padding for more space */
    header.ecommerce-header {
        padding: 0 4px !important;
    }

    .main-nav {
        padding: 0 !important;
    }

    .main-nav-row {
        align-items: center !important;
        padding: 0 !important;
    }

    /* Logo column - make smaller */
    .logo-col {
        flex: 0 0 auto !important;
        max-width: 100px !important;
        padding: 0 2px !important;
    }

    .header-logo-responsive,
    .nav-logo {
        max-height: 38px !important;
        width: auto !important;
    }

    /* Search column - hidden on small screens */
    .search-col {
        display: none !important;
    }

    /* Icons column - more space and proper alignment */
    .icons-col,
    .col-icons {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        padding: 0 2px !important;
        flex-wrap: nowrap !important;
    }

    /* All icon items */
    .col-icons > *,
    .col-icons .header-icon-enhanced,
    .col-icons a,
    .col-icons .dropdown {
        margin: 0 !important;
        padding: 1px 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Icon sizes - SMALLER for small screens */
    .col-icons i {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* Search icon - smaller */
    .col-icons .search-icon,
    .col-icons .header-search,
    .col-icons [class*="search"] i {
        font-size: 12px !important;
    }

    /* Cart icon - smaller */
    .col-icons .cart-icon i,
    .col-icons .header-cart i,
    .col-icons [class*="cart"] i {
        font-size: 12px !important;
    }

    /* Account icon - smaller */
    .col-icons .user-icon i,
    .col-icons .account-icon i,
    .col-icons [class*="user"] i,
    .col-icons [class*="account"] i {
        font-size: 12px !important;
    }

    /* Language switcher button */
    .col-icons .language-switcher,
    .col-icons .language-btn,
    .col-icons .btn-language,
    .col-icons [class*="language"] {
        padding: 2px 4px !important;
        font-size: 9px !important;
        min-width: 32px !important;
        height: 22px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        border-radius: 3px !important;
    }

    /* Cart icon with badge */
    .col-icons .cart-icon,
    .col-icons .header-cart {
        position: relative !important;
    }

    .col-icons .cart-count,
    .col-icons .badge {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 14px !important;
        height: 14px !important;
        font-size: 9px !important;
        line-height: 14px !important;
        padding: 0 2px !important;
    }

    /* Account/User icon */
    .col-icons .user-icon,
    .col-icons .account-icon,
    .col-icons [class*="user"],
    .col-icons [class*="account"] {
        padding: 3px 4px !important;
    }

    /* Remove any absolute positioning that might cause overlap */
    .col-icons > * {
        position: relative !important;
        z-index: auto !important;
    }

    /* Ensure no floating elements */
    .col-icons::after {
        content: '';
        display: table;
        clear: both;
    }
}

/* ============================================
 * VERY SMALL SCREENS (< 360px)
 * ============================================ */
@media (max-width: 360px) {
    /* Even more compact */
    .header-logo-responsive,
    .nav-logo {
        max-height: 32px !important;
    }

    .logo-col {
        max-width: 80px !important;
    }

    /* All icons even smaller */
    .col-icons i {
        font-size: 11px !important;
    }

    /* Search, cart, account icons - extra small */
    .col-icons .search-icon i,
    .col-icons .cart-icon i,
    .col-icons .user-icon i,
    .col-icons .account-icon i,
    .col-icons [class*="search"] i,
    .col-icons [class*="cart"] i,
    .col-icons [class*="user"] i,
    .col-icons [class*="account"] i {
        font-size: 10px !important;
    }

    .col-icons .language-switcher,
    .col-icons .language-btn,
    .col-icons .btn-language,
    .col-icons [class*="language"] {
        font-size: 8px !important;
        min-width: 28px !important;
        height: 20px !important;
        padding: 2px 3px !important;
    }

    .col-icons > *,
    .col-icons .header-icon-enhanced,
    .col-icons a,
    .col-icons .dropdown {
        padding: 1px !important;
    }

    .col-icons {
        gap: 2px !important;
    }

    /* Cart badge even smaller */
    .col-icons .cart-count,
    .col-icons .badge {
        min-width: 12px !important;
        height: 12px !important;
        font-size: 8px !important;
        line-height: 12px !important;
        top: -3px !important;
        right: -3px !important;
    }
}

/* ============================================
 * MEDIUM SMALL SCREENS (480px - 576px)
 * ============================================ */
@media (min-width: 480px) and (max-width: 576px) {
    .icons-col,
    .col-icons {
        gap: 6px !important;
    }

    .header-logo-responsive,
    .nav-logo {
        max-height: 42px !important;
    }

    /* Slightly larger than extra small, but still compact */
    .col-icons i {
        font-size: 17px !important;
    }

    /* Search, cart, account icons */
    .col-icons .search-icon i,
    .col-icons .cart-icon i,
    .col-icons .user-icon i,
    .col-icons .account-icon i,
    .col-icons [class*="search"] i,
    .col-icons [class*="cart"] i,
    .col-icons [class*="user"] i,
    .col-icons [class*="account"] i {
        font-size: 16px !important;
    }

    .col-icons .language-switcher,
    .col-icons .language-btn,
    .col-icons .btn-language,
    .col-icons [class*="language"] {
        font-size: 12px !important;
        min-width: 45px !important;
        height: 28px !important;
    }

    /* Cart badge */
    .col-icons .cart-count,
    .col-icons .badge {
        min-width: 15px !important;
        height: 15px !important;
        font-size: 9px !important;
        line-height: 15px !important;
    }
}

/* ============================================
 * PORTRAIT ORIENTATION FIX
 * ============================================ */
@media (max-width: 480px) and (orientation: portrait) {
    /* Stack header items if needed */
    .main-nav-row {
        position: relative !important;
    }

    /* Ensure language button doesn't overlay other elements */
    .col-icons {
        position: relative !important;
        z-index: 10 !important;
    }

    /* Proper flex alignment */
    .col-icons > * {
        flex-shrink: 0 !important;
    }
}

/* ============================================
 * RTL (Arabic) SUPPORT
 * ============================================ */
[dir="rtl"] .icons-col,
[dir="rtl"] .col-icons {
    justify-content: flex-start !important;
}

[dir="rtl"] .logo-col {
    padding-right: 2px !important;
    padding-left: 0 !important;
}

/* ============================================
 * COMMON OVERRIDES FOR SMALL SCREENS
 * ============================================ */
@media (max-width: 480px) {
    /* Remove any transforms that might cause positioning issues */
    .col-icons,
    .col-icons > * {
        transform: none !important;
    }

    /* Ensure proper stacking context */
    header.ecommerce-header {
        isolation: isolate !important;
    }

    /* Fix any potential overflow issues */
    .main-nav-row {
        overflow: visible !important;
    }

    .icons-col,
    .col-icons {
        overflow: visible !important;
    }

    /* Remove negative margins that might cause overlap */
    .col-icons > *,
    .col-icons a,
    .col-icons .dropdown,
    .col-icons .header-icon-enhanced {
        margin: 0 !important;
    }
}

/* ============================================
 * SUPER SPECIFIC: SMALL PHONES ONLY
 * Target iPhone SE, small Androids (≤ 414px)
 * High specificity to ensure these rules apply
 * ============================================ */
@media screen and (max-device-width: 414px),
       screen and (max-width: 414px) {

    /* Force smaller icon sizes with maximum specificity */
    html body header.ecommerce-header .col-icons i,
    html body .ecommerce-header .col-icons i,
    html body .col-icons i {
        font-size: 12px !important;
    }

    /* Search, cart, and account icons even smaller */
    html body header.ecommerce-header .col-icons .search-icon i,
    html body header.ecommerce-header .col-icons .cart-icon i,
    html body header.ecommerce-header .col-icons .user-icon i,
    html body header.ecommerce-header .col-icons .account-icon i,
    html body header.ecommerce-header .col-icons [class*="search"] i,
    html body header.ecommerce-header .col-icons [class*="cart"] i,
    html body header.ecommerce-header .col-icons [class*="user"] i,
    html body header.ecommerce-header .col-icons [class*="account"] i {
        font-size: 11px !important;
    }

    /* Reduce icon container padding */
    html body header.ecommerce-header .col-icons > *,
    html body header.ecommerce-header .col-icons .header-icon-enhanced,
    html body header.ecommerce-header .col-icons a {
        padding: 1px !important;
    }

    /* Reduce gap between icons */
    html body header.ecommerce-header .col-icons,
    html body header.ecommerce-header .icons-col {
        gap: 2px !important;
    }

    /* Make language button smaller */
    html body header.ecommerce-header .col-icons .language-switcher,
    html body header.ecommerce-header .col-icons .language-btn,
    html body header.ecommerce-header .col-icons .btn-language,
    html body header.ecommerce-header .col-icons [class*="language"] {
        font-size: 9px !important;
        min-width: 32px !important;
        height: 22px !important;
        padding: 1px 3px !important;
    }
}