/* Webinars — webinars.allahabadi.dev (served from /webinars/). */
.wb-main { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 1.25rem 4rem; box-sizing: border-box; min-height: 72vh; }
.wb-main h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: .5rem 0 1rem; }

/* when + countdown */
.wb-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; color: var(--text-muted); font-size: 1.05rem; }
.wb-when strong { color: var(--text); }
.wb-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--text); }
.wb-status { font-weight: 600; color: var(--accent); }
[data-state="ended"] .wb-status, [data-state="live"] .wb-status { color: var(--text-muted); }

/* listing */
.wb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.wb-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.wb-card:hover, .wb-card:focus-visible { border-color: var(--border-strong); transform: translateY(-2px); }
.wb-card h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.wb-card p { margin: 0; color: var(--text-muted); }

/* detail */
.wb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 2.5rem; align-items: start; margin-top: 2rem; }
@media (max-width: 1024px) { .wb-grid { grid-template-columns: minmax(0, 1fr); } }
.wb-learn h2, .wb-reg h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 1rem; }
.wb-learn ol { margin: 0; padding-left: 1.4rem; font-size: 1.18rem; line-height: 1.6; }
.wb-learn li + li { margin-top: .5rem; }

.wb-reg { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.wb-reg label { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
.wb-reg label:first-of-type { margin-top: 0; }
.wb-reg input { width: 100%; box-sizing: border-box; padding: .75rem .9rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.wb-reg input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wb-reg .btn { width: 100%; margin-top: 1.25rem; justify-content: center; }
.wb-reg .wb-err { color: light-dark(#b91c1c, #f87171); font-size: .95rem; margin: .5rem 0 0; }
.wb-hint { color: var(--text-muted); font-size: .9rem; margin: .35rem 0 0; }

/* closed: carried by text + dashed edge, never opacity */
.wb-reg[inert] { border-style: dashed; }
.wb-reg[inert] .btn { background: var(--surface-2); color: var(--text-muted); border: 1px dashed var(--border-strong); box-shadow: none; transform: none; }
.wb-closed { margin: 0 0 1rem; font-weight: 600; }

/* The Confirm button carries an invisible, prefilled Topmate frame on top of
   it, mapped so its "Confirm Details" button covers the whole button. One click
   on Confirm then lands on Topmate's own button (a parent page cannot click
   into a cross-origin frame). The frame is transparent, so the styled Confirm
   shows through. */
.wb-confirm-wrap { position: relative; display: block; margin-top: 1.25rem; }
.wb-confirm-wrap .btn { margin-top: 0; }
.wb-tm-overlay { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-sm); opacity: 0; z-index: 2; }
.wb-tm-overlay iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; }

/* After the Confirm click lands on Topmate, the frame is revealed full-size so
   the reader sees Topmate's confirmation / payment step. */
.wb-reveal-note { margin: 0 0 1rem; font-weight: 600; }
.wb-tm-revealed { display: block; }
.wb-tm-revealed iframe { width: 100%; height: 620px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .wb-card { transition: none; }
  .wb-card:hover { transform: none; }
}