/**
 * FEF Woo Variations widget — styles
 * Powers: fef_woo_variations
 */

.fef-var-wrap{
    display:flex;flex-direction:column;gap:14px;
    box-sizing:border-box
}
.fef-var-wrap *{box-sizing:border-box}

/* ===================== Attribute groups ===================== */
.fef-var-group{display:flex;flex-direction:column;gap:8px}
.fef-var-label{font-size:13px;font-weight:600;color:#1e293b}

/* Dropdown */
.fef-var-select{
    width:100%;
    padding:10px 12px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    font-size:14px;
    background:#fff;color:#1e293b;
    outline:none;
    transition:border-color 0.15s ease,box-shadow 0.15s ease
}
.fef-var-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
.fef-var-select option:disabled{color:#cbd5e1}

/* Text pill options */
.fef-var-options{display:flex;flex-wrap:wrap;gap:8px}
.fef-var-btn-opt{
    padding:8px 16px;
    background:#f8fafc;color:#1e293b;
    border:1px solid #e2e8f0;border-radius:999px;
    font-size:13px;font-weight:600;
    cursor:pointer;
    transition:all 0.15s ease
}
.fef-var-btn-opt:hover:not(.is-disabled){border-color:#94a3b8}
.fef-var-btn-opt.is-selected{background:#1e293b;color:#fff;border-color:#1e293b}
.fef-var-btn-opt.is-disabled{
    opacity:0.4;cursor:not-allowed;
    text-decoration:line-through;
    background:#f1f5f9
}

/* Color swatches */
.fef-var-options-color{gap:10px}
.fef-var-swatch{
    width:34px;height:34px;
    border:2px solid #e2e8f0;
    cursor:pointer;
    padding:0;
    transition:box-shadow 0.15s ease,transform 0.1s ease;
    position:relative
}
.fef-var-shape-circle .fef-var-swatch{border-radius:50%}
.fef-var-shape-square .fef-var-swatch{border-radius:8px}
.fef-var-swatch:hover:not(.is-disabled){transform:scale(1.08)}
.fef-var-swatch.is-selected{box-shadow:0 0 0 2px #fff, 0 0 0 4px #1e293b}
.fef-var-swatch.is-disabled{
    opacity:0.35;cursor:not-allowed;
}
.fef-var-swatch.is-disabled::after{
    content:"";
    position:absolute;left:8%;right:8%;top:50%;
    height:2px;background:currentColor;
    background:#94a3b8;
    transform:rotate(-45deg)
}

/* Clear selection */
.fef-var-reset{
    align-self:flex-start;
    background:none;border:none;
    color:#3b82f6;font-size:12px;
    cursor:pointer;padding:0;
    text-decoration:underline
}
.fef-var-reset:hover{color:#2563eb}

/* ===================== Price / stock / meta ===================== */
.fef-var-price{font-size:22px;font-weight:700;color:#1e293b;line-height:1.2}
.fef-var-price ins{background:none;text-decoration:none;color:#dc2626}
.fef-var-price del{color:#94a3b8;margin-right:8px;font-weight:500}

.fef-var-stock{
    display:inline-block;width:fit-content;
    font-size:12px;font-weight:600;
    padding:4px 10px;border-radius:12px
}
.fef-var-stock-out{background:#fee2e2;color:#991b1b}
.fef-var-stock-back{background:#fef3c7;color:#92400e}

.fef-var-sku{font-size:12px;color:#64748b}
.fef-var-desc{font-size:13px;color:#475569;line-height:1.5}

.fef-var-image img{border-radius:8px;display:block}

/* ===================== Message ===================== */
.fef-var-message{
    padding:10px 12px;
    border-radius:8px;
    font-size:13px;line-height:1.5
}
.fef-var-msg-ok{background:#dcfce7;color:#166534}
.fef-var-msg-fail{background:#fee2e2;color:#991b1b}
.fef-var-msg-info{background:#f1f5f9;color:#475569}

/* ===================== Add to cart row ===================== */
.fef-var-cart-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}

.fef-var-qty{
    display:flex;align-items:center;
    background:#f8fafc;border-radius:8px;overflow:hidden
}
.fef-var-qty-btn{
    width:34px;height:100%;min-height:44px;
    background:none;border:none;
    font-size:16px;color:#1e293b;
    cursor:pointer
}
.fef-var-qty-btn:hover{background:#e2e8f0}
.fef-var-qty-input{
    width:44px;border:none;background:none;
    text-align:center;font-size:14px;color:#1e293b;
    -moz-appearance:textfield
}
.fef-var-qty-input::-webkit-outer-spin-button,
.fef-var-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.fef-var-buttons{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.fef-var-btn{
    flex:1;min-width:140px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 20px;
    border:none;border-radius:8px;
    font-size:14px;font-weight:600;
    cursor:pointer;
    transition:background-color 0.15s ease,transform 0.1s ease
}
.fef-var-btn:hover:not(:disabled){transform:translateY(-1px)}
.fef-var-btn:active:not(:disabled){transform:translateY(0)}
.fef-var-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.fef-var-btn .fa-spinner{animation:fef-var-spin 0.8s linear infinite}

.fef-var-btn-add{background:#1e293b;color:#fff}
.fef-var-btn-add:hover:not(:disabled){background:#334155}
.fef-var-btn-buy{background:#dc2626;color:#fff}
.fef-var-btn-buy:hover:not(:disabled){background:#b91c1c}

@keyframes fef-var-spin{to{transform:rotate(360deg)}}

/* ────────────────────────────────────────────
   Smooth transitions for Style tab hover/selected states.
   Elementor writes color/border/box-shadow via the Style tab —
   these transitions make the changes feel polished rather than
   snapping between states.
   ──────────────────────────────────────────── */
.fef-var-select,
.fef-var-btn-opt,
.fef-var-swatch {
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
    will-change: transform;
}