/**
 * Huerto Variations - Combined Styles
 * Base styles from WPC Variation Swatches + Custom stepped variation styles
 */

/* ==========================================================================
   BASE SWATCH STYLES (from WPC Variation Swatches)
   ========================================================================== */

.wpcvs-empty,
.wpcvs-terms+select:not(.wpcvs-select),
.wpcvs-term.wpcvs-disabled:after,
.wpcvs-term.wpcvs-disabled:before {
    display: none !important;
}

.wpcvs-terms {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}

.wpcvs-terms .wpcvs-term {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    margin: 3px 6px 3px 0;
    padding: 3px;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: #dddddd;
    background-color: #ffffff;
    position: relative;
    box-sizing: border-box;
    float: none;
}

.wpcvs-terms .wpcvs-term .wpcvs-term-inner {
    display: flex;
    align-items: center;
    position: relative;
    background-color: #efefef;
}

.wpcvs-terms .wpcvs-term.wpcvs-selected {
    border-color: green;
}

.wpcvs-terms .wpcvs-term.wpcvs-selected .wpcvs-term-inner:before {
    content: "✓";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background-color: green;
    color: #ffffff;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 9;
    border: 2px solid #ffffff;
}

.wpcvs-terms .wpcvs-term.wpcvs-disabled {
    opacity: 0.4;
    cursor: default;
    filter: grayscale(100%);
}

.wpcvs-terms .wpcvs-term.wpcvs-disabled .wpcvs-term-inner {
    border: none !important;
}

.wpcvs-terms.wpcvs-type-image .wpcvs-term .wpcvs-term-image {
    font-size: 0;
    border-radius: 2px;
    width: 34px;
    flex: 0 0 34px;
}

.wpcvs-terms.wpcvs-type-image .wpcvs-term .wpcvs-term-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 2px;
}

.wpcvs-terms.wpcvs-type-color .wpcvs-term {
    height: 42px;
}

.wpcvs-terms.wpcvs-type-color .wpcvs-term .wpcvs-term-color {
    font-size: 0;
    border-radius: 2px;
    width: 34px;
    flex: 0 0 34px;
}

.wpcvs-terms.wpcvs-type-button .wpcvs-term .wpcvs-term-inner {
    border-radius: 2px;
}

.wpcvs-terms.wpcvs-style-rounded .wpcvs-term {
    border-radius: 21px;
}

.wpcvs-terms.wpcvs-style-rounded .wpcvs-term .wpcvs-term-inner {
    border-radius: 17px;
}

table.variations.wpcvs-initialized tr {
    display: flex;
    align-items: center;
}

table.variations.wpcvs-initialized tr .label {
    width: 100px;
    flex: 0 0 100px;
}

table.variations.wpcvs-initialized tr .value {
    flex-grow: 1;
}

/* ==========================================================================
   CUSTOM HUERTOBIO STYLES (from variation-swatches.css)
   ========================================================================== */

.variations_form {
    display: flex;
    gap: 0.5em;
    flex-direction: column;
    width: 100%;
}

ul.products .variations_form .variations {
    display: flex;
}

.variations_form .variations {
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

.single-product .variations_form .variations:has(.variation.active) {
    display: flex;
}

/* Hide select dropdown on frontend only (not in admin) */
body.woocommerce .variations_form .variations .variation select,
body.single-product .variations_form .variations .variation select,
.wpcvs_archive select {
    display: none !important;
}


.variations_form .variations .variation {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    transform: scaleY(0);
    transform-origin: top;
    visibility: hidden;
    contain: layout style paint;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease, max-height 0.3s ease, visibility 0s 0.3s;
}

.variations_form .variation.active {
    max-height: 500px;
    opacity: 1;
    transform: scaleY(1) translateY(0);
    visibility: visible;
    will-change: transform, opacity;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease, max-height 0.3s ease, visibility 0s 0s;
}



/* ==========================================================================
   STEPPED NAVIGATION STYLES
   ========================================================================== */

.variations_form .hb-stepped-variations-nav {
    display: flex;
    gap: 0.25em;
    padding: 0;
    list-style: none;
    height: 2em;
    max-width: 20em;
}

.variations_form .hb-step-bar {
    height: 100%;
    padding: 0.25em;
    background-color: var(--background-light);
    border-radius: 1em;
    cursor: pointer;
    transition: flex 0.3s ease, background-color 0.3s ease;
    position: relative;
    contain: layout style;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.variations_form .hb-step-bar .hb-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--background-middle);
    color: var(--dark-gray);
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
    height: 100%;
    aspect-ratio: 1;
}

.variations_form .hb-step-bar .hb-step-label {
    display: none;
    white-space: nowrap;
    padding-right: 0.75em;
    padding-left: 0.35em;
    font-size: 0.9em;
    font-weight: 500;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.variations_form .hb-step-bar:not(.active):not(.completed):hover {
    background-color: var(--background-dark);
    will-change: background-color;
}

.variations_form .hb-step-bar.completed {
    background-color: var(--vegetal-light);
}

.variations_form .hb-step-bar.completed .hb-step-number {
    background-color: white;
    color: var(--vegetal-dark);
}

.variations_form .hb-step-bar.completed:not(.active):hover {
    background-color: var(--vegetal);
}

.variations_form .hb-step-bar.active {
    flex: 1 1 auto;
    background-color: var(--background-light);
}

.variations_form .hb-step-bar.active .hb-step-number {
    background-color: var(--vegetal-dark);
    color: white;
}

.variations_form .hb-step-bar.active .hb-step-label {
    display: block;
    opacity: 1;
    color: var(--dark-gray);
}

.variations_form .variation.active .wpcvs-terms {
    display: flex;
}

.variations_form .variation .wpcvs-terms {
    max-height: 10em;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    gap: 5px;
    font-size: 0.9em;
    align-items: stretch;
    flex-wrap: wrap;
    overscroll-behavior: contain;
    will-change: scroll-position;
    padding: 0.2em 0;
}

.variations_form .variation .wpcvs-terms .wpcvs-term {
    padding: 0;
    border: 0 none;
    box-shadow: none;
    margin: 0;
}

.variations_form .variation .wpcvs-terms .wpcvs-term.wpcvs-selected {
    color: var(--vegetal-dark);
    font-weight: bold;
    opacity: 0.9;
}

.variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    border: 4px solid var(--vegetal-light);
    background-color: var(--background-light);
    color: var(--vegetal-dark);
    padding: 0.25em 0.5em;
    border-radius: 1.5em;
}

.variations_form .variation .wpcvs-terms .wpcvs-term.wpcvs-selected .wpcvs-term-inner {
    background-color: var(--vegetal-dark);
    color: white;
}

.variations_form .variation .wpcvs-terms .wpcvs-term:hover:not(.wpcvs-selected, .wpcvs-disabled) .wpcvs-term-inner {
    background-color: var(--vegetal-dark);
    color: white;
}

.variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner:has(.wpcvs-term-image) {
    padding-left: 0.25em;
    padding-right: 0.75em;
}

.variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner .wpcvs-term-image {
    flex: 0 0 27px;
    background-color: white;
    border-radius: 50%;
    padding: 2px;
}

.variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner .wpcvs-term-image img {
    border-radius: 50%;
}

/* ==========================================================================
   SELECTED VARIATIONS DISPLAY
   ========================================================================== */

.variations_form .hb-selected-variations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    font-size: 0.825em;
    text-align: left;
}

.variations_form .hb-selected-variations strong {
    color: var(--vegetal-dark);
}

.variations_form .wpcvs-terms .wpcvs-term.wpcvs-selected .wpcvs-term-inner:before {
    top: -4px;
    right: -8px;
}

/* ==========================================================================
   SCROLLBAR STYLES
   ========================================================================== */

.variations_form .variation.active .wpcvs-terms::-webkit-scrollbar {
    width: 6px;
}

.variations_form .variation.active .wpcvs-terms::-webkit-scrollbar-track {
    background: var(--background-light);
    border-radius: 3px;
}

.variations_form .variation.active .wpcvs-terms::-webkit-scrollbar-thumb {
    background: var(--gray);
    border-radius: 3px;
}

.variations_form .variation.active .wpcvs-terms::-webkit-scrollbar-thumb:hover {
    background: var(--dark-gray);
}

/* ==========================================================================
   RESET VARIATIONS BUTTON
   ========================================================================== */

.variations_form .reset_variations {
    text-decoration: none;
    font-size: 0.75em;
    background-color: var(--background-light);
    display: flex;
    border-radius: 0.75em;
    padding: 0.5em 1em;
    margin: 0.25em 0 0.8em 0;
    justify-content: center;
    align-items: center;
}

.single-product .variations_form .reset_variations {
    width: fit-content;
    justify-content: flex-start;
}

.variations_form .reset_variations[style*="visibility: hidden"] {
    display: none !important;
}

.variations_form .reset_variations::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7L288 480l9.4 0L512 480c17.7 0 32-14.3 32-32s-14.3-32-32-32l-124.1 0L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416l-9.4 0-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7L288 480l9.4 0L512 480c17.7 0 32-14.3 32-32s-14.3-32-32-32l-124.1 0L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416l-9.4 0-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.variations_form .reset_variations:hover {
    background-color: var(--background-middle);
}

/* ==========================================================================
   AJAX ADD TO CART BUTTON (Archive/Loop)
   ========================================================================== */

/* Ensure AJAX add to cart button behaves correctly with cache */
.huertobio_add_to_cart,
a.huertobio_add_to_cart,
button.huertobio_add_to_cart {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    overflow: hidden;
}

.huertobio_add_to_cart.loading,
a.huertobio_add_to_cart.loading,
button.huertobio_add_to_cart.loading {
    pointer-events: none !important;
    cursor: wait !important;
    background-color: var(--vegetal) !important;
    animation: color-pulse 1s ease-in-out infinite !important;
    color: white !important;
    border-color: var(--vegetal) !important;
}

@keyframes color-pulse {
    0% {
        background-color: var(--vegetal);
    }

    50% {
        background-color: var(--vegetal-light);
    }

    100% {
        background-color: var(--vegetal);
    }
}

.huertobio_add_to_cart.disabled {
    opacity: 0.5;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Prevent any link-like behavior */
a.huertobio_add_to_cart {
    text-decoration: none !important;
}

a.huertobio_add_to_cart:hover,
a.huertobio_add_to_cart:focus,
a.huertobio_add_to_cart:active {
    text-decoration: none !important;
}

/* View Cart Button (after add to cart) */
.huertobio-mini-cart-trigger {
    width: 100%;
}

.huertobio-mini-cart-trigger:hover {
    background-color: var(--vegetal-dark);
    color: white;
}

/* Ensure button appears inline with add to cart button */
.added_to_cart.huertobio-mini-cart-trigger {
    display: inline-block;
    vertical-align: middle;
}

/* ==========================================================================
   OUT OF STOCK STYLES
   ========================================================================== */

.wpcvs-terms .wpcvs-term.wpcvs-out-of-stock {
    opacity: 1;
    cursor: pointer;
    filter: grayscale(100%);
}

.wpcvs-terms .wpcvs-term.wpcvs-out-of-stock .wpcvs-term-inner {
    background-color: #f1f1f1 !important;
    color: var(--gray) !important;
    border: 4px solid var(--light-gray) !important;
}

/* Image swatches specific */
.wpcvs-terms.wpcvs-type-image .wpcvs-term.wpcvs-out-of-stock .wpcvs-term-image img {
    opacity: 0.6;
}

.wpcvs-terms .wpcvs-term.wpcvs-out-of-stock:hover .wpcvs-term-inner {
    background-color: var(--light-gray) !important;
}

/* Ensure selected items are ALWAYS visible, even if technically disabled/unavailable in the current context checking */
.wpcvs-terms .wpcvs-term.wpcvs-selected {
    opacity: 1 !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES
   ========================================================================== */

/* Hide mobile step bars by default (desktop) */
.variations_form .variations .hb-step-bar-mobile {
    display: none;
}

@media (max-width: 768px) {
    .variations_form {
        font-size: 1em;
        gap: 0.5em;
    }

    /* 
     * MOBILE INTERLEAVED LAYOUT
     * Display step bars and their terms in pairs using flexbox order.
     * Each step bar is followed by its corresponding variation terms.
     * Only the active variation expands to show terms.
     */

    /* Hide desktop nav container on mobile */
    .variations_form .hb-stepped-variations-nav {
        display: none;
    }

    /* Show mobile step bars (inserted before each variation) */
    .variations_form .variations .hb-step-bar-mobile {
        display: flex;
        order: var(--step-order);
        flex: 0 0 auto;
        height: auto;
        /* Override inherited height: 100% from base styles */
        min-height: 2.75em;
        max-height: 3.5em;
        /* Prevent excessive growth */
        padding: 0.5em;
        border-radius: 1.75em;
        align-items: center;
    }

    .variations_form .variations .hb-step-bar-mobile .hb-step-number {
        flex-shrink: 0;
        min-width: 1.75em;
        width: 1.75em;
        height: 1.75em;
        /* Explicit height instead of 100% */
        font-size: 1.1em;
        aspect-ratio: unset;
        /* Override aspect-ratio: 1 from base */
    }

    .variations_form .variations .hb-step-bar-mobile .hb-step-label {
        display: block;
        opacity: 1;
        padding-left: 0.5em;
        padding-right: 0.5em;
        font-size: 1em;
        color: var(--dark-gray);
    }

    .variations_form .variations .hb-step-bar-mobile.active .hb-step-label {
        font-weight: 600;
    }

    /* Variations container uses flex column for ordering */
    .variations_form .variations {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    /* Variation containers follow their corresponding step bar */
    .variations_form .variations .variation {
        order: var(--step-order);
    }

    /* Variation Terms - Mobile Optimizations */
    .variations_form .variation .wpcvs-terms {
        gap: 0.5em;
        font-size: 1em;
        max-height: 15em;
        padding: 0.5em 0;
    }

    .variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner {
        padding: 0.6em 1em;
        border-radius: 1.75em;
        border-width: 3px;
        font-size: 1em;
        min-height: 2.75em;
    }

    .variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner:has(.wpcvs-term-image) {
        padding-left: 0.4em;
        padding-right: 1em;
    }

    .variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner .wpcvs-term-image {
        flex: 0 0 40px;
        padding: 3px;
    }

    /* Selected Variations Display - Mobile */
    .variations_form .hb-selected-variations {
        font-size: 1em;
        gap: 0.35em;
        line-height: 1.4;
    }

    /* Reset Button - Mobile (override WooCommerce styles) */
    .single-product .variations_form .reset_variations,
    .woocommerce .variations_form .reset_variations,
    .variations_form .reset_variations {
        display: flex !important;
        visibility: visible !important;
        width: 100% !important;
        font-size: 1em !important;
        padding: 0.85em 1.5em !important;
        margin: 0.75em 0 1.25em 0 !important;
        /* Added bottom margin for spacing with price */
        min-height: 3em !important;
        justify-content: center !important;
        align-items: center;
        box-sizing: border-box;
    }

    /* Archive/Loop Mobile Adjustments */
    ul.products .variations_form {
        font-size: 0.9em;
    }

    ul.products .variations_form .hb-step-bar {
        min-height: 2.5em;
        padding: 0.4em;
    }

    ul.products .variations_form .hb-step-bar .hb-step-number {
        min-width: 1.5em;
        height: 1.5em;
        font-size: 1em;
    }

    ul.products .variations_form .hb-step-bar .hb-step-label {
        font-size: 0.95em;
    }

    ul.products .variations_form .variation .wpcvs-terms {
        gap: 0.4em;
        font-size: 0.95em;
    }

    ul.products .variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner {
        padding: 0.5em 0.75em;
        min-height: 2.5em;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .variations_form {
        font-size: 1em;
    }

    .variations_form .variations .hb-step-bar-mobile {
        min-height: 3em;
    }

    .variations_form .variations .hb-step-bar-mobile .hb-step-number {
        min-width: 2em;
        height: 2em;
        font-size: 1.15em;
    }

    .variations_form .variations .hb-step-bar-mobile .hb-step-label {
        font-size: 1.05em;
    }

    .variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner {
        padding: 0.75em 1em;
        min-height: 3em;
        font-size: 1.05em;
    }

    .variations_form .variation .wpcvs-terms .wpcvs-term .wpcvs-term-inner .wpcvs-term-image {
        flex: 0 0 44px;
        padding: 4px;
    }

    .single-product .variations_form .reset_variations,
    .woocommerce .variations_form .reset_variations,
    .variations_form .reset_variations {
        font-size: 1.05em !important;
        padding: 0.9em 1.75em !important;
        min-height: 3.25em !important;
    }
}

/* Landscape mobile optimization - restore compact horizontal layout */
@media (max-width: 768px) and (orientation: landscape) {

    /* Restore normal display for nav container */
    .variations_form .hb-stepped-variations-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35em;
        height: auto;
        max-width: 100%;
    }

    .variations_form .hb-step-bar {
        order: unset;
        flex: 1 1 calc(50% - 0.25em);
        min-height: 2.25em;
        padding: 0.4em;
        border-radius: 1.5em;
    }

    .variations_form .hb-step-bar .hb-step-number {
        min-width: 1.5em;
        height: 1.5em;
        font-size: 0.9em;
    }

    .variations_form .hb-step-bar .hb-step-label {
        padding-left: 0.4em;
        padding-right: 0.4em;
        font-size: 0.9em;
    }

    /* Hide mobile step bars in landscape (use desktop nav instead) */
    .variations_form .variations .hb-step-bar-mobile {
        display: none;
    }

    /* Reset variation order in landscape */
    .variations_form .variations .variation {
        order: unset;
    }
}