/**
 * Variation Swatches & Variable Product Layout Module Stylesheet
 * Matches Martfury (ifuturetech.org) Reference Style
 */

/* ==========================================================================
   1. Variable Products Container & Layout
   ========================================================================== */
.product-actions-wrapper form.variations_form.cart,
.woocommerce div.product form.variations_form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ==========================================================================
   2. Variations Table (Attributes & Swatches)
   ========================================================================== */
.woocommerce div.product.product-type-variable form.cart .variations,
.product-actions-wrapper form.cart .variations {
    position: relative !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    border-collapse: collapse !important;
    display: table !important;
}

.woocommerce div.product.product-type-variable form.cart .variations tbody,
.product-actions-wrapper form.cart .variations tbody {
    display: block !important;
    width: 100% !important;
}

.woocommerce div.product.product-type-variable form.cart .variations tr,
.product-actions-wrapper form.cart .variations tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    border: none !important;
}

.woocommerce div.product.product-type-variable form.cart .variations th,
.woocommerce div.product.product-type-variable form.cart .variations td,
.product-actions-wrapper form.cart .variations th,
.product-actions-wrapper form.cart .variations td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce div.product.product-type-variable form.cart .variations th.label,
.product-actions-wrapper form.cart .variations th.label {
    margin-bottom: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.woocommerce div.product.product-type-variable form.cart .variations th.label label,
.product-actions-wrapper form.cart .variations th.label label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: default !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

.woocommerce div.product.product-type-variable form.cart .variations th.label .wcboost-variation-swatches__selected-label,
.woocommerce div.product.product-type-variable form.cart .variations th.label .mf-attr-value {
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    padding-left: 2px !important;
}

.woocommerce div.product.product-type-variable form.cart .variations td.value,
.product-actions-wrapper form.cart .variations td.value {
    display: block !important;
    margin: 0 !important;
    position: relative !important;
    width: 100% !important;
}

/* Fallback standard select dropdown */
.woocommerce div.product.product-type-variable form.cart .variations select,
.product-actions-wrapper form.cart .variations select {
    width: 100% !important;
    max-width: 320px !important;
    height: 40px !important;
    padding: 0 15px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* Reset / Clear variations link - positioned under swatches matching Martfury */
.woocommerce div.product.product-type-variable form.cart .reset_variations,
.product-actions-wrapper form.cart .reset_variations {
    display: block !important;
    font-size: 13px !important;
    color: #cc0000 !important;
    text-decoration: underline !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    cursor: pointer !important;
    line-height: normal !important;
    width: 100% !important;
    text-align: left !important;
    clear: both !important;
}

.woocommerce div.product.product-type-variable form.cart .reset_variations:hover,
.product-actions-wrapper form.cart .reset_variations:hover {
    color: #990000 !important;
}

/* ==========================================================================
   3. WCBoost Variation Swatches Styles (Matching Reference)
   ========================================================================== */
.wcboost-variation-swatches {
    display: inline-block !important;
    margin: 0 !important;
    width: 100% !important;
}

.wcboost-variation-swatches > select {
    display: none !important;
}

.wcboost-variation-swatches__wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Base item */
.wcboost-variation-swatches__item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    text-align: center !important;
    line-height: 1.1 !important;
    border-radius: 3px !important;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.wcboost-variation-swatches__item.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    border-style: dashed !important;
}

/* --- 3A. Button & Label Swatches --- */
.wcboost-variation-swatches--button .wcboost-variation-swatches__item,
.wcboost-variation-swatches--label .wcboost-variation-swatches__item,
.wcboost-variation-swatches:not(.wcboost-variation-swatches--color):not(.wcboost-variation-swatches--image) .wcboost-variation-swatches__item {
    min-width: 50px !important;
    height: 32px !important;
    padding: 2px 14px !important;
    border: 1px solid #d9d9d9 !important;
    background: #ffffff !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.wcboost-variation-swatches--button .wcboost-variation-swatches__item:hover,
.wcboost-variation-swatches--label .wcboost-variation-swatches__item:hover,
.wcboost-variation-swatches:not(.wcboost-variation-swatches--color):not(.wcboost-variation-swatches--image) .wcboost-variation-swatches__item:hover {
    border-color: #000000 !important;
    color: #000000 !important;
}

.wcboost-variation-swatches--button .wcboost-variation-swatches__item.selected,
.wcboost-variation-swatches--label .wcboost-variation-swatches__item.selected,
.wcboost-variation-swatches:not(.wcboost-variation-swatches--color):not(.wcboost-variation-swatches--image) .wcboost-variation-swatches__item.selected {
    border: 2px solid #fcb800 !important;
    color: #000000 !important;
    font-weight: 600 !important;
    background: #ffffff !important;
}

/* --- 3B. Color Swatches (Matches ifuturetech.org) --- */
.wcboost-variation-swatches--color .wcboost-variation-swatches__item {
    width: var(--wcboost-swatches-item-width, 60px) !important;
    height: var(--wcboost-swatches-item-height, 30px) !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

.wcboost-variation-swatches--color.wcboost-variation-swatches--round .wcboost-variation-swatches__item {
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
}

.wcboost-variation-swatches--color .wcboost-variation-swatches__item .wcboost-variation-swatches__name {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--wcboost-swatches-item-color) !important;
    background-image: var(--wcboost-swatches-item-image) !important;
    text-indent: -9999em !important;
    position: relative !important;
    border-radius: inherit !important;
}

.wcboost-variation-swatches--color .wcboost-variation-swatches__item:hover {
    border-color: #000000 !important;
    box-shadow: none !important;
}

.wcboost-variation-swatches--color .wcboost-variation-swatches__item.selected {
    border: 2px solid #fcb800 !important;
    box-shadow: none !important;
}

/* Checkmark on active/hovered color swatch (exact Martfury style) */
.wcboost-variation-swatches--color .wcboost-variation-swatches__item.selected .wcboost-variation-swatches__name:after,
.wcboost-variation-swatches--color .wcboost-variation-swatches__item:hover .wcboost-variation-swatches__name:after {
    transform: rotate(45deg) !important;
    content: "" !important;
    display: block !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: -8px 0 0 -3px !important;
    width: 6px !important;
    height: 11px !important;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)) !important;
}

/* --- 3C. Image Swatches --- */
.wcboost-variation-swatches--image .wcboost-variation-swatches__item {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

.wcboost-variation-swatches--image.wcboost-variation-swatches--round .wcboost-variation-swatches__item {
    border-radius: 50% !important;
}

.wcboost-variation-swatches--image .wcboost-variation-swatches__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
}

.wcboost-variation-swatches--image .wcboost-variation-swatches__item:hover {
    border-color: #000000 !important;
}

.wcboost-variation-swatches--image .wcboost-variation-swatches__item.selected {
    border: 2px solid #fcb800 !important;
}

/* --- 3D. Tooltips Matching Martfury --- */
.wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item::before {
    content: attr(aria-label) !important;
    text-indent: initial !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    background: #111111 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    padding: 5px 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    user-select: none !important;
    border-radius: 3px !important;
    transform: translate(-50%, -4px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 100 !important;
}

.wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item::after {
    content: "" !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border: 5px solid transparent !important;
    border-top-color: #111111 !important;
    margin: 0 0 -2px -5px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
    z-index: 100 !important;
}

.wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:hover::before,
.wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:hover::after {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
}

.wcboost-variation-swatches--button .wcboost-variation-swatches__item::before,
.wcboost-variation-swatches--button .wcboost-variation-swatches__item::after,
.wcboost-variation-swatches--label .wcboost-variation-swatches__item::before,
.wcboost-variation-swatches--label .wcboost-variation-swatches__item::after {
    display: none !important;
}

/* ==========================================================================
   4. Single Variation Wrapper (Price, Availability, Buttons)
   ========================================================================== */
.single_variation_wrap {
    width: 100% !important;
    margin-top: 15px !important;
    display: block !important;
}

.single_variation_wrap .woocommerce-variation.single_variation {
    margin-bottom: 15px !important;
    display: block !important;
}

/* Hide bottom duplicate variation price - Price is displayed exclusively in the top price box */
.single_variation_wrap .woocommerce-variation.single_variation .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-price,
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price {
    display: none !important;
}

/* Ensure hidden range price stays hidden when variation-price is appended */
.martfury-product-price .price[style*="none"],
.martfury-product-price p.price[style*="none"],
.martfury-product-price [style*="display: none"],
.martfury-product-price [style*="display:none"] {
    display: none !important;
}

/* Ensure top variation-price has correct typography matching Martfury */
.martfury-product-price .variation-price,
.martfury-product-price .variation-price .price {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    line-height: 1 !important;
}

.martfury-product-price .variation-price ins,
.martfury-product-price .variation-price .price ins,
.martfury-product-price .variation-price .price > .woocommerce-Price-amount,
.martfury-product-price .variation-price > .woocommerce-Price-amount {
    order: 1 !important;
    color: #000000 !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.martfury-product-price .variation-price del,
.martfury-product-price .variation-price .price del {
    order: 2 !important;
    font-size: 18px !important;
    color: #777777 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

.single_variation_wrap .woocommerce-variation-availability {
    margin-bottom: 12px !important;
}

.single_variation_wrap .woocommerce-variation-availability .stock {
    font-size: 14px !important;
    color: #333333 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.single_variation_wrap .woocommerce-variation-availability .stock.in-stock {
    color: #8bc500 !important;
    font-weight: 700 !important;
}

.single_variation_wrap .woocommerce-variation-availability .stock.out-of-stock {
    color: #e2401c !important;
    font-weight: 700 !important;
}

/* Variable Products: Button & Quantity Row */
.single_variation_wrap .woocommerce-variation-add-to-cart,
.single_variation_wrap .variations_button {
    display: flex !important;
    align-items: flex-end !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .quantity,
.single_variation_wrap .variations_button .quantity {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single_variation_wrap .variations_button .single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart .buy_now_button,
.single_variation_wrap .variations_button .buy_now_button {
    height: 48px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    cursor: pointer !important;
}

.single_variation_wrap .single_add_to_cart_button {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.single_variation_wrap .single_add_to_cart_button:hover {
    background-color: #333333 !important;
}

.single_variation_wrap .buy_now_button {
    background-color: #fcb800 !important;
    color: #111111 !important;
}

.single_variation_wrap .buy_now_button:hover {
    background-color: #e0a300 !important;
}

/* ==========================================================================
   5. Mobile Responsiveness
   ========================================================================== */
@media (max-width: 768px) {
    .single_variation_wrap .woocommerce-variation-add-to-cart,
    .single_variation_wrap .variations_button {
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    .single_variation_wrap .woocommerce-variation-add-to-cart .quantity,
    .single_variation_wrap .variations_button .quantity {
        width: 100% !important;
    }
    .single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button,
    .single_variation_wrap .variations_button .single_add_to_cart_button,
    .single_variation_wrap .woocommerce-variation-add-to-cart .buy_now_button,
    .single_variation_wrap .variations_button .buy_now_button {
        width: 100% !important;
        min-width: unset !important;
        flex: unset !important;
    }
}