/* ============================================================
   Webkoob Suite — Smart Add To Cart
   ============================================================ */

/* پنهان کردن دکمه و input پیش‌فرض هنگام فعال بودن کنترلر */
.single_add_to_cart_button.wbkb-btn-hidden   { display: none !important; }
.quantity.wbkb-qty-hidden                    { display: none !important; }

/* وقتی محصول از قبل در سبد است (حتی قبل از اجرای JS، موقع رفرش صفحه)
   PHP کلاس wbkb-satc-form-active را روی خود form.cart می‌گذارد —
   این روش بدون نیاز به :has() در همه مرورگرها کار می‌کند */
form.cart.wbkb-satc-form-active > .single_add_to_cart_button,
form.cart.wbkb-satc-form-active > .quantity {
    display: none !important;
}

/* فالبک برای حالتی که JS بعداً فعال می‌کند (کلیک کاربر) */
.single_add_to_cart_button.wbkb-force-hidden,
.quantity.wbkb-force-hidden {
    display: none !important;
}

/* مخفی کردن input تعداد پیش‌فرض ووکامرس (هم simple هم variable) وقتی ماژول فعاله */
body.wbkb-satc-enabled form.cart .quantity:not(.wbkb-qty-force-show) {
    display: none !important;
}

/* اسلات placeholder محصول متغیر تا قبل از انتخاب variation کاملاً خالیه */
.wbkb-satc-variation-slot:empty { display: none; }

/* -------------------------------------------------------
   Wrapper — ردیفی: کنترلر کنار لیبل
   ------------------------------------------------------- */
.wbkb-satc-wrapper {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
    animation: wbkb-satc-fadein 0.2s ease;
}

.wbkb-satc-wrapper.wbkb-satc--active { display: flex; }

@keyframes wbkb-satc-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* -------------------------------------------------------
   کنترلر — کوچک و جمع‌وجور، رنگ تم
   ------------------------------------------------------- */
.wbkb-satc-controls {
    display: flex;
    align-items: center;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    height: 60px;
    flex-shrink: 0;
    background: #fff;
    direction: ltr;
    border-radius: 15px;
    width: 160px;
    justify-content: space-around;
}

/* -------------------------------------------------------
   دکمه‌های +  −  🗑
   ------------------------------------------------------- */
.wbkb-satc-btn {
    width: 50px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    color: var(--wbkb-color-primary, #093C75) !important;
}

.wbkb-satc-plus {
    padding: 16px 7px 12px 5px;
}
.wbkb-satc-trash {
    padding: 22px 5px 28px 5px;
}
.wbkb-satc-minus {
    padding: 27px 7px 29px 7px;
}

/* .wbkb-satc-btn:hover  { background: #f0f4fb; }
.wbkb-satc-btn:active { background: #dce6f5; } */

.wbkb-satc-plus { color: var(--wbkb-color-primary, #093C75); }

.wbkb-satc-plus.wbkb-satc-btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* دکمه چپ: سطل (qty=1) یا منفی (qty>1) — یکی از دو آیکن نمایش داده میشه */
.wbkb-satc-remove { color: var(--wbkb-color-primary, #093C75); }

.wbkb-satc-trash  { display: flex; }
.wbkb-satc-minus  { display: none; }

.wbkb-satc-remove.is-minus .wbkb-satc-trash { display: none; }
.wbkb-satc-remove.is-minus .wbkb-satc-minus { display: flex; }

/* -------------------------------------------------------
   عدد تعداد
   ------------------------------------------------------- */
.wbkb-satc-qty {
    min-width: 32px;
    padding: 0 4px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--wbkb-color-primary, #093C75);
    user-select: none;
    line-height: 1;
    position: relative;
}

/* -------------------------------------------------------
   لیبل «در سبد شما» + مشاهده سبد — کنار کنترلر
   ------------------------------------------------------- */
.wbkb-satc-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wbkb-satc-label-text {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
}

.wbkb-satc-view-cart {
    font-size: 12px;
    color: var(--wbkb-color-primary, #093C75);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.wbkb-satc-view-cart:hover { opacity: 0.75; text-decoration: underline; }

/* -------------------------------------------------------
   Loading — اسپینر روی عدد
   ------------------------------------------------------- */
.wbkb-satc-controls.wbkb-satc--loading {
    opacity: 0.65;
    pointer-events: none;
}

.wbkb-satc-controls.wbkb-satc--loading .wbkb-satc-qty { color: transparent; }

.wbkb-satc-controls.wbkb-satc--loading .wbkb-satc-qty::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    border: 2px solid #c5d5ea;
    border-top-color: var(--wbkb-color-primary, #093C75);
    border-radius: 50%;
    animation: wbkb-spin 0.6s linear infinite;
}

@keyframes wbkb-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* -------------------------------------------------------
   Loading — اسپینر وسط دکمه «افزودن به سبد خرید» پیش‌فرض
   (حین AJAX اولین کلیک، قبل از اینکه کنترلر تعداد +/- جایگزین بشه)
   همون استایل اسپینر بخش تعداد، فقط با متن دکمه به‌جای عدد
   ------------------------------------------------------- */
.single_add_to_cart_button.wbkb-satc-addbtn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    cursor: default;
}

.single_add_to_cart_button.wbkb-satc-addbtn--loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wbkb-spin 0.6s linear infinite;
}

/* اگر رنگ متن دکمه تیره باشه (پس‌زمینه روشن)، اسپینر با رنگ تم افزونه نمایش داده بشه */
.single_add_to_cart_button.wbkb-satc-addbtn--loading.wbkb-satc-addbtn--dark::after {
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
}

/* -------------------------------------------------------
   متن حداکثر
   ------------------------------------------------------- */
.wbkb-satc-max-note {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
}

/* -------------------------------------------------------
   اسکلتون (Skeleton) — placeholder هم‌اندازه کنترلر واقعی
   تا زمان رسیدن پاسخ AJAX بعد از انتخاب variation
   (جلوگیری از پرش/جابجایی لایوت دکمه‌ها)
   ------------------------------------------------------- */
.wbkb-satc-skeleton-controls {
    width: 160px;
    height: 60px;
    border-radius: 15px;
    background: linear-gradient(90deg, #eef1f5 25%, #e2e6ec 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: wbkb-satc-shimmer 1.4s ease infinite;
    flex-shrink: 0;
    border: 1.5px solid #e0e0e0;
}

.wbkb-satc-skeleton-line {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef1f5 25%, #e2e6ec 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: wbkb-satc-shimmer 1.4s ease infinite;
}

.wbkb-satc-skeleton-line--text {
    width: 70px;
    height: 13px;
    margin-bottom: 6px;
}

.wbkb-satc-skeleton-line--link {
    width: 90px;
    height: 12px;
}

@keyframes wbkb-satc-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* -------------------------------------------------------
   موبایل
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .wbkb-satc-controls { height: 60px; }
    .wbkb-satc-btn      { width: 50px;  }
    .wbkb-satc-qty      { font-size: 14px; }
}