/* ============================================================
   NiftyEdge AI — Subscription Page Styles
   Updated to match new Subscription.razor (form-card pattern).
   Uses the same design tokens as MorningInput / app.css.
   ============================================================ */

/* ── Status chip (in page-topbar) ────────────────────────── */
.sub-status-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.sub-status-chip.active {
  background: var(--bulldim);
  color: var(--bull);
  border: 1px solid var(--bullbdr);
}
.sub-status-chip.free {
  background: var(--bg3);
  color: var(--text3);
  border: 1px solid var(--border);
}
.chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bull);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
/* ── 3-card plan row (Row 1) ────────────────────────────── */
/* plans-row: standalone grid NOT affected by form-card CSS  */
.plans-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}

/* ── Comparison row (Row 2) — full width ─────────────────── */
.compare-row {
  margin-bottom: 20px;
}

/* Wide compare card fills full row */
.compare-card-wide {
  width: 100%;
}

/* ── Wide comparison card (Row 2 — full width) ───────────── */
.compare-card-wide {
  overflow: hidden;
}
.compare-subtitle {
  font-size: 0.73rem;
  color: var(--text3);
  font-weight: 400;
  margin-left: 10px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--sans);
}

/* ── Wide comparison table ───────────────────────────────── */
.compare-tbl-wide {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.compare-tbl-wide thead tr {
  background: var(--bg3);
}
.compare-tbl-wide thead th {
  padding: 16px 20px;
  border-bottom: 2px solid var(--border2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Feature column header */
.ctw-feat {
  text-align: left !important;
  width: 40%;
  color: var(--text3);
  font-size: 11px;
}

/* Plan column headers */
.ctw-col {
  text-align: center;
  width: 20%;
}

/* Header cell inner wrapper */
.ctw-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Icon above plan name */
.ctw-icon {
  font-size: 20px;
  color: var(--text3);
}
.ctw-icon-pro  { color: var(--gold2); }
.ctw-icon-prem { color: #A78BFA; }

/* Plan name */
.ctw-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text2);
}
.ctw-name-prem { color: #A78BFA; }

/* Price under plan name */
.ctw-price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}
.ctw-price-pro  { color: var(--gold2); }
.ctw-price-prem { color: #A78BFA; }

/* Feature name cells in tbody */
.ctw-feat-name {
  padding: 12px 20px;
  color: var(--text2);
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

/* All tbody rows */
.compare-tbl-wide tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.compare-tbl-wide tbody tr:last-child { border-bottom: none; }
.compare-tbl-wide tbody tr:hover td   { background: var(--bg3); }
.compare-tbl-wide tbody tr:hover td.ct-highlight {
  background: rgba(240,180,41,0.08);
}
.compare-tbl-wide td {
  padding: 12px 20px;
  vertical-align: middle;
  text-align: center;
}

/* Footer price row */
.ct-footer-free { color: var(--text2); }
.compare-tbl-wide tfoot .ct-footer-row {
  background: var(--bg3);
  border-top: 2px solid var(--border2);
}
.compare-tbl-wide tfoot td {
  padding: 14px 20px;
  font-size: 14px;
  text-align: center;
  font-family: var(--mono);
}

/* Plan card description */
.plan-desc {
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}



/* ── Current plan banner (inside form-card) ──────────────── */
.cpc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cpc-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cpc-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--gold2);
  flex-shrink: 0;
}
.cpc-info { display: flex; flex-direction: column; gap: 3px; }

/* Coloured tint for current plan banner card */
.cpc-free    { border-left: 4px solid var(--border2); }
.cpc-pro     { border-left: 4px solid var(--gold); background: var(--golddim); }
.cpc-premium { border-left: 4px solid #A78BFA;    background: rgba(167,139,250,0.06); }

.cpc-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.cpc-price {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--gold2);
}

/* ── DB context loading indicator ────────────────────────── */
.db-context-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 12px;
  font-size: 12px;
  color: var(--text3);
}
.spinner-xs {
  width: 14px; height: 14px;
  border: 2px solid var(--border2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}


/* ── Standalone plan card box ────────────────────────────── */
/* Does NOT use form-card so app.css cannot override width   */
.plan-card-box {
  display: flex !important;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  padding: 28px 20px 20px;        /* top padding for ribbon */
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  min-height: 0;
}
.plan-card-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
/* Top accent stripe */
.plan-card-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
  border-radius: var(--r2) var(--r2) 0 0;
}
.plan-card-box.plan-card-popular::before {
  background: linear-gradient(90deg, var(--gold), #F97316, transparent);
}
.plan-card-box.plan-card-premium::before {
  background: linear-gradient(90deg, #A78BFA, #7C3AED, transparent);
}
.plan-card-box.plan-card-current::before {
  background: var(--bull);
}
/* Border colours */
.plan-card-box.plan-card-popular {
  border-color: var(--goldbdr) !important;
}
.plan-card-box.plan-card-popular:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 12px 40px rgba(240,180,41,0.15);
}
.plan-card-box.plan-card-premium {
  border-color: rgba(167,139,250,0.35) !important;
}
.plan-card-box.plan-card-premium:hover {
  border-color: #A78BFA !important;
  box-shadow: 0 12px 40px rgba(167,139,250,0.12);
}
.plan-card-box.plan-card-current {
  border-color: var(--bullbdr) !important;
}
/* Icons and text inside box */
.plan-card-box .plan-icon { color: var(--gold2); }
.plan-card-box.plan-card-premium .plan-icon { color: #A78BFA; }
.plan-card-box.plan-card-current .plan-icon  { color: var(--bull); }

/* ── Original plan-card (kept for reference) ─────────────── */
.plan-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  padding-top: 28px; /* extra top for ribbon space */
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

/* Top accent stripe */
.plan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
}
.plan-card-popular::before {
  background: linear-gradient(90deg, var(--gold), #F97316, transparent);
}
.plan-card-premium::before {
  background: linear-gradient(90deg, #A78BFA, #7C3AED, transparent);
}
.plan-card-current::before {
  background: var(--bull);
}

/* Border colours */
.plan-card-popular {
  border-color: var(--goldbdr) !important;
}
.plan-card-popular:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 12px 40px rgba(240,180,41,0.15);
}
.plan-card-premium {
  border-color: rgba(167,139,250,0.35) !important;
}
.plan-card-premium:hover {
  border-color: #A78BFA !important;
  box-shadow: 0 12px 40px rgba(167,139,250,0.12);
}
.plan-card-current {
  border-color: var(--bullbdr) !important;
}

/* ── Ribbon badge (Most Popular / Best Value) ────────────── */
.plan-ribbon {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), #F97316);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 0 0 10px 10px;
  white-space: nowrap;
  z-index: 1;
}
.plan-ribbon-premium {
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  color: #fff;
}

/* ── Plan card heading row ───────────────────────────────── */
.plan-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan-icon {
  font-size: 22px;
  color: var(--gold2);
}
.plan-card-premium .plan-icon { color: #A78BFA; }
.plan-card-current .plan-icon { color: var(--bull); }

/* ── Price row ───────────────────────────────────────────── */
.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}
.plan-price-rupee {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text2);
}
.plan-price-amount {
  font-family: var(--disp);
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.plan-price-period {
  font-size: 13px;
  color: var(--text3);
  margin-left: 3px;
  align-self: flex-end;
  padding-bottom: 3px;
}

/* ── Feature list inside plan card ──────────────────────── */
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}
.plan-feat-tick {
  color: var(--bull);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  width: 14px;
}

/* ── Plan action area (button stays at bottom) ───────────── */
.plan-action { margin-top: auto; }

/* btn-secondary for "Current Plan" and "Downgrade" */
.btn-secondary {
  width: 100%;
  padding: 11px 16px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  color: var(--text2);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--text3);
  color: var(--text);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  color: var(--bull);
  border-color: var(--bullbdr);
  background: var(--bulldim);
}

/* ── Feature comparison table ────────────────────────────── */
.compare-wrap { overflow-x: auto; }

.compare-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.compare-tbl thead tr { background: var(--bg4, var(--bg3)); }
.compare-tbl th {
  padding: 12px 16px;
  border-bottom: 2px solid var(--border2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ct-feature-col { text-align: left; color: var(--text3); width: 46%; }
.ct-plan-col    { text-align: center; width: 18%; }
.ct-highlight   { background: rgba(240,180,41,0.05); }

.compare-tbl tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.compare-tbl tbody tr:last-child { border-bottom: none; }
.compare-tbl tbody tr:hover td   { background: var(--bg3); }
.compare-tbl tbody tr:hover td.ct-highlight { background: rgba(240,180,41,0.08); }

.compare-tbl td { padding: 10px 16px; vertical-align: middle; }
.ct-feature-name { color: var(--text2); font-size: 13px; text-align: left; }
.ct-cell         { text-align: center; }

.ct-check {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bulldim);
  color: var(--bull);
  font-weight: 700;
  font-size: 11px;
}
.ct-premium-check {
  background: rgba(167,139,250,0.15);
  color: #A78BFA;
}
.ct-dash { color: var(--text3); font-size: 16px; line-height: 1; }

/* Footer row */
.compare-tbl tfoot .ct-footer-row { background: var(--bg4, var(--bg3)); border-top: 2px solid var(--border2); }
.compare-tbl tfoot td             { padding: 12px 16px; font-weight: 600; font-size: 13px; text-align: center; }
.ct-price-pro     { color: var(--gold2);  font-family: var(--mono); }
.ct-price-premium { color: #A78BFA; font-family: var(--mono); }

/* ── Payment history table ───────────────────────────────── */
.history-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-tbl thead tr { background: var(--bg4, var(--bg3)); }
.history-tbl th {
  padding: 11px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 2px solid var(--border2);
  white-space: nowrap;
}
.history-tbl tbody tr  { border-bottom: 1px solid var(--border); transition: background 0.1s; }
.history-tbl tbody tr:last-child { border-bottom: none; }
.history-tbl tbody tr:hover td   { background: var(--bg3); }
.history-tbl td { padding: 12px 16px; vertical-align: middle; color: var(--text2); }

.ht-plan-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge-pro   { background: var(--golddim); color: var(--gold2); border: 1px solid var(--goldbdr); }
.badge-prem  { background: rgba(167,139,250,0.12); color: #A78BFA; border: 1px solid rgba(167,139,250,0.3); }
.badge-free  { background: var(--bg3); color: var(--text3); border: 1px solid var(--border); }

.ht-paid   { font-size: 12px; font-weight: 600; color: var(--bull); }
.ht-failed { font-size: 12px; font-weight: 600; color: var(--bear); }

.ht-invoice-btn {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 5px 11px;
  font-size: 11px;
  color: var(--text3);
  cursor: pointer;
  font-family: var(--mono);
  transition: all 0.15s;
}
.ht-invoice-btn:hover { color: var(--gold2); border-color: var(--goldbdr); background: var(--golddim); }

.history-tbl tfoot .ct-footer-row { background: var(--bg4, var(--bg3)); border-top: 2px solid var(--border2); }
.history-tbl tfoot td { padding: 12px 16px; font-size: 12px; color: var(--text2); }
.history-tbl tfoot strong { font-family: var(--mono); font-size: 14px; color: var(--text); }

/* ── Support link (inside form-card) ─────────────────────── */
.support-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text3);
  text-decoration: none;
  font-family: var(--mono);
}
.support-link:hover { text-decoration: underline; }

/* ── SEBI disclaimer ─────────────────────────────────────── */
.sebi-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(244,63,94,0.04);
  border: 1px solid var(--bearbdr);
  border-radius: var(--r);
  margin-bottom: 20px;
}
.sebi-icon {
  color: var(--bear);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sebi-disclaimer p {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.6;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════ */

/* Tablet: 2 plan cards per row */
@media (min-width: 768px) and (max-width: 1023px) {
  .plans-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .compare-tbl-wide { font-size: 12px; }
  .ctw-feat         { width: 36%; }
  .ctw-col          { width: 21.3%; }
}

/* Mobile: 1 plan card per row, simplified compare */
@media (max-width: 767px) {
  .plans-row {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .plan-card { padding-top: 28px; }

  .compare-tbl-wide { font-size: 11px; }
  .ctw-feat         { width: 38%; }
  .ctw-col          { width: 20.7%; }
  .ctw-name         { font-size: 12px; }
  .ctw-price        { font-size: 10px; }
  .ctw-icon         { font-size: 16px; }
  .ctw-feat-name,
  .compare-tbl-wide td { padding: 9px 10px; }
  .compare-tbl-wide thead th { padding: 12px 10px; }
  .compare-tbl-wide tfoot td { padding: 10px; font-size: 12px; }

  /* Stack compare card subtitle below title on mobile */
  .compare-subtitle { display: block; margin-left: 0; margin-top: 4px; }

  /* Reduce cpc icon on mobile */
  .cpc-icon { width: 36px; height: 36px; font-size: 18px; }
  .cpc-price { font-size: 20px; }
}