/* ============ ظرف اصلی و متغیرها (دسکتاپ) ============ */
.ck-plans-vertwrap{
  position: relative;
  overflow: hidden;

  /* عمومی دسکتاپ */
  --ck-card-h: 167px;
  --ck-gap: 12px;
  --ck-w-normal: 1049px;
  --ck-w-active: 1096px;

  /* نسبت عرض سکشن‌ها (میاد از اینلاین هم ست می‌شه) */
  --ck-sec1: 35%;
  --ck-sec2: 30%;
  --ck-sec3: 35%;

  /* تصویر شاخص */
  --ck-thumb-w: 72px;
  --ck-thumb-h: 72px;
  --ck-fit: cover;

  /* ترازبندی قسمت ۱ */
  --ck-sec1-h: center; /* افقی */
  --ck-sec1-v: center; /* عمودی */

  /* گپ سکشن ۳ */
  --ck-sec3-gap: 8px;

  /* تنظیمات ویژگی‌ها (قسمت ۲) */
  --ck-sec2-cols: 2;
  --ck-sec2-row-gap: 8px;
  --ck-sec2-col-gap: 16px;

  /* موبایل (برای JS) */
  --ck-m-h-normal: 513px;
  --ck-m-h-active: 573px;
  --ck-m-gap: 12px;
}

/* ============ لیست (دسکتاپ: اسکرول عمودی) ============ */
.ck-plans-vertlist{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* مخفی‌سازی اسکرول‌بار وبکیت */
.ck-plans-vertlist::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* ============ کارت‌ها (دسکتاپ) ============ */
.ck-plan-card{
  width: var(--ck-w-normal);
  max-width: 100%;
  height: var(--ck-card-h);
  margin: 0 auto var(--ck-gap);      /* سنتر ستون کارت‌ها */
  background: #fff;
  border-radius: 16px;
  box-shadow: none;                  /* بدون سایه (می‌تونی جداگونه اضافه کنی) */
  transition: width .28s ease;
  direction: rtl;
  overflow: hidden;
}

/* کارت فعال (وسط) */
.ck-plan-card.is-active{
  width: var(--ck-w-active);
}

/* محتوای کارت: سه سکشن در یک خط و جمع 100٪ */
.ck-card-inner{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* سکشن‌های 1/2/3 */
.ck-plan-sec{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.ck-plan-sec1{
  flex-basis: var(--ck-sec1);
  max-width: var(--ck-sec1);
}

.ck-plan-sec2{
  flex-basis: var(--ck-sec2);
  max-width: var(--ck-sec2);
  padding: 0 30px; /* پدینگ افقی سکشن ۲ */
}

.ck-plan-sec3{
  flex-basis: var(--ck-sec3);
  max-width: var(--ck-sec3);
}

/* ============ قسمت 1: تصویر + عنوان (تصویر بالا، عنوان پایین) ============ */
.ck-thumb-title{
  display: flex;
  flex-direction: column;         /* تصویر بالا، عنوان پایین */
  gap: 8px;
  width: 100%;
  height: 100%;
  justify-content: var(--ck-sec1-v);
  align-items: var(--ck-sec1-h);
  text-align: center;
}

.ck-thumb{
  width: var(--ck-thumb-w);
  height: var(--ck-thumb-h);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ck-thumb img{
  width: 100%;
  height: 100%;
  object-fit: var(--ck-fit);
  display: block;
}

.ck-title-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ck-plan-title{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ قسمت 2: ویژگی‌های پلن (شبکه) ============ */
.ck-sec2-grid{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--ck-sec2-cols, 2), minmax(0, 1fr));
  grid-column-gap: var(--ck-sec2-col-gap, 16px);
  grid-row-gap: var(--ck-sec2-row-gap, 8px);
}

.ck-sec2-item{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ck-sec2-item-ico{
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 18px;
}

.ck-sec2-item-text{
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ قسمت 3: زمان + قیمت + دکمه ============ */
.ck-sec3-stack{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--ck-sec3-gap, 8px); /* از کنترل‌ها قابل تغییر */
}

/* چیپ زمان (پس‌زمینه مشترک لیبل + مقدار) */
.ck-sec3-time{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ck-time-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* پس‌زمینه/گردی/پدینگ از کنترل‌های المنتور اعمال می‌شود */
}
.ck-time-label,
.ck-time-value{
  display: inline-flex;
  align-items: center;
}

/* قیمت + واحد (واحد عمودی در انتهای مقدار) */
.ck-sec3-price{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px; /* از کنترل price_gap اینلاین هم می‌آد */
}
.ck-price-value{
  display: inline-block;
  vertical-align: middle;
}
.ck-price-unit{
  display: inline-block;
  vertical-align: middle;
  writing-mode: vertical-rl;
  text-orientation: mixed; /* واحد عمودی */
}

/* دکمه */
.ck-sec3-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 16px;
  transition: opacity .2s ease;
}
.ck-sec3-btn:hover{
  opacity: .9;
}

/* ===========================
   موبایل: اسکرول افقی، کارت وسط، offside ۱۰٪
   =========================== */
@media (max-width: 768px){

  .ck-plans-vertwrap{
    width: 100% !important;
    height: auto !important;
    overflow: hidden;

    /* فاصله‌ی بین کارت‌ها (اینجا دو برابر قبلیش گذاشتم) */
    --ck-m-gap: 24px;
  }

  .ck-plans-vertlist{
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 10%;                 /* offside هر دو طرف */
    /* دیگه gap استفاده نمی‌کنیم، خود کارت‌ها margin می‌گیرن */
  }

  .ck-plan-card{
    flex: 0 0 80%;
    max-width: 80%;
    height: var(--ck-m-h-normal);
    /* فاصله‌ی مساوی چپ و راست → بین دو کارت = دو برابر این مقدار می‌شه */
    margin: 0 calc(var(--ck-m-gap) / 2);
    scroll-snap-align: center;
    box-shadow: none;
    transition: width .25s ease, height .25s ease, box-shadow .25s ease;
  }

  .ck-plan-card.is-active{
    height: var(--ck-m-h-active);
    box-shadow: 0 12px 30px rgba(230, 219, 234, 0.6);
  }


  /* ساختار داخلی کارت: عمودی؛ سکشن ۱ بالا، بعد ۲، بعد ۳ */
  .ck-card-inner{
    display: flex;
    flex-direction: column !important;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }

  .ck-plan-sec1,
  .ck-plan-sec2,
  .ck-plan-sec3{
    order: 0;
    flex-basis: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* سکشن ۱ موبایل: تصویر شاخص + عنوان */
  .ck-thumb-title{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    gap: 10px;
    padding: 12px 0;
  }

  .ck-thumb{
    width: 72px !important;   /* کمی کوچک‌تر */
    height: 72px !important;
    border-radius: 16px;
    overflow: hidden;
    margin: -7px auto 0;      /* 7px بالاتر بیاد */
  }

  .ck-thumb img{
    width: 100%;
    height: 100%;
    object-fit: var(--ck-fit);
    display: block;
  }

  .ck-plan-title{
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
}