/* ════════════════════════════════════════════════════════════════
   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 (embedding) — collapsed trigger + expandable panel ── */
body.embedding .saved-cards-dropdown {
  position: relative;
}
/* Selected trigger — a card IS selected (default pre-selection), so the trigger
   reads as selected: brand border + a subtle brand tint + a checkmark. Opening
   just deepens the ring. */
body.embedding .scd-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.5px solid var(--brand);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 4%, #fff);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: box-shadow 0.18s ease;
}
body.embedding .scd-trigger .card-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.embedding .scd-trigger:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
body.embedding .saved-cards-dropdown.open .scd-trigger {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
body.embedding .scd-chevron {
  flex: none;
  color: var(--brand);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
body.embedding .saved-cards-dropdown.open .scd-chevron {
  transform: rotate(180deg);
}
/* Smooth, eased expand/collapse (no abrupt display toggle) */
body.embedding .scd-panel {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  margin-top: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgba(20, 30, 28, 0);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
body.embedding .saved-cards-dropdown.open .scd-panel {
  max-height: 60vh;
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
  border-color: #eef2f1;
  box-shadow: 0 12px 28px -12px rgba(20, 30, 28, 0.18);
}
body.embedding .scd-panel .card-row {
  height: auto;
  padding: 11px 13px;
  border-radius: 0;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}
body.embedding .scd-panel .card-row:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
body.embedding .scd-panel .card-row + .card-row {
  border-top: 1px solid #f3f5f4;
}

/* ════════════════════════════════════════════════════════════════
   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;
  }
}