/* Subscription Plans Page - Front Styles */
:root{
  --zxsp-btn-bg: var(--spp-brand);
  --zxsp-btn-color:#fff;
  --zxsp-btn-bg-hover: var(--spp-brand);
  --zxsp-btn-color-hover:#fff;
  --zxsp-btn-bg-active: var(--spp-brand);
  --zxsp-btn-color-active:#fff;

  --zxsp-toggle-bg:#ffffff;
  --zxsp-toggle-color: var(--spp-text);
  --zxsp-toggle-bg-hover:#f3f4f6;
  --zxsp-toggle-color-hover: var(--spp-text);
  --zxsp-toggle-bg-active: var(--spp-brand);
  --zxsp-toggle-color-active:#ffffff;

  --zxsp-faq-q-bg:#ffffff;
  --zxsp-faq-q-color: var(--spp-text);
  --zxsp-faq-q-bg-active:#f7f7fb;
  --zxsp-faq-q-color-active: var(--spp-text);
  --zxsp-faq-icon: var(--spp-brand);
  --zxsp-faq-a-color: var(--spp-muted);

  --zxsp-font-base:15px;
  --zxsp-font-title:22px;
  --zxsp-font-plan-title:16px;
  --zxsp-font-price:28px;
  --zxsp-font-feature:14px;
  --zxsp-font-button:14px;
  --zxsp-font-faq-q:15px;
  --zxsp-font-faq-a:14px;

  --spp-brand:#4b49ac;
  --spp-border:#e6e6ef;
  --spp-text:#1f2937;
  --spp-muted:#6b7280;
  --spp-bg:#ffffff;
  --spp-shadow: 0 10px 30px rgba(17,24,39,.08);
}

.spp-wrap{direction:rtl; font-family:inherit; color:var(--spp-text); font-size:var(--zxsp-font-base);}
.spp-title{margin:0 0 14px; font-size:var(--zxsp-font-title);}

.spp-toggle{display:inline-flex; gap:6px; background:#f7f7fb; border:1px solid var(--spp-border); padding:6px; border-radius:14px; margin:0 0 18px;}
.spp-toggle__btn{border:0; background:var(--zxsp-toggle-bg); padding:10px 14px; border-radius:12px; cursor:pointer; font-size:var(--zxsp-font-button); color:var(--zxsp-toggle-color);}
.spp-toggle__btn.is-active{background:var(--zxsp-toggle-bg-active); color:var(--zxsp-toggle-color-active); box-shadow:0 8px 18px rgba(17,24,39,.10); border:1px solid var(--spp-border);}

.spp-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;}
@media (max-width: 980px){.spp-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width: 640px){.spp-grid{grid-template-columns:1fr;}}

.spp-empty{border:1px dashed var(--spp-border); padding:18px; border-radius:16px; color:var(--spp-muted);}

.spp-card{position:relative; background:var(--spp-bg); border:1px solid var(--spp-border); border-radius:18px; padding:18px; box-shadow:var(--spp-shadow); overflow:hidden;}
.spp-card.is-featured{border-color:rgba(75,73,172,.45); box-shadow:0 12px 40px rgba(75,73,172,.15); transform:translateY(-2px);}

.spp-badge{
  position:static;
  display:inline-block;
  margin:0 auto 10px;   /* وسط کارت */
  background:rgba(75,73,172,.10);
  color:var(--spp-brand);
  border:1px solid rgba(75,73,172,.25);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

.spp-card__head{display:flex; flex-direction:column; gap:10px; margin-bottom:10px;}
.spp-card__title{margin:0; font-size:18px;}

.spp-price{display:flex; align-items:baseline; gap:8px;}
.spp-price__amount{font-size:26px; font-weight:800; color:var(--spp-brand);}
.spp-price__period{font-size:13px; color:var(--spp-muted);}

.spp-card__desc{color:var(--spp-muted); font-size:14px; line-height:1.8; margin:8px 0 10px;}

.spp-features{list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:8px;}
.spp-features__item{position:relative; padding-right:24px; font-size:var(--zxsp-font-feature); color:var(--spp-text);}
.spp-features__item:before{content:"✓"; position:absolute; right:0; top:0; color:var(--spp-brand); font-weight:700;}

.spp-card__cta{margin-top:auto;}
.spp-cta{display:inline-flex; justify-content:center; align-items:center; width:100%; text-decoration:none; padding:12px 14px; border-radius:14px; background:var(--zxsp-btn-bg); color:var(--zxsp-btn-color); font-weight:700; font-size:var(--zxsp-font-button); border:1px solid var(--spp-brand); transition:transform .12s ease, box-shadow .12s ease;}
.spp-cta:hover{background:var(--zxsp-btn-bg-hover); color:var(--zxsp-btn-color-hover); transform:translateY(-1px); box-shadow:0 12px 28px rgba(75,73,172,.22);}
.spp-cta.is-outline{background:#fff; color:var(--spp-brand); border:1px solid rgba(75,73,172,.45);} 

/* FAQ */
.spp-faq{margin-top:22px; border:1px solid var(--spp-border); border-radius:18px; padding:16px; background:#fff;}
.spp-faq__title{margin:0 0 10px; font-size:18px;}
.spp-faq__list{display:flex; flex-direction:column; gap:10px;}
.spp-faq__item{border:1px solid var(--spp-border); border-radius:14px; overflow:hidden;}
.spp-faq__q{width:100%; text-align:right; background:var(--zxsp-faq-q-bg); color:var(--zxsp-faq-q-color); font-size:var(--zxsp-font-faq-q); border:0; cursor:pointer; padding:12px 14px; font-weight:700; position:relative;}
.spp-faq__q:after{content:"+"; position:absolute; left:14px; top:12px; color:var(--zxsp-faq-icon); font-weight:900;}
.spp-faq__q[aria-expanded="true"]:after{content:"–";}
.spp-faq__a{padding:0 14px 14px; color:var(--zxsp-faq-a-color); line-height:1.9; font-size:var(--zxsp-font-faq-a);}

.spp-cta:active{background:var(--zxsp-btn-bg-active); color:var(--zxsp-btn-color-active);} 

.spp-toggle__btn:hover{background:var(--zxsp-toggle-bg-hover); color:var(--zxsp-toggle-color-hover);} 

.spp-features__item.is-highlight{background:rgba(75,73,172,.08); border:1px solid rgba(75,73,172,.18); padding:8px 10px; border-radius:12px;}
/* کارت مرجع بج */
.spp-card{ position:relative; }

/* بج همیشه چپِ بالا (تو RTL هم درست) */
.spp-badge{
  position:absolute !important;
  top:14px !important;
  left:14px !important;
  right:auto !important;
  margin:0 !important;
}

/* برای اینکه بج روی عنوان نیفته */
.spp-card-head{
  padding-top:34px !important;
  text-align:center !important;
}

/* عنوان وسط */
.spp-plan-title{
  width:100%;
  text-align:center !important;
}