/* ==========================================================
   اشتراک VIP و دوره آزمایشی — استایل‌ها
   ========================================================== */

/* ---------- نشان بالای صفحه ---------- */
.vip-badge{
  position:relative; overflow:visible;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border:none; border-radius:20px;
  font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer;
  white-space:nowrap;
  /* طلایی، در همه‌ی حالت‌ها */
  background:linear-gradient(135deg, #f6d36b, #e0a92c 45%, #f8e39a 70%, #d9982a);
  color:#4a3208;
  box-shadow:0 6px 18px -8px rgba(214,155,35,.9),
             inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.vip-badge:active{ transform:scale(.94); }
@media (hover:hover){
  .vip-badge:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(214,155,35,1), inset 0 1px 0 rgba(255,255,255,.6); }
}
.vip-badge-icon{ display:flex; line-height:1; }
.vip-badge-icon svg{ width:14px; height:14px; }
/* تاجِ نشان — یک تکانِ خوش‌آمد و بعد آرام.
   حرکتِ بی‌وقفه روی سربرگ حواس را می‌برد و ارزان به نظر می‌رسد؛
   برنامه‌های گران یک بار سلام می‌کنند و بعد ساکت می‌مانند.
   (همان قاعده‌ی goldPulse در Vip.kt) */
.vip-badge-icon{ animation:vip-crown-bob 1.6s cubic-bezier(.22,1,.36,1) .4s 1 both; transform-origin:50% 80%; }
@keyframes vip-crown-bob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%    { transform:translateY(-2px) rotate(-9deg); }
  55%    { transform:translateY(-2px) rotate(9deg); }
  80%    { transform:translateY(0) rotate(0deg); }
}
/* رنگ نشان طلایی است، ولی حالتِ حساب همچنان با تُن متن فرق می‌کند */
.vip-badge-ok{ color:#1d4a34; }
.vip-badge-warn{ color:#5a3a06; }
@media (max-width:520px){ .vip-badge span:not(.vip-badge-icon){ display:none; } }

/* جرقه‌های ریزی که از نشان می‌ریزند */
.vip-spark{
  position:absolute; top:70%; width:3px; height:3px; border-radius:50%;
  background:#ffd970; box-shadow:0 0 5px 1px rgba(255,214,110,.95);
  opacity:0; pointer-events:none;
  animation:vip-spark-fall 2.2s cubic-bezier(.3,.7,.4,1) 1 both;
}
.vip-spark.s1{ inset-inline-start:16%; animation-delay:0s;    }
.vip-spark.s2{ inset-inline-start:38%; animation-delay:.7s;   }
.vip-spark.s3{ inset-inline-start:62%; animation-delay:1.35s; }
.vip-spark.s4{ inset-inline-start:83%; animation-delay:2.05s; }
@keyframes vip-spark-fall{
  0%   { opacity:0; transform:translateY(0)    scale(.5); }
  12%  { opacity:1; transform:translateY(3px)  scale(1); }
  70%  { opacity:.85; transform:translateY(15px) scale(.85); }
  100% { opacity:0; transform:translateY(24px) scale(.3); }
}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="full"]) .vip-spark{ animation:none; opacity:0; }
  html:not([data-motion="full"]) .vip-badge-icon{ animation:none; }
}

/* ---------- نوار دوره آزمایشی ---------- */
#vip-trial-bar{
  position:fixed; z-index:78; inset-inline:12px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-radius:var(--radius-md,14px);
  font-size:12.5px; font-weight:700; line-height:1.7;
  box-shadow:var(--shadow-md,0 6px 20px -8px rgba(30,50,110,.15));
}
#vip-trial-bar.vip-bar-warn{ background:var(--warning-tint,#fdf3e4); color:var(--warning,#e8a13a); }
#vip-trial-bar.vip-bar-danger{ background:var(--danger-tint,#fdecec); color:var(--danger,#e54b4b); }
#vip-trial-bar span{ flex:1; min-width:0; }
@media (min-width:900px){ #vip-trial-bar{ inset-inline-start:auto; max-width:520px; } }
@media (max-width:899px){ #vip-trial-bar{ bottom:calc(var(--bottomnav-space, 76px) + 10px); } }

/* ---------- پوشش صفحه‌های قفل ---------- */
.vip-overlay{
  position:absolute; inset:0; z-index:22;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px;
  background:color-mix(in srgb, var(--bg,#fff) 88%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border-radius:var(--radius-lg,20px);
}
.page{ position:relative; }
.vip-card{
  max-width:340px; width:100%; text-align:center;
  background:var(--bg,#fff); border:1px solid var(--border,#e5eaf3);
  border-radius:var(--radius-lg,20px); box-shadow:var(--shadow-md,0 6px 20px -8px rgba(30,50,110,.15));
  padding:26px 20px;
}
.vip-crown{
  width:56px; height:56px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px; background:var(--primary-tint,rgba(124,92,255,.12)); color:var(--primary,#7c5cff);
}
.vip-crown svg{ width:26px; height:26px; }
.vip-card h3{ font-size:15.5px; font-weight:800; margin-bottom:6px; color:var(--text,#1a2233); }
.vip-card p{ font-size:12.5px; color:var(--muted,#7c8698); margin-bottom:16px; line-height:1.9; }

.vip-locked-el{ opacity:.55; }
/* قفل با آیکون دستی در خود دکمه گذاشته می‌شود، نه با ایموجی در CSS */
.vip-locked-el{ position:relative; }

/* ---------- دکمه ---------- */
.vip-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border:none; border-radius:var(--radius-sm,10px);
  background:var(--primary,#7c5cff); color:#fff;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.vip-btn:hover{ background:var(--primary-dark,#5b3fe0); }
.vip-btn-sm{ padding:6px 12px; font-size:11.5px; }

/* ---------- پنجره ---------- */
.vip-scrim{
  position:fixed; inset:0; z-index:128; display:none;
  align-items:center; justify-content:center; padding:14px;
  background:rgba(12,18,32,.62);
  opacity:0; transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.vip-scrim.vip-open{ display:flex; opacity:1; }

.vip-box{
  position:relative;
  width:100%; max-width:480px; max-height:94vh; overflow-y:auto;
  background:var(--bg,#fff);
  border-radius:24px;
  box-shadow:0 28px 70px -24px rgba(10,20,50,.55);
  transform:translateY(22px) scale(.97); opacity:0;
}
.vip-scrim.vip-open .vip-box{
  animation:vip-rise .34s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes vip-rise{ to{ transform:translateY(0) scale(1); opacity:1; } }

.vip-close{
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; cursor:pointer; padding:0;
  background:rgba(255,255,255,.22); color:#fff;
  transition:background .18s ease, transform .18s ease;
}
.vip-close svg{ width:17px; height:17px; }
.vip-close:hover{ background:rgba(255,255,255,.38); transform:rotate(90deg); }

/* ---------- سرصفحه‌ی رنگی ---------- */
.vip-hero{
  padding:30px 22px 26px; text-align:center; color:#fff;
  background:linear-gradient(160deg, var(--primary,#7c5cff), var(--primary-dark,#5b3fe0));
  border-radius:24px 24px 0 0;
}
.vip-logo{
  width:54px; height:54px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px; background:rgba(255,255,255,.18); color:#fff;
}
.vip-logo svg{ width:28px; height:28px; }
.vip-hero h2{ font-size:24px; font-weight:800; line-height:1.5; margin-bottom:8px; }
.vip-hero h2 b{ font-weight:800; color:#bcd0ff; }
.vip-hero p{ font-size:13px; opacity:.9; }

.vip-body{ padding:18px 18px 22px; }

.vip-section-title{
  font-size:13.5px; font-weight:800; color:var(--text,#1a2233);
  text-align:center; margin:20px 0 12px;
}

/* ---------- وضعیت / یادداشت ---------- */
.vip-status{ padding:13px 15px; border-radius:var(--radius-md,14px); margin-bottom:14px; }
.vip-status b{ display:block; font-size:14px; font-weight:800; margin-bottom:3px; }
.vip-status span{ display:block; font-size:12.5px; line-height:1.9; }
.vip-status-promo,
.vip-status-trial{ background:var(--primary-tint,rgba(124,92,255,.12)); color:var(--primary-dark,#5b3fe0); }
.vip-status-ok{ background:var(--success-tint,#e8f8f1); color:var(--success,#18a06b); }
.vip-status-end{ background:var(--danger-tint,#fdecec); color:var(--danger,#e54b4b); }

.vip-note{
  padding:9px 12px; margin-bottom:12px; border-radius:var(--radius-sm,10px);
  background:var(--warning-tint,#fdf3e4); color:var(--warning,#e8a13a);
  font-size:12.5px; font-weight:700;
}

/* ---------- دو کارت مقایسه ---------- */
.vip-tiers{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:430px){ .vip-tiers{ grid-template-columns:1fr; } }

.vip-tier{
  position:relative; display:flex; flex-direction:column;
  padding:18px 14px 14px; border-radius:18px;
  border:1.5px solid var(--border,#e5eaf3); background:var(--bg,#fff);
  opacity:0; transform:translateY(14px);
  animation:vip-in .4s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--vip-delay,0ms);
}
@keyframes vip-in{ to{ opacity:1; transform:translateY(0); } }

.vip-tier-hot{
  border-color:var(--primary,#7c5cff); border-width:2px;
  box-shadow:0 14px 34px -20px rgba(44,92,230,.7);
}
.vip-ribbon{
  position:absolute; top:0; inset-inline:0;
  padding:5px; border-radius:16px 16px 0 0;
  background:var(--primary,#7c5cff); color:#fff;
  font-size:10.5px; font-weight:800; text-align:center; letter-spacing:.3px;
}
.vip-tier-hot > .vip-tier-name{ margin-top:20px; }

.vip-tier-name{ font-size:14.5px; font-weight:800; color:var(--text,#1a2233); text-align:center; }
.vip-tier-price{
  font-size:26px; font-weight:800; color:var(--primary,#7c5cff);
  text-align:center; margin-top:6px; line-height:1.3;
}
.vip-tier-price small{ font-size:12px; font-weight:600; }
.vip-tier-sub{
  font-size:11px; color:var(--muted,#7c8698); text-align:center;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border,#e5eaf3);
}

.vip-ticks{ list-style:none; display:flex; flex-direction:column; gap:9px; flex:1; }
.vip-ticks li{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text,#1a2233); line-height:1.6;
}
.vip-ticks li.off{ color:var(--muted-2,#a4adbd); }
.vip-tick{
  flex:0 0 auto; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary,#7c5cff); color:#fff;
}
.vip-tick svg{ width:11px; height:11px; stroke-width:2.8; }
.vip-ticks li.off .vip-tick{ background:var(--surface-2,#eef2fa); color:var(--muted-2,#a4adbd); }

.vip-tier-foot{
  margin-top:14px; padding:8px; border-radius:10px; text-align:center;
  font-size:11px; font-weight:700;
  background:var(--surface,#f6f8fc); color:var(--muted,#7c8698);
}
.vip-tier-foot.is-now{ background:var(--success-tint,#e8f8f1); color:var(--success,#18a06b); }

/* ---------- کارت‌های مدت ---------- */
.vip-plans{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
@media (max-width:400px){ .vip-plans{ grid-template-columns:1fr; } }
.vip-plan{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:16px 10px 12px; cursor:pointer;
  border:1.5px solid var(--border,#e5eaf3); border-radius:16px;
  background:var(--bg,#fff); font-family:inherit; text-align:center;
  opacity:0; transform:translateY(12px);
  animation:vip-in .38s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--vip-delay,0ms);
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.vip-plan:hover{
  border-color:var(--primary,#7c5cff);
  box-shadow:0 12px 26px -18px rgba(44,92,230,.8);
}
.vip-plan:active{ transform:scale(.97); }
.vip-plan-on{
  border-color:var(--primary,#7c5cff); border-width:2px;
  background:var(--primary-tint,rgba(124,92,255,.12));
}
.vip-plan-badge{ border-color:var(--warning,#e8a13a); }
/*
 * برق نور: با جابه‌جا کردن پس‌زمینه کشیده می‌شود، نه با یک لایه‌ی
 * بیرون‌زده. این‌طور دیگر لازم نیست کارت overflow:hidden داشته باشد
 * و برچسب «پیشنهاد ما» که کمی بالاتر از لبه می‌نشیند بریده نمی‌شود.
 */
.vip-plan-badge::after,
.vip-cta::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background-repeat:no-repeat; background-size:260% 100%;
  animation:vip-shine 2.6s ease-in-out .5s 2 both;
}
.vip-plan-badge::after{
  background-image:linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.62) 50%, transparent 62%);
}
.vip-cta{ position:relative; }
.vip-cta::after{
  background-image:linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  animation-delay:1.2s; animation-duration:3s;
}
.vip-crown{ animation:vip-crown-rise .9s cubic-bezier(.22,1,.36,1) .15s 1 both; }
@keyframes vip-crown-rise{
  0%  { transform:translateY(10px) scale(.86); opacity:0; }
  60% { transform:translateY(-3px) scale(1.04); opacity:1; }
  100%{ transform:translateY(0)    scale(1);    opacity:1; }
}
@keyframes vip-shine{
  0%       { background-position:210% 0; }
  38%,100% { background-position:-90% 0; }
}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="full"]) .vip-plan-badge::after,
  html:not([data-motion="full"]) .vip-cta::after{ animation:none; opacity:0; }
  html:not([data-motion="full"]) .vip-crown{ animation:none; }
}
.vip-tag{
  position:absolute; top:-9px; inset-inline-start:50%; transform:translateX(50%);
  padding:2px 9px; border-radius:20px; white-space:nowrap;
  background:var(--warning,#e8a13a); color:#fff; font-size:10px; font-weight:800;
}
.vip-plan-title{ font-size:13px; font-weight:800; color:var(--text,#1a2233); }

/*
 *  تخفیف — قیمتِ قبلی خط‌خورده، و نشانِ سبز به‌جای نشانِ همیشگی.
 *
 *  رنگِ سبز عمدی است: نشانِ نارنجی «پیشنهاد ما» را می‌گوید که همیشه
 *  هست؛ سبز خبرِ تازه است و باید از آن جدا دیده شود.
 */
.vip-plan-was{
  font-size:11px; font-weight:700; color:var(--muted,#7c8698);
  text-decoration:line-through; line-height:1.4;
}
.vip-tag-off{ background:var(--success,#0fa98a); }
.vip-plan-off .vip-plan-price{ color:var(--success,#0fa98a); }

.vip-plan-price{ font-size:19px; font-weight:800; color:var(--primary,#7c5cff); }
.vip-plan-price small{ font-size:10.5px; font-weight:600; }
.vip-per{ font-size:10.5px; color:var(--muted,#7c8698); line-height:1.6; }

.vip-plan-pick{
  display:flex; align-items:center; justify-content:center; gap:4px;
  margin-top:8px; width:100%; padding:5px; border-radius:8px;
  background:var(--surface,#f6f8fc); color:var(--muted,#7c8698);
  font-size:10.5px; font-weight:700;
  transition:background .18s ease, color .18s ease;
}
.vip-plan-pick svg{ width:11px; height:11px; stroke-width:2.8; }
.vip-plan-on .vip-plan-pick{ background:var(--primary,#7c5cff); color:#fff; }

/* ---------- نوار فراخوان ---------- */
.vip-cta{
  display:flex; align-items:center; gap:12px;
  margin-top:20px; padding:15px 18px; border-radius:16px;
  background:linear-gradient(120deg, var(--primary,#7c5cff), var(--primary-dark,#5b3fe0));
  color:#fff; text-decoration:none;
  box-shadow:0 14px 30px -18px rgba(44,92,230,.9);
  transition:transform .14s ease, box-shadow .2s ease;
}
.vip-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -18px rgba(44,92,230,1); }
.vip-cta:active{ transform:scale(.985); }
.vip-cta-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--primary,#7c5cff);
}
.vip-cta-ic svg{ width:20px; height:20px; }
.vip-cta b{ font-size:15px; font-weight:800; }
.vip-cta i{
  font-style:normal; font-size:11px; opacity:.85; margin-inline-start:auto;
  text-align:end; line-height:1.6;
}

/* ---------- کارت‌های تماس ---------- */
.vip-contact{ display:grid; gap:10px; }
.vip-ccard{
  display:flex; align-items:center; gap:11px;
  padding:13px 14px; border-radius:14px;
  border:1px solid var(--border,#e5eaf3); background:var(--bg,#fff);
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, transform .14s ease;
}
a.vip-ccard:hover{ border-color:var(--primary,#7c5cff); transform:translateY(-1px); }
.vip-ccard-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}
.vip-ccard-ic svg{ width:19px; height:19px; }
.vip-ic-wa{ background:#e7f9ee; color:#25D366; }
.vip-ic-web{ background:var(--primary-tint,rgba(124,92,255,.12)); color:var(--primary,#7c5cff); }
.vip-ccard-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vip-ccard-txt b{ font-size:12.5px; font-weight:800; color:var(--text,#1a2233); }
.vip-ccard-txt i{
  font-style:normal; font-size:11px; color:var(--muted,#7c8698); line-height:1.7;
  letter-spacing:.3px;
}

.vip-hint{ font-size:12px; color:var(--muted,#7c8698); line-height:1.9; }

/* ---------- کم‌رنگ کردن منوی قابلیت‌های قفل ---------- */
html.vip-lock-sales   [data-page="sale"],
html.vip-lock-sales   [data-page="quick-sale"],
html.vip-lock-sales   [data-page="sales"],
html.vip-lock-debtors [data-page="debtors"]{ opacity:.5; }

/* کسانی که حرکت کمتری می‌خواهند، هیچ انیمیشنی نمی‌بینند */
@media (prefers-reduced-motion:reduce){
  .vip-box, .vip-tier, .vip-plan, .vip-cta, .vip-close, .vip-ccard{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important;
  }
}

/* ---------- نوار «اول وارد حساب شوید» ---------- */
.vip-gate{
  display:flex; align-items:center; gap:11px; width:100%;
  margin-top:20px; padding:13px 15px; border-radius:14px;
  border:1.5px solid var(--warning,#e8a13a);
  background:var(--warning-tint,#fdf3e3);
  font-family:inherit; text-align:start; cursor:pointer;
  transition:transform .14s ease, box-shadow .2s ease;
}
.vip-gate:active{ transform:scale(.985); }
.vip-gate:hover{ box-shadow:0 10px 24px -16px rgba(232,161,58,.9); }
.vip-gate-ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--warning,#e8a13a); color:#fff;
}
.vip-gate-ic svg{ width:17px; height:17px; }
.vip-gate-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vip-gate-txt b{ font-size:12.5px; font-weight:800; color:var(--text,#1a2233); }
.vip-gate-txt i{ font-style:normal; font-size:10.5px; color:var(--muted,#7c8698); line-height:1.6; }

/* دکمه‌ی خرید تا وقتی وارد نشده، کم‌رنگ‌تر است */
.vip-cta-locked{ opacity:.6; }
.vip-cta-locked::after{ animation:none; }


/* ============================== کد اشتراک ==============================
 *
 *  کارتِ جمع‌وجمعی که بسته می‌آید. باز کردنش یک زدن است و بستنش هم.
 *  عمداً پایینِ صفحه و پایینِ دکمه‌ی خرید است: راهِ اصلی خرید است، این
 *  راهِ کسی است که کد دارد.
 */
.vip-code{
  margin-top:14px; border-radius:14px;
  border:1px solid var(--border,#e6e9f2);
  background:var(--surface,#fff); overflow:hidden;
}
.vip-code-head{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 14px; background:none; border:0; cursor:pointer;
  text-align:start; font:inherit; color:inherit;
}
.vip-code-ic{
  display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto;
  border-radius:10px; background:var(--primary-tint,rgba(124,92,255,.14));
  color:var(--primary,#7c5cff);
}
.vip-code-ic svg{ width:17px; height:17px; }
.vip-code-txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.vip-code-txt b{ font-size:13px; font-weight:800; color:var(--text,#1a2233); }
.vip-code-txt i{ font-size:11px; font-style:normal; color:var(--muted,#7c8698); }
.vip-code-more{ font-size:11px; font-weight:800; color:var(--primary,#7c5cff); flex:0 0 auto; }

.vip-code-body{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:0 14px 14px;
}
#vip-code-input{
  flex:1 1 140px; min-width:0; padding:10px 12px;
  border-radius:10px; border:1px solid var(--border,#e6e9f2);
  background:var(--bg,#f6f8fc); color:var(--text,#1a2233);
  font-size:17px; font-weight:800; letter-spacing:5px; text-align:center;
}
#vip-code-input:focus{ outline:none; border-color:var(--primary,#7c5cff); }
#vip-code-go{ flex:0 0 auto; }

.vip-code-note{ flex:1 1 100%; margin:2px 0 0; font-size:11.5px; line-height:1.8; }
.vip-code-ok{ color:var(--success,#0fa98a); }
.vip-code-bad{ color:var(--danger,#d93b3b); }