/* ═══════════════════════════════════════════════════════════
   PRICING-PAGE.CSS — CloudV24 Pricing Page Styles
   Extends sections.css design tokens
   ═══════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.sec-pwrap {
  padding: 3rem 1.5rem;
}

/* ══════════════════════════════════════
   PRICING HERO (keep original canvas hero)
══════════════════════════════════════ */
.pricing-hero {
  position: relative;
  min-height: 68vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 5% 100px;
}

.pricing-hero canvas#pricingCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.pricing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, rgba(10,14,39,0.2) 0%, rgba(10,14,39,0.88) 70%);
  pointer-events: none;
}

.pricing-hero .hero-content {
  position: relative;
  z-index: 4;
  max-width: 820px;
  text-align: center;
}

/* ══════════════════════════════════════
   PLAN CATEGORY TABS
══════════════════════════════════════ */
.sec-pricing-controls {
  padding: 1.5rem 1.5rem 0;
  position: sticky;
  top: 70px;
  z-index: 50;
  background: var(--dark, #0a0e27);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
}

.ptabs {
  display: flex;
  gap: .4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.ptab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.3rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  color: var(--text-dim, #8892b0);
  background: transparent;
  cursor: pointer;
  transition: all .25s;
  white-space: nowrap;
}
.ptab svg { width: 15px; height: 15px; }
.ptab:hover { border-color: rgba(0,212,255,.3); color: var(--c-cyan, #00d4ff); background: rgba(0,212,255,.05); }
.ptab.active {
  background: rgba(0,212,255,.12);
  border-color: rgba(0,212,255,.45);
  color: var(--c-cyan, #00d4ff);
}

/* Billing toggle row */
#billingRow {
  justify-content: center;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════
   PLAN PANES (tab panels)
══════════════════════════════════════ */
.pane {
  display: none;
}
.pane.active {
  display: block;
}

/* ══════════════════════════════════════
   PRICING GRID (reuse sections.css cards)
══════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  gap: 1.1rem;
  margin-bottom: 2rem;
  justify-content: center;   /* ← this centers the 3-column group */
  width: 100%;
}


.sec-pwrap .sec-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
/* ── Trust bar under shared plans ── */
.plan-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  padding: 1.1rem 1.5rem;
  background: rgba(0,212,255,.04);
  border: 1.5px solid rgba(0,212,255,.12);
  border-radius: var(--radius-md, 12px);
  font-size: .82rem;
  color: var(--text-dim, #8892b0);
}
.plan-trust-bar span {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.plan-trust-bar svg { width: 14px; height: 14px; color: var(--c-emerald, #10b981); }

/* ── VPS specs strip ── */
.vps-specs-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  margin-top: 2rem;
}
.vps-spec {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1rem 1.5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-dim, #8892b0);
  flex: 1 1 180px;
  justify-content: center;
}
.vps-spec svg { width: 16px; height: 16px; color: var(--c-cyan, #00d4ff); }
.vps-spec-div {
  width: 1px;
  height: 40px;
  background: var(--border, rgba(255,255,255,.07));
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   DOMAIN PRICING ROWS
══════════════════════════════════════ */
.domain-grid {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 2rem;
}

.domain-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-md, 12px);
  padding: .9rem 1.25rem;
  transition: all .28s;
}
.domain-row:hover {
  border-color: rgba(0,212,255,.28);
  transform: translateX(4px);
  box-shadow: 0 6px 24px rgba(0,212,255,.07);
}

.domain-row--featured {
  border-color: rgba(0,212,255,.3);
  background: linear-gradient(135deg, rgba(0,212,255,.05), var(--surface, rgba(22,28,50,.85)));
}

.domain-row__ext {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: 'Space Mono', monospace;
  color: var(--c-cyan, #00d4ff);
  min-width: 70px;
}

.domain-row__desc {
  font-size: .84rem;
  color: var(--text-dim, #8892b0);
  flex: 1;
}

.domain-row__badges {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.dbadge {
  font-size: .68rem;
  font-weight: 700;
  padding: .22rem .65rem;
  border-radius: 50px;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.18);
  color: var(--c-cyan, #00d4ff);
  white-space: nowrap;
}
.dbadge--hot  { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.3);  color: var(--c-amber, #f59e0b); }
.dbadge--sale { background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.3);  color: var(--c-emerald, #10b981); }

.domain-row__price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text, #e2e8f0);
  display: flex;
  align-items: baseline;
  gap: .15rem;
  min-width: 90px;
  justify-content: flex-end;
}
.domain-row__price em { font-size: .72rem; font-weight: 400; color: var(--text-dim, #8892b0); font-style: normal; }

.domain-row__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-sm, 8px);
  font-size: .8rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  background: rgba(0,212,255,.08);
  border: 1.5px solid rgba(0,212,255,.25);
  color: var(--c-cyan, #00d4ff);
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s;
}
.domain-row__btn svg { width: 13px; height: 13px; }
.domain-row__btn:hover { background: rgba(0,212,255,.15); border-color: var(--c-cyan, #00d4ff); transform: scale(1.03); }

.domain-search-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(124,58,237,.06));
  border: 1.5px solid rgba(0,212,255,.18);
  border-radius: var(--radius-md, 12px);
}
.domain-search-cta p {
  font-size: .9rem;
  color: var(--text-dim, #8892b0);
  margin: 0;
}

/* ══════════════════════════════════════
   ADD-ONS GRID
══════════════════════════════════════ */
.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

.addon-card {
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg, 18px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: all .35s;
  position: relative;
  overflow: hidden;
}

.addon-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-cyan, #00d4ff), transparent);
  transform: scaleX(0);
  transition: transform .4s;
}

.addon-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,212,255,.3);
  box-shadow: 0 18px 40px rgba(0,212,255,.1);
}
.addon-card:hover::before { transform: scaleX(1); }

.addon-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md, 12px);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .3s;
}
.addon-card:hover .addon-card__icon { transform: scale(1.1) rotate(-6deg); }
.addon-card__icon svg { width: 22px; height: 22px; }

.addon-icon--cyan    { background: rgba(0,212,255,.1);   border: 1px solid rgba(0,212,255,.22);   color: var(--c-cyan, #00d4ff); }
.addon-icon--violet  { background: rgba(124,58,237,.1);  border: 1px solid rgba(124,58,237,.22);  color: var(--c-violet, #7c3aed); }
.addon-icon--emerald { background: rgba(16,185,129,.1);  border: 1px solid rgba(16,185,129,.22);  color: var(--c-emerald, #10b981); }
.addon-icon--red     { background: rgba(239,68,68,.1);   border: 1px solid rgba(239,68,68,.22);   color: var(--c-red, #ef4444); }
.addon-icon--amber   { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.22);  color: var(--c-amber, #f59e0b); }
.addon-icon--blue    { background: rgba(59,130,246,.1);  border: 1px solid rgba(59,130,246,.22);  color: var(--c-blue, #3b82f6); }

.addon-card__body { flex: 1; }
.addon-card__body h3 { font-size: 1rem; font-weight: 700; color: var(--text, #e2e8f0); margin-bottom: .4rem; }
.addon-card__body p  { font-size: .83rem; color: var(--text-dim, #8892b0); line-height: 1.65; margin: 0; }

.addon-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.05);
}

.addon-price {
  display: flex;
  align-items: baseline;
  gap: .15rem;
}
.addon-price span { font-size: 1.3rem; font-weight: 800; background: linear-gradient(135deg, #fff, var(--c-cyan, #00d4ff)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.addon-price em  { font-size: .72rem; color: var(--text-dim, #8892b0); font-style: normal; }

.addon-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm, 8px);
  font-size: .8rem; font-weight: 700;
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, var(--c-cyan, #00d4ff), #0099bb);
  color: #0a0e27;
  border: none;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  white-space: nowrap;
}
.addon-btn svg { width: 13px; height: 13px; }
.addon-btn:hover { opacity: .88; transform: scale(1.04); }

/* ══════════════════════════════════════
   COMPARISON TABLE (always visible section)
══════════════════════════════════════ */
.sec-compare-full { padding: 3rem 1.5rem; }

.compare-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg, 18px);
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.compare-table thead tr {
  background: rgba(0,212,255,.06);
  border-bottom: 1.5px solid var(--border, rgba(255,255,255,.07));
}

.compare-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-dim, #8892b0);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.compare-table td {
  padding: .82rem 1.25rem;
  font-size: .87rem;
  color: var(--text-dim, #8892b0);
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: var(--surface, rgba(22,28,50,.85));
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td:first-child { font-weight: 600; color: var(--text, #e2e8f0); }

.compare-highlight {
  background: rgba(0,212,255,.05) !important;
  border-left: 1px solid rgba(0,212,255,.15) !important;
  border-right: 1px solid rgba(0,212,255,.15) !important;
  color: var(--text, #e2e8f0) !important;
}
.compare-table thead .compare-highlight {
  color: var(--c-cyan, #00d4ff) !important;
  background: rgba(0,212,255,.1) !important;
}

.tbl-check { width: 16px; height: 16px; color: var(--c-emerald, #10b981); }
.tbl-x     { width: 16px; height: 16px; color: var(--c-red, #ef4444); opacity: .5; }

.compare-btn {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border-radius: var(--radius-sm, 8px);
  font-size: .78rem; font-weight: 700;
  font-family: 'Outfit', sans-serif;
  border: 1.5px solid rgba(0,212,255,.3);
  color: var(--c-cyan, #00d4ff);
  background: transparent;
  text-decoration: none;
  transition: all .25s;
  white-space: nowrap;
}
.compare-btn:hover { background: rgba(0,212,255,.08); border-color: var(--c-cyan, #00d4ff); }
.compare-btn--pop {
  background: linear-gradient(135deg, var(--c-cyan, #00d4ff), #0099bb);
  color: #0a0e27; border-color: transparent;
}
.compare-btn--pop:hover { opacity: .9; box-shadow: 0 5px 18px rgba(0,212,255,.3); }

/* ══════════════════════════════════════
   ACTIVE NAV
══════════════════════════════════════ */
nav a.active { color: var(--c-cyan, #00d4ff); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sec-pwrap, .sec-compare-full { padding: 2.5rem 1rem; }
  .sec-pricing-controls { padding: 1.25rem 1rem 0; top: 60px; }
  .pricing-grid  { grid-template-columns: 1fr; }
  .addons-grid   { grid-template-columns: 1fr; }
  .vps-specs-strip { flex-direction: column; }
  .vps-spec-div  { width: 80%; height: 1px; }
  .domain-row    { flex-wrap: wrap; gap: .65rem; }
  .domain-row__desc { display: none; }
  .domain-row__badges { order: 3; }
  .pricing-hero  { padding: 120px 5% 80px; min-height: 60vh; }
}

@media (max-width: 480px) {
  .ptabs { gap: .3rem; }
  .ptab  { padding: .5rem .9rem; font-size: .78rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .addons-grid  { grid-template-columns: 1fr; }
  .plan-trust-bar { gap: .65rem 1rem; }
  .domain-search-cta { flex-direction: column; text-align: center; }
}