/* =========================================================
   UR Invited — Frictionless checkout flow modal
   Inline sign-up / sign-in → create order → Stripe.
   Mobile-first; centered card on desktop, bottom sheet on phones.
   ========================================================= */

.uv-cf-backdrop {
  /* Above the editor toolbar + floatbar (both z-index 100000), otherwise the
     bottom floatbar pokes through the backdrop and covers the modal's action
     buttons on phones. Kept below the crop modal (200000), which never
     co-occurs with checkout. */
  position: fixed; inset: 0; z-index: 200001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(20, 22, 34, .52);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: uv-cf-fade .18s ease;
}
.uv-cf-noanim, .uv-cf-noanim * { animation: none !important; }
@keyframes uv-cf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uv-cf-rise { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
body.uv-cf-open { overflow: hidden; }

.uv-cf-card {
  position: relative;
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 20px;
  padding: 30px 26px 24px;
  box-shadow: 0 24px 70px rgba(20, 22, 34, .34);
  animation: uv-cf-rise .26s cubic-bezier(.2, .9, .3, 1);
  font-family: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1d2438;
}
.uv-cf-card--status { text-align: center; padding: 40px 30px; max-width: 340px; }

.uv-cf-close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; color: #9aa3b5; border-radius: 10px;
}
.uv-cf-close:hover { background: #f1f2f6; color: #1d2438; }

.uv-cf-title { font-family: 'Boska', Georgia, serif; font-size: 1.45rem; font-weight: 600; margin: 0 6px 6px 0; letter-spacing: -.01em; line-height: 1.15; }
.uv-cf-sub { margin: 0 0 18px; font-size: .9rem; color: #58627a; }
/* Launch-price urgency note (shown while penetration pricing is on) */
.uv-cf-launch {
  margin: -12px 0 16px; font-size: .8rem; font-weight: 700; color: #b8791f;
  display: inline-flex; align-items: center; gap: 6px;
}
.uv-cf-launch::before { content: "▲"; font-size: .7em; }

/* Named value stack — reframes the price as a bundle + risk reversal. */
.uv-cf-stack {
  list-style: none; margin: 0 0 18px; padding: 14px 16px;
  background: #f7f9f7; border: 1px solid #e6ede6; border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.uv-cf-stack li {
  position: relative; padding-left: 28px;
  font-size: .86rem; line-height: 1.4; color: #3a4256;
}
.uv-cf-stack li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #1f9d63; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.uv-cf-stack li strong { color: #1b6b46; font-weight: 700; }

.uv-cf-form { display: flex; flex-direction: column; gap: 12px; }
.uv-cf-field { display: flex; flex-direction: column; gap: 5px; }
.uv-cf-field > span { font-size: .76rem; font-weight: 600; color: #58627a; }
.uv-cf-input {
  font: inherit; font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: #1d2438; padding: 12px 14px;
  border: 1.5px solid #e2e4ec; border-radius: 11px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.uv-cf-input:focus { outline: none; border-color: #c8973c; box-shadow: 0 0 0 3px rgba(200,151,60,.18); }

.uv-cf-err { margin: 0; font-size: .84rem; font-weight: 500; color: #c0492f; }

.uv-cf-submit {
  margin-top: 4px; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  color: #fff; background: #1f9d63; border: none; border-radius: 12px;
  padding: 14px 18px; transition: transform .1s, background .15s, opacity .15s;
}
.uv-cf-submit:hover { background: #1b8a57; }
.uv-cf-submit:active { transform: translateY(1px); }
.uv-cf-submit:disabled { opacity: .7; cursor: default; }
.uv-cf-submit.is-busy { position: relative; color: transparent; }
.uv-cf-submit.is-busy::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
  animation: uv-cf-spin .7s linear infinite;
}
@keyframes uv-cf-spin { to { transform: rotate(360deg); } }

.uv-cf-togglewrap { margin: 14px 0 0; text-align: center; font-size: .86rem; color: #58627a; }
.uv-cf-toggle { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; color: #c8973c; padding: 0; text-decoration: none; }
.uv-cf-toggle:hover { text-decoration: underline; }

.uv-cf-trust { margin: 16px 0 0; text-align: center; font-size: .76rem; color: #9aa3b5; }

/* Already-authed status card */
.uv-cf-spin {
  width: 38px; height: 38px; margin: 0 auto 16px;
  border: 3px solid #eceef4; border-top-color: #c8973c; border-radius: 50%;
  animation: uv-cf-spin .8s linear infinite;
}
.uv-cf-statusmsg { margin: 0; font-size: 1rem; color: #1d2438; }
.uv-cf-statusactions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* Phones: dock to the bottom as a sheet for thumb reach */
@media (max-width: 480px) {
  .uv-cf-backdrop { align-items: flex-end; padding: 0; }
  .uv-cf-card {
    max-width: 100%; border-radius: 20px 20px 0 0; padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
    animation: uv-cf-sheet .28s cubic-bezier(.2, .9, .3, 1);
  }
  .uv-cf-card--status { border-radius: 20px 20px 0 0; }
  @keyframes uv-cf-sheet { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .uv-cf-backdrop, .uv-cf-card { animation: none; }
}

/* Checkout add-on (AOV): remove-branding upsell inside the checkout modal. */
.uv-cf-addon {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 2px; padding: 12px 14px;
  border: 1.5px solid #e2e4ec; border-radius: 11px; background: #fbfbfd;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.uv-cf-addon:hover { border-color: #c8973c; background: #fffdf7; }
.uv-cf-addon__chk { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #1f9d63; cursor: pointer; }
.uv-cf-addon__txt { flex: 1; font-size: .82rem; line-height: 1.3; color: #47506a; }
.uv-cf-addon__price { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: #1d2438; }

/* Downsell: "save for later" — additive, never blocks the pay path. */
.uv-cf-savelater {
  display: block; width: 100%; margin: 12px 0 0; padding: 6px;
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: .82rem; color: #58627a; text-align: center; text-decoration: underline;
}
.uv-cf-savelater:hover { color: #1d2438; }
.uv-cf-downsell { display: flex; flex-direction: column; gap: 12px; }