/* ============================================================================
   Registration modal — built from the page's OWN tokens, not a second palette.
   ============================================================================

   Every colour, radius, shadow and typeface below is a `var()` the landing page
   already defines. That is the whole approach, and it is why this file is short:
   the page ships three looks (`html[data-look="light" | "deck" | "dark"]`) and a
   modal with its own hex values would be correct in one of them and wrong in the
   other two. Inheriting means it can never drift from the page it opens on.

   The previous version was lifted from /fp — a purple-navy card with a gold rule
   — which on this emerald page read as a different website's dialog.

   WHERE THE BOLDNESS GOES: the price and the pay button. This is the moment money
   changes hands, so the one thing that should be unmistakable is what it costs and
   what the button does. Everything else is deliberately quiet.
   ========================================================================== */

.rzp-lock { overflow: hidden; }

/* ── The scrim ───────────────────────────────────────────────────────────── */

.rzp-overlay {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* The page's deepest green rather than neutral black: the room dims, it does
     not change colour. */
  background: rgba(7, 35, 26, .84);                      /* plain fallback, see note */
  background: color-mix(in srgb, var(--band, #07231A) 82%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.rzp-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ── The card ────────────────────────────────────────────────────────────── */

.rzp-overlay .rzp-card{
  position: relative;
  width: 100%; max-width: 420px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--ink, #0B1F17);
  border: 1px solid var(--line, #D2E2D7);
  border-radius: var(--r-lg, 24px);
  box-shadow: var(--shadow-lg, 0 2px 4px rgba(11,31,23,.05), 0 22px 48px -18px rgba(11,31,23,.24));
  padding: 26px 24px 20px;
  font-family: var(--sans, 'Plus Jakarta Sans', system-ui, sans-serif);
  transform: translateY(10px) scale(.985);
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.rzp-overlay.is-open .rzp-card { transform: none; }

.rzp-overlay .rzp-close{
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: rgba(11, 31, 23, .06);
  background: color-mix(in srgb, var(--ink, #0B1F17) 6%, transparent);
  color: var(--muted, #5F7369);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rzp-overlay .rzp-close:hover { background: rgba(11, 31, 23, .11); color: var(--ink, #0B1F17); }
.rzp-overlay .rzp-close:hover { background: color-mix(in srgb, var(--ink, #0B1F17) 11%, transparent); }

/* ── Head ────────────────────────────────────────────────────────────────── */

.rzp-overlay .rzp-head { padding-right: 34px; margin-bottom: 18px; }

/* Sentence case, not a tracked-out all-caps label. It is a quiet line of
   orientation, not a decorative tag. */
.rzp-overlay .rzp-eyebrow{
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: var(--emerald, #07724F);
  margin-bottom: 6px;
}

/* SIZED FOR A 420px CARD, NOT FOR THE PAGE.
   The page themes bare elements — html:is([data-look="light"],[data-look="deck"]) h2
   is clamp(30px, 5vw, 50px) at specificity 0-1-2 — so the one-class rule that used to
   be here loaded, parsed, and was silently outranked, rendering this heading at up to
   50px inside a 420px card. Every rule in this file is scoped under .rzp-overlay for
   that reason: 0-2-x beats any `html[data-look] <element>` rule the page has now or
   adds later. Capped at 24px so "Live Masterclass ₹199" holds one line on a phone. */
.rzp-overlay .rzp-title{
  margin: 0;
  font-family: var(--display, 'Archivo', system-ui, sans-serif);
  font-size: clamp(20px, 4.8vw, 24px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink, #0B1F17);
  text-wrap: balance;
}
/* THE PRICE IS THE POINT. Accented because it is the fact the reader is deciding
   on, not because a highlight looked nice. */
.rzp-overlay .rzp-title em{
  font-style: normal;
  color: var(--emerald, #07724F);
  white-space: nowrap;
}
/* THE SEPARATOR IS DRAWN, NOT TYPED.
   It was a literal "·" in the markup. In the display face it rendered as a tofu box,
   and once the oversized heading wrapped, that box was stranded at the head of the
   second line — a black square floating above the price. A drawn dot cannot be
   missing from a font, and ::before keeps it attached to the price it separates. */
.rzp-overlay .rzp-title em::before{
  content: "";
  display: inline-block; vertical-align: .22em;
  width: 4px; height: 4px; border-radius: 50%;
  margin: 0 .5em 0 .15em;
  background: currentColor; opacity: .45;
}

.rzp-overlay .rzp-sub{
  margin: 8px 0 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--body, #33473E);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.rzp-overlay .rzp-form { display: grid; gap: 13px; }

.rzp-overlay .rzp-field { display: block; }
.rzp-overlay .rzp-field > span{
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--body, #33473E);
}

.rzp-overlay .rzp-field input{
  width: 100%; box-sizing: border-box;
  padding: 13px 14px;
  font-family: inherit; font-size: 16px;   /* 16px stops iOS zooming on focus */
  color: var(--ink, #0B1F17);
  background: var(--ground, #F4F7F4);
  border: 1.5px solid var(--line, #D2E2D7);
  border-radius: 13px;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.rzp-overlay .rzp-field input::placeholder { color: var(--muted, #5F7369); opacity: .75; }
.rzp-overlay .rzp-field input:focus-visible,
.rzp-overlay .rzp-field input:focus{
  background: var(--surface, #fff);
  border-color: var(--emerald-lt, #0E9F6E);
  box-shadow: 0 0 0 4px rgba(14, 159, 110, .18);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--emerald-lt, #0E9F6E) 18%, transparent);
}
.rzp-overlay .rzp-field input:disabled { opacity: .55; cursor: not-allowed; }

/* The +91 is fixed, so it reads as part of the field rather than as something
   to type over. */
.rzp-overlay .rzp-phone { display: flex; align-items: stretch; }
.rzp-overlay .rzp-phone em{
  display: flex; align-items: center;
  padding: 0 12px;
  font-style: normal; font-size: 15px; font-weight: 700;
  color: var(--muted, #5F7369);
  background: var(--ground, #F4F7F4);
  border: 1.5px solid var(--line, #D2E2D7); border-right: 0;
  border-radius: 13px 0 0 13px;
}
.rzp-overlay .rzp-phone input { border-radius: 0 13px 13px 0; }
.rzp-overlay .rzp-phone:focus-within em { border-color: var(--emerald-lt, #0E9F6E); }

/* ── The pay button: the page's own CTA, not a second button style ───────── */

.rzp-overlay .rzp-submit{
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 17px 24px;
  font-family: inherit; font-size: 17px; font-weight: 800;
  color: var(--cta-ink, #20120A);
  background: linear-gradient(135deg, var(--cta-lt, #FFA53D), var(--cta, #FF8A1F));
  border: 0; border-radius: 15px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(150,72,0,.35), 0 14px 30px -10px rgba(255,138,31,.65);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rzp-overlay .rzp-submit:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(150,72,0,.35), 0 20px 38px -12px rgba(255,138,31,.8);
}
.rzp-overlay .rzp-submit:active:not(:disabled) { transform: translateY(0); }
.rzp-overlay .rzp-submit:disabled { opacity: .62; cursor: progress; transform: none; }

/* HIDDEN UNTIL THE BUTTON IS ACTUALLY BUSY.
   There was no rule here at all, so the spinner rendered and span permanently: the
   primary button of a payment form sat there announcing work that was not happening.
   `setBusy()` already disables the button, so :disabled is the state that exists —
   no new class, nothing extra for the JS to keep in step. */
.rzp-overlay .rzp-spinner{ display: none; }
.rzp-overlay .rzp-submit:disabled .rzp-spinner{
  display: block;
  width: 17px; height: 17px; flex: none;
  border: 2.5px solid rgba(32, 18, 10, .3);
  border: 2.5px solid color-mix(in srgb, var(--cta-ink, #20120A) 30%, transparent);
  border-top-color: var(--cta-ink, #20120A);
  border-radius: 50%;
  animation: rzp-spin .7s linear infinite;
}
@keyframes rzp-spin { to { transform: rotate(360deg); } }

/* ── Error and trust ─────────────────────────────────────────────────────── */

/* Says what happened and what to do. Never apologises, never vague. */
.rzp-overlay .rzp-error{
  margin: 0; padding: 11px 13px;
  font-size: 14px; line-height: 1.45;
  color: #7A1B1B;
  background: #FDECEC;
  border: 1px solid #F3C9C9;
  border-left: 3px solid #C0392B;
  border-radius: 11px;
}

.rzp-overlay .rzp-trust{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px;
  font-size: 12.5px; color: var(--muted, #5F7369);
}
.rzp-overlay .rzp-trust svg { width: 13px; height: 13px; flex: none; }

/* ── Small screens: a centred card. A full-width sheet plus the keyboard filled the screen. ── */

@media (max-width: 520px) {
  .rzp-overlay { align-items: center; padding: 16px; }
  .rzp-overlay .rzp-card {
    max-width: 400px;
    max-height: calc(100dvh - 32px);
    border-radius: 22px;
    padding: 20px 18px 16px;
    transform: translateY(12px) scale(.98);
  }
  .rzp-overlay.is-open .rzp-card { transform: none; }
  .rzp-overlay .rzp-head { margin-bottom: 12px; }
  .rzp-overlay .rzp-sub { margin-top: 4px; font-size: 13.5px; }
  .rzp-overlay .rzp-form { gap: 10px; }
  .rzp-overlay .rzp-field input { padding: 11px 13px; }
  .rzp-overlay .rzp-submit { padding: 15px 20px; font-size: 16.5px; }
  .rzp-overlay .rzp-trust { margin-top: 10px; }
}

/* ── Floor ───────────────────────────────────────────────────────────────── */

.rzp-overlay .rzp-close:focus-visible,
.rzp-overlay .rzp-submit:focus-visible,
.rzp-overlay .rzp-field input:focus-visible{
  outline: 3px solid var(--emerald-lt, #0E9F6E);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rzp-overlay, .rzp-card, .rzp-submit, .rzp-field input, .rzp-close { transition: none; }
  .rzp-overlay.is-open .rzp-card { transform: none; }
  .rzp-spinner { animation-duration: 2s; }
}