/* ===========================================================================
   JackPots World — branded payment screen (Phase 4)

   THE .jpay- NAMESPACE IS THE POINT
   The booking flow's own step styles live under .bk-, and the four products
   that have no payment backend still render those. Everything here is scoped
   to .jpay- so switching a product onto the real gateway cannot restyle a
   screen that is still using the old one.

   WHAT THIS SCREEN IS, AND WHAT IT IS NOT
   It shows the amount, names the method, and explains what will happen next.
   It contains no field that could take a UPI ID, a PIN, a CVV or a password,
   and there is no CSS here for one — the authorisation happens inside
   Razorpay's own checkout, which draws itself over this page.

   Tokens are the site's --sp-* set, so light and dark both come for free.
   ========================================================================== */

.jpay {
  max-width: 560px;
  margin: 0 auto;

  /* A SECOND WEIGHT OF THE BRAND ACCENT, FOR SURFACES THAT CARRY WHITE TEXT.
     Measured, not chosen by eye: white on --sp-accent (#FF4D4D) is 3.27:1 and
     white on --sp-accent-dk (#E63946) is 4.17:1 — both under WCAG AA's 4.5 for
     text this size. #D62839 is 4.97:1 and #BC1A2B is 6.32:1.

     The bright accent is NOT replaced: it still draws the selected method, the
     borders and the icon tints, where it sits behind dark text and passes
     easily. Only the filled button moves, so the screen still reads as the same
     brand while the one element a payer must be able to read is legible. */
  --jpay-cta: #D62839;
  --jpay-cta-hover: #BC1A2B;

  /* A TEXT-SAFE GREEN, FOR THE SAME REASON AND MEASURED THE SAME WAY.
     --sp-emerald (#12B76A) on its own pale-green chip is 2.49:1 in light mode
     — the "Recommended" badge and the word "Paid" on the success screen both
     failed AA and neither is decorative. #087443 is 5.55:1 there. In dark the
     chip's ground is dark, so the value has to flip rather than darken.
     #087443 measured 4.31:1 and not the 5.55 a plain white ground predicts —
     the badge sits inside the SELECTED method, whose pink tint darkens the
     ground beneath its own chip. Measured in place, not modelled. */
  --jpay-ok: #046C4E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jpay { --jpay-ok: #34D399; }
}
:root[data-theme="dark"] .jpay { --jpay-ok: #34D399; }

/* --- the amount, which is the first thing a payer looks for --------------- */
.jpay-amount-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px 24px 22px;
  margin-bottom: 18px;
  text-align: center;
  color: #fff;
  /* THE STOPS ARE MEASURED, NOT PICKED BY EYE.
     White on the brand's own #FF4D4D is 2.8-3.3:1 across this gradient — the
     amount, the label and the reference would all have failed WCAG AA on the
     one card a payer looks at hardest. These stops keep the same hue and the
     same warm gold wash while putting every pixel of the ground at 4.64:1 or
     better against white. The gold is lighter (.22) for the same reason: at
     .38 it washed the top-left corner past the threshold on its own. */
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255, 176, 32, .22), transparent 55%),
    linear-gradient(135deg, #9E1327 0%, #B01827 52%, #C81E2E 100%);
  box-shadow: 0 10px 30px -14px rgba(158, 19, 39, .55);
}

.jpay-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.jpay-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.jpay-amount-label {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.jpay-amount {
  font-size: clamp(34px, 9vw, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  /* Digits in a payable figure must not shift width between renders. */
  font-variant-numeric: tabular-nums;
}

.jpay-amount-sub {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.jpay-ref {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  /* A DARKENING chip, not a lightening one. A white veil over the card
     raised the ground under the reference to 3.47:1 against its own white
     text — the chip was making its own contents harder to read. Darkening
     separates the chip from the card AND improves the text on it. */
  background: rgba(0, 0, 0, .18);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* --- headings ------------------------------------------------------------ */
.jpay-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sp-ink, #0A2540);
}

.jpay-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--sp-muted, #5B6B82);
  line-height: 1.6;
}

/* --- the method list ----------------------------------------------------- */
.jpay-methods {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.jpay-method {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 16px;
  border: 1.5px solid var(--sp-line, rgba(10, 37, 64, .10));
  border-radius: 14px;
  background: var(--sp-surface, #fff);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.jpay-method:hover { border-color: rgba(233,185,73,.55); }

.jpay-method.is-on {
  border-color: var(--sp-accent, #FF4D4D);
  background: var(--sp-accent-soft, rgba(255, 77, 77, .12));
}

.jpay-method input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sp-accent, #FF4D4D);
  flex: none;
}

.jpay-method-body { min-width: 0; flex: 1; }

.jpay-method-body b {
  display: block;
  font-size: 14.5px;
  color: var(--sp-ink, #0A2540);
}

.jpay-method-body span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--sp-muted, #5B6B82);
  line-height: 1.55;
}

.jpay-method-tag {
  flex: none;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sp-emerald-soft, rgba(16, 185, 129, .14));
  color: var(--jpay-ok, #087443);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --- how the UPI step will actually behave on THIS device ---------------- */
.jpay-howto {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: var(--sp-bg, #F8FAFC);
  border: 1px solid var(--sp-line, rgba(10, 37, 64, .10));
}

.jpay-howto-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sp-accent-soft, rgba(255, 77, 77, .12));
  color: var(--sp-accent, #FF4D4D);
}

.jpay-howto b {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--sp-ink, #0A2540);
}

.jpay-howto p {
  margin: 0;
  font-size: 12.5px;
  color: var(--sp-muted, #5B6B82);
  line-height: 1.6;
}

/* --- the trust line ------------------------------------------------------ */
.jpay-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--sp-muted, #5B6B82);
}

.jpay-secure .jpi { flex: none; }

/* --- the button ---------------------------------------------------------- */
.jpay-cta {
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: 13px;
  background: var(--jpay-cta, #D62839);
  color: #fff;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.jpay-cta:hover:not(:disabled) { background: var(--jpay-cta-hover, #BC1A2B); }
.jpay-cta:active:not(:disabled) { transform: translateY(1px); }
.jpay-cta:focus-visible { outline: 2px solid var(--jpay-cta-hover, #BC1A2B); outline-offset: 3px; }

.jpay-cta:disabled {
  opacity: .62;
  cursor: not-allowed;
}

.jpay-cta.is-ghost {
  background: transparent;
  color: var(--sp-ink, #0A2540);
  border: 1.5px solid var(--sp-line, rgba(10, 37, 64, .18));
}
.jpay-cta.is-ghost:hover:not(:disabled) { background: var(--sp-bg, #F8FAFC); }

.jpay-actions { display: grid; gap: 10px; }

/* --- status screens ------------------------------------------------------ */
.jpay-status {
  text-align: center;
  padding: 26px 20px 6px;
}

.jpay-status-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.jpay-status-icon.is-wait { background: var(--sp-accent-soft, rgba(255, 77, 77, .12)); color: var(--sp-accent, #FF4D4D); }
.jpay-status-icon.is-ok   { background: var(--sp-emerald-soft, rgba(16, 185, 129, .14)); color: var(--jpay-ok, #087443); }
.jpay-status-icon.is-bad  { background: rgba(220, 38, 38, .12); color: #DC2626; }

.jpay-status h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--sp-ink, #0A2540);
}

.jpay-status p {
  margin: 0 auto 18px;
  max-width: 44ch;
  font-size: 13.5px;
  color: var(--sp-muted, #5B6B82);
  line-height: 1.6;
}

/* The spinner and the pulse both stop for anyone who asked for less motion. */
.jpay-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--sp-accent-soft, rgba(255, 77, 77, .2));
  border-top-color: var(--sp-accent, #FF4D4D);
  border-radius: 50%;
  animation: jpay-spin .8s linear infinite;
}

@keyframes jpay-spin { to { transform: rotate(360deg); } }

/* --- the confirmed-booking summary --------------------------------------- */
.jpay-summary {
  text-align: left;
  border: 1px solid var(--sp-line, rgba(10, 37, 64, .10));
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--sp-surface, #fff);
}

.jpay-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sp-line, rgba(10, 37, 64, .08));
  font-size: 13.5px;
}

.jpay-summary-row:last-child { border-bottom: 0; }

.jpay-summary-row dt {
  margin: 0;
  color: var(--sp-muted, #5B6B82);
  flex: none;
}

.jpay-summary-row dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--sp-ink, #0A2540);
  min-width: 0;
  word-break: break-word;
}

.jpay-summary-row dd.is-paid { color: var(--jpay-ok, #087443); }
.jpay-summary-row dd.num { font-variant-numeric: tabular-nums; }

/* --- inline error -------------------------------------------------------- */
.jpay-error {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: rgba(220, 38, 38, .10);
  border: 1px solid rgba(220, 38, 38, .28);
  color: #B91C1C;
  font-size: 13px;
  line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jpay-error { color: #FCA5A5; }
  :root:not([data-theme="light"]) .jpay-status-icon.is-bad { color: #FCA5A5; }
}
:root[data-theme="dark"] .jpay-error { color: #FCA5A5; }
:root[data-theme="dark"] .jpay-status-icon.is-bad { color: #FCA5A5; }

@media (prefers-reduced-motion: reduce) {
  .jpay-spinner { animation: none; }
  .jpay-cta { transition: none; }
}

@media (max-width: 520px) {
  .jpay-amount-card { padding: 22px 18px 18px; }
  .jpay-summary-row { flex-direction: column; gap: 2px; }
  .jpay-summary-row dd { text-align: left; }
}