/**
 * Aria Smart Buy Button - Frontend Styles
 * Version: 1.12.0
 * 7 Templates × 6 States | RTL Support | No jQuery
 * Uses CSS Custom Properties for dynamic theming
 * v1.6: Zero CSS leakage — all selectors scoped to .aria-btn-wrapper
 * v1.7: Mobile height fix, alignment fix (width:auto), RTL align fix,
 *        simple buttons isolated from layout settings
 * v1.8: ALL transitions/animations removed — instant state changes for maximum speed
 * v1.9: Smooth crossfade transitions between states (opacity+position instead of display:none),
 *        quantity number bump animation on +/- click, input appear animation
 * v1.10: Removed ALL opacity transitions — instant state switch, zero blinking
 * v1.11: 1.5s timings, trash removal animation, FOUC prevention (opacity:0→1)
 * v1.12: View cart text follows button alignment, 'right' position layout fix
 */

/* ═══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (scoped to .aria-btn-wrapper)
   ═══════════════════════════════════════════════════════════ */
.aria-btn-wrapper {
        --aria-min-w: 120px;
        --aria-max-w: 400px;
        --aria-h: 48px;
        --aria-qty-h: 48px;
        --aria-align: center;
        --aria-pad: 0 0 0 0;
        --aria-font-size: 0;
        --aria-icon-size: 0;
        --aria-vc-pos: below;
        --aria-vc-size: 0;
}

/* ═══════════════════════════════════════════════════════════
   BASE STRUCTURE — ALWAYS VISIBLE, HIGH PRIORITY
   ═══════════════════════════════════════════════════════════ */
.aria-btn-wrapper {
        font-family: 'Vazirmatn', 'IRANSans', 'Tahoma', sans-serif;
        direction: rtl;
        display: flex;
        flex-direction: column;
        align-items: var(--aria-align, center);
        width: 100%;
        position: relative !important;
        z-index: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        height: auto !important;
        padding: var(--aria-pad, 0) !important;
}

/* Force visibility on all ancestors */
.woocommerce .aria-btn-wrapper,
.woocommerce-page .aria-btn-wrapper,
.product .aria-btn-wrapper,
li.product .aria-btn-wrapper,
.wc-block-grid__product .aria-btn-wrapper {
        visibility: visible !important;
        display: flex !important;
        opacity: 1 !important;
        overflow: visible !important;
        height: auto !important;
}

/* ─── State Container ────────────────────────────────── */
.aria-btn-wrapper .aria-state[data-aria-state-type="quantity"] {
        display: flex;
        width: 100%;
}

.aria-btn-wrapper .aria-state[data-aria-state-type="quantity"].aria-state--hidden {
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
}

/* Position: below (default — column direction) */
.aria-btn-wrapper .aria-state[data-aria-state-type="quantity"] {
        flex-direction: column;
        align-items: var(--aria-align, center);
        gap: 8px;
}

/* Position: above */
.aria-btn-wrapper[data-vc-position="above"] .aria-state[data-aria-state-type="quantity"] {
        flex-direction: column-reverse;
        align-items: var(--aria-align, center);
        gap: 8px;
}

/* Position: right (inline — beside the button, right side in RTL) */
/* row-reverse in RTL: view-cart on right, qty on left */
.aria-btn-wrapper[data-vc-position="right"] .aria-state[data-aria-state-type="quantity"] {
        flex-direction: row-reverse;
        justify-content: var(--aria-align, center);
        align-items: center;
        gap: 12px;
}

/* Position: left (inline — beside the button, left side in RTL) */
/* row in RTL: qty on right, view-cart on left */
.aria-btn-wrapper[data-vc-position="left"] .aria-state[data-aria-state-type="quantity"] {
        flex-direction: row;
        justify-content: var(--aria-align, center);
        align-items: center;
        gap: 12px;
}

/* ─── Generic State (default / loading / variation / oos) ── */
.aria-btn-wrapper .aria-state {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: var(--aria-align, center);
        overflow: hidden;
        /* NO transition — instant state switch, no blinking */
        transition: none !important;
}

.aria-btn-wrapper .aria-state--hidden {
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
}

/* ─── Default Button ──────────────────────────────────── */
.aria-btn-wrapper .aria-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        min-width: var(--aria-min-w, 120px) !important;
        max-width: var(--aria-max-w, 400px) !important;
        /* v1.7: height via CSS var set in PHP (inline style) — !important protects against themes */
        height: var(--aria-h, 48px) !important;
        box-sizing: border-box;
        font-weight: 600;
        cursor: pointer;
        border: none;
        outline: none;
        user-select: none;
        /* No opacity transition — instant state switch, no blinking */
        transition: background 0.3s ease !important;
        font-family: inherit;
        color: var(--aria-text, inherit);
        background: var(--aria-bg, #e91e63);
        font-size: var(--aria-font-size, 0);
}

.aria-btn-wrapper .aria-btn:hover {
        background: var(--aria-bg-hover, #c2185b);
}

.aria-btn-wrapper .aria-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--aria-icon, inherit);
}

.aria-btn-wrapper .aria-spinner {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        animation: aria-spin 0.8s linear infinite;
        color: var(--aria-icon, inherit);
}

.aria-btn-wrapper .aria-btn--disabled {
        opacity: 0.65;
        cursor: not-allowed;
}

.aria-btn-wrapper .aria-btn--variation {
        cursor: default;
        background: color-mix(in srgb, var(--aria-bg, #e91e63) 12%, #f5f5f5) !important;
        border: 2px dashed var(--aria-accent, #e91e63) !important;
        color: var(--aria-accent, #e91e63) !important;
        animation: aria-variation-breathe 2.5s ease-in-out infinite !important;
}
@keyframes aria-variation-breathe {
        0%, 100% { border-color: var(--aria-accent, #e91e63); }
        50% { border-color: color-mix(in srgb, var(--aria-accent, #e91e63) 35%, transparent); }
}

.aria-btn-wrapper .aria-btn--oos {
        opacity: 0.4 !important;
        cursor: not-allowed;
        background: color-mix(in srgb, var(--aria-bg, #e91e63) 15%, #e8e8e8) !important;
        color: color-mix(in srgb, var(--aria-text, #fff) 45%, #bbb) !important;
        filter: grayscale(50%) !important;
}

.aria-btn-wrapper .aria-btn--loading {
        cursor: wait;
        opacity: 0.75 !important;
}

/* Loading spinner remains animated */

/* ─── Size Classes ────────────────────────────────────── */
/* v1.7: Size classes set --aria-h CSS var (overridden by inline style from PHP) */
.aria-btn-wrapper--sm { --aria-h: 36px; --aria-qty-h: 36px; }
.aria-btn-wrapper--md { --aria-h: 48px; --aria-qty-h: 48px; }
.aria-btn-wrapper--lg { --aria-h: 56px; --aria-qty-h: 56px; }

.aria-btn-wrapper .aria-btn--sm,
.aria-btn-wrapper--sm .aria-btn {
        font-size: 13px;
        padding: 0 16px;
}
.aria-btn-wrapper .aria-btn--md,
.aria-btn-wrapper--md .aria-btn {
        font-size: 15px;
        padding: 0 24px;
}
.aria-btn-wrapper .aria-btn--lg,
.aria-btn-wrapper--lg .aria-btn {
        font-size: 17px;
        padding: 0 32px;
}

/* Custom font/icon size overrides (0 = use size class defaults) */
.aria-btn-wrapper[data-font-size]:not([data-font-size="0"]) .aria-btn {
        font-size: calc(var(--aria-font-size) * 1px) !important;
}

/* ─── Split Icon Sizes ────────────────────────────────── */
/* data-action-icon-size → controls .aria-icon, .aria-spinner, .aria-qty-btn--trash svg */
.aria-btn-wrapper[data-action-icon-size]:not([data-action-icon-size="0"]) .aria-icon,
.aria-btn-wrapper[data-action-icon-size]:not([data-action-icon-size="0"]) .aria-spinner {
        width: calc(var(--aria-icon-size) * 1px) !important;
        height: calc(var(--aria-icon-size) * 1px) !important;
}
.aria-btn-wrapper[data-action-icon-size]:not([data-action-icon-size="0"]) .aria-qty-btn--trash svg {
        width: calc(var(--aria-icon-size) * 1px) !important;
        height: calc(var(--aria-icon-size) * 1px) !important;
}

/* data-qty-icon-size → controls .aria-qty-btn:not(.aria-qty-btn--trash) svg */
.aria-btn-wrapper[data-qty-icon-size]:not([data-qty-icon-size="0"]) .aria-qty-btn:not(.aria-qty-btn--trash) svg {
        width: calc(var(--aria-qty-icon-size) * 1px) !important;
        height: calc(var(--aria-qty-icon-size) * 1px) !important;
}

/* Legacy fallback: data-icon-size still works for all icons */
.aria-btn-wrapper[data-icon-size]:not([data-icon-size="0"]) .aria-icon,
.aria-btn-wrapper[data-icon-size]:not([data-icon-size="0"]) .aria-spinner {
        width: calc(var(--aria-icon-size) * 1px) !important;
        height: calc(var(--aria-icon-size) * 1px) !important;
}
.aria-btn-wrapper[data-icon-size]:not([data-icon-size="0"]) .aria-qty-btn svg {
        width: calc(var(--aria-icon-size) * 1px) !important;
        height: calc(var(--aria-icon-size) * 1px) !important;
}

/* ─── Quantity Selector ───────────────────────────────── */
.aria-btn-wrapper .aria-qty {
        display: flex !important;
        align-items: center !important;
        overflow: hidden;
        /* No opacity transition — instant state switch, no blinking */
        transition: background 0.3s ease !important;
        color: var(--aria-text, inherit);
        background: var(--aria-bg, #e91e63);
        /* v1.7: height from CSS var — defaults to --aria-h (matches button) */
        height: var(--aria-qty-h, var(--aria-h, 48px)) !important;
        box-sizing: border-box;
}

.aria-btn-wrapper .aria-qty--max {
        outline: 2px solid rgba(233, 30, 99, 0.4);
        outline-offset: 1px;
}

.aria-btn-wrapper .aria-qty-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        outline: none;
        background: transparent;
        /* v1.8: NO transitions — instant state changes */
        transition: background 0.15s ease !important;
        /* v1.5: slider-proof flex */
        align-self: stretch !important;
        height: inherit !important;
        line-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
}

.aria-btn-wrapper .aria-qty-btn svg {
        width: 20px;
        height: 20px;
        color: var(--aria-icon, inherit);
        /* v1.5: prevent inline SVG layout issues */
        display: block !important;
        vertical-align: middle !important;
}

.aria-btn-wrapper .aria-qty-btn--disabled {
        opacity: 0.35;
        cursor: not-allowed;
}

.aria-btn-wrapper .aria-qty-btn--trash {
        color: #f87171;
}

.aria-btn-wrapper .aria-qty-btn--trash:hover {
        background: rgba(239, 68, 68, 0.1);
}

.aria-btn-wrapper .aria-qty-divider {
        width: 1px;
        align-self: stretch;
        margin: 0 auto;
        opacity: 0.25;
        background: currentColor;
}

.aria-btn-wrapper .aria-qty-number {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 56px;
        height: inherit !important;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        /* v1.5: slider-proof flex */
        align-self: stretch !important;
        line-height: 1 !important;
        padding: 0 8px !important;
        margin: 0 !important;
        overflow: hidden;
        white-space: nowrap;
}

.aria-btn-wrapper .aria-qty-max-label {
        font-size: 10px;
        font-weight: 600;
        opacity: 0.55;
        line-height: 1;
        margin-top: 1px;
}

/* Quantity button size — width only (v1.5: removed fixed height) */
.aria-btn-wrapper .aria-qty-btn--sm,
.aria-btn-wrapper--sm .aria-qty-btn {
        width: 36px;
}
.aria-btn-wrapper .aria-qty-btn--md,
.aria-btn-wrapper--md .aria-qty-btn {
        width: 48px;
}
.aria-btn-wrapper .aria-qty-btn--lg,
.aria-btn-wrapper--lg .aria-qty-btn {
        width: 56px;
}

.aria-btn-wrapper--sm .aria-qty-number { min-width: 44px; font-size: 13px; }
.aria-btn-wrapper--md .aria-qty-number { min-width: 56px; font-size: 15px; }
.aria-btn-wrapper--lg .aria-qty-number { min-width: 64px; font-size: 17px; }

/* ─── "View Cart" Link ──────────────────────────────── */
.aria-btn-wrapper .aria-view-cart {
        display: flex;
        justify-content: center;
        width: auto;
        margin-top: 0;
        /* v1.8: NO animation — instant appearance */
        font-size: var(--aria-vc-size, 0);
}

/* Position: below (default) */
.aria-btn-wrapper[data-vc-position="below"] .aria-view-cart {
        flex-direction: column;
        align-items: center;
}

/* Position: above */
.aria-btn-wrapper[data-vc-position="above"] .aria-view-cart {
        flex-direction: column;
        align-items: center;
}

/* Position: right/left (beside) — inline, natural width */
.aria-btn-wrapper[data-vc-position="right"] .aria-view-cart,
.aria-btn-wrapper[data-vc-position="left"] .aria-view-cart {
        margin-top: 0;
        justify-content: center;
}

.aria-btn-wrapper .aria-view-cart__link {
        font-weight: 600;
        color: var(--aria-accent, #e91e63);
        text-decoration: none;
        padding: 4px 16px;
        border-radius: 20px;
        border: 1px solid color-mix(in srgb, var(--aria-accent, #e91e63) 25%, transparent);
        background: color-mix(in srgb, var(--aria-accent, #e91e63) 4%, transparent);
        /* v1.8: NO transitions — instant hover response */
        transition: none !important;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
}

/* Custom vc font size */
.aria-btn-wrapper[data-vc-size]:not([data-vc-size="0"]) .aria-view-cart__link {
        font-size: calc(var(--aria-vc-size) * 1px) !important;
}

.aria-btn-wrapper .aria-view-cart__link:hover {
        background: color-mix(in srgb, var(--aria-accent, #e91e63) 10%, transparent);
        border-color: color-mix(in srgb, var(--aria-accent, #e91e63) 40%, transparent);
}

.aria-btn-wrapper .aria-view-cart__link::before {
        content: '←';
        font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════
   SIMPLE BUTTON MODIFIER
   v1.7: Simple buttons IGNORE buy-button layout settings
   (alignment, padding, width constraints, height).
   They keep their own position from the page/elementor/block.
   ═══════════════════════════════════════════════════════════ */
.aria-btn-wrapper--simple-btn {
        --aria-align: stretch !important;
        --aria-pad: 0 !important;
        --aria-min-w: 0 !important;
        --aria-max-w: none !important;
        padding: 0 !important;
}
.aria-btn-wrapper--simple-btn .aria-state {
        align-items: stretch !important;
}
.aria-btn-wrapper--simple-btn .aria-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        cursor: pointer;
}
.aria-btn-wrapper--simple-btn .aria-btn:hover {
        opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════
   TEMPLATE OVERRIDES (already scoped)
   ═══════════════════════════════════════════════════════════ */

/* TEMPLATE 1: PASTEL PINK */
.aria-btn-wrapper--pastel-pink .aria-btn { border-radius: 12px; }
.aria-btn-wrapper--pastel-pink .aria-qty { border-radius: 12px; }
.aria-btn-wrapper--pastel-pink .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 2: GLASSMORPHISM */
.aria-btn-wrapper--glassmorphism .aria-btn {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
}
.aria-btn-wrapper--glassmorphism .aria-qty {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
}
.aria-btn-wrapper--glassmorphism .aria-qty--max { outline-color: rgba(255, 255, 255, 0.5); }
.aria-btn-wrapper--glassmorphism .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 3: MATERIAL */
.aria-btn-wrapper--material .aria-btn {
        border-radius: 8px;
        box-shadow: 0 3px 5px -1px rgba(0,0,0,0.1), 0 6px 10px 0 rgba(0,0,0,0.07), 0 1px 18px 0 rgba(0,0,0,0.06);
}
.aria-btn-wrapper--material .aria-qty {
        border-radius: 8px;
        box-shadow: 0 3px 5px -1px rgba(0,0,0,0.1), 0 6px 10px 0 rgba(0,0,0,0.07);
}
.aria-btn-wrapper--material .aria-qty-btn:hover { background: rgba(0, 0, 0, 0.08); }

/* TEMPLATE 4: MINIMAL */
.aria-btn-wrapper--minimal .aria-btn {
        border: 2px solid var(--aria-accent, #e91e63);
        border-radius: 8px;
}
.aria-btn-wrapper--minimal .aria-qty {
        border: 2px solid var(--aria-accent, #e91e63);
        border-radius: 8px;
}
.aria-btn-wrapper--minimal .aria-qty-btn:hover {
        background: color-mix(in srgb, var(--aria-accent, #e91e63) 5%, transparent);
}

/* TEMPLATE 5: FLAT */
.aria-btn-wrapper--flat .aria-btn { border-radius: 6px; box-shadow: none; }
.aria-btn-wrapper--flat .aria-qty { border-radius: 6px; box-shadow: none; }
.aria-btn-wrapper--flat .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* TEMPLATE 6: GLOW */
.aria-btn-wrapper--glow .aria-btn {
        border-radius: 12px;
        box-shadow: 0 0 15px color-mix(in srgb, var(--aria-bg, #e91e63) 25%, transparent),
                    0 0 30px color-mix(in srgb, var(--aria-bg, #e91e63) 12%, transparent),
                    0 0 60px color-mix(in srgb, var(--aria-bg, #e91e63) 6%, transparent);
}
.aria-btn-wrapper--glow .aria-qty {
        border-radius: 12px;
        box-shadow: 0 0 15px color-mix(in srgb, var(--aria-bg, #e91e63) 25%, transparent),
                    0 0 30px color-mix(in srgb, var(--aria-bg, #e91e63) 12%, transparent);
}
.aria-btn-wrapper--glow .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* TEMPLATE 7: ROUNDED */
.aria-btn-wrapper--rounded .aria-btn { border-radius: 50px; }
.aria-btn-wrapper--rounded .aria-qty { border-radius: 50px; }
.aria-btn-wrapper--rounded .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.15); }
.aria-btn-wrapper--rounded .aria-qty-btn:first-child { border-radius: 0 50px 50px 0; }
.aria-btn-wrapper--rounded .aria-qty-btn:last-child { border-radius: 50px 0 0 50px; }

/* ═══════════════════════════════════════════════════════════
   v2.3.0: 10 NEW TEMPLATES
   Each has distinct visual character with proper icon contrast
   ═══════════════════════════════════════════════════════════ */

/* TEMPLATE 8: OCEAN (teal gradient, soft glow) */
.aria-btn-wrapper--ocean .aria-btn {
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25);
}
.aria-btn-wrapper--ocean .aria-qty {
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(20, 184, 166, 0.2);
}
.aria-btn-wrapper--ocean .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 9: SUNSET (orange→red gradient, warm glow) */
.aria-btn-wrapper--sunset .aria-btn {
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3);
}
.aria-btn-wrapper--sunset .aria-qty {
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(249, 115, 22, 0.25);
}
.aria-btn-wrapper--sunset .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 10: FOREST (green gradient, natural feel) */
.aria-btn-wrapper--forest .aria-btn {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.aria-btn-wrapper--forest .aria-qty {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}
.aria-btn-wrapper--forest .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 11: ROYAL (purple gradient, premium) */
.aria-btn-wrapper--royal .aria-btn {
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}
.aria-btn-wrapper--royal .aria-qty {
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
}
.aria-btn-wrapper--royal .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* TEMPLATE 12: CHERRY (rose gradient, elegant) */
.aria-btn-wrapper--cherry .aria-btn {
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(190, 18, 60, 0.25);
}
.aria-btn-wrapper--cherry .aria-qty {
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(190, 18, 60, 0.2);
}
.aria-btn-wrapper--cherry .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 13: SKY (blue gradient, clean) */
.aria-btn-wrapper--sky .aria-btn {
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}
.aria-btn-wrapper--sky .aria-qty {
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2);
}
.aria-btn-wrapper--sky .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 14: AMBER (golden gradient, luxury) */
.aria-btn-wrapper--amber .aria-btn {
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
}
.aria-btn-wrapper--amber .aria-qty {
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}
.aria-btn-wrapper--amber .aria-qty-btn:hover { background: rgba(0, 0, 0, 0.08); }

/* TEMPLATE 15: ROSE (pink gradient, soft) */
.aria-btn-wrapper--rose .aria-btn {
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(225, 29, 72, 0.25);
}
.aria-btn-wrapper--rose .aria-qty {
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(225, 29, 72, 0.2);
}
.aria-btn-wrapper--rose .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 16: EMERALD (mint gradient, fresh) */
.aria-btn-wrapper--emerald .aria-btn {
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}
.aria-btn-wrapper--emerald .aria-qty {
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2);
}
.aria-btn-wrapper--emerald .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 17: SLATE (dark, professional) */
.aria-btn-wrapper--slate .aria-btn {
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.aria-btn-wrapper--slate .aria-qty {
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.aria-btn-wrapper--slate .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* TEMPLATE 18: CANDY (pink→purple gradient, playful) */
.aria-btn-wrapper--candy .aria-btn {
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(236, 72, 153, 0.25);
}
.aria-btn-wrapper--candy .aria-qty {
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(236, 72, 153, 0.2);
}
.aria-btn-wrapper--candy .aria-qty-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* TEMPLATE 19: LIME (green gradient, energetic) */
.aria-btn-wrapper--lime .aria-btn {
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(101, 163, 13, 0.25);
}
.aria-btn-wrapper--lime .aria-qty {
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(101, 163, 13, 0.2);
}
.aria-btn-wrapper--lime .aria-qty-btn:hover { background: rgba(0, 0, 0, 0.08); }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   v1.9: Confirmation animation (1.2s) after AJAX response.
   Spinner for loading state.
   Hover transitions remain instant (transition: none) for speed.

   v1.9.1: Animation applied via JS inline styles (not CSS class)
   to prevent theme conflicts. The @keyframes are defined here;
   the JS applies them directly to the target element.
   ═══════════════════════════════════════════════════════════ */

/* Loading spinner */
@keyframes aria-spin {
        to { transform: rotate(360deg); }
}

/* ─── Busy / Cooldown State for +/- buttons (1.5s = 3 pulses × 0.5s) ── */
.aria-btn-wrapper.aria-busy .aria-qty-number span:first-child {
        animation: aria-busy-pulse 0.5s ease-in-out infinite !important;
}
@keyframes aria-busy-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
}
.aria-btn-wrapper.aria-busy .aria-qty-btn {
        pointer-events: none !important;
        opacity: 0.4 !important;
}
.aria-btn-wrapper.aria-busy .aria-qty-btn svg {
        animation: aria-busy-spin 0.8s linear infinite !important;
}
@keyframes aria-busy-spin {
        to { transform: rotate(360deg); }
}

/* ─── Manual Quantity Input Appear (0.5s) ─────────────── */
@keyframes aria-input-in {
        from { opacity: 0; transform: scale(0.9); }
        to   { opacity: 1; transform: scale(1); }
}

/* ─── State Crossfade ──────────────────────────────────
   Active states:  opacity 1, height auto (in-flow)
   Hidden states:  height 0, overflow hidden, opacity 0 (no layout impact)
   Transition on opacity creates smooth fade between states.
   No position:absolute — wrapper height always stable. */

/* ─── Trash Icon Jelly Animation ───────────────────
   When user clicks trash, JS adds .aria-removing to the wrapper.
   ONLY the SVG icon inside the trash button jiggles (not the background).
   Animation loops until AJAX responds and removes the class. */
.aria-btn-wrapper.aria-removing .aria-qty-btn {
        pointer-events: none !important;
}
.aria-btn-wrapper.aria-removing .aria-qty-btn--trash {
        opacity: 1 !important;
        color: #ef4444 !important;
        filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5)) !important;
}
.aria-btn-wrapper.aria-removing .aria-qty-btn--trash svg {
        animation: aria-trash-jelly 0.8s ease-in-out infinite !important;
        transform-origin: center center !important;
}
@keyframes aria-trash-jelly {
        0%   { transform: scale(1) rotate(0deg); }
        15%  { transform: scale(1.35, 0.7) rotate(-10deg); }
        30%  { transform: scale(0.7, 1.3) rotate(8deg); }
        45%  { transform: scale(1.2, 0.8) rotate(-5deg); }
        60%  { transform: scale(0.9, 1.1) rotate(3deg); }
        75%  { transform: scale(1.08, 0.92) rotate(-1deg); }
        100% { transform: scale(1) rotate(0deg); }
}

/* Confirmation fade (applied by JS via element.style.animation) */
@keyframes aria-confirmed {
        0%   { opacity: 0.6; }
        100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE (scoped)
   v1.7: Exclude simple buttons from mobile overrides
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
        /* v1.7: only buy buttons get mobile font/padding tweaks */
        .aria-btn-wrapper--sm:not(.aria-btn-wrapper--simple-btn) .aria-btn,
        .aria-btn-wrapper--md:not(.aria-btn-wrapper--simple-btn) .aria-btn {
                font-size: 13px;
                padding: 0 16px;
        }
        /* v1.7: qty-btn width only — no fixed height */
        .aria-btn-wrapper--sm:not(.aria-btn-wrapper--simple-btn) .aria-qty-btn,
        .aria-btn-wrapper--md:not(.aria-btn-wrapper--simple-btn) .aria-qty-btn {
                width: 42px;
        }
        .aria-btn-wrapper--sm:not(.aria-btn-wrapper--simple-btn) .aria-qty-number,
        .aria-btn-wrapper--md:not(.aria-btn-wrapper--simple-btn) .aria-qty-number {
                min-width: 48px;
                font-size: 13px;
        }
        .aria-btn-wrapper:not(.aria-btn-wrapper--simple-btn) .aria-icon,
        .aria-btn-wrapper:not(.aria-btn-wrapper--simple-btn) .aria-spinner {
                width: 18px;
                height: 18px;
        }
        .aria-btn-wrapper:not(.aria-btn-wrapper--simple-btn) .aria-qty-btn svg {
                width: 18px;
                height: 18px;
        }
        /* On mobile, force "below" position for inline modes */
        .aria-btn-wrapper[data-vc-position="right"] .aria-state[data-aria-state-type="quantity"],
        .aria-btn-wrapper[data-vc-position="left"] .aria-state[data-aria-state-type="quantity"] {
                flex-direction: column;
                justify-content: initial;
                align-items: var(--aria-align, center);
        }
}