/* Fungashead Custom Quantity Selector Styles */

.custom-quantity-selector-wrapper { 
    margin-bottom: 15px; 
    border: 2px solid black; 
    padding: 15px; 
    box-shadow: 6px 6px 0px 0px rgba(0,0,0,1) !important; 
    width: 100%;
    box-sizing: border-box;
}

.custom-quantity-selector-label { 
    display: block; 
    margin-bottom: 10px; 
    font-weight: bold; 
}

.custom-quantity-options { 
    display: flex; 
    gap: 10px; 
    width: 100%;
    box-sizing: border-box;
}

.custom-quantity-option {
    border: 2px solid black;
    padding: 10px 15px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    position: relative;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-quantity-option.selected {
     border-bottom: 4px solid #FF69B4; /* Pink bottom border for selected */
     box-shadow: 4px 4px 0px 0px rgba(255,105,180,1) !important; /* Pink thick shadow for selected */
}

.quantity-number { 
    display: block; 
    font-size: 1.2em; 
    font-weight: bold; 
    margin-bottom: 3px; 
}

.quantity-discount { 
    font-size: 0.9em; 
    color: green; 
}

/* Hide original quantity input visually but keep accessible */
form.cart .quantity input[name="quantity"],
.woocommerce-variation-add-to-cart .quantity input[name="quantity"] {
     opacity: 0 !important; /* Added !important */
     position: absolute !important; /* Added !important */
     left: -9999px !important; /* Added !important */
     height: 1px !important; /* Added !important */
     width: 1px !important; /* Added !important */
     overflow: hidden !important; /* Added !important */
     clip: rect(1px, 1px, 1px, 1px) !important; /* Added !important */
}

/* Ensure the wrapper div for quantity doesn't take up space */
form.cart div.quantity,
.woocommerce-variation-add-to-cart div.quantity {
    margin: 0 !important; 
    padding: 0 !important; 
    height: 1px !important; /* Added !important */
    width: 1px !important; /* Added !important */
    overflow: hidden !important; /* Added !important */
    position: absolute !important; /* Added !important */
    left: -9999px !important; /* Added !important */
    clip: rect(1px, 1px, 1px, 1px) !important; /* Added !important */
}

/* --- Hide Variation Dropdowns --- */
form.cart table.variations {
    display: none !important;
}

/* Label styling for quantity selector options */
.most-popular-label,
.best-value-label,
.good-deal-label,
.starter-label {
    display: block;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    line-height: 1;
}

/* Responsive: 2x2 Grid for Tablet and Mobile */
@media (max-width: 1024px) {
    .custom-quantity-options {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .custom-quantity-option {
        flex: none !important;
        min-height: 90px !important;
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile quantity selector for simple products */
    .mobile-quantity-options {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .mobile-qty-btn {
        min-height: 90px !important;
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .custom-quantity-options {
        gap: 6px !important;
    }
    
    .custom-quantity-option {
        min-height: 80px !important;
        padding: 8px 10px !important;
    }
    
    .mobile-quantity-options {
        gap: 6px !important;
    }
    
    .mobile-qty-btn {
        min-height: 80px !important;
        padding: 8px 10px !important;
    }
    
    .quantity-number {
        font-size: 1.1em !important;
    }
    
    .most-popular-label,
    .best-value-label,
    .good-deal-label,
    .starter-label {
        font-size: 0.7em !important;
    }
}