/* ═══════════════════════════════════════════════
   XtremeIPTV HD — pricing.css  v2.0
   Pricing page: background, clouds, box, FAQ
═══════════════════════════════════════════════ */

/* ── Page base ── */
.pricing-page { background:#12083a; min-height:100vh; }

/* ── Background ── */
.page-bg-gradient {
  background:
    radial-gradient(ellipse at 80% 8%,  rgba(108,63,212,.50) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 90%, rgba(0,212,200,.22)  0%, transparent 48%),
    radial-gradient(ellipse at 50% 50%, rgba(26,10,70,.95)   0%, rgba(8,5,26,1) 80%) !important;
}

/* Pricing-page cloud sizes (overrides shared cloud rules) */
.cloud-tr {
  top:-50px; right:-70px;
  width:540px; height:420px;
}
.cloud-bl {
  bottom:8%; left:-90px;
  width:400px; height:300px;
  opacity:.5;
}

/* ══════════════════════════════
   PAGE WRAP
══════════════════════════════ */
.pricing-page-wrap { position:relative; z-index:1; min-height:100vh; }

/* ── Pricing Hero ── */
.pricing-hero { text-align:center; padding:130px 24px 36px; }
.pricing-hero-title {
  font-family:var(--ff-d);
  font-size:clamp(2.2rem,5vw,3.5rem);
  font-weight:800; line-height:1.1;
  letter-spacing:-.03em; margin-bottom:14px;
}
.pricing-hero-sub { color:var(--text-2); font-size:1rem; line-height:1.75; max-width:520px; margin:0 auto; }

/* ══════════════════════════════
   PRICING BOX WRAP
══════════════════════════════ */
.pricing-box-wrap {
  padding:36px 24px 60px;
  display:flex; justify-content:center;
}

/* ══════════════════════════════
   CTA SECTION (Pricing Page)
══════════════════════════════ */
.pricing-cta-section { padding:70px 24px 90px; }
.pricing-cta-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.pricing-posters-strip { display:flex; gap:12px; align-items:flex-start; justify-content:flex-end; }
.pricing-poster-col { display:flex; flex-direction:column; gap:12px; }

/* ══════════════════════════════
   FAQ SECTION
══════════════════════════════ */
.faq-section { padding:70px 24px 100px; text-align:center; }
.faq-inner { max-width:800px; margin:0 auto; }

/* FAQ Tabs */
.faq-tabs {
  display:inline-flex; gap:5px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:50px; padding:5px; margin-bottom:38px;
  flex-wrap:wrap; justify-content:center;
}
.faq-tab {
  padding:9px 24px; border:none; border-radius:50px;
  background:transparent; color:rgba(255,255,255,.50);
  font-family:var(--ff-d); font-weight:600; font-size:.875rem;
  cursor:pointer; transition:var(--tr); white-space:nowrap;
}
.faq-tab:hover { color:rgba(255,255,255,.85); }
.faq-tab.active {
  background:linear-gradient(135deg,var(--purple-1),var(--teal-1));
  color:#fff; box-shadow:0 4px 14px rgba(108,63,212,.40);
}

/* FAQ Accordion */
.faq-list { display:flex; flex-direction:column; gap:10px; text-align:left; }
.faq-item {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); overflow:hidden; backdrop-filter:blur(10px);
  transition:border-color .3s ease;
}
.faq-item:hover { border-color:rgba(155,93,229,.28); }
.faq-item.open  { border-color:rgba(108,63,212,.38); }

.faq-q {
  width:100%; text-align:left; padding:20px 24px;
  background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--ff-d); font-size:.94rem; font-weight:600;
  color:rgba(255,255,255,.88); transition:color .2s ease;
}
.faq-q:hover { color:#fff; }

/* CSS chevron */
.faq-chevron {
  width:24px; height:24px; flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .2s ease, border-color .2s ease;
  position:relative;
}
.faq-chevron::before {
  content:''; width:8px; height:8px;
  border-right:2px solid rgba(255,255,255,.6); border-bottom:2px solid rgba(255,255,255,.6);
  transform:rotate(45deg) translate(-2px,-2px); transition:var(--tr);
}
.faq-item.open .faq-chevron {
  transform:rotate(180deg);
  background:rgba(108,63,212,.25); border-color:rgba(108,63,212,.45);
}
.faq-item.open .faq-chevron::before { border-color:var(--teal-1); }

/* FAQ Answer — smooth slide */
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a-inner { padding:0 24px 20px; color:rgba(255,255,255,.58); font-size:.875rem; line-height:1.78; }
.faq-item.open .faq-a { max-height:320px; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width:1024px) {
  .pricing-cta-inner { grid-template-columns:1fr; }
  .pricing-posters-strip { justify-content:center; }
}
@media (max-width:768px) {
  .cloud-tr { width:300px; height:240px; top:-20px; right:-40px; }
  .cloud-bl { display:none; }
  .faq-tabs { gap:3px; }
  .faq-tab  { padding:8px 14px; font-size:.8rem; }
  .pricing-hero { padding-top:100px; }
}
@media (max-width:480px) {
  .pricing-hero { padding-top:92px; }
  .pricing-box-wrap { padding:24px 16px 44px; }
  .faq-section { padding:50px 16px 70px; }
}