/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce Elementor AJAX Add to Cart Icon — widget.css
   ═══════════════════════════════════════════════════════════════════════════
   States controlled by class on .watci-widget:
     .watci-state-default  → show icon
     .watci-state-loading  → show spinner (icon + qty hidden)
     .watci-state-in-cart  → show quantity number
     .watci-state-error    → brief red flash (JS resets after 1.5 s)
   ─────────────────────────────────────────────────────────────────────── */

/* ── Wrapper (flex row, inherits Elementor alignment) ──────────────────── */
.watci-wrap {
    display: flex;
    width:   100%;
}

/* ── Core button element ────────────────────────────────────────────────── */
.watci-widget {
    /* Geometry */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           42px;
    height:          42px;
    flex-shrink:     0;
    position:        relative;
    border-radius:   50%;
    overflow:        visible; /* allow box-shadow to show */
    cursor:          pointer;
    -webkit-user-select: none;
    user-select:     none;
    outline-offset:  3px;

    /* Default orange background — overridden by Elementor controls */
    background-color: #F07C1E;
    color:            #ffffff;

    /* Smooth scale on interaction */
    transition: transform 120ms ease, background-color 200ms ease, box-shadow 200ms ease;
    will-change: transform;
}

.watci-widget:hover  { transform: scale(1.08); }
.watci-widget:active { transform: scale(0.94); }

/* Disabled during AJAX */
.watci-widget[aria-disabled="true"] {
    cursor:  not-allowed;
    opacity: 0.85;
}

/* ── Child visibility rules ─────────────────────────────────────────────── */

/* All children hidden by default; each state reveals exactly one */
.watci-icon,
.watci-qty,
.watci-spinner {
    display:  flex;
    position: absolute;
    inset:    0;
    align-items:     center;
    justify-content: center;
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
}

/* ─ DEFAULT STATE (icon visible) ─────────────────────────────────────────── */

.watci-state-default .watci-icon    { opacity: 1; transform: scale(1); }
.watci-state-default .watci-qty     { opacity: 0; transform: scale(0.6); }
.watci-state-default .watci-spinner { opacity: 0; }

/* Icon inner element sizing (Elementor slider overrides font-size) */
.watci-icon i,
.watci-icon svg {
    font-size: 22px; /* default; Elementor control overrides via inline style */
    width:     22px;
    height:    22px;
    color:     inherit;
    fill:      currentColor;
    display:   block;
    flex-shrink: 0;
}

/* ─ LOADING STATE (spinner visible, others hidden) ──────────────────────── */

.watci-state-loading .watci-icon    { opacity: 0; transform: scale(0.6); }
.watci-state-loading .watci-qty     { opacity: 0; transform: scale(0.6); }
.watci-state-loading .watci-spinner { opacity: 1; }

/* Spinner SVG animation */
.watci-spinner svg {
    width:    22px;
    height:   22px;
    animation: watci-spin 0.75s linear infinite;
}

.watci-spinner circle {
    stroke-dasharray:  37.7;
    stroke-dashoffset: 28.3; /* ~75 % arc visible */
    transition: none;
}

@keyframes watci-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─ IN-CART STATE (quantity number visible) ─────────────────────────────── */

.watci-state-in-cart .watci-icon    { opacity: 0; transform: scale(0.6); }
.watci-state-in-cart .watci-qty     { opacity: 1; transform: scale(1); }
.watci-state-in-cart .watci-spinner { opacity: 0; }

.watci-qty {
    font-family:  'Montserrat', 'Nunito', sans-serif;
    font-size:    16px;
    font-weight:  700;
    line-height:  1;
    color:        inherit;
    text-align:   center;
    letter-spacing: -0.01em;
}

/* Quantity pop-in animation */
.watci-qty.watci-pop {
    animation: watci-qty-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes watci-qty-pop {
    0%   { transform: scale(0.5); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ─ ERROR STATE ─────────────────────────────────────────────────────────── */

.watci-state-error {
    background-color: #d32f2f !important;
    animation: watci-shake 400ms ease;
}

@keyframes watci-shake {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-4px); }
    40%,80% { transform: translateX(4px); }
}

/* ── Elementor editor placeholder ───────────────────────────────────────── */
.watci-placeholder {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-size:     12px;
    color:         #f07c1e;
    background:    rgba(240, 124, 30, 0.08);
    border:        1px dashed #f07c1e;
    border-radius: 6px;
    padding:       6px 10px;
    white-space:   nowrap;
}

/* ── Reduce motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .watci-widget,
    .watci-icon,
    .watci-qty,
    .watci-spinner { transition: none; animation: none; }
    .watci-spinner svg { animation: none; }
    .watci-qty.watci-pop { animation: none; }
}