/*
 * fikcentX — v31.3 Pricing Page Redesign CSS
 * Premium card design with tier glows, frosted stats, shimmer CTAs
 * Dependencies: app.css (hero, panel, billing-toggle, pricing-faq classes)
 */

/* ═════════════════════════════════════════════
   PRICING GRID — override for equal-height cards
   ═════════════════════════════════════════════ */
#page-pricing{text-align:center}
#page-pricing .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;align-items:stretch;text-align:left}
@media(max-width:900px){#page-pricing .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:24px auto 0}}

/* ═════════════════════════════════════════════
   PREMIUM CARD (.pc)
   Tier vars: --tc (color), --tr (rgb triplet)
   ═════════════════════════════════════════════ */
#page-pricing .pc{
  --tc:var(--cyan);--tr:0,212,255;
  background:var(--bg-1);
  border-radius:16px;overflow:hidden;position:relative;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94),box-shadow .35s;
  border:1px solid rgba(0,212,255,.08);
  display:flex;flex-direction:column;
}
#page-pricing .pc::before{
  content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,212,255,.03) 0%,transparent 40%);z-index:0;
}
#page-pricing .pc:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(0,212,255,.04)}

/* Pro */
#page-pricing .pc--p{--tc:var(--blue);--tr:59,125,255;border:1.5px solid rgba(59,125,255,.15);box-shadow:0 0 0 1px rgba(59,125,255,.04),0 8px 32px rgba(59,125,255,.05);z-index:2}
#page-pricing .pc--p::before{background:linear-gradient(180deg,rgba(59,125,255,.05) 0%,transparent 50%)}
#page-pricing .pc--p:hover{border-color:rgba(59,125,255,.25);box-shadow:0 20px 60px rgba(59,125,255,.08),0 0 40px rgba(59,125,255,.05)}
@media(min-width:901px){#page-pricing .pc--p{transform:scale(1.04)}#page-pricing .pc--p:hover{transform:scale(1.04) translateY(-4px)}#page-pricing .pricing-grid{padding:8px}}

/* Elite */
#page-pricing .pc--e{--tc:var(--amber);--tr:255,193,7;border:1.5px solid rgba(255,193,7,.12)}
#page-pricing .pc--e::before{background:linear-gradient(180deg,rgba(255,193,7,.04) 0%,transparent 45%)}
#page-pricing .pc--e:hover{border-color:rgba(255,193,7,.22);box-shadow:0 20px 60px rgba(255,193,7,.05),0 0 40px rgba(255,193,7,.03)}

/* Accent bar */
#page-pricing .pc-bar{height:2px;background:linear-gradient(90deg,var(--green),var(--cyan));position:relative;z-index:1}
#page-pricing .pc--p .pc-bar{height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
#page-pricing .pc--e .pc-bar{height:2px;background:linear-gradient(90deg,var(--amber),#ff9500,var(--red))}

/* Header */
#page-pricing .pc-hd{padding:22px 22px 18px;display:flex;align-items:center;gap:14px;position:relative;z-index:1;border-bottom:1px solid rgba(var(--tr),.06)}
#page-pricing .pc-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:18px;flex-shrink:0;position:relative;
  background:linear-gradient(135deg,rgba(var(--tr),.12),rgba(var(--tr),.04));
  border:1px solid rgba(var(--tr),.1);
  box-shadow:0 0 16px rgba(var(--tr),.06);
}
#page-pricing .pc-info{flex:1;min-width:0}
#page-pricing .pc-name{font-size:18px;font-weight:800;letter-spacing:-.5px}
#page-pricing .pc-label{font-family:var(--font-data);font-size:9px;color:var(--tc);font-weight:700;letter-spacing:.8px;margin-top:2px}

#page-pricing .pc-price-rt{text-align:right;flex-shrink:0}
#page-pricing .pc-pv{font-family:var(--font-data);font-size:32px;font-weight:800;letter-spacing:-2px;color:var(--tc)}
#page-pricing .pc--f .pc-pv{color:var(--t-100)}
#page-pricing .pc-pm{font-family:var(--font-data);font-size:10px;color:var(--t-40);font-weight:500}
#page-pricing .pc-pnote{font-family:var(--font-data);font-size:9px;color:var(--t-30);margin-top:1px}

/* Stats strip */
#page-pricing .pc-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:12px 14px 0;position:relative;z-index:1;
  background:rgba(var(--tr),.03);border:1px solid rgba(var(--tr),.06);
  border-radius:10px;overflow:hidden;
}
#page-pricing .pc-stat{text-align:center;padding:14px 4px 11px;position:relative}
#page-pricing .pc-stat+.pc-stat::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(var(--tr),.08)}
#page-pricing .pc-stat-v{font-family:var(--font-data);font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--tc)}
#page-pricing .pc-stat-k{font-family:var(--font-data);font-size:7px;font-weight:600;color:var(--t-40);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}

/* Body */
#page-pricing .pc-bd{padding:14px 22px 10px;position:relative;z-index:1;flex:1}

#page-pricing .pc-gh{
  font-family:var(--font-data);font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;
  color:rgba(var(--tr),.45);
  padding:0 0 5px;margin-bottom:5px;margin-top:12px;
  border-bottom:1px solid rgba(var(--tr),.06);
}
#page-pricing .pc-gh:first-child{margin-top:0}

#page-pricing .pc-f{
  display:flex;align-items:center;gap:9px;
  padding:5px 0;font-size:12px;color:var(--t-70);
  font-family:var(--font-data);font-weight:500;
  position:relative;z-index:1;
}
#page-pricing .pc-f b{color:var(--t-90);font-weight:700}
#page-pricing .pc-f .d{color:var(--t-30);font-weight:400}

#page-pricing .pc-fi{flex-shrink:0;font-size:12px;width:17px;text-align:center}
#page-pricing .pc-fi--ok{color:var(--green)}
#page-pricing .pc-fi--star{color:var(--blue)}
#page-pricing .pc-fi--crown{color:var(--amber)}
#page-pricing .pc-fi--no{color:var(--t-20);font-size:10px}

/* Footer — premium CTAs with shimmer */
#page-pricing .pc-ft{padding:12px 22px 24px;position:relative;z-index:1}
#page-pricing .pc-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 20px;border-radius:11px;
  font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.2px;
  cursor:pointer;transition:all .25s;border:none;text-decoration:none;
  position:relative;overflow:hidden;
}
#page-pricing .pc-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transition:left .6s ease;pointer-events:none;
}
#page-pricing .pc-btn:hover::after{left:120%}

#page-pricing .pc-btn--f{
  background:linear-gradient(135deg,rgba(0,212,255,.06),rgba(59,125,255,.06));
  border:1px solid rgba(0,212,255,.15);color:var(--cyan);
}
#page-pricing .pc-btn--f:hover{
  background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(59,125,255,.1));
  border-color:rgba(0,212,255,.3);box-shadow:0 0 24px rgba(0,212,255,.08);
}
#page-pricing .pc-btn--p{
  background:linear-gradient(135deg,var(--blue),#5b9aff);color:#fff;
  box-shadow:0 4px 28px rgba(59,125,255,.25),0 0 0 1px rgba(59,125,255,.1);
}
#page-pricing .pc-btn--p:hover{
  box-shadow:0 8px 40px rgba(59,125,255,.35),0 0 0 1px rgba(59,125,255,.2),0 0 60px rgba(59,125,255,.08);
  transform:translateY(-2px);
}
#page-pricing .pc-btn--e{
  background:linear-gradient(135deg,var(--amber),#ffab00);color:#000;
  box-shadow:0 4px 28px rgba(255,193,7,.2),0 0 0 1px rgba(255,193,7,.08);
}
#page-pricing .pc-btn--e:hover{
  box-shadow:0 8px 40px rgba(255,193,7,.3),0 0 0 1px rgba(255,193,7,.15),0 0 60px rgba(255,193,7,.06);
  transform:translateY(-2px);
}
#page-pricing .pc-btn--cur{
  background:linear-gradient(135deg,rgba(var(--tr),.08),rgba(var(--tr),.03));
  color:rgba(var(--tr),1);
  border:1px solid rgba(var(--tr),.2);
  cursor:default;
  box-shadow:0 0 20px rgba(var(--tr),.06),inset 0 1px 0 rgba(var(--tr),.08);
  text-shadow:0 0 12px rgba(var(--tr),.3);
  font-weight:800;letter-spacing:.5px;
}
#page-pricing .pc-btn--cur:hover{transform:none;box-shadow:0 0 20px rgba(var(--tr),.06),inset 0 1px 0 rgba(var(--tr),.08)}
#page-pricing .pc-btn--cur::after{display:none}
#page-pricing .pc-arr{transition:transform .2s}
#page-pricing .pc-btn:hover .pc-arr{transform:translateX(3px)}

/* is-current-plan override — uses tier color via --tc/--tr */
#page-pricing .pc.is-current-plan{border:2px solid rgba(var(--tr),.5);box-shadow:0 0 24px rgba(var(--tr),.12)}
#page-pricing .pc.is-current-plan:hover{border-color:rgba(var(--tr),.65);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 36px rgba(var(--tr),.15)}
#page-pricing .pc.is-current-plan .pc-bar{background:linear-gradient(90deg,rgba(var(--tr),1),rgba(var(--tr),.6))}

/* (badge removed in v31.3.4 — current plan indicated only via button + card border glow) */

/* ═════════════════════════════════════════════
   TRUST BAR
   ═════════════════════════════════════════════ */
.pr-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:24px;background:var(--border-0);border-radius:14px;overflow:hidden;
  border:1px solid var(--border-1);text-align:center;
}
.pr-ti{background:var(--bg-2);padding:20px 16px;text-align:center;transition:background .2s}
.pr-ti:hover{background:var(--bg-3)}
.pr-ti-ic{font-size:22px;margin-bottom:6px;display:block}
.pr-ti-label{font-family:var(--font-data);font-size:11px;font-weight:700;color:var(--t-80);margin-bottom:2px}
.pr-ti-sub{font-family:var(--font-data);font-size:8px;color:var(--t-40);letter-spacing:.3px}
@media(max-width:600px){.pr-trust{grid-template-columns:repeat(2,1fr)}}

/* ═════════════════════════════════════════════
   COMPARISON TABLE — tier column glow
   (extends existing .compare-table or uses .pr-tbl)
   ═════════════════════════════════════════════ */
.pr-tbl{width:100%;border-collapse:collapse;font-family:var(--font-data);font-size:11px;text-align:left}
.pr-tbl thead th{font-size:9px;font-weight:700;color:var(--t-30);text-transform:uppercase;letter-spacing:1px;padding:12px 16px;text-align:center;border-bottom:1px solid var(--border-0);background:var(--bg-2)}
.pr-tbl thead th:first-child{text-align:left}
.pr-tbl thead th:nth-child(3){color:var(--blue);text-shadow:0 0 12px rgba(59,125,255,.25)}
.pr-tbl thead th:nth-child(4){color:var(--amber);text-shadow:0 0 12px rgba(255,193,7,.25)}
.pr-tbl td{padding:9px 16px;text-align:center;color:var(--t-50);border-bottom:1px solid var(--border-0);transition:background .15s}
.pr-tbl tbody tr:hover td{background:rgba(255,255,255,.008)}
.pr-tbl tbody tr:last-child td{border-bottom:none}
.pr-tbl td:first-child{text-align:left;font-weight:600;color:var(--t-60)}
.pr-tbl td:nth-child(3){background:rgba(59,125,255,.006)}
.pr-tbl td:nth-child(4){background:rgba(255,193,7,.004)}
.pr-tbl tbody tr:hover td:nth-child(3){background:rgba(59,125,255,.018)}
.pr-tbl tbody tr:hover td:nth-child(4){background:rgba(255,193,7,.012)}
.pr-tbl .cat td{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--t-30);background:var(--bg-2);padding:8px 16px}
.pr-tbl .cat td:nth-child(n){background:var(--bg-2)}
.ty{color:var(--green);font-weight:700}.tn{color:var(--t-20)}.tp{color:var(--blue);font-weight:600}.te{color:var(--amber);font-weight:600}

/* ═════════════════════════════════════════════
   FAQ — upgraded open state with glow
   (overrides existing .pfaq styles from app.css)
   ═════════════════════════════════════════════ */
#page-pricing .pfaq{border-radius:10px;transition:all .2s;text-align:left}
#page-pricing .pfaq.open{border-color:rgba(59,125,255,.1);background:rgba(59,125,255,.02);box-shadow:0 0 20px rgba(59,125,255,.03)}
#page-pricing .pfaq.open .pfaq-q{color:var(--t-100)}
#page-pricing .pfaq-q{padding:14px 16px;font-size:12.5px}
#page-pricing .pfaq-icon{width:24px;height:24px;border-radius:7px;background:var(--bg-4);display:flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:14px;color:var(--t-40);transition:all .3s;flex-shrink:0}
#page-pricing .pfaq.open .pfaq-icon{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;transform:rotate(45deg);box-shadow:0 0 16px rgba(59,125,255,.2)}
#page-pricing .pfaq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s;padding:0 16px;font-family:var(--font-data);font-size:11px;color:var(--t-50);line-height:1.8}
#page-pricing .pfaq.open .pfaq-a{max-height:220px;padding:0 16px 16px}

/* Panel overrides — reset text-align from #page-pricing center */
#page-pricing .panel{text-align:left}

/* ═════════════════════════════════════════════
   ANIMATIONS
   ═════════════════════════════════════════════ */
@keyframes prUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
#page-pricing .pc:nth-child(1){animation:prUp .4s ease .06s both}
#page-pricing .pc:nth-child(2){animation:prUp .4s ease .12s both}
#page-pricing .pc:nth-child(3){animation:prUp .4s ease .18s both}
#page-pricing .pr-trust{animation:prUp .4s ease .24s both}

/* ═════════════════════════════════════════════
   MOBILE
   ═════════════════════════════════════════════ */
@media(max-width:600px){
  #page-pricing .pc-hd{padding:18px 16px 14px;gap:10px}
  #page-pricing .pc-bd{padding:12px 16px 8px}
  #page-pricing .pc-ft{padding:8px 16px 20px}
  #page-pricing .pc-stats{margin:10px 10px 0}
  .pr-tbl thead th,.pr-tbl td{padding:7px 10px;font-size:9px}
}