/**
 * PW Quantity Stepper — Frontend CSS
 * pw-stepper.css  v1.2.3
 */

/* ── CSS Variables — override from theme to match brand ──── */

:root {
    --pw-stepper-btn-size:       56px;
    --pw-stepper-btn-radius:     12px;
    --pw-stepper-btn-bg:         #f4f4f4;
    --pw-stepper-btn-bg-hover:   #e8e8e8;
    --pw-stepper-btn-bg-active:  #d8d8d8;
    --pw-stepper-btn-color:      #1a1a1a;
    --pw-stepper-btn-disabled:   #c8c8c8;
    --pw-stepper-num-color:      #1a1a1a;
    --pw-stepper-num-color-zero: #b0b0b0;
    --pw-stepper-num-size:       38px;
    --pw-stepper-unit-color:     #888;
    --pw-stepper-hint-color:     #e05a2b;
    --pw-stepper-accent:         #1a1a1a;
    --pw-stepper-gap:            8px;
}

/* ── Hide native qty input ───────────────────────────────── */

/* Hide native qty immediately — before JS runs, prevents flash */
.single-product form.cart .quantity {
    display: none !important;
}

/* Restore if stepper failed to init (safety net) */
.pw-stepper-ready form.cart .quantity {
    display: none !important;
}

input.pw-qty-hidden {
    display: none !important;
}

/* ── Stepper wrapper ─────────────────────────────────────── */

.pw-qty-stepper {
    display:         flex;
    align-items:     center;
    gap:             var(--pw-stepper-gap);
    user-select:     none;
    margin:          8px 0 4px;
}

/* ── Buttons ─────────────────────────────────────────────── */

.pw-qty-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            var(--pw-stepper-btn-size);
    height:           var(--pw-stepper-btn-size);
    min-width:        var(--pw-stepper-btn-size);
    border-radius:    var(--pw-stepper-btn-radius);
    border:           2px solid transparent;
    background:       var(--pw-stepper-btn-bg);
    color:            var(--pw-stepper-btn-color);
    cursor:           pointer;
    transition:       background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
    padding:          0;
    flex-shrink:      0;
    outline:          none;
    -webkit-tap-highlight-color: transparent;
}

.pw-qty-btn svg {
    width:  22px;
    height: 22px;
    display: block;
    pointer-events: none;
}

.pw-qty-btn:hover:not(:disabled) {
    background:   var(--pw-stepper-btn-bg-hover);
    border-color: var(--pw-stepper-accent);
}

.pw-qty-btn:active:not(:disabled) {
    background:  var(--pw-stepper-btn-bg-active);
    transform:   scale(0.94);
}

.pw-qty-btn:focus-visible {
    outline:        2px solid var(--pw-stepper-accent);
    outline-offset: 2px;
}

.pw-qty-btn:disabled {
    color:   var(--pw-stepper-btn-disabled);
    cursor:  not-allowed;
    opacity: 0.45;
}

/* ── Number display ──────────────────────────────────────── */

.pw-qty-display {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    min-width:      80px;
    text-align:     center;
    line-height:    1;
}

.pw-qty-number {
    display:     block;
    font-size:   var(--pw-stepper-num-size);
    font-weight: 700;
    color:       var(--pw-stepper-num-color-zero);
    letter-spacing: -1px;
    transition:  color 0.2s ease, transform 0.15s ease;
    line-height: 1;
}

.pw-qty-unit {
    display:     block;
    font-size:   11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:       var(--pw-stepper-unit-color);
    margin-top:  4px;
}

/* Valid state — number goes dark */
.pw-qty-stepper.pw-qty-valid .pw-qty-number {
    color: var(--pw-stepper-num-color);
}

/* Number pop animation on change */
.pw-qty-number.pw-qty-pop {
    transform: scale(1.18);
}

/* ── Hint message ────────────────────────────────────────── */

.pw-qty-hint {
    font-size:   13px;
    color:       var(--pw-stepper-hint-color);
    margin:      4px 0 8px !important;
    padding:     0 !important;
    font-weight: 500;
    display:     flex;
    align-items: center;
    gap:         6px;
    transition:  opacity 0.2s ease;
}

.pw-qty-hint::before {
    content: '↑';
    font-size: 14px;
}

.pw-qty-hint--hidden {
    opacity:        0;
    pointer-events: none;
    height:         0;
    margin:         0 !important;
    overflow:       hidden;
}

/* ── Blocked Add to Basket ───────────────────────────────── */

/* WooCommerce already styles .disabled — we just ensure our class
   doesn't need extra styling. The native .disabled state is sufficient.
   We add a subtle transition so the enable feels smooth. */

.single_add_to_cart_button {
    transition: opacity 0.2s ease, background-color 0.2s ease !important;
}

.single_add_to_cart_button.pw-stepper-blocked {
    opacity: 0.45 !important;
    cursor:  not-allowed !important;
    pointer-events: none !important;
}

/* ── Child product steppers (EPO Product element) ────────── */

.pw-qty-stepper-child {
    margin: 4px 0 2px;
}

/* Slightly smaller for child products */
.pw-qty-stepper-child .pw-qty-btn {
    width:     44px;
    height:    44px;
    min-width: 44px;
}

.pw-qty-stepper-child .pw-qty-display {
    min-width: 60px;
}

.pw-qty-stepper-child .pw-qty-number {
    font-size: 28px;
}

/* Hide EPO native qty + Add/Remove button when stepper is active */
.tm-quantity-alt.pw-qty-hidden,
.tm-quantity-alt .quantity.pw-qty-hidden {
    display: none !important;
}