/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

.hidden {
    display: none !important;
}

.woocommerce-checkout-payment{
	background: #fff;
    padding: 20px;
}

/* checkout thank you page */
.e-con-boxed .e-con-inner .elementor-widget-shortcode{
	width: 100%;
}
.wd-builder-off :is(.woocommerce-thankyou-order-received,.woocommerce-thankyou-order-failed){
	color:#5C9B4C !important;
	border: 2px dashed #5C9B4C !important;
}



/* 1. Move Label to Top */
.variations tr {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 15px;
}

.variations th.label {
    width: 100% !important;
    text-align: left !important;
    padding-bottom: 10px !important;
}

.variations label {
    font-weight: bold;
    color: #5C9B4C !important;
    font-size: 16px;
}

/* 2. Variation Value Container */
.variations td.value {
    width: 100% !important;
    padding: 0 !important;
    position: relative;
}

/* 3. Stack Buttons Vertically (Swatches) */
.wd-swatches-product {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
}

/* 4. Base Button Styling (Text Swatches) */
.wd-swatch.wd-text {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 5px !important;
    background-color: #f7f7f7 !important;
    height: auto !important;
    color: #333 !important;
    min-height: unset !important;
    transition: all 0.3s ease;
}

/* 5. Selected Variation Color */
.wd-swatch.wd-text.wd-active {
    background-color: #5C9B4C !important;
    color: #ffffff !important;
    border-color: #5C9B4C !important;
}

.wd-swatch.wd-text.wd-active .wd-swatch-text {
    color: #ffffff !important;
}

/* 6. Standard Select Dropdown Styling & Forced Hiding */

/* This targets the select box and hides it whenever swatches are present */
.variations td.value .wd-swatches-product + select,
.variations td.value .wd-swatches-product ~ select,
.variations td.value select.variation-form-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* Ensure the swatch container itself is visible */
.wd-swatches-product {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 7. Hide "Clear" link (Optional) */
.reset_variations {
    margin-top: 10px;
    display: inline-block;
    font-size: 12px;
    color: #666;
}

/* 8. Fix for desktop hover effect on swatches */
.wd-swatch.wd-text:hover:not(.wd-active) {
    background-color: #eeeeee !important;
    border-color: #ccc !important;
}


/* Hide by default on standard pages -------------------------------------------------------------*/
/**
 * 1. DISPLAY LOGIC
 * Show on standard WooCommerce checkout and CartFlows templates
 */
.custom-partial-pay-wrapper {
    display: none; /* Hidden by default on other pages */
}

.woocommerce-checkout .custom-partial-pay-wrapper,
.wcf-checkout-template .custom-partial-pay-wrapper,
.cartflows-canvas .custom-partial-pay-wrapper {
    display: block !important;
    margin: 25px 0 !important;
}

/**
 * 2. GRID LAYOUT (Desktop: Side-by-Side)
 */
.payment-title {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.payment-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    align-items: stretch !important;
    width: 100%;
}

/* Ensure each button takes up equal width */
.payment-option {
    flex: 1;
    display: flex;
    cursor: pointer;
}

/**
 * 3. RADIO BUTTON & BOX STYLING
 */

/* Hide the actual browser radio button */
.payment-option input[type="radio"] {
    display: none !important;
}

/* The visual box */
.wcf-custom-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    background: #fff !important;
    transition: all 0.2s ease;
    width: 100%;
}

/* Custom Radio Circle */
.custom-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
}

/**
 * 4. THE MAGIC: CHECKED STATES
 */

/* Style the box when selected */
.payment-option input[type="radio"]:checked + .wcf-custom-box {
    border: 2px solid #2d5c5a !important;
    background-color: #f4f9f8 !important;
}

/* Style the circle border when selected */
.payment-option input[type="radio"]:checked + .wcf-custom-box .custom-radio {
    border-color: #2d5c5a !important;
}

/* Add the inner dot when selected */
.payment-option input[type="radio"]:checked + .wcf-custom-box .custom-radio::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #2d5c5a;
    border-radius: 50%;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
}

/**
 * 5. TEXT STYLING
 */
.option-text { 
    display: flex; 
    flex-direction: column; 
    line-height: 1.4; 
}

.pay-label { 
    font-weight: bold; 
    color: #333;
    font-size: 15px;
}

.pay-amount { 
    font-size: 13px; 
    color: #777; 
}

/**
 * 6. MOBILE RESPONSIVENESS (Stacking)
 */
@media (max-width: 768px) {
    .payment-grid {
        flex-direction: column !important; /* Stacks items top to bottom */
        gap: 12px !important;
    }

    .payment-option {
        width: 100%;
    }

    .wcf-custom-box {
        padding: 15px !important; /* Slightly larger tap target for mobile */
    }
}