/*
Theme Name: PayLoad WooCommerce Theme
Theme URI: https://example.com/payload
Author: Your Name
Author URI: https://example.com
Description: A modern WooCommerce theme built with DaisyUI components
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minimal-woo
*/
/* Minimal theme-specific overrides for DaisyUI */

/* Custom Breadcrumbs */
.breadcrumbs li {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.breadcrumbs li:hover {
    opacity: 0.8;
}

.breadcrumbs li:last-child {
    opacity: 1;
}
.site-title a {
    text-decoration: none;
}

/* WordPress editor compatibility */
.wp-block-group {
    margin: 2rem 0;
}

.wp-block-image {
    margin: 1rem 0;
}

/* Ensure WordPress admin bar doesn't interfere */
html {
    margin-top: 0 !important;
}

#wpadminbar {
    position: fixed !important;
}

/* WooCommerce DaisyUI Integration */
.woocommerce .products {
    @apply grid grid-cols-2 xl:grid-cols-4 gap-6;
}

.woocommerce .product {
    @apply card bg-base-100 shadow-sm hover:shadow-md transition-shadow;
}

.woocommerce .product .woocommerce-loop-product__title {
    @apply card-title text-base;
}

.woocommerce .product .price {
    @apply text-lg font-bold text-primary;
}

.woocommerce .button, 
.woocommerce button.button,
.woocommerce input.button {
    @apply btn btn-primary;
}

.woocommerce .button.alt {
    @apply btn btn-secondary;
}

.woocommerce .button:hover {
    @apply btn-primary-focus;
}

.woocommerce .cart_item {
    @apply border-b border-base-300 py-4;
}

.woocommerce table.shop_table {
    @apply table table-zebra w-full;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    @apply alert alert-info;
}

.woocommerce .woocommerce-error {
    @apply alert alert-error;
}

.woocommerce form .form-row {
    @apply mb-4;
}

.woocommerce form .form-row label {
    @apply label label-text;
}

.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form textarea,
.woocommerce form select {
    @apply input input-bordered w-full;
}

.woocommerce form textarea {
    @apply textarea textarea-bordered;
}

/* WooCommerce Overrides */
.woocommerce-result-count,
.woocommerce-ordering {
    @apply text-sm text-base-content/70;
}

.woocommerce-ordering select {
    @apply select select-bordered select-sm;
}

.woocommerce-pagination .page-numbers {
    @apply join;
}

.woocommerce-pagination .page-numbers li {
    @apply join-item;
}

.woocommerce-pagination .page-numbers li .page-numbers {
    @apply btn btn-sm;
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
    @apply btn-primary;
}

/* Product Gallery */
.woocommerce-product-gallery {
    @apply relative mb-8;
}

.woocommerce-product-gallery__wrapper {
    @apply rounded-lg overflow-hidden;
}

.woocommerce-product-gallery__image {
    @apply rounded-lg overflow-hidden;
}

.woocommerce-product-gallery__trigger {
    @apply absolute top-4 right-4 z-10 btn btn-circle btn-sm btn-ghost;
}

/* Single Product */
.single-product div.product {
    @apply grid grid-cols-1 md:grid-cols-2 gap-8;
}

.product_title {
    @apply text-3xl font-bold mb-4;
}

.woocommerce-product-details__short-description {
    @apply text-base-content/70 mb-6;
}

.price {
    @apply text-2xl font-bold text-primary mb-6;
}

.cart {
    @apply flex flex-col gap-4;
}

.quantity input {
    @apply input input-bordered w-24;
}

.single_add_to_cart_button {
    @apply btn btn-primary;
}

/* Cart Page */
.woocommerce-cart-form {
    @apply overflow-x-auto;
}

.woocommerce-cart-form table {
    @apply table table-zebra;
}

.woocommerce-cart-form__cart-item {
    @apply hover:bg-base-200;
}

.product-remove a {
    @apply btn btn-circle btn-ghost btn-xs;
}

.product-thumbnail img {
    @apply w-16 h-16 object-cover rounded;
}

.product-name a {
    @apply font-medium hover:text-primary;
}

.product-price,
.product-subtotal {
    @apply font-semibold;
}

/* Checkout */
.woocommerce-checkout {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

#customer_details {
    @apply space-y-8;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.form-row input,
.form-row textarea {
    @apply input input-bordered w-full;
}

.form-row textarea {
    @apply textarea textarea-bordered;
}

#order_review {
    @apply bg-base-200 p-6 rounded-lg;
}

#order_review_heading {
    @apply text-xl font-bold mb-4;
}

/* Account Pages */
.woocommerce-account .woocommerce {
    @apply grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-8;
}

.woocommerce-MyAccount-navigation ul {
    @apply menu bg-base-200 rounded-lg;
}

.woocommerce-MyAccount-navigation-link {
    @apply border-b border-base-300 last:border-none;
}

.woocommerce-MyAccount-navigation-link a {
    @apply block px-4 py-2 hover:bg-base-300;
}

.woocommerce-MyAccount-navigation-link.is-active a {
    @apply bg-primary text-primary-content;
}

/* Responsive Tables */
@media (max-width: 768px) {
    .woocommerce-cart-form table,
    .woocommerce-checkout-review-order-table {
        @apply table-compact;
    }
}

/* Mobile Filters Dropdown - Dropdown Style */
#mobile-filters-dropdown {
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    transition: all 0.3s ease !important;
    /* Ensure smooth appearance */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    /* Dropdown specific styling */
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
}

#mobile-filters-dropdown.mobile-dropdown-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

#mobile-filters-dropdown.mobile-dropdown-visible {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure arrow rotation works */
#filters-arrow {
    transition: transform 0.2s ease !important;
}

#filters-arrow.rotate-180 {
    transform: rotate(180deg) !important;
}

/* Mobile toggle button styling */
/* #mobile-filters-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 0 !important;
} */

/* Force mobile filter elements to show on small screens */
@media (max-width: 1023px) {
    .lg\:hidden {
        display: block !important;
        /* Do not force relative positioning globally; it breaks fixed toolbars */
        overflow: visible !important;
    }
    
    /* Mobile menu specific styling - override the general rule */
    #mobile-menu {
        display: block !important; /* element exists but is hidden off-canvas */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 85vw !important;
        max-width: 360px !important;
        height: 100dvh !important; /* dynamic viewport height for mobile toolbars */
        min-height: -webkit-fill-available !important; /* iOS Safari fallback */
        z-index: 1200 !important;
        overflow-y: auto !important; /* enable panel scrolling */
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 0 0 20px rgba(0,0,0,0.2) !important;
        background-color: #ffffff !important; /* force solid background */
        color: hsl(var(--bc)) !important;
    }

    /* Ensure the drawer content area is scrollable even if parent containers restrict it */
    #mobile-menu .flex-1 {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 16px)) !important; /* keep last buttons reachable above Safari tab bar */
        overscroll-behavior: contain !important;
    }
    
    #mobile-menu.show {
        transform: translateX(0) !important;
    }

    #mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.45) !important;
        z-index: 1150 !important;
    }

    #mobile-menu-overlay.show {
        display: block !important;
    }
    
    /* #mobile-filters-toggle {
        display: flex !important;
        position: relative !important;
        z-index: 1001 !important;
        border: none !important;
        min-height: 50px !important;
        font-weight: 500 !important;
    } */
    
    #mobile-filters-dropdown {
        display: none !important; /* Hidden by default */
        position: relative !important;
        z-index: 1002 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        background-color: hsl(var(--b1)) !important;
        border: 1px solid hsl(var(--bc)/0.2) !important;
        border-top: none !important;
    }
    
    /* When shown, override all hiding */
    #mobile-filters-dropdown[style*="block"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        animation: slideDown 0.3s ease-out !important;
    }
    
    /* Hide desktop filters completely on mobile */
    #product-filters {
        display: none !important;
    }
    
    /* Ensure container doesn't clip the dropdown */
    .container {
        overflow: visible !important;
    }
    
    /* Ensure mobile price inputs are clearly visible and functional */
    #mobile-filters-dropdown #min-price-mobile,
    #mobile-filters-dropdown #max-price-mobile {
        background: white !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        color: #1f2937 !important;
        height: 56px !important;
        min-height: 56px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Focus state for inputs */
    #mobile-filters-dropdown #min-price-mobile:focus,
    #mobile-filters-dropdown #max-price-mobile:focus {
        outline: 2px solid #3b82f6 !important;
        outline-offset: 2px !important;
        border-color: #3b82f6 !important;
    }
    
    /* Active state for price preset buttons */
    .price-preset-mobile.btn-active {
        background-color: hsl(var(--p)) !important;
        color: hsl(var(--pc)) !important;
        border-color: hsl(var(--p)) !important;
    }
}

/* Desktop - hide mobile elements and show desktop filters */
@media (max-width: 1279px) {
    #product-filters {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    #mobile-filters-dropdown, #mobile-filters-toggle, .lg\:hidden {
        display: none !important;
    }
    
    /* Ensure desktop filters are visible and properly positioned */
    #product-filters {
        display: block !important;
    }

    /* Fix z-index stacking for desktop filters */
    #mobile-filters-panel {
        z-index: 10 !important;
    }

    /* Ensure header stays on top */
    .site-header {
        position: relative;
        z-index: 20 !important;
    }
}

/* Debug styles - clean button styling */
@media (max-width: 1023px) {
    /* Remove all button styling overrides */
    
    #mobile-filters-dropdown {
        background-color: hsl(var(--b1)) !important;
        border: 1px solid hsl(var(--bc)/0.2) !important;
        border-top: none !important;
    }
    
    /* Ensure mobile price inputs are clearly visible and functional */
    #mobile-filters-dropdown #min-price-mobile,
    #mobile-filters-dropdown #max-price-mobile {
        background: white !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        color: #1f2937 !important;
        height: 56px !important;
        min-height: 56px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Focus state for inputs */
    #mobile-filters-dropdown #min-price-mobile:focus,
    #mobile-filters-dropdown #max-price-mobile:focus {
        outline: 2px solid #3b82f6 !important;
        outline-offset: 2px !important;
        border-color: #3b82f6 !important;
    }
    
    /* Active state for price preset buttons */
    .price-preset-mobile.btn-active {
        background-color: hsl(var(--p)) !important;
        color: hsl(var(--pc)) !important;
        border-color: hsl(var(--p)) !important;
    }
    
    /* Add a subtle animation when dropdown appears */
    #mobile-filters-dropdown[style*="block"] {
        animation: slideDown 0.3s ease-out !important;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disable Optimization Detective if present */
body.optimization-detective-disabled {
    /* Prevent conflicts */
}

/* Debug styles */
.mobile-debug {
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px;
    font-size: 12px;
    z-index: 9999;
    max-width: 300px;
    display: none;
}

.mobile-debug.show {
    display: block;
} 

/* Reserve space for the mobile bottom navbar */
@media (max-width: 1023px) {
  body {
    /* Reserve space for fixed bottom bar; add safe area if present */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}