/**
 * Mobile Responsive Fixes for Product Listings
 * Specifically targets mobile responsiveness issues on the main product page
 */

/* ===============================================
   MOBILE GRID SYSTEM IMPROVEMENTS
   =============================================== */

/* Better mobile column system - start with single column on small mobile */
@media (max-width: 576px) {
    .main-content .product-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
    }

    /* Allow 2 columns on slightly larger phones if needed */
    .main-content .product-item.col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Medium mobile devices - 2 columns works well */
@media (min-width: 576px) and (max-width: 767px) {
    .main-content .product-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Tablets - 3 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .main-content .product-item {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ===============================================
   PRODUCT CARD MOBILE OPTIMIZATIONS
   =============================================== */

@media (max-width: 768px) {

    /* Product card container */
    .product-default {
        min-height: auto !important;
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    /* Product image */
    .product-default figure {
        margin-bottom: 0.75rem !important;
        height: auto !important;
        min-height: 160px !important;
        max-height: 200px !important;
        overflow: hidden !important;
        border-radius: 6px !important;
    }

    .product-default figure img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.3s ease !important;
    }

    /* Product details section */
    .product-details {
        padding: 0 !important;
    }

    /* Product title improvements */
    .product-title-section {
        margin-bottom: 0.5rem !important;
        min-height: auto !important;
    }

    .product-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-height: 2.6em !important;
    }

    .product-title a {
        color: #333 !important;
        text-decoration: none !important;
        display: block !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .product-title a:hover {
        color: #007cba !important;
    }

    /* Product details list */
    .product-details-list {
        margin-bottom: 0.75rem !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .product-details-list span {
        display: block !important;
        margin-bottom: 0.25rem !important;
        color: #666 !important;
    }

    .product-details-list span strong {
        color: #333 !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
    }

    /* Price section */
    .price-box {
        margin-bottom: 0.75rem !important;
    }

    .multiple-prices {
        gap: 0.25rem !important;
    }

    .price-option {
        font-size: 0.8rem !important;
        gap: 0.25rem !important;
        padding: 0.25rem 0 !important;
    }

    .price-option.price-primary {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .price-option .price-value {
        font-weight: 600 !important;
        color: #d63384 !important;
    }

    .price-option.price-primary .price-value {
        font-size: 1rem !important;
        color: #d63384 !important;
    }

    /* Stock availability */
    .product-availability-badge-loop {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 12px !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
    }

    /* Action buttons */
    .product-action {
        margin-top: 0.75rem !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    .action-buttons-row {
        gap: 0.5rem !important;
        justify-content: center !important;
    }

    .btn-icon-wish,
    .btn-quickview {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        border-radius: 50% !important;
    }

    .product-action .btn {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
        border-radius: 4px !important;
    }
}

/* ===============================================
   VERY SMALL MOBILE DEVICES (< 480px)
   =============================================== */

@media (max-width: 480px) {

    /* Force single column on very small screens */
    .main-content .product-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .product-default {
        padding: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .product-default figure {
        min-height: 140px !important;
        max-height: 160px !important;
        margin-bottom: 0.5rem !important;
    }

    .product-title {
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
    }

    .product-details-list {
        font-size: 0.75rem !important;
    }

    .product-details-list span strong {
        font-size: 0.7rem !important;
    }

    .price-option {
        font-size: 0.75rem !important;
    }

    .price-option.price-primary {
        font-size: 0.85rem !important;
    }

    .action-buttons-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .product-action .btn {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
}

/* ===============================================
   VIEW TOGGLE MOBILE IMPROVEMENTS
   =============================================== */

@media (max-width: 768px) {
    .shop-controls-bar {
        background: white !important;
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    .view-toggle-container {
        justify-content: center !important;
        align-items: center !important;
    }

    .view-label {
        font-size: 0.9rem !important;
        margin-right: 0.75rem !important;
        font-weight: 500 !important;
    }

    .view-toggle-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
        border-radius: 4px !important;
        margin: 0 0.25rem !important;
    }

    .view-toggle-btn.active {
        background-color: #007cba !important;
        border-color: #007cba !important;
        color: white !important;
    }
}

/* ===============================================
   SIDEBAR AND FILTER MOBILE IMPROVEMENTS
   =============================================== */

/* Hide sidebar on mobile and show as overlay */
@media (max-width: 991px) {

    /* Main layout adjustments - force hide all default sidebars */
    .woocommerce .sidebar-shop,
    .sidebar-shop,
    aside.sidebar-shop,
    .col-lg-3.sidebar-shop,
    .sidebar.sidebar-shop {
        display: none !important;
        /* Hide the default sidebar display */
    }

    /* But keep the mobile sidebar available */
    .mobile-sidebar,
    .sidebar-shop.mobile-sidebar,
    aside.sidebar-shop.mobile-sidebar {
        display: block !important;
    }

    /* Filter toggle button container */
    .filter-toggle-container {
        text-align: center !important;
        margin-bottom: 1rem !important;
        padding: 0.75rem !important;
        background: white !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .filter-toggle {
        background-color: #007cba !important;
        border-color: #007cba !important;
        color: white !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
        transition: all 0.3s ease !important;
        border: none !important;
        cursor: pointer !important;
    }

    .filter-toggle:hover {
        background-color: #005a87 !important;
        border-color: #005a87 !important;
        transform: translateY(-1px) !important;
        color: white !important;
    }

    .filter-toggle:focus {
        box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.25) !important;
        outline: none !important;
    }

    /* Mobile sidebar as overlay */
    .mobile-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 300px !important;
        height: 100vh !important;
        background: white !important;
        z-index: 2000 !important;
        padding: 1.5rem !important;
        overflow-y: auto !important;
        transform: translateX(100vw) !important;
        transition: transform 0.3s ease !important;
        box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2) !important;
        border-left: 1px solid #eee !important;
        display: block !important;
        /* Override the display: none */
    }

    .mobile-sidebar.open {
        transform: translateX(0) !important;
        /* Slide in */
    }

    .mobile-sidebar .close-sidebar {
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        color: #495057 !important;
        padding: 0.5rem 1rem !important;
        border-radius: 4px !important;
        width: 100% !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .mobile-sidebar .close-sidebar:hover {
        background-color: #e9ecef !important;
        border-color: #adb5bd !important;
    }

    /* Sidebar overlay background */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 1999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(2px) !important;
        pointer-events: none !important;
        cursor: pointer !important;
    }

    .sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .sidebar-overlay.inactive {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Style the filter widgets inside the mobile sidebar */
    .mobile-sidebar .widget {
        margin-bottom: 1.5rem !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding-bottom: 1rem !important;
    }

    .mobile-sidebar .widget:last-child {
        border-bottom: none !important;
    }

    .mobile-sidebar .widget-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
        font-weight: 600 !important;
    }

    .mobile-sidebar .widget-title a {
        color: #333 !important;
        text-decoration: none !important;
        display: block !important;
        padding: 0.5rem 0 !important;
    }

    .mobile-sidebar .filter-items {
        max-height: none !important;
        padding: 0 !important;
    }

    .mobile-sidebar .custom-control {
        margin-bottom: 0.5rem !important;
    }

    .mobile-sidebar .custom-control-label {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* Ensure sliders work properly in mobile sidebar */
    .mobile-sidebar #price-slider,
    .mobile-sidebar #abv-slider {
        margin: 1rem 0 !important;
    }

    .mobile-sidebar .btn {
        font-size: 0.85rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* ===============================================
   MAIN CONTENT CONTAINER MOBILE FIXES
   =============================================== */

@media (max-width: 991px) {

    /* Force main content to full width on mobile */
    .woocommerce .main-content,
    .main-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .main-content .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    /* Hide all desktop sidebars with higher specificity */
    .sidebar-shop:not(.mobile-sidebar),
    .woocommerce .sidebar-shop:not(.mobile-sidebar),
    aside.sidebar-shop:not(.mobile-sidebar),
    .col-lg-3.sidebar-shop:not(.mobile-sidebar),
    .woocommerce .col-lg-3.sidebar-shop:not(.mobile-sidebar),
    body .sidebar-shop:not(.mobile-sidebar) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Ensure the main row takes full width */
    .woocommerce .row:has(.main-content) {
        flex-wrap: nowrap !important;
    }

    .woocommerce .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .woocommerce .col-lg-3 {
        display: none !important;
    }

    /* Ensure filter button is always visible on mobile */
    .filter-toggle-container {
        order: -1 !important;
        /* Show before products */
    }

    /* Fix any potential ordering issues */
    .woocommerce-ordering,
    .woocommerce-result-count {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 576px) {
    .main-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .main-content .row {
        margin-left: -0.25rem !important;
        margin-right: -0.25rem !important;
    }
}

/* ===============================================
   LIST VIEW MOBILE ADJUSTMENTS
   =============================================== */

@media (max-width: 768px) {
    .products-container[data-view="list"] .product-default {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1rem !important;
        min-height: auto !important;
    }

    .products-container[data-view="list"] .product-default figure {
        flex: none !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
        height: 180px !important;
        align-self: center !important;
        max-width: 200px !important;
        margin: 0 auto 1rem auto !important;
    }

    .products-container[data-view="list"] .product-details {
        padding-left: 0 !important;
        min-height: auto !important;
        width: 100% !important;
    }

    .products-container[data-view="list"] .product-title {
        text-align: center !important;
        margin-bottom: 0.75rem !important;
    }

    .products-container[data-view="list"] .product-details-list {
        justify-content: center !important;
        text-align: center !important;
    }

    .products-container[data-view="list"] .product-action {
        justify-content: center !important;
        margin-top: 1rem !important;
    }
}

/* ===============================================
   CONTAINER OVERFLOW FIXES
   =============================================== */

@media (max-width: 768px) {

    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        overflow-x: hidden !important;
    }

    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    body {
        overflow-x: hidden !important;
    }

    .main {
        overflow-x: hidden !important;
    }
}

/* ===============================================
   LOADING STATE MOBILE FIXES
   =============================================== */

@media (max-width: 768px) {
    .products-container.loading {
        min-height: 200px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .products-container.loading::before {
        content: "Loading products..." !important;
        font-size: 0.9rem !important;
        color: #666 !important;
    }
}

/* ===============================================
   PAGINATION MOBILE IMPROVEMENTS
   =============================================== */

@media (max-width: 768px) {
    .woocommerce-pagination {
        margin-top: 2rem !important;
        text-align: center !important;
    }

    .woocommerce-pagination .page-numbers {
        padding: 0.5rem 0.75rem !important;
        margin: 0 0.25rem !important;
        font-size: 0.9rem !important;
        border-radius: 4px !important;
    }

    .woocommerce-pagination .page-numbers.current {
        background-color: #007cba !important;
        border-color: #007cba !important;
        color: white !important;
    }
}

/* ===============================================
   TOUCH IMPROVEMENTS
   =============================================== */

@media (max-width: 768px) {

    /* Increase tap targets for mobile */
    .product-default a,
    .btn,
    .view-toggle-btn,
    .filter-toggle {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }

    /* Improve hover states for touch */
    .product-default:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    .btn:active {
        transform: translateY(1px) !important;
    }
}