/* ================================
   YC Installment Sales - AJAX Loading UX
   Works with: html.yc-is-ajax-loading
   and buttons: .is-disabled, [aria-disabled="true"]
================================ */

/* 1) جلوگیری از کلیک و نشان دادن حالت انتظار */
html.yc-is-ajax-loading,
html.yc-is-ajax-loading body {
  cursor: progress !important;
}

/* روی دکمه‌های تغییر مود */
html.yc-is-ajax-loading [data-yc-is-mode],
html.yc-is-ajax-loading .yc-is-mode-switch {
  pointer-events: none !important;
  opacity: .75;
  filter: grayscale(.15);
}

/* اگر کلاس is-disabled خورد */
[data-yc-is-mode].is-disabled,
.yc-is-mode-switch .is-disabled,
[aria-disabled="true"] {
  pointer-events: none !important;
}

/* 2) Overlay تمام صفحه + جلوگیری از اسکرول ناخواسته */
html.yc-is-ajax-loading body {
  overflow: hidden;
}

/* overlay */
html.yc-is-ajax-loading::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  z-index: 2147483000;
}


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

/* 5) Skeleton خیلی سبک برای بلاک‌های قیمت (حس “قیمت داره عوض میشه”) */
/* روی صفحه محصول */
html.yc-is-ajax-loading #product .product-prices,
html.yc-is-ajax-loading .product-prices,
html.yc-is-ajax-loading .current-price,
html.yc-is-ajax-loading .product-price-and-shipping,
html.yc-is-ajax-loading .content_price {
  position: relative;
}

html.yc-is-ajax-loading #product .product-prices::after,
html.yc-is-ajax-loading .product-price-and-shipping::after,
html.yc-is-ajax-loading .content_price::after {
  content: "";
  position: absolute;
  inset: -4px -6px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.10) 35%,
    rgba(0,0,0,.06) 70%
  );
  background-size: 200% 100%;
  animation: yc_is_shimmer 1.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes yc_is_shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 6) کاهش لرزش UI در لحظه‌ی replace کردن HTML */
html.yc-is-ajax-loading * {
  transition: opacity .12s ease, filter .12s ease;
}

/* ================================
   YC AJAX Loading (fixed spinner position)
   Uses: html.yc-is-ajax-loading
================================ */

/* تنظیمات قابل تغییر */
:root{
  --yc-loader-w: 320px;   /* عرض باکس */
  --yc-loader-pad: 46px;  /* فضای رزرو شده برای اسپینر */
  --yc-spinner: 20px;     /* اندازه اسپینر */
  --yc-spinner-gap: 14px; /* فاصله اسپینر از لبه باکس */
}

/* حالت انتظار */
html.yc-is-ajax-loading,
html.yc-is-ajax-loading body{
  cursor: progress !important;
}

/* قفل کردن کلیک‌ها */
html.yc-is-ajax-loading [data-yc-is-mode],
html.yc-is-ajax-loading .yc-is-mode-switch{
  pointer-events: none !important;
  opacity: .75;
}

/* overlay */
html.yc-is-ajax-loading::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  z-index: 2147483000;
}

/* باکس پیام (عرض ثابت تا جای اسپینر دقیق شود) */
html.yc-is-ajax-loading::after{
  content:"در حال بروزرسانی قیمت‌ها…";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2147483001;

  width: var(--yc-loader-w);
  max-width: calc(100vw - 28px);

  background: rgba(255,255,255,.96);
  color:#111;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  border-radius: 14px;

  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;

  /* متن وسط؛ اسپینر فضای مخصوص خودش را دارد */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* حالت LTR: اسپینر سمت چپ باکس، متن با padding-left */
html.yc-is-ajax-loading::after{
  padding-left: calc(var(--yc-loader-pad) + 14px);
}

/* اسپینر دقیقاً داخل باکس و خارج از متن */
html.yc-is-ajax-loading body::before{
  content:"";
  position: fixed;
  top: 50%;
  /* لبه چپ باکس: 50% - (عرض/2)  => بعدش فاصله تا اسپینر */
  left: calc(50% - (var(--yc-loader-w) / 2) + var(--yc-spinner-gap));
  transform: translateY(-50%);
  z-index: 2147483002;

  width: var(--yc-spinner);
  height: var(--yc-spinner);
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.65);
  animation: yc_is_spin .75s linear infinite;
}

@keyframes yc_is_spin{
  to{ transform: translateY(-50%) rotate(360deg); }
}

/* RTL: اسپینر سمت راست باکس و padding-right برای متن */
.lang-rtl html.yc-is-ajax-loading::after{
  padding-left: 14px;
  padding-right: calc(var(--yc-loader-pad) + 14px);
}

.lang-rtl html.yc-is-ajax-loading body::before{
  left: calc(50% + (var(--yc-loader-w) / 2) - var(--yc-spinner-gap) - var(--yc-spinner));
}

/* موبایل: باکس کوچکتر */
@media (max-width: 480px){
  :root{ --yc-loader-w: 280px; }
  html.yc-is-ajax-loading::after{ font-size: 12px; }
}