/* ════════════════════════════════════════════════════════════════
   styles.embedding.css

   Scoped entirely under `body.embedding` (set by enterEmbeddingMode when
   integration_type === "embedding"). The iframe becomes a quiet, host-tinted
   secure-action layer — the host already shows product/store/amount.

   Theming flows from --brand (the merchant's stored color; default dark teal).
   The Prava footer (.prava-footer) is intentionally NOT restyled here.
   ════════════════════════════════════════════════════════════════ */

/* ── Recap nodes stay hidden (belt-and-suspenders with enterEmbeddingMode) ── */
body.embedding #merchant-header,
body.embedding #product-details,
body.embedding #shipping-section {
  display: none !important;
}

/* ── Header = a soft brand-color glow that bleeds in from the top and
   dissipates into the surface — no box, no border, no hard edge, no side gaps.
   Just depicts the brand color resonating at the top; also anchors the surface. ── */
body.embedding .embedding-brand-header {
  height: 76px;
  margin: 0;
  pointer-events: none;
  /* Driven by --brand-glow (a lighter teal than the deep --brand button) so the
     top reads as a soft light-teal wash, not a heavy dark band. Softer alphas
     keep it airy. */
  background:
    radial-gradient(
      90% 125% at 16% -28%,
      color-mix(in srgb, var(--brand-glow) 42%, transparent) 0%,
      color-mix(in srgb, var(--brand-glow) 13%, transparent) 44%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-glow) 15%, transparent),
      transparent 80%
    );
}

/* ── Amount safety net — amount on the primary pay button ("Pay Now · $19.00") ──
   The host is meant to show the amount, but not every host does, so we surface
   it on the action itself. */
body.embedding .submit-btn .embedding-btn-amount {
  font-variant-numeric: tabular-nums;
}
body.embedding .submit-btn .embedding-btn-amount::before {
  content: "\00B7"; /* middot — unicode escape avoids any file-encoding issues */
  margin: 0 8px;
  opacity: 0.55;
}

/* (Top gradient hint removed — the soft brand-glow header above now carries the
   brand color at the top; a second wash would double up.) */

/* ── Primary action borrows the host brand (with gradient depth + lift) ── */
body.embedding .submit-btn,
body.embedding .submit-btn.pay-mode {
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--brand) 50%, transparent);
}

/* ── Premium type — display font on headings/section titles ── */
body.embedding .section-title {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

/* ── Accents → brand ── */
body.embedding .tc-checkbox {
  accent-color: var(--brand);
}
body.embedding .checkout-input:focus,
body.embedding .skyflow-element:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

/* ── Brand carry-through — swap teal accents to the merchant's color so the
   "label color" flows through selection + links (status badges stay green). ── */
body.embedding .radio-outer.selected {
  border-color: var(--brand);
}
body.embedding .radio-inner {
  background: var(--brand);
}
body.embedding .card-row.selected {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  box-shadow: inset 3px 0 0 var(--brand);
}
body.embedding .saved-cards-toggle {
  color: var(--brand);
}
body.embedding .saved-cards-toggle:hover {
  color: var(--brand-strong);
}
body.embedding .add-new-card-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
body.embedding .back-to-cards {
  color: var(--brand);
}
/* OTP entry bar borrows the merchant brand (error state stays red). */
body.embedding .otp-container:not(.error) {
  border-color: var(--brand);
}
body.embedding .otp-container:not(.error):focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Saved-cards dropdown base styles live in styles.css (shared across all
   integration types). Embedding inherits them and re-tints via --brand. */

/* ════════════════════════════════════════════════════════════════
   Overlay states (PaymentProgressUI) — brand-tint the action + accent
   elements. Error/FAILED states intentionally STAY red (conventional).
   The shared .prava-footer is NOT touched.
   ════════════════════════════════════════════════════════════════ */

/* ── Primary action in every overlay state → host brand ── */
body.embedding .overlay-btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
}
body.embedding .overlay-btn-primary:hover {
  background: var(--brand-strong);
}

/* ── Verify (passkey) screen ── */
body.embedding .verify-shield-icon {
  color: var(--brand);
}
body.embedding .verify-option.selected,
body.embedding .verify-option:hover {
  border-color: var(--brand);
}
body.embedding .verify-option.selected .verify-opt-icon,
body.embedding .verify-option:hover .verify-opt-icon {
  color: var(--brand);
}

/* ── OTP: method-select + 6-digit input ── */
body.embedding .resend-link {
  color: var(--brand);
}
body.embedding .otp-digit.active::after {
  background: var(--brand);
}
body.embedding .otp-digit.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* ── Loader — the Prava flight animation is a Prava brand moment; we accent its
   energy/trail (fazers, speed lines, trail dots, bird stroke) in the merchant
   color while the dark flying silhouette (--prava-slate-900) stays Prava. ── */
body.embedding .overlay-spinner .spinner-arc {
  border-top-color: var(--brand);
}
body.embedding .bird-trail-dot {
  background: var(--brand);
}
body.embedding .flight-loader > span > span,
body.embedding .flight-longfazers span {
  background: var(--brand);
}
body.embedding .prava-bird path {
  stroke: var(--brand);
}
body.embedding .flight-loader-text {
  font-family: var(--font-heading);
}

/* ── Success — keep the green check; tint the ring to brand ── */
body.embedding .success-circle {
  border-color: var(--brand);
}

/* FAILED / error / customer-service icons stay red (intentional). */

/* ── Step-up screens: top-align on embedded PHONE checkout instead of vertical
   centering, so there's no empty band above the icon/title. Desktop (>=480px)
   and the standalone full_checkout flow (which has merchant/shipping at the top)
   keep the centered look. ── */
@media (max-width: 479px) {
  body.embedding .visa-container,
  body.embedding .center-wrap,
  body.embedding .verify-center-wrap {
    justify-content: flex-start;
  }
}