/* ============================================================
   Quantic Send To Cart — Frontend v1.1.6
   ============================================================ */

:root {
    --stcq-primary:       #1d4ed8;
    --stcq-primary-hover: #1e40af;
    --stcq-accent:        #06e3a2;
    --stcq-danger:        #dc2626;
    --stcq-on:            #ffffff;
    --stcq-radius:        10px;
    --stcq-height:        44px;
    --stcq-trans:         0.25s ease;
}

.stcq-wrap,
.stcq-wrap * { box-sizing: border-box; }

/* ── پوسته اصلی ── */
.stcq-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    direction: rtl;
    font-family: inherit;
}

.stcq-hidden { display: none !important; }

/* ── نمای افزودن ── */
.stcq-add-view {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.stcq-bulk-input {
    flex: 0 0 auto;
    width: 64px;
    height: var(--stcq-height);
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: var(--stcq-radius);
    background: #fff;
    color: #111827;
    font-size: 15px;
    -moz-appearance: textfield;
}
.stcq-bulk-input::-webkit-outer-spin-button,
.stcq-bulk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stcq-add-btn {
    flex: 1 1 auto;
    height: var(--stcq-height);
    padding: 0 18px;
    border: none;
    border-radius: var(--stcq-radius);
    background: var(--stcq-primary);
    color: var(--stcq-on);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--stcq-trans), transform var(--stcq-trans);
}
.stcq-add-btn:hover    { background: var(--stcq-primary-hover); }
.stcq-add-btn:active   { transform: scale(0.98); }
.stcq-add-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── نمای تعداد +|n|− ── */
.stcq-qty-view {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--stcq-height);
    border-radius: var(--stcq-radius);
    background: var(--stcq-primary);
    overflow: visible;
}

.stcq-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--stcq-height);
    height: var(--stcq-height);
    border: none;
    background: transparent;
    color: var(--stcq-on);
    cursor: pointer;
    transition: background var(--stcq-trans);
}
.stcq-step:hover            { background: rgba(255,255,255,0.15); }
.stcq-step:active           { background: rgba(0,0,0,0.12); }
.stcq-step:disabled         { opacity: 0.4; cursor: not-allowed; }
.stcq-step:disabled:hover   { background: transparent; }

.stcq-qty-num {
    flex: 1 1 auto;
    min-width: 2ch;
    text-align: center;
    color: var(--stcq-on);
    font-size: 16px;
    font-weight: 700;
    user-select: none;
}



/* ── آیکن‌های SVG ── */
.stcq-icon {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* پیش‌فرض: منها نمایش؛ سطل مخفی */
.stcq-trash-icon { display: none; }
.stcq-minus-icon { display: block; }

/* ── FIX: تعداد == ۱  →  سطل آشغال
   stcq-one روی stcq-WRAP ست می‌شود (نه stcq-qty-view)
   هر دو selector دسکتاپ و موبایل را پوشش می‌دهد ── */
.stcq-wrap.stcq-one .stcq-minus-icon { display: none !important; }
.stcq-wrap.stcq-one .stcq-trash-icon { display: block !important; }
.stcq-wrap.stcq-one .stcq-dec:hover  { background: rgba(220,38,38,0.85); }

/* ── اسپینر / حالت loading ── */
.stcq-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: stcq-spin 0.7s linear infinite;
}
.stcq-wrap.stcq-loading .stcq-spinner              { opacity: 1; }
.stcq-wrap.stcq-loading .stcq-add-view,
.stcq-wrap.stcq-loading .stcq-qty-view             { opacity: 0.45; pointer-events: none; }
@keyframes stcq-spin { to { transform: rotate(360deg); } }

/* ── FIX: fetching — overlay شیشه‌ای + اسپینر هنگام تغییر متغیر ── */
.stcq-wrap.stcq-fetching::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.72);
    border-radius: var(--stcq-radius);
    z-index: 2;
}
.stcq-wrap.stcq-fetching .stcq-spinner {
    opacity: 1;
    z-index: 3;
    border-color: rgba(29,78,216,0.25);
    border-top-color: var(--stcq-primary);
}
.stcq-wrap.stcq-fetching .stcq-add-view,
.stcq-wrap.stcq-fetching .stcq-qty-view { pointer-events: none; }

/* دسترس‌پذیری */
.stcq-add-btn:focus-visible,
.stcq-step:focus-visible,
.stcq-bulk-input:focus-visible {
    outline: 2px solid var(--stcq-accent);
    outline-offset: 2px;
}


/* دکمه + وقتی به حداکثر موجودی رسیده */
.stcq-plus.stcq-at-max,
.stcq-plus:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.stcq-plus.stcq-at-max:hover { background: transparent; }