/* ═══════════════════════════════════════════════════════════════
   Prava PAN Collection iframe — Payment UI Revamp
   Fonts: Neue Haas Display (self-hosted) for headings/emphasis,
          system font stack for body text (SEC-044: no CDN loading)
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────── */

@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ─────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font-heading:
    "Neue Haas Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --viewport-height: 100vh;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

body {
  font-family: var(--font-body);
  /* Teal gradient background — visible as border in embedded, full BG in redirect */
  background: linear-gradient(
    160deg,
    var(--gradient-teal-1) 0%,
    var(--gradient-teal-2) 25%,
    var(--gradient-teal-3) 50%,
    var(--gradient-teal-4) 75%,
    var(--gradient-teal-1) 100%
  );
  min-height: 100vh;
  min-height: var(--viewport-height);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use Neue Haas Display Light (300) */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 300;
}

/* Bold/semibold text uses Neue Haas Display Roman (400) */
strong,
b,
.agent-name,
.agent-amount-value,
.mandate-value,
.mandate-success-title,
.mandate-success-value,
.success-title,
.overlay-title,
.agent-pay-btn,
.agent-dismiss-btn,
.mandate-success-btn,
.submit-btn {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

.container {
  width: 100%;
  max-width: 390px;
  min-height: 100vh;
  min-height: var(--viewport-height);
  max-height: 100vh;
  max-height: var(--viewport-height);
  background: var(--prava-white);
  /* On wider screens, show as a card with shadow + rounded corners */
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
}

/* When viewport is wider than the card, add card styling */
@media (min-width: 480px) {
  body {
    padding: 16px;
    align-items: center;
  }
  .container {
    min-height: calc(100vh - 32px);
    min-height: calc(var(--viewport-height) - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(var(--viewport-height) - 32px);
    border-radius: 20px;
    box-shadow:
      0 8px 40px rgba(0, 0, 0, 0.08),
      0 2px 8px rgba(0, 0, 0, 0.04);
  }
}

/* Content area: fills space between product details and bottom of card.
   Form content flows from top; footer pushed to bottom via margin-top:auto.
   Overlay screens use flex:1 to fill this space and center internally. */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  overflow-y: auto;
  min-height: 0;
}

.content-area.ready {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.hidden {
  display: none !important;
}

/* ── Color System ──────────────────────────────────────────── */
:root {
  /* Zinc-based palette (matching reference design) */
  --prava-teal: #2eb09e;
  --prava-teal-light: #ccfbf1;
  --prava-teal-50: #f0fdfa;
  --prava-teal-100: #ccfbf1;
  --prava-teal-600: #0d9488;
  --prava-teal-700: #0f766e;
  --prava-black: #000000;
  --prava-white: #ffffff;
  --prava-red: #dc2626;
  --prava-red-light: #fef2f2;
  --prava-amber: #f59e0b;
  --prava-amber-light: #fffbeb;
  --foreground: #09090b;
  --muted-fg: #71717a;
  --muted-fg2: #a1a1aa;
  --border: #e4e4e7;
  --primary: #2eb09e;
  --success-fg: #16a34a;
  /* Legacy aliases (used by overlays etc) */
  --prava-slate-50: #fafafa;
  --prava-slate-100: #f4f4f5;
  --prava-slate-200: #e4e4e7;
  --prava-slate-300: #d4d4d8;
  --prava-slate-400: #a1a1aa;
  --prava-slate-500: #71717a;
  --prava-slate-600: #52525b;
  --prava-slate-700: #3f3f46;
  --prava-slate-900: #09090b;

  /* Brand-specific card logos */
  --visa-blue: #1a1f71;
  --mc-dark: #1a1a2e;
  --mc-red: #eb001b;
  --mc-orange: #ff5f00;

  /* Button gradient (dark green) */
  --btn-gradient-from: #1a3a35;
  --btn-gradient-to: #0a1f1c;

  /* Embedding-flow brand token — runtime-overridden by applyBrandTheme()
     (merchant's stored color); defaults to today's dark teal so an
     un-branded merchant looks intentional, never broken. */
  --brand: #1a3a35;
  --brand-strong: #0a1f1c;
  /* Header-glow source for the embedding top. Kept separate from --brand so the
     pay button can stay deep teal (white text contrast) while the top of the
     screen reads as a soft LIGHT teal. Defaults to Prava's bright teal; set to
     the merchant's color when present (applyBrandTheme). */
  --brand-glow: #2eb09e;

  /* Passkey badge colors */
  --passkey-green-bg: #d1fae5;
  --passkey-yellow-bg: #fef3c7;
  --passkey-yellow-fg: #d97706;

  /* Success / Error state colors */
  --success-bg: #f0fdf4;
  --error-red: #ef4444;

  /* Body gradient stops (teal wash for redirect/full-page mode) */
  --gradient-teal-1: #d5f5f0;
  --gradient-teal-2: #e8faf7;
  --gradient-teal-3: #f0fdfa;
  --gradient-teal-4: #e0f7f5;

  --transition-fast: 200ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Checkout — Merchant Header
   ═══════════════════════════════════════════════════════════════ */

.merchant-header {
  padding: 16px 20px;
  text-align: center;
}

.merchant-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--foreground);
  background: #fff;
  overflow: hidden;
  text-align: center;
}

.merchant-name--single {
  height: 44px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.merchant-name--double {
  height: 88px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Checkout — Product Details (Rich Card)
   ═══════════════════════════════════════════════════════════════ */

.product-details {
  padding: 0 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--prava-white);
}

.product-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.product-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success-fg);
}

.product-status-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
}

.product-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.product-status-check {
  display: none;
  width: 16px;
  height: 16px;
  color: var(--success-fg);
}

.product-status--ordered .product-status-dot {
  display: none;
}

.product-status--ordered .product-status-check {
  display: block;
}

.product-order-id {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-fg2);
  max-width: 62%;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 1;
}

.product-details-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.product-details-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.product-description {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}

.product-meta {
  font-size: 12px;
  color: var(--muted-fg2);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  flex-shrink: 0;
  white-space: nowrap;
}

.delivery-summary {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--prava-slate-50);
}

.amount-breakdown-label {
  font-size: 12px;
  color: var(--muted-fg);
}

.delivery-summary-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--muted-fg);
}

.delivery-summary-icon svg {
  width: 100%;
  height: 100%;
}

.delivery-summary-value {
  min-width: 0;
  max-width: none;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
  text-align: left;
  overflow-wrap: anywhere;
}

.amount-breakdown {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

#amount-breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.amount-breakdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.amount-breakdown-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.amount-breakdown-value {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.amount-breakdown-row--discount .amount-breakdown-value {
  color: var(--success-fg);
}

.amount-breakdown-row--subtotal .amount-breakdown-label,
.amount-breakdown-row--subtotal .amount-breakdown-value,
.amount-breakdown-row--shipping .amount-breakdown-label,
.amount-breakdown-row--shipping .amount-breakdown-value,
.amount-breakdown-row--tax .amount-breakdown-label,
.amount-breakdown-row--tax .amount-breakdown-value {
  color: var(--muted-fg);
}

.amount-breakdown-row--total {
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 8px;
}

.amount-breakdown-row--total .amount-breakdown-label,
.amount-breakdown-row--total .amount-breakdown-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Checkout — Section Titles & Inputs
   ═══════════════════════════════════════════════════════════════ */

.checkout-section {
  padding: 0 20px;
  margin-bottom: 4px;
}

.section-title {
  font-size: 15px;
  font-weight: 400;
  color: var(--foreground);
  text-align: center;
  margin-bottom: 12px;
  margin-top: 16px;
}

.section-title.bold {
  font-weight: 700;
}

.shipping-fields {
  display: flex;
  flex-direction: column;
}

.checkout-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--foreground);
  background: var(--prava-white);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.checkout-input::placeholder {
  color: var(--muted-fg2);
}

.checkout-input:focus {
  border-color: var(--prava-teal-600);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Checkout — Trust Badge & Footer
   ═══════════════════════════════════════════════════════════════ */

.checkout-footer-section {
  margin-top: auto;
  padding: 8px 20px 12px;
}

/* ── T&C Consent Checkbox ──────────────────────────────── */

.tc-consent {
  padding: 4px 0 8px;
}

.tc-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* Hide native checkbox */
.tc-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkmark box */
.tc-checkmark {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 5px;
  border: 2px solid var(--prava-slate-300);
  background: var(--prava-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-top: 1px;
  position: relative;
}

/* Checked state — teal/green fill */
.tc-checkbox:checked + .tc-checkmark {
  background: var(--prava-teal-600);
  border-color: var(--prava-teal-600);
}

/* Checkmark icon via pseudo-element */
.tc-checkbox:checked + .tc-checkmark::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* Focus ring for accessibility */
.tc-checkbox:focus-visible + .tc-checkmark {
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.3);
}

.tc-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--prava-slate-500);
  flex: 1;
}

.tc-text a {
  color: var(--prava-slate-700);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--prava-slate-300);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.tc-text a:hover {
  color: var(--prava-teal-600);
  border-bottom-color: var(--prava-teal-600);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Card Form (Skyflow)
   ═══════════════════════════════════════════════════════════════ */

.card-form {
  background: transparent;
  padding: 0 20px 16px;
}

.form-fields {
  margin-bottom: 12px;
}

.form-row {
  margin-bottom: 4px;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.form-group {
  width: 100%;
}

/* Expiry + CVV: 2 visual columns — expiry month/year grouped, CVV separate */
.form-row.expiry-cvv-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}

.expiry-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Skyflow renders its label, input and validation presentation inside a hosted
   iframe. These mount heights are part of that vendor layout contract; compact
   checkout tiers must recover space from surrounding chrome instead. */
.skyflow-element {
  height: 68px;
  overflow: hidden;
}

.skyflow-element iframe {
  height: 68px !important;
}

.skyflow-element.card-number-element,
.skyflow-element.card-number-element iframe {
  height: 88px !important;
}

/* Validation feedback */
.validation-feedback {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.field-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--prava-slate-500);
  font-weight: 500;
}

.field-status .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 10px;
}

.field-status.valid {
  color: var(--prava-teal-600);
}
.field-status.invalid {
  color: var(--prava-red);
}
.field-status.empty {
  color: var(--prava-slate-400);
}

/* Submit button */
.submit-btn {
  width: 100%;
  height: 48px;
  padding: 0 24px;
  background: linear-gradient(
    180deg,
    var(--btn-gradient-from) 0%,
    var(--btn-gradient-to) 100%
  );
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}

.submit-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(10, 31, 28, 0.3);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.submit-btn:disabled {
  background: var(--border);
  color: var(--muted-fg2);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.submit-btn.pay-mode {
  background: linear-gradient(
    180deg,
    var(--btn-gradient-from) 0%,
    var(--btn-gradient-to) 100%
  );
}

/* Loader spinner (inline) */
.loader {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Legacy Status Bar (kept for backward compat, restyled)
   ═══════════════════════════════════════════════════════════════ */

.status {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  transition: all var(--transition-normal);
}

.status.error {
  background: var(--prava-red-light);
  color: var(--prava-red);
  border: 1px solid #fee2e2;
}

.status.success {
  background: var(--prava-teal-50);
  color: var(--prava-teal-600);
  border: 1px solid var(--prava-teal-100);
}

.status.info {
  background: var(--prava-slate-50);
  color: var(--prava-slate-600);
  border: 1px solid var(--prava-slate-200);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Saved Cards
   ═══════════════════════════════════════════════════════════════ */

.saved-cards {
  padding: 16px;
}

.saved-cards-header {
  margin-bottom: 16px;
}

.saved-cards-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground, #09090b);
  letter-spacing: -0.01em;
}

.saved-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* ── Saved-cards dropdown — collapsed trigger + expandable panel ──
   Shared across all integration types. Colors resolve from --brand
   (default teal in :root; overridden per-merchant in 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. Opening deepens the ring. */
.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;
}
.scd-trigger .card-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scd-trigger:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.saved-cards-dropdown.open .scd-trigger {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.scd-chevron {
  flex: none;
  color: var(--brand);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.saved-cards-dropdown.open .scd-chevron {
  transform: rotate(180deg);
}
/* Floating popover: opens DOWNWARD, out of flow so it never grows the page /
   scrolls .content-area (the empty space below the trigger holds it). Anchored
   to the position:relative .saved-cards-dropdown. */
.scd-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgba(20, 30, 28, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    visibility 0s linear 0.28s;
}
.saved-cards-dropdown.open .scd-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  border-color: #eef2f1;
  box-shadow: 0 12px 28px -12px rgba(20, 30, 28, 0.18);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    visibility 0s;
}
.scd-panel .card-row {
  height: auto;
  padding: 11px 13px;
  border-radius: 0;
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease;
}
.scd-panel .card-row:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.scd-panel .card-row + .card-row {
  border-top: 1px solid #f3f5f4;
}

/* ── Card Row (flat, borderless — matches reference design) ── */
.card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  width: 100%;
  cursor: pointer;
}

/* Visa brand icon (text label) */
.visa-logo {
  width: 40px;
  height: 28px;
  border-radius: 4px;
  background: var(--visa-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.visa-logo span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--prava-white);
}

/* Mastercard brand icon (overlapping circles) */
.mc-logo {
  width: 40px;
  height: 28px;
  border-radius: 4px;
  background: var(--mc-dark);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.mc-red {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mc-red);
  top: 6px;
  left: 5px;
}

.mc-orange {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mc-orange);
  top: 6px;
  left: 19px;
}

/* Generic brand icon fallback */
.card-brand-icon {
  width: 40px;
  height: 28px;
  border-radius: 4px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--foreground);
}

/* Card info row */
.card-row .card-info {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.card-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
}

/* Passkey badge — green (active) / yellow (none) */
.passkey-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  width: fit-content;
}

.passkey-badge span {
  font-size: 10px;
  font-weight: 600;
}

.passkey-badge.green {
  background: var(--passkey-green-bg);
}

.passkey-badge.green span {
  color: var(--success-fg);
}

.passkey-badge.yellow {
  background: var(--passkey-yellow-bg);
}

.passkey-badge.yellow span {
  color: var(--passkey-yellow-fg);
}

/* Radio button */
.radio-outer {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-outer.selected {
  border: 2px solid var(--primary);
}

.radio-outer.unselected {
  border: 1.5px solid var(--prava-slate-300);
}

.radio-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
}

.add-new-card-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 2px dashed var(--prava-slate-300);
  border-radius: 12px;
  background: transparent;
  color: var(--prava-slate-500);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  margin-bottom: 12px;
}

.add-new-card-btn:hover {
  border-color: var(--prava-teal-600);
  color: var(--prava-teal-600);
  background: var(--prava-teal-50);
}

.add-icon {
  font-size: 16px;
  font-weight: 700;
}

.back-to-cards {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--prava-teal-600);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 12px;
  padding: 4px 0;
  font-weight: 500;
  border: none;
  background: transparent;
  font-family: inherit;
}

.back-to-cards:hover {
  color: var(--prava-teal-700);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Payment Progress Overlay (NEW — the "outer shell")
   ═══════════════════════════════════════════════════════════════ */

.payment-overlay {
  /* In-flow within .content-area — NOT position:fixed.
     Product details stay visible above, content centered within card. */
  display: none;
  flex-direction: column;
  align-items: center;
  flex: 1;
  background: transparent;
  min-height: 380px;
}

.payment-overlay.visible {
  display: flex;
}

.payment-overlay-inner {
  width: 100%;
  padding: 32px 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

/* ── Bird Flight Animation Header ──────────────────────────── */
.bird-flight-header {
  width: 100%;
  height: 32px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.bird-flight-header.active {
  opacity: 1;
}

.prava-bird {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: birdFly 6s ease-in-out infinite;
}

.prava-bird path {
  stroke: var(--prava-teal-600);
}

.prava-bird .wing-upper {
  animation: wingFlutter 1.2s ease-in-out infinite;
  transform-origin: 14px 8px;
}

.prava-bird .wing-lower {
  animation: wingFlutter 1.2s ease-in-out infinite reverse;
  transform-origin: 14px 8px;
}

.bird-trail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  animation: birdFly 6s ease-in-out infinite;
  animation-delay: -0.5s;
}

.bird-trail-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--prava-teal-600);
}

.bird-trail-dot:nth-child(1) {
  opacity: 0.15;
}
.bird-trail-dot:nth-child(2) {
  opacity: 0.1;
}
.bird-trail-dot:nth-child(3) {
  opacity: 0.05;
}

@keyframes birdFly {
  0% {
    left: -10%;
  }
  100% {
    left: 110%;
  }
}

@keyframes wingFlutter {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.8);
  }
}

/* ── Overlay Icon ──────────────────────────────────────────── */
.overlay-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.overlay-icon svg {
  width: 36px;
  height: 36px;
}

/* ── Success Screen (circle badge + checkmark) ───────────── */
.success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
  padding-bottom: 60px;
}

.success-badge {
  position: relative;
  width: 64px;
  height: 64px;
  animation: successBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.success-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--success-bg);
  border: 2px solid var(--primary);
}

.success-badge svg {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.success-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  text-align: center;
}

@keyframes successBadgePop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Success Card Block ──────────────────────────────────── */

.success-card-block {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  background: var(--prava-slate-50, #f8fafc);
}

.success-card-art {
  width: 96px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Override brand icon sizes when used inside the success card block */
.success-card-block .visa-logo {
  width: 96px;
  height: 60px;
  border-radius: 8px;
}
.success-card-block .visa-logo span {
  font-size: 18px;
  letter-spacing: 2px;
}
.success-card-block .mc-logo {
  width: 96px;
  height: 60px;
  border-radius: 8px;
}
.success-card-block .mc-red,
.success-card-block .mc-orange {
  width: 36px;
  height: 36px;
}
.success-card-block .card-brand-icon {
  width: 96px;
  height: 60px;
  border-radius: 8px;
}
.success-card-block .card-brand-icon span {
  font-size: 14px;
}

.success-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.success-card-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: 0.3px;
}

/* ── Mandate Approved Success Screen (Agent flow) ────────── */

.mandate-success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 44px 20px 16px;
  flex: 1;
  gap: 24px;
}

.mandate-success-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background:
    radial-gradient(
      ellipse 90% 90% at 50% 40%,
      rgba(22, 163, 74, 0.25),
      transparent
    ),
    #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(22, 163, 74, 0.15);
}

.mandate-success-title {
  font-size: 22px;
  font-weight: 700;
  color: #09090b;
  text-align: center;
  margin: 0;
  outline: none;
}

.mandate-success-subtitle {
  font-size: 14px;
  color: #71717a;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.mandate-success-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  padding: 16px 18px;
  background: #fafafa;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
}

.mandate-success-row {
  display: flex;
  justify-content: space-between;
}

.mandate-success-label {
  font-size: 13px;
  color: #71717a;
}

.mandate-success-value {
  font-size: 13px;
  font-weight: 500;
  color: #09090b;
}

.mandate-success-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 18px;
  background: #2eb09e;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}

.mandate-success-btn:hover {
  opacity: 0.92;
}

.mandate-success-close {
  font-size: 12px;
  color: #71717a;
  margin: 0;
}

/* ── Transaction Cancelled Screen ────────────────────────── */

.cancelled-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.cancelled-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--prava-slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.cancelled-icon svg {
  width: 28px;
  height: 28px;
  color: var(--prava-slate-500);
}

.cancelled-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  text-align: center;
}

.cancelled-message {
  font-size: 14px;
  color: var(--muted-fg);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}

.overlay-icon.teal {
  background: var(--prava-teal-50);
  color: var(--prava-teal-600);
}

.overlay-icon.blue {
  background: #eff6ff;
  color: #2563eb;
}

.overlay-icon.red {
  background: var(--prava-red-light);
  color: var(--prava-red);
}

.overlay-icon.amber {
  background: var(--prava-amber-light);
  color: var(--prava-amber);
}

.overlay-icon.slate {
  background: var(--prava-slate-100);
  color: var(--prava-slate-600);
}

.overlay-icon.pulse {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Success icon with checkmark draw */
.overlay-icon.success-animate {
  animation: successPop 400ms ease-out forwards;
}

@keyframes successPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.overlay-icon .checkmark-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: checkDraw 400ms ease-out 200ms forwards;
}

@keyframes checkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Overlay Title + Subtitle ──────────────────────────────── */
.overlay-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--prava-slate-900);
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.3;
}

.overlay-subtitle {
  font-size: 14px;
  color: var(--prava-slate-500);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.overlay-hint {
  font-size: 12px;
  color: var(--prava-slate-400);
  text-align: center;
  margin-top: 8px;
}

/* (REMOVED: Progress Steps / Checkpoint System — was dead CSS, never referenced in JS/HTML) */

/* ═══════════════════════════════════════════════════════════════
   SECTION: Overlay Spinner (Processing states)
   ═══════════════════════════════════════════════════════════════ */

.overlay-spinner {
  width: 32px;
  height: 32px;
  position: relative;
  margin-top: 4px;
}

.overlay-spinner .spinner-ring {
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--prava-slate-100);
  border-radius: 50%;
}

.overlay-spinner .spinner-arc {
  position: absolute;
  inset: 0;
  border: 2.5px solid transparent;
  border-top-color: var(--prava-teal-600);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.overlay-spinner.dark .spinner-arc {
  border-top-color: var(--prava-black);
}

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

/* ═══════════════════════════════════════════════════════════════
   SECTION: Overlay Buttons
   ═══════════════════════════════════════════════════════════════ */

.overlay-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.overlay-btn-primary {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  font-family: inherit;
  color: var(--prava-white);
  background: var(--prava-black);
}

.overlay-btn-primary:hover {
  background: #1f2937;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.overlay-btn-primary:active {
  transform: translateY(0);
}

.overlay-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.overlay-btn-primary.teal {
  background: var(--prava-teal-600);
}

.overlay-btn-primary.teal:hover {
  background: var(--prava-teal-700);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.overlay-btn-primary.blue {
  background: #2563eb;
}

.overlay-btn-primary.blue:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.overlay-btn-secondary {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--prava-slate-200);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  font-family: inherit;
  color: var(--prava-slate-600);
  background: transparent;
}

.overlay-btn-secondary:hover {
  border-color: var(--prava-slate-300);
  color: var(--prava-slate-700);
  background: var(--prava-slate-50);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: OTP Screen (Overlay-based — Digit Box Design)
   ═══════════════════════════════════════════════════════════════ */

.otp-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  width: 100%;
}

.center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
  width: 100%;
  max-width: 320px;
}

.otp-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
  text-align: center;
}

.otp-subtitle {
  font-size: 14px;
  color: var(--muted-fg);
  text-align: center;
  max-width: 280px;
}

.otp-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid var(--primary);
  padding: 12px;
  width: 100%;
  cursor: text;
  position: relative;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.otp-container:focus-within {
  box-shadow: 0 0 0 2px rgba(46, 176, 158, 0.15);
}

.otp-container.error {
  border-color: var(--prava-red);
}

.otp-container.error:focus-within {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.otp-hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  outline: none;
  font-size: 16px;
  z-index: 1;
}

.otp-digit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 48px;
  border-radius: 8px;
  background: #f4f4f5;
  transition: background var(--transition-fast);
}

.otp-digit span {
  font-size: 24px;
  font-weight: 700;
  color: var(--muted-fg);
  transition: color var(--transition-fast);
}

.otp-digit.filled span {
  color: var(--foreground);
}

.otp-digit.active::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 24px;
  background: var(--foreground);
  border-radius: 1px;
  animation: otp-blink 1s step-end infinite;
}

@keyframes otp-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.resend-row span {
  font-size: 12px;
  color: var(--muted-fg);
}

.resend-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}

.resend-link:hover {
  text-decoration: underline;
}

/* OTP Error (kept from previous) */
.otp-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 0 4px;
  animation: fadeSlideIn 200ms ease-out forwards;
}

.otp-error svg {
  width: 14px;
  height: 14px;
  color: var(--prava-red);
  flex-shrink: 0;
}

.otp-error span {
  font-size: 13px;
  color: var(--prava-red);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Error Screen (Verification Failed / Generic Error)
   ═══════════════════════════════════════════════════════════════ */

.error-center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 16px;
}

.error-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--prava-red-light);
  border: 1.5px solid var(--error-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-icon svg {
  width: 24px;
  height: 24px;
  color: var(--error-red);
}

.error-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--foreground);
  text-align: center;
}

.error-desc {
  font-size: 14px;
  color: var(--muted-fg);
  text-align: center;
  line-height: 1.5;
  width: 100%;
}

.error-bottom-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.btn-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.btn-cancel span {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-fg);
}

.btn-cancel:hover {
  border-color: var(--prava-slate-300);
  background: var(--prava-slate-50);
}

/* Consistent spacing: cancel button after submit button */
.submit-btn + .btn-cancel {
  margin-top: 10px;
}
/* Inside otp-section, gap handles spacing — no extra margin */
.otp-section > .btn-cancel {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Passkey Verify (Saved Card repeat flow) — Redesigned
   ═══════════════════════════════════════════════════════════════ */

.passkey-verify-container {
  padding: 0 20px;
  text-align: center;
  display: none; /* Hidden by default — JS sets display:flex when needed */
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.passkey-verify-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.passkey-verify-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.passkey-verify-icon.teal {
  background: var(--prava-teal-50);
  color: var(--prava-teal-600);
  box-shadow:
    0 0 0 12px rgba(46, 176, 158, 0.06),
    0 0 0 24px rgba(46, 176, 158, 0.03);
}

.passkey-verify-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--prava-slate-900);
}

.passkey-verify-actions {
  width: 100%;
  margin-top: auto;
  padding-bottom: 12px;
}

.passkey-cancel-btn {
  width: 100%;
  height: 44px;
  background: transparent;
  color: var(--prava-slate-600);
  border: 1.5px solid var(--prava-slate-200);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  margin-top: 10px;
}

.passkey-cancel-btn:hover {
  border-color: var(--prava-slate-300);
  color: var(--prava-slate-700);
  background: var(--prava-slate-50);
}

/* ── Popup Verifying State ────────────────────────────────── */
.popup-verifying-container {
  padding: 32px 24px;
  text-align: center;
  display: none; /* Hidden by default — JS sets display:flex when needed */
  flex-direction: column;
  align-items: center;
}

.popup-verifying-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--prava-slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--prava-slate-600);
  animation: iconPulse 2s ease-in-out infinite;
}

.popup-verifying-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--prava-slate-900);
  margin-bottom: 6px;
}

.popup-verifying-subtitle {
  font-size: 14px;
  color: var(--prava-slate-500);
  margin-bottom: 24px;
  max-width: 280px;
  line-height: 1.5;
}

.popup-verifying-spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--prava-slate-200);
  border-top-color: var(--prava-slate-600);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: WebView Gate
   ═══════════════════════════════════════════════════════════════ */

.webview-gate-container {
  padding: 32px 24px;
  text-align: center;
  display: none; /* Hidden by default — JS sets display:flex when needed */
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.webview-gate-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--prava-slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--prava-slate-600);
}

.webview-gate-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--prava-slate-900);
  margin-bottom: 8px;
}

.webview-gate-subtitle {
  font-size: 14px;
  color: var(--prava-slate-500);
  margin-bottom: 28px;
  max-width: 300px;
  line-height: 1.5;
}

.webview-gate-instructions {
  background: var(--prava-slate-50, #f8fafc);
  border: 1px solid var(--prava-slate-200, #e2e8f0);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--prava-slate-700);
  margin-bottom: 20px;
  max-width: 300px;
  text-align: left;
}

.webview-gate-instructions b {
  color: var(--prava-slate-900);
}

.webview-gate-container .submit-btn {
  gap: 8px;
}

.webview-gate-secondary-btn {
  background: var(--prava-slate-100) !important;
  color: var(--prava-slate-700) !important;
  margin-top: 8px;
}

.webview-gate-toast {
  margin-top: 12px;
  font-size: 13px;
  color: var(--prava-teal);
  font-weight: 500;
  opacity: 0;
  transition: opacity 300ms ease;
}

.webview-gate-toast.visible {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Visa FIDO Container
   ═══════════════════════════════════════════════════════════════ */

.visa-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 12px;
  width: 100%;
  min-height: 400px;
  flex: 1;
}

/* ── Visa Passkey Context Header ─────────────────────────── */
.visa-context-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 16px;
  animation: fadeSlideIn 300ms ease-out forwards;
}

.visa-context-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--prava-teal-50);
  color: var(--prava-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.visa-context-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--prava-slate-900);
  margin-bottom: 4px;
}

.visa-context-subtitle {
  font-size: 13px;
  color: var(--prava-slate-500);
  max-width: 280px;
  line-height: 1.5;
}

/* (REMOVED: Dead CSS — .method-card-*, .method-send-otp-btn, .method-card-radio
   from older design, replaced by .verify-option in payment-progress.js) */

/* ═══════════════════════════════════════════════════════════════
   SECTION: Verify Method Screen (Choose Verification)
   ═══════════════════════════════════════════════════════════════ */

.verify-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
  width: 100%;
}

.verify-shield-icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

.verify-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
  text-align: center;
}

.verify-subtitle {
  font-size: 14px;
  color: var(--muted-fg);
  text-align: center;
  line-height: 1.5;
}

.verify-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.verify-option {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  border-radius: 12px;
  padding: 0 16px;
  background: #fff;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.verify-option.selected {
  border: 1.5px solid var(--primary);
}

.verify-option.unselected {
  border: 1px solid var(--border);
}

.verify-option span {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
}

.verify-option.selected .verify-opt-icon {
  width: 22px;
  height: 22px;
  color: var(--primary);
  flex-shrink: 0;
}

.verify-option.unselected .verify-opt-icon {
  width: 22px;
  height: 22px;
  color: var(--muted-fg);
  flex-shrink: 0;
}

.verify-option:hover {
  border-color: var(--primary);
}

.verify-option:hover .verify-opt-icon {
  color: var(--primary);
}

.verify-option.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  border: 1px solid var(--border);
  position: relative;
}

.verify-option.disabled .verify-opt-icon {
  width: 22px;
  height: 22px;
  color: var(--muted-fg);
  flex-shrink: 0;
}

.verify-option.disabled span {
  color: var(--muted-fg);
}

.verify-option.disabled .verify-unavailable-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-fg);
  margin-left: auto;
  padding-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Flight Loader (Flying Prava Logo)
   ═══════════════════════════════════════════════════════════════ */

.flight-loader-scene {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── The flying unit (logo + small speed lines) ──────────── */
.flight-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  animation: flightShake 0.4s linear infinite;
  z-index: 2;
}

/* ── CSS-drawn flying bird (teal) ────────────────────────── */

/* Top wing/arm bar */
.flight-loader > span:first-child {
  height: 5px;
  width: 35px;
  background: var(--prava-slate-900);
  position: absolute;
  top: -19px;
  left: 60px;
  border-radius: 2px 10px 1px 0;
}

/* Body base — triangular cape */
.flight-base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid var(--prava-slate-900);
  border-bottom: 6px solid transparent;
}

/* Body circle (torso) */
.flight-base span::before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: var(--prava-slate-900);
  position: absolute;
  right: -110px;
  top: -16px;
}

/* Upper body / chest */
.flight-base span::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid var(--prava-slate-900);
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;
}

/* Head */
.flight-face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: var(--prava-slate-900);
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -125px;
  top: -15px;
}

/* Chin / jaw */
.flight-face::after {
  content: "";
  height: 12px;
  width: 12px;
  background: var(--prava-slate-900);
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 0 2px;
}

/* ── Small speed lines (fazers) trailing behind the bird ─── */
.flight-loader > span > span:nth-child(1),
.flight-loader > span > span:nth-child(2),
.flight-loader > span > span:nth-child(3),
.flight-loader > span > span:nth-child(4) {
  width: 30px;
  height: 1px;
  background: var(--prava-teal-600);
  position: absolute;
  animation: fazer1 0.2s linear infinite;
}

.flight-loader > span > span:nth-child(2) {
  top: 3px;
  animation: fazer2 0.4s linear infinite;
}

.flight-loader > span > span:nth-child(3) {
  top: 1px;
  animation: fazer3 0.4s linear infinite;
  animation-delay: -1s;
}

.flight-loader > span > span:nth-child(4) {
  top: 4px;
  animation: fazer4 1s linear infinite;
  animation-delay: -1s;
}

@keyframes fazer1 {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: -80px;
    opacity: 0;
  }
}

@keyframes fazer2 {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: -100px;
    opacity: 0;
  }
}

@keyframes fazer3 {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: -50px;
    opacity: 0;
  }
}

@keyframes fazer4 {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: -150px;
    opacity: 0;
  }
}

/* ── Long horizontal speed bars (fly across entire scene) ── */
.flight-longfazers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.flight-longfazers span {
  position: absolute;
  height: 2px;
  width: 20%;
  background: var(--prava-teal-600);
  border-radius: 1px;
  opacity: 0.35;
}

.flight-longfazers span:nth-child(1) {
  top: 20%;
  animation: longFazer 0.6s linear infinite;
  animation-delay: -5s;
}

.flight-longfazers span:nth-child(2) {
  top: 40%;
  animation: longFazer2 0.8s linear infinite;
  animation-delay: -1s;
}

.flight-longfazers span:nth-child(3) {
  top: 60%;
  animation: longFazer3 0.6s linear infinite;
}

.flight-longfazers span:nth-child(4) {
  top: 80%;
  animation: longFazer4 0.5s linear infinite;
  animation-delay: -3s;
}

@keyframes longFazer {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}

@keyframes longFazer2 {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}

@keyframes longFazer3 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}

@keyframes longFazer4 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}

/* ── Flight shake (turbulence wobble on the flying unit) ─── */
@keyframes flightShake {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -3px) rotate(-1deg);
  }
  20% {
    transform: translate(-2px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 3px) rotate(-1deg);
  }
  60% {
    transform: translate(-1px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-2px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

/* ── Loading text below the scene ────────────────────────── */
.flight-loader-text {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: auto;
  padding-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--prava-slate-500);
  text-align: center;
  line-height: 1.5;
  z-index: 3;
  transition: opacity 0.2s ease;
}

/* ── Legacy compat (keep logo-loader-text class working) ─── */
.logo-loader-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--prava-slate-500);
  text-align: center;
  line-height: 1.5;
  max-width: 240px;
  transition: opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Powered by Prava Footer
   ═══════════════════════════════════════════════════════════════ */

.prava-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: calc(8px + var(--safe-area-bottom));
  font-size: 12px;
  color: var(--prava-slate-400);
}

.prava-footer-branding {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--prava-slate-500);
}

.prava-footer-branding strong {
  font-weight: 700;
  color: var(--prava-slate-600);
}

.prava-footer-logo {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.prava-footer-sep {
  color: var(--prava-slate-300);
  margin: 0 2px;
}

.prava-footer-link {
  color: var(--prava-slate-400);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.prava-footer-link:hover {
  color: var(--prava-teal-600);
}

/* Legacy: keep .prava-footer img rule for backward compat with overlay footers */
.prava-footer img:not(.prava-footer-logo) {
  height: 25px;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: View Cross-Fade (Saved Cards ↔ Add Card transitions)
   ═══════════════════════════════════════════════════════════════ */

.view-fade-out {
  animation: viewFadeOut 0.15s ease forwards;
}

.view-fade-in {
  animation: viewFadeIn 0.15s ease forwards;
}

@keyframes viewFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Animations
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeSlideIn 300ms ease-out forwards;
}

.animate-fadeOut {
  animation: fadeSlideOut 200ms ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 300ms ease-out forwards;
}

/* Staggered cascade for step reveals */
.stagger-1 {
  animation-delay: 0ms;
}
.stagger-2 {
  animation-delay: 100ms;
}
.stagger-3 {
  animation-delay: 200ms;
}
.stagger-4 {
  animation-delay: 300ms;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Reduced Motion
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bird-flight-header {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SECTION: Embedded Mode (iframe) — disable card styling
   When embedded, the merchant controls the container; iframe fills 100%.
   Teal gradient + card styling is only for redirect/full-page mode.
   ═══════════════════════════════════════════════════════════════ */

:root[data-embedded] body {
  background: var(--prava-white);
  padding: 0;
  align-items: stretch;
}

:root[data-embedded] .container {
  max-width: 100%;
  min-height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 480px) {
  :root[data-embedded] body {
    padding: 0;
    align-items: stretch;
  }
  :root[data-embedded] .container {
    min-height: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Embedded mode: let content grow naturally — merchant page handles scrolling */
:root[data-embedded] .content-area {
  overflow-y: visible;
}

/* Verify-method screen: tighten the icon/text/option blocks on mobile only.
   Desktop (>=480px) keeps the roomier base sizing.
   ponytail: method list is hardcoded to 2 rows, so a fixed button gap is safe. */
@media (max-width: 479px) {
  #method-send-otp-btn {
    margin-top: 20px;
  }
  .verify-center-wrap {
    gap: 12px;
  }
  .verify-shield-icon {
    width: 36px;
    height: 36px;
  }
  .verify-title {
    font-size: 17px;
  }
  .verify-subtitle {
    font-size: 13px;
    line-height: 1.45;
  }
  .verify-options {
    gap: 10px;
  }
  .verify-option {
    height: 52px;
  }
  .verify-option span {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .validation-feedback {
    grid-template-columns: 1fr 1fr;
  }

  .payment-overlay-inner {
    padding: 24px 16px 16px;
  }

  .overlay-title {
    font-size: 16px;
  }

  .overlay-subtitle {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Quote checkout — viewport-adaptive, scroll-free shell

   Quote-backed sessions show destination and the complete amount breakdown on
   the initial review/card-selection screen. Verification, processing and
   result screens retain only the canonical final total. The iframe never
   creates a nested scrolling region; short portrait viewports use a denser
   rhythm while the checkout remains a single-column experience at every width.
   ═══════════════════════════════════════════════════════════════ */

body.quote-checkout-page {
  overflow: hidden;
}

.container.quote-checkout {
  overflow: hidden;
}

/* Full-checkout quote review stays portrait-bound when it is hosted in an
   iframe. The embedding integration remains a quiet, full-width action layer,
   matching non-quote embedding instead of nesting a 390px card in the host. */
:root[data-embedded] body:not(.embedding) .container.quote-checkout {
  max-width: 390px;
  margin-inline: auto;
}

.quote-checkout .content-area,
.quote-checkout .payment-overlay,
.quote-checkout .payment-overlay-inner,
.quote-checkout .passkey-verify-container,
.quote-checkout .visa-container {
  min-height: 0;
}

.quote-checkout .content-area {
  overflow: hidden;
  overscroll-behavior: none;
}

/* After the user leaves review, remove every secondary quote detail. The
   product unit price can differ from the checkout total because of shipping,
   tax and discounts, so the final amount row is the only money retained. */
.container.quote-checkout[data-order-summary-mode="total"] .product-details-row,
.container.quote-checkout[data-order-summary-mode="total"] .delivery-summary,
.container.quote-checkout[data-order-summary-mode="total"]
  .amount-breakdown-row:not(.amount-breakdown-row--total) {
  display: none !important;
}

.container.quote-checkout[data-order-summary-mode="total"]
  .amount-breakdown-row--total {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The embedding integration uses SDK auto-resize instead of a fixed-height
   checkout card. Keep its single action column naturally measurable so long
   Skyflow/Visa-owned forms expand the iframe rather than being clipped. */
body.embedding.quote-checkout-page,
body.embedding .container.quote-checkout,
body.embedding .quote-checkout .content-area {
  overflow: visible;
}

/* `data-embedded` has a higher-specificity legacy overflow-y rule. Reassert
   fixed full-checkout behavior explicitly so `visible` cannot compute to an
   internal `auto` scrollbar when the other axis is hidden. */
:root[data-embedded] body:not(.embedding) .quote-checkout .content-area {
  overflow: hidden;
}

.quote-checkout .payment-overlay {
  /* The old 380px floor was the direct cause of quote screens scrolling once
     the persistent recap grew. Flex now allocates the actual remaining space. */
  min-height: 0;
}

.quote-checkout .merchant-header {
  padding-top: clamp(8px, 1.8vh, 16px);
  padding-bottom: clamp(4px, 0.8vh, 8px);
}

.quote-checkout .merchant-name--single {
  height: clamp(36px, 5.8vh, 44px);
}

.quote-checkout .merchant-name--double {
  height: clamp(48px, 8.5vh, 72px);
}

.quote-checkout .product-card {
  padding-block: clamp(8px, 1.5vh, 12px);
  gap: clamp(5px, 1vh, 10px);
}

.quote-checkout .product-card-header {
  margin-bottom: clamp(0px, 0.7vh, 6px);
}

.quote-checkout #amount-breakdown-rows {
  gap: clamp(2px, 0.55vh, 5px);
}

.quote-checkout .amount-breakdown-row--total {
  margin-top: clamp(1px, 0.4vh, 3px);
  padding-top: clamp(5px, 0.9vh, 8px);
}

.quote-checkout .payment-overlay-inner {
  padding-top: clamp(10px, 3vh, 32px);
}

.quote-checkout .success-section {
  gap: clamp(8px, 1.8vh, 16px);
  padding-bottom: clamp(0px, 4vh, 28px);
}

.quote-checkout .passkey-verify-content {
  padding-block: clamp(10px, 4vh, 40px);
}

.quote-checkout .add-new-card-btn {
  min-height: 44px;
}

/* The compact tier covers current small phones and the 390x696 checkout card.
   Touch targets remain at least 44px for primary actions; density comes from
   removing decorative whitespace and reducing non-interactive chrome. Hosted
   Skyflow controls retain their vendor-safe 68px/88px mount heights. */
@media (max-height: 760px) {
  .container.quote-checkout {
    max-height: var(--viewport-height);
  }

  :root[data-embedded] body:not(.embedding) .container.quote-checkout {
    max-height: var(--viewport-height);
  }

  .quote-checkout .payment-overlay,
  .quote-checkout .passkey-verify-container,
  .quote-checkout .visa-container {
    min-height: 0;
  }

  .quote-checkout .merchant-header {
    padding: 6px 12px 4px;
  }

  .quote-checkout .merchant-name {
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 18px;
    line-height: 1.1;
  }

  .quote-checkout .merchant-name--single {
    height: 34px;
  }

  .quote-checkout .merchant-name--double {
    height: 46px;
    font-size: 15px;
  }

  .quote-checkout .product-details {
    padding: 0 12px 4px;
  }

  .quote-checkout .product-card {
    border-radius: 10px;
    padding: 8px 10px;
    gap: 5px;
  }

  .quote-checkout .product-card-header {
    margin-bottom: 0;
  }

  .quote-checkout .product-status,
  .quote-checkout .product-order-id {
    font-size: 11px;
  }

  .quote-checkout .product-status {
    gap: 4px;
  }

  .quote-checkout .product-status-icon,
  .quote-checkout .product-status-check {
    width: 13px;
    height: 13px;
  }

  .quote-checkout .product-status-icon {
    flex-basis: 13px;
  }

  .quote-checkout .product-status-dot {
    width: 7px;
    height: 7px;
  }

  .quote-checkout .product-details-row {
    gap: 8px;
  }

  .quote-checkout .product-description {
    font-size: 12px;
    line-height: 1.2;
  }

  .quote-checkout .product-meta,
  .quote-checkout .delivery-summary-value,
  .quote-checkout .amount-breakdown-label,
  .quote-checkout .amount-breakdown-value {
    font-size: 11px;
  }

  .quote-checkout .product-price {
    font-size: 13px;
  }

  .quote-checkout .delivery-summary {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 8px;
  }

  .quote-checkout .delivery-summary-icon {
    width: 14px;
    height: 14px;
  }

  .quote-checkout .delivery-summary-value {
    line-height: 1.2;
  }

  .quote-checkout .amount-breakdown {
    padding-top: 5px;
  }

  .quote-checkout #amount-breakdown-rows {
    gap: 2px;
  }

  .quote-checkout .amount-breakdown-row {
    gap: 8px;
    line-height: 1.15;
  }

  .quote-checkout .amount-breakdown-row--total {
    margin-top: 1px;
    padding-top: 5px;
  }

  .quote-checkout .amount-breakdown-row--total .amount-breakdown-label,
  .quote-checkout .amount-breakdown-row--total .amount-breakdown-value {
    font-size: 12px;
  }

  .quote-checkout .saved-cards {
    padding: 8px 12px 4px;
  }

  .quote-checkout .saved-cards-header {
    margin-bottom: 5px;
  }

  .quote-checkout .saved-cards-title {
    font-size: 15px;
  }

  .quote-checkout .saved-cards-list {
    gap: 4px;
    margin-bottom: 5px;
  }

  .quote-checkout .scd-trigger {
    gap: 8px;
    min-height: 44px;
    padding: 7px 9px;
    border-radius: 10px;
  }

  .quote-checkout .add-new-card-btn {
    min-height: 44px;
    padding: 7px;
    margin-bottom: 3px;
    border-radius: 10px;
  }

  .quote-checkout .checkout-footer-section {
    padding: 3px 12px 6px;
  }

  .quote-checkout .submit-btn {
    height: 44px;
    border-radius: 10px;
  }

  .quote-checkout .prava-footer {
    padding-top: 6px;
    padding-bottom: calc(4px + var(--safe-area-bottom));
    font-size: 11px;
  }

  .quote-checkout .payment-overlay-inner {
    padding: 8px 12px 4px;
  }

  .quote-checkout .success-section {
    gap: 8px;
    padding-bottom: 0;
  }

  .quote-checkout .success-badge,
  .quote-checkout .success-circle {
    width: 48px;
    height: 48px;
  }

  .quote-checkout .success-badge svg {
    top: 13px;
    left: 13px;
    width: 22px;
    height: 22px;
  }

  .quote-checkout .success-title {
    font-size: 18px;
  }

  .quote-checkout .success-card-block {
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .quote-checkout .success-card-art,
  .quote-checkout .success-card-block .visa-logo,
  .quote-checkout .success-card-block .mc-logo,
  .quote-checkout .success-card-block .card-brand-icon {
    width: 64px;
    height: 40px;
    border-radius: 6px;
  }

  .quote-checkout .success-card-num {
    font-size: 13px;
  }

  .quote-checkout .success-card-block .mc-red,
  .quote-checkout .success-card-block .mc-orange {
    width: 24px;
    height: 24px;
    top: 8px;
  }

  .quote-checkout .success-card-block .mc-red {
    left: 10px;
  }

  .quote-checkout .success-card-block .mc-orange {
    left: 28px;
  }

  .quote-checkout .passkey-verify-container {
    padding-inline: 12px;
  }

  .quote-checkout .passkey-verify-content {
    padding: 8px 0 4px;
  }

  .quote-checkout .passkey-verify-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
  }

  .quote-checkout .passkey-verify-icon svg {
    width: 34px;
    height: 34px;
  }

  .quote-checkout .passkey-verify-icon.teal {
    box-shadow:
      0 0 0 7px rgba(46, 176, 158, 0.05),
      0 0 0 14px rgba(46, 176, 158, 0.025);
  }

  .quote-checkout .passkey-verify-title {
    font-size: 18px;
  }

  .quote-checkout .passkey-verify-actions {
    padding-bottom: 4px;
  }

  .quote-checkout .passkey-cancel-btn {
    height: 44px;
    margin-top: 4px;
    border-radius: 10px;
  }

  .quote-checkout .passkey-verify-actions .prava-footer {
    padding-top: 6px !important;
  }

  .quote-checkout .visa-container {
    justify-content: flex-start;
    padding: 4px 12px;
  }

  .quote-checkout .visa-context-header {
    flex-direction: row;
    gap: 6px;
    margin-bottom: 4px;
  }

  .quote-checkout .visa-context-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0;
  }

  .quote-checkout .visa-context-icon svg {
    width: 16px;
    height: 16px;
  }

  .quote-checkout .visa-context-title {
    margin-bottom: 0;
    font-size: 14px;
  }

  .quote-checkout .visa-container .prava-footer {
    padding-top: 2px;
    padding-bottom: calc(2px + var(--safe-area-bottom));
  }

  .quote-checkout .card-form {
    padding: 0 12px 4px;
  }

  .quote-checkout .section-title {
    margin-top: 6px;
    margin-bottom: 5px;
    font-size: 13px;
  }

  .quote-checkout .form-fields {
    margin-bottom: 4px;
  }

  .quote-checkout .form-row {
    margin-bottom: 2px;
  }

  .quote-checkout .tc-consent {
    padding: 2px 0 5px;
  }

  .quote-checkout .tc-consent-label {
    gap: 7px;
  }

  .quote-checkout .tc-checkmark {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }

  .quote-checkout .tc-text {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* Extra density for the shortest supported phone portrait (320x568). */
@media (max-height: 620px) {
  .quote-checkout .merchant-header {
    padding-top: 4px;
    padding-bottom: 3px;
  }

  .quote-checkout .merchant-name--single {
    height: 30px;
    font-size: 16px;
  }

  .quote-checkout .merchant-name--double {
    height: 40px;
    font-size: 14px;
  }

  .quote-checkout .product-card {
    padding-block: 6px;
    gap: 3px;
  }

  .quote-checkout .product-card-header {
    line-height: 1;
  }

  .quote-checkout .product-description {
    font-size: 11px;
  }

  .quote-checkout .delivery-summary {
    padding: 4px 8px;
  }

  .quote-checkout .amount-breakdown {
    padding-top: 4px;
  }

  .quote-checkout #amount-breakdown-rows {
    gap: 1px;
  }

  .quote-checkout .amount-breakdown-row--total {
    padding-top: 3px;
  }

  .quote-checkout .saved-cards {
    padding-top: 5px;
  }

  .quote-checkout .passkey-verify-icon {
    width: 50px;
    height: 50px;
  }

  .quote-checkout .passkey-verify-content {
    padding-top: 4px;
  }

  .quote-checkout .success-badge,
  .quote-checkout .success-circle {
    width: 42px;
    height: 42px;
  }

  .quote-checkout .success-badge svg {
    top: 11px;
    left: 11px;
    width: 20px;
    height: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Agentic UI — Agent approval screen
   ═══════════════════════════════════════════════════════════════ */

/* Agentic wrapper: agent card bleeds full width, rest has side padding */
.agent-wrapper {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.agent-wrapper > *:not(.agent-card) {
  margin-left: 20px;
  margin-right: 20px;
}

.agent-wrapper > .prava-footer {
  padding: 8px 20px calc(12px + var(--safe-area-bottom));
  margin-left: 0;
  margin-right: 0;
}

/* Agent Card (dark gradient header — rounded top corners, flat bottom) */
.agent-card {
  background: linear-gradient(135deg, #1a2332 0%, #2d3748 50%, #1a2332 100%);
  border-radius: 16px 16px 0 0;
  padding: 40px 28px;
  color: #fff;
  margin-bottom: 24px;
}

.agent-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 16px;
}

.agent-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.agent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.agent-name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Network badge (VISA/MC) in agent card header */
.agent-network-badge {
  display: flex;
  align-items: center;
}

.agent-visa-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.agent-brand-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Amount display (right-aligned in agent card) */
.agent-card-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  justify-self: end;
  min-width: max-content;
}

.agent-amount-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #4fd1c5;
  text-transform: uppercase;
}

.agent-amount-value {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

/* Mandate Details Card (bordered container) */
.mandate-details-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.mandate-details-card .mandate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
}

.mandate-details-card .mandate-row + .mandate-row {
  border-top: 1px solid #e2e8f0;
}

.mandate-label {
  font-size: 14px;
  color: #64748b;
}

.mandate-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  text-align: right;
}

.merchant-display-value,
.order-reference-value {
  min-width: 0;
  max-width: 65%;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.merchant-display-value--single,
.order-reference-value {
  white-space: nowrap;
}

.merchant-display-value--double {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: pre-line;
  line-height: 1.35;
}

/* Pay With Section */
.agent-pay-section {
  margin-bottom: 24px;
}

.agent-pay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.agent-pay-label {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

/* "+ Add new card" button */
.agent-add-card-btn {
  background: #fff;
  border: 1px solid #38b2ac;
  color: #38b2ac;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 8px;
  transition:
    background 0.15s,
    color 0.15s;
}

.agent-add-card-btn:hover {
  background: #38b2ac;
  color: #fff;
}

/* Back to saved cards button */
.agent-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 12px;
  transition: color 0.15s ease;
}

.agent-back-btn:hover {
  color: #38b2ac;
}

.agent-back-btn svg {
  flex-shrink: 0;
}

/* Cross-fade transitions between card list ↔ add card form */
.agent-pay-section,
#agent-card-form {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.agent-view-exit {
  opacity: 0;
  transform: translateY(-6px);
}

.agent-view-enter {
  opacity: 0;
  transform: translateY(6px);
  animation: agentViewFadeIn 0.25s ease forwards;
}

@keyframes agentViewFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collapsible card selector */
.agent-card-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Chevron indicator on selected row */
.agent-card-chevron {
  width: 20px;
  height: 20px;
  color: #64748b;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.agent-card-list.expanded .agent-card-chevron {
  transform: rotate(180deg);
}

/* Floating dropdown overlay — clean select-menu style */
.agent-card-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  right: -1px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 12px 24px -4px rgba(0, 0, 0, 0.1);
  padding: 4px;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-card-list.expanded .agent-card-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Individual card row — the selected (top) row */
.agent-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  flex-shrink: 0;
}

.agent-card-row:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.agent-card-row.selected {
  border-color: #38b2ac;
  background: rgba(56, 178, 172, 0.04);
}

/* Dropdown card rows — borderless, compact menu items */
.agent-card-dropdown .agent-card-row {
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
}

.agent-card-dropdown .agent-card-row:hover {
  background: #f1f5f9;
  border: none;
}

/* Checkmark only visible on selected */
.agent-card-check {
  color: #38b2ac;
  font-size: 18px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
}

.agent-card-row.selected .agent-card-check {
  opacity: 1;
}

.agent-card-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.visa-brand-tag {
  background: #1a1f71;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 6px;
  border-radius: 4px;
}

.card-brand-text {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.agent-card-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.agent-card-number {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  letter-spacing: 0.5px;
}

.agent-card-type {
  font-size: 12px;
  color: #38b2ac;
}

.agent-passkey-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  width: fit-content;
}

.agent-passkey-badge.green {
  background: rgba(13, 148, 136, 0.12);
  color: #0d9488;
  border: 1px solid rgba(13, 148, 136, 0.35);
}

.agent-passkey-badge.red {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* No cards state */
.agent-no-cards {
  text-align: center;
  padding: 16px;
}

.agent-no-cards-text {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 0;
}

/* Brand tags in card rows */
.mc-brand-tag {
  background: #eb001b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 4px;
}

.generic-brand-tag {
  background: #64748b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 4px;
}

/* Action Buttons (stacked vertically) */
.agent-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.agent-dismiss-btn {
  width: 100%;
  padding: 14px 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.agent-dismiss-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.agent-pay-btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #38b2ac 0%, #2d9f93 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s;
}

.agent-pay-btn:hover {
  opacity: 0.92;
}

.agent-pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Agent card form (reuses existing Skyflow styles) */
#agent-card-form {
  margin-bottom: 16px;
}

#agent-tc-consent {
  margin-top: 12px;
}