/**
 * @file assets/css/quantity-stepper.css
 * @ai-rules Custom styles for quantity input without preset buttons
 */

/* Remove WooCommerce default styles and apply our custom design */
.single_variation_wrap {
    width: 100% !important;
    display: block !important;
    grid-template-columns: unset !important;
}

/* Container styling */
.single_variation_wrap > div {
    width: 100%;
}

/* Make the variations_button container use flex for inline layout */
.variations_button {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    align-items: center !important;
    width: 100% !important;
}

.variations_button > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

@media (min-width: 640px) {
    .variations_button {
        flex-wrap: nowrap !important;
    }
}

/* Hide unavailable variation messages */
.woocommerce-variation-availability:empty,
.woocommerce-variation-availability:not(:empty):has-text('*niet beschikbaar*'),
.woocommerce-variation.single_variation .woocommerce-variation-availability {
    display: none !important;
}

/* Also hide any alert elements that might contain the unavailable message */
.single_variation_wrap [role="alert"] {
    display: none !important;
}

/* Hide the paragraph inside availability that contains the unavailable text */
.woocommerce-variation-availability p:contains('niet beschikbaar') {
    display: none !important;
}
.woocommerce-variation-add-to-cart {
    visibility: visible !important;
    height: 56px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    flex: 1 !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    visibility: visible !important;
    height: 56px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0.75rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    background: linear-gradient(to right, rgb(251 146 60), rgb(249 115 22)) !important;
    color: white !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s !important;
    width: 100% !important;
    flex: 1 1 12rem !important;
    min-width: 12rem !important;
}

.single_variation_wrap .single_add_to_cart_button:focus,
.single_variation_wrap .single_add_to_cart_button:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.5), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Accessibility: Focus styles for quantity input */
.single_variation_wrap .qty:focus,
.single_variation_wrap .qty:focus-visible {
    outline: none !important;
    border-color: rgb(249, 115, 22) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
    background: linear-gradient(to right, rgb(249 115 22), rgb(234 88 12)) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px) !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button:active {
    transform: translateY(0) !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Quantity input styling */
.single_variation_wrap .qty {
    -moz-appearance: textfield;
    appearance: textfield;
    box-sizing: border-box !important;
    height: 56px !important;
}

.single_variation_wrap .qty::-webkit-outer-spin-button,
.single_variation_wrap .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to cart button - override WC styles */
.single_variation_wrap .single_add_to_cart_button {
    /* Remove WC important styles */
    height: 48px !important;
    padding: 0.75rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
}

.single_variation_wrap .single_add_to_cart_button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Variation info box - reduced margin */
#joalpe-variation-info {
    margin-top: 0 !important;
}

/* Ensure no extra spacing */
.variations_button {
    margin: 0 !important;
    padding: 0 !important;
}