/* Zek Quantity Stepper v2.0 — Ultra-lightweight CSS */

:root {
    --zqs-btn: 36px;
    --zqs-font: 18px;
    --zqs-pad: 5px;
    --zqs-ok: #198754;
    --zqs-warn: #fd7e14;
    --zqs-r: 8px;
    --zqs-border: #e0e0e0;
    --zqs-hover-bd: #b58b4b;
    --zqs-hover-bg: #fbf8f1;
}

/* ═══ Container ═══ */
.woocommerce .zqs, .zqs {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    box-sizing: border-box !important;
    justify-content: flex-end !important;
    margin: 0 0 0 auto !important;
    padding-right: var(--zqs-pad) !important;
}
.woocommerce .zqs.zqs-align-left, .zqs.zqs-align-left {
    justify-content: flex-start !important;
    padding-right: 0 !important;
    padding-left: var(--zqs-pad) !important;
    margin: 0 auto 0 0 !important;
}
.woocommerce .zqs.zqs-align-center, .zqs.zqs-align-center {
    justify-content: center !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin: 0 auto !important;
}

/* ═══ Buttons ═══ */
.woocommerce .zqs .zqs-btn, .zqs .zqs-btn {
    width: var(--zqs-btn) !important;
    height: var(--zqs-btn) !important;
    min-width: var(--zqs-btn) !important;
    min-height: var(--zqs-btn) !important;
    max-width: var(--zqs-btn) !important;
    max-height: var(--zqs-btn) !important;
    border-radius: var(--zqs-r) !important;
    border: 1px solid var(--zqs-border) !important;
    background: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
    transition: all 0.18s ease !important;
}
.woocommerce .zqs .zqs-btn:hover, .zqs .zqs-btn:hover {
    border-color: var(--zqs-hover-bd) !important;
    background: var(--zqs-hover-bg) !important;
    color: var(--zqs-hover-bd) !important;
}
.woocommerce .zqs .zqs-btn:active, .zqs .zqs-btn:active {
    transform: scale(0.93) !important;
}

/* ═══ Button Wrapper ═══ */
.zqs .zqs-bw {
    position: relative !important;
    display: inline-flex !important;
}

/* ═══ Input Wrapper ═══ */
.zqs .zqs-iw {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═══ Input ═══ */
.woocommerce .zqs .zqs-input, .zqs .zqs-input {
    width: 2ch;
    min-width: 1ch;
    height: var(--zqs-btn) !important;
    text-align: center !important;
    font-size: var(--zqs-font) !important;
    font-weight: 600 !important;
    color: #333 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -moz-appearance: textfield !important;
    transition: color 0.15s ease !important;
}
.zqs .zqs-input::-webkit-outer-spin-button,
.zqs .zqs-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ═══ Loading Spinner ═══ */
@keyframes zqsSpin { to { transform: rotate(360deg); } }

.zqs.zqs-loading .zqs-iw::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #aaa !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    animation: zqsSpin 0.6s linear infinite !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: -9px 0 0 -9px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}
.zqs.zqs-loading .zqs-input,
.zqs.zqs-active.zqs-loading .zqs-input,
.zqs.zqs-warn.zqs-loading .zqs-input {
    opacity: 0.25 !important;
}

/* ═══ Disabled (Variable before selection) ═══ */
.zqs.zqs-disabled {
    pointer-events: none !important;
    opacity: 0.4 !important;
    filter: grayscale(100%) !important;
}

/* ═══ Popups ═══ */
.zqs .zqs-pop {
    position: absolute !important;
    bottom: calc(var(--zqs-btn) + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: var(--zqs-r) !important;
    padding: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s, visibility 0.2s !important;
    transition-delay: 0.15s !important;
    z-index: 99 !important;
    pointer-events: none !important;
}

/* Invisible bridge between button and popup */
.zqs .zqs-pop::before {
    content: '' !important;
    position: absolute !important;
    bottom: -12px !important;
    left: 0 !important;
    width: 100% !important;
    height: 12px !important;
}

/* Arrow */
.zqs .zqs-pop::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    border-right: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
}

/* Show popup on wrapper hover or popup hover */
.zqs .zqs-bw:hover .zqs-pop,
.zqs .zqs-pop:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
}

/* Popup items */
.zqs .zqs-pop span {
    display: block !important;
    padding: 5px 12px !important;
    font-size: 13px !important;
    color: #555 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: background 0.15s !important;
}
.zqs .zqs-pop span:hover {
    background: var(--zqs-hover-bg) !important;
    color: var(--zqs-hover-bd) !important;
}
.zqs .zqs-trash { color: #dc3545 !important; }
.zqs .zqs-trash:hover { background: #f8d7da !important; color: #dc3545 !important; }

/* ═══ STATE: In Cart (Green) ═══ */
.woocommerce .zqs.zqs-active .zqs-btn, .zqs.zqs-active .zqs-btn {
    border-color: var(--zqs-ok) !important;
    color: var(--zqs-ok) !important;
}
.woocommerce .zqs.zqs-active .zqs-input, .zqs.zqs-active .zqs-input {
    color: var(--zqs-ok) !important;
}
.zqs.zqs-active.zqs-loading .zqs-iw::after {
    border-color: var(--zqs-ok) !important;
    border-right-color: transparent !important;
}

/* ═══ STATE: Warning / Backorder (Orange) ═══ */
.woocommerce .zqs.zqs-warn .zqs-btn, .zqs.zqs-warn .zqs-btn {
    border-color: var(--zqs-warn) !important;
    color: var(--zqs-warn) !important;
}
.woocommerce .zqs.zqs-warn .zqs-input, .zqs.zqs-warn .zqs-input {
    color: var(--zqs-warn) !important;
}
.zqs.zqs-warn.zqs-loading .zqs-iw::after {
    border-color: var(--zqs-warn) !important;
    border-right-color: transparent !important;
}

/* ═══ Single Product Page (Larger) ═══ */
.woocommerce .zqs.zqs-single, .zqs.zqs-single {
    --zqs-btn: var(--zqs-single-btn, 50px);
    --zqs-font: var(--zqs-single-font, 26px);
    padding: 0 !important;
    margin: 15px 0 !important;
    width: auto !important;
    gap: 8px !important;
}
.zqs.zqs-single .zqs-pop span {
    padding: 6px 14px !important;
    font-size: 15px !important;
}

/* Visually hide default WC quantity and button so theme's floating bar JS still works */
.summary.entry-summary form.cart div.quantity,
.summary.entry-summary form.cart .single_add_to_cart_button,
form.cart:has(.zqs) div.quantity,
form.cart:has(.zqs) .single_add_to_cart_button,
form.cart:has(.zqs) button[type="submit"],
td.product-add-to-cart:has(.zqs) .quantity,
td.product-add-to-cart:has(.zqs) .button,
td.product-add-to-cart:has(.zqs) .add_to_cart_button,
*:has(> .zqs) > div.quantity,
*:has(> .zqs) > .single_add_to_cart_button,
*:has(> .zqs) > .button,
*:has(> .zqs) > .added_to_cart {
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    border: none !important;
    outline: none !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* Hide the cloned default quantity input inside the floating bar */
.ct-floating-bar div.quantity {
    display: none !important;
}

/* Prevent ZQS from overlapping with the scroll-to-top button */
.ct-floating-bar .zqs {
    margin-right: 60px !important;
}

/* ═══ Toasts ═══ */
.zqs-toasts {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: none !important;
}
.zqs-toast {
    padding: 10px 18px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    animation: zqsFadeIn 0.3s ease forwards !important;
    pointer-events: auto !important;
}
.zqs-toast-error   { background: #dc3545 !important; }
.zqs-toast-warning { background: var(--zqs-warn) !important; }
.zqs-toast-success { background: var(--zqs-ok) !important; }

@keyframes zqsFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes zqsFadeOut {
    to { opacity: 0; transform: translateX(20px); }
}

/* ═══ Loop Variable Product — Mini Variation Form ═══ */
.zqs-loop-var {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.zqs-loop-var > .variations_form,
.zqs-loop-var > .zqs-var-stepper-wrap {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: auto !important; /* Size exactly to content */
}

/* Default State: Form visible, Stepper right */
.zqs-loop-var .variations_form {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out, visibility 0.25s ease-out !important;
}

.zqs-loop-var .variations_form .variations {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.zqs-loop-var .zqs-var-row {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Hide native select if theme converts to swatches */
.zqs-loop-var .zqs-var-row select {
    width: 100% !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    border: 1px solid var(--zqs-border, #e0e0e0) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #555 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.zqs-loop-var .zqs-var-row select:hover,
.zqs-loop-var .zqs-var-row select:focus {
    border-color: var(--zqs-hover-bd, #b58b4b) !important;
}

/* Hide WC elements we don't need in the loop form */
.zqs-loop-var .variations_form .reset_variations,
.zqs-loop-var .variations_form .woocommerce-variation,
.zqs-loop-var .variations_form .woocommerce-variation-add-to-cart,
.zqs-loop-var .variations_form .single_variation_wrap {
    display: none !important;
}

/* ═══ Stepper Wrapper with Back Button ═══ */
.zqs-var-stepper-wrap {
    transform: translateX(20px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out, visibility 0.25s ease-out !important;
}

/* Show Stepper State: Form left, Stepper visible */
.zqs-loop-var.zqs-show-stepper .variations_form {
    transform: translateX(-20px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.zqs-loop-var.zqs-show-stepper .zqs-var-stepper-wrap {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

.zqs-var-stepper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: max-content !important;
    flex-wrap: nowrap !important;
}

.zqs-var-stepper .zqs {
    width: auto !important;
    margin: 0 !important;
}

/* Back button */
.zqs-back {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: 1px solid var(--zqs-border, #e0e0e0) !important;
    background: #fff !important;
    color: #888 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.18s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.zqs-back:hover {
    border-color: var(--zqs-hover-bd, #b58b4b) !important;
    background: var(--zqs-hover-bg, #fbf8f1) !important;
    color: var(--zqs-hover-bd, #b58b4b) !important;
}

.zqs-back:active {
    transform: scale(0.9) !important;
}

/* ═══ Loop Swatches (ZQS Native) ═══ */
.zqs-loop-var .zqs-swatches {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 2px 0 !important;
    overflow-x: auto !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.zqs-loop-var .zqs-swatches::-webkit-scrollbar {
    display: none !important;
}

/* ═══ Loop Grid Alignments ═══ */
.zqs-loop-var.zqs-align-right { justify-items: end !important; }
.zqs-loop-var.zqs-align-left { justify-items: start !important; }
.zqs-loop-var.zqs-align-center { justify-items: center !important; }

.zqs-loop-var.zqs-align-right .variations_form .variations,
.zqs-loop-var.zqs-align-right .zqs-swatches { justify-content: flex-end !important; }

.zqs-loop-var.zqs-align-left .variations_form .variations,
.zqs-loop-var.zqs-align-left .zqs-swatches { justify-content: flex-start !important; }

.zqs-loop-var.zqs-align-center .variations_form .variations,
.zqs-loop-var.zqs-align-center .zqs-swatches { justify-content: center !important; }

.zqs-loop-var.zqs-align-right .variations_form { padding: 0 var(--zqs-pad) 0 0 !important; }
.zqs-loop-var.zqs-align-left .variations_form { padding: 0 0 0 var(--zqs-pad) !important; }
.zqs-loop-var.zqs-align-center .variations_form { padding: 0 !important; }

.zqs-loop-var .zqs-swatches select {
    display: none !important;
}

.zqs-loop-var .zqs-swatch-btn {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 2px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.2s ease, transform 0.15s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.zqs-loop-var .zqs-swatch-btn:hover {
    border-color: #ccc !important;
    transform: scale(1.1) !important;
}

.zqs-loop-var .zqs-swatch-btn[aria-pressed="true"] {
    border-color: #333 !important;
}

.zqs-loop-var .zqs-swatch {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
}

.zqs-loop-var .zqs-swatch-content {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* Prevent theme from cutting off popups */
.ct-woo-card-extra {
    overflow: visible !important;
}

.zqs-loop-var .zqs-swatch-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    color: #333 !important;
    font-weight: 500 !important;
}

.zqs-loop-var .zqs-tooltip {
    display: none !important;
}