/* BankersClub.in — /courses/ page (post 3273) visual system.
   Reuses the sitewide tokens from hdr-ftr.css (--navy/--gold/--green/--coral/--bc-bg)
   and the fonts already loaded in functions.php (Playfair Display, Lora, DM Mono, Sora) —
   no new colors or font requests, just applying tokens that were defined but unused
   (--green, --coral) to give this page its own identity within the existing system.
   Enqueued only on page 3273 — see functions.php.
*/

.bc-courses-shell { font-family: 'Sora', sans-serif; }

/* ── Headline: Playfair Display, same face as the site logo ── */
.bc-hero-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
}

/* ── Tabular numbers for prices / seat counts ── */
.bc-num {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Sticky price/CTA bar — pure CSS position:sticky, no JS ── */
.bc-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy);
  color: #fdfcf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 0.88rem;
}
.bc-sticky-bar .bc-sb-cta {
  background: var(--gold);
  color: #06282b;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 16px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.bc-sb-text { display: none; }
@media (max-width: 480px) {
  .bc-sticky-bar { font-size: 0.8rem; padding: 8px 14px; }
}

/* ── Trial banner (uses --green, previously unused) ── */
.bc-trial-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--green) 10%, white);
  border: 1px solid color-mix(in srgb, var(--green) 45%, white);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.92rem;
  color: #1e293b;
}
.bc-trial-banner .bc-check { color: var(--green); font-weight: 700; flex-shrink: 0; }

/* ── Charter Batch seat strip ── */
.bc-charter-strip {
  text-align: center;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.bc-charter-strip strong { color: #1e293b; }

/* ── Disqualifier callout (uses --coral, previously unused) ── */
.bc-disqualify {
  border: 1px solid var(--border);
  border-left: 4px solid var(--coral);
  border-radius: 0 8px 8px 0;
  background: #fffefb;
  padding: 16px 20px;
  font-size: 0.9rem;
  color: #475569;
}
.bc-disqualify .bc-dq-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral);
  display: block;
  margin-bottom: 6px;
}

/* ── Comparison table ── */
.bc-compare-wrap { overflow-x: auto; }
.bc-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.9rem;
}
.bc-compare th, .bc-compare td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.bc-compare thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
}
.bc-compare .bc-col-chosen {
  background: color-mix(in srgb, var(--gold) 8%, white);
}
.bc-compare th.bc-col-chosen { color: var(--gold); }
.bc-compare .bc-yes { color: var(--green); font-weight: 700; }
.bc-compare .bc-no { color: #94a3b8; }
.bc-seal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gold);
  color: #06282b;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   Tier tab switcher — pure CSS, no JS, no <input> (kses strips <input>
   from post_content on save, so this uses <a href="#panel-id"> + :target
   scoped inside :has() on the shared wrapper instead of radio buttons).
   ══════════════════════════════════════════════════════════════════ */

.bc-tier-switch { margin-top: 22px; }

.bc-tab-labels {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bc-tab-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 4px 12px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.bc-tab-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.bc-tab-tag-paid { background: color-mix(in srgb, var(--coral) 15%, white); color: var(--coral); }
.bc-tab-tag-free { background: color-mix(in srgb, var(--green) 15%, white); color: var(--green); }

.bc-tab-panel { display: none; }

/* default (no hash yet): show Clerk→I */
.bc-tier-switch:not(:has(.bc-tab-panel:target)) .bc-panel-clerk { display: block; }
.bc-tier-switch:not(:has(.bc-tab-panel:target)) .bc-tab-label[href="#bc-panel-clerk"] {
  color: #1e293b; border-bottom-color: var(--gold);
}
.bc-tier-switch:not(:has(.bc-tab-panel:target)) .bc-courses-shell .bc-sb-clerk { display: inline; }

/* explicit targeting once a tab is clicked */
.bc-tier-switch:has(#bc-panel-clerk:target) .bc-panel-clerk,
.bc-tier-switch:has(#bc-panel-s12:target) .bc-panel-s12,
.bc-tier-switch:has(#bc-panel-s23:target) .bc-panel-s23 { display: block; }

.bc-tier-switch:has(#bc-panel-clerk:target) .bc-tab-label[href="#bc-panel-clerk"],
.bc-tier-switch:has(#bc-panel-s12:target) .bc-tab-label[href="#bc-panel-s12"],
.bc-tier-switch:has(#bc-panel-s23:target) .bc-tab-label[href="#bc-panel-s23"] {
  color: #1e293b; border-bottom-color: var(--gold);
}

/* sticky bar tier-specific text, driven by the same :target state (shell wraps both) */
.bc-sb-clerk, .bc-sb-s12, .bc-sb-s23 { display: none; }
.bc-courses-shell:has(#bc-panel-s12:target) .bc-sb-s12 { display: inline; }
.bc-courses-shell:has(#bc-panel-s23:target) .bc-sb-s23 { display: inline; }
.bc-courses-shell:not(:has(.bc-tab-panel:target)) .bc-sb-clerk { display: inline; }
.bc-courses-shell:has(#bc-panel-clerk:target) .bc-sb-clerk { display: inline; }

.bc-tier-card {
  border-radius: 12px;
  padding: 28px;
}
.bc-tier-card.bc-tier-paid { border: 2px solid var(--coral); background: #fff9f0; }
.bc-tier-card.bc-tier-free { border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 6%, white); }

.bc-tier-badge {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bc-tier-badge.bc-badge-paid { color: var(--coral); }
.bc-tier-badge.bc-badge-free { color: var(--gold); }

.bc-price-box {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bc-price-box.bc-box-paid { background: #fff3e0; border: 1px solid var(--coral); }
.bc-price-box.bc-box-free { background: #fff; border: 1px solid var(--gold); }
.bc-price-box .bc-price-label {
  margin: 0 0 4px; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.bc-price-box.bc-box-paid .bc-price-label { color: #92400e; }
.bc-price-box.bc-box-free .bc-price-label { color: var(--gold); }
.bc-price-now { font-size: 1.3rem; font-weight: 700; color: #1e293b; }
.bc-price-was { font-size: 0.88rem; color: #94a3b8; text-decoration: line-through; margin-left: 8px; }
.bc-price-note { margin: 0; font-size: 0.8rem; color: var(--muted); }

.bc-tier-cta {
  display: inline-block;
  background-color: var(--gold);
  color: #fff;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
}