/* ============================================================
   RMA · Checkout — Dark Premium
   Near-black brand page + floating light checkout card
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --rma-ink:    #0B0E12;
  --rma-ink-2:  #11161F;
  --rma-cyan:   #2F9FD0;
  --rma-cyan-2: #3FB3DE;
  --rma-cream:  #F5F2EA;
  --rma-body:   #3A4250;
  --rma-muted:  #8A93A3;
  --rma-line:   #E7E3D8;
}

/* ---- Page: dark with a soft cyan glow at the top ---- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--rma-ink) radial-gradient(1200px 480px at 50% -10%, rgba(63,179,222,0.16), transparent 70%) no-repeat;
  color: #C9CED8;
}
.section, .sizer { background: transparent; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

/* Headings that sit on the dark page (sales column, section text) */
.section h1, .section h2, .section h3,
.section .heading { color: #EDEDED; }

/* Mono eyebrow helper for any text block: class="rma-eyebrow" */
.rma-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rma-cyan-2);
}

a { color: var(--rma-cyan-2); }

/* ============================================================
   The checkout itself — a clean light card floating on dark
   ============================================================ */
.kjb-embedded-checkout {
  background: #FFFFFF;
  border-radius: 16px;
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  color: var(--rma-body);
}
/* cyan accent bar across the top of the card */
.kjb-embedded-checkout::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--rma-cyan), var(--rma-cyan-2));
}

/* text inside the card reverts to dark/legible */
.kjb-embedded-checkout h1, .kjb-embedded-checkout h2,
.kjb-embedded-checkout h3, .kjb-embedded-checkout h4 { color: var(--rma-ink); }
.kjb-embedded-checkout label,
.kjb-embedded-checkout p { color: var(--rma-body); }

/* form fields */
.kjb-embedded-checkout input,
.kjb-embedded-checkout select,
.kjb-embedded-checkout textarea,
.kjb-embedded-checkout .form-control {
  border: 1px solid var(--rma-line) !important;
  border-radius: 8px !important;
  background: #FBFAF6 !important;
}
.kjb-embedded-checkout input:focus,
.kjb-embedded-checkout select:focus,
.kjb-embedded-checkout .form-control:focus {
  border-color: var(--rma-cyan) !important;
  box-shadow: 0 0 0 3px rgba(47,159,208,0.18) !important;
  background: #fff !important;
}

/* price / totals */
.kjb-embedded-checkout .price,
.kjb-embedded-checkout [class*="total"],
.kjb-embedded-checkout [class*="price"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: var(--rma-ink);
}

/* buttons / submit */
.btn,
button[type="submit"],
.kjb-embedded-checkout button {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px !important;
  transition: filter .15s ease, transform .05s ease;
}
.btn--solid,
button[type="submit"],
.kjb-embedded-checkout button[type="submit"] {
  background: linear-gradient(120deg, var(--rma-cyan), var(--rma-cyan-2)) !important;
  border: none !important;
  color: #fff !important;
}
.btn:hover, button[type="submit"]:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn--outline {
  background: transparent !important;
  color: var(--rma-cyan-2) !important;
  border: 1px solid var(--rma-cyan-2) !important;
}

/* ---- Footer on dark ---- */
.footer, .footer a { color: var(--rma-muted); }
.footer a:hover { color: var(--rma-cyan-2); }

/* dark utility for content blocks placed beside the checkout */
.background-dark, .section--dark { background: var(--rma-ink-2); color: #C9CED8; }
.background-dark h1, .background-dark h2, .background-dark h3 { color: #EDEDED; }

@media (max-width: 720px) {
  .kjb-embedded-checkout { border-radius: 14px; }
}