.checkout-email { padding-top: 48px; }
.checkout-email .lede { max-width: none; }
.checkout-email form { margin-top: 40px; }
.checkout-email label { display: block; margin-bottom: 10px; font-size: 15px; }
.checkout-email input {
  width: 100%; padding: 18px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: #f7f8fa; color: var(--ink); font: inherit; font-size: 17px;
}
.checkout-email input:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.checkout-email .error { min-height: 24px; margin: 12px 0; }
.checkout-email .privacy-line { text-align: center; }
.checkout-email .primary { margin-top: 24px; }

/* The abandoned cart's offer (Johan: a don't-miss-out feel, little text): a real countdown, their
   own scan side by side with what's still locked on it, the price falling to half in front of
   them, the stamp, the button glowing. */
.checkout-offer { padding-top: 10px; text-align: center; }
.checkout-offer .offer-clock {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 14px 7px 12px;
  border-radius: 999px; background: #fff1f1; color: #d93636; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.checkout-offer .offer-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; }
.checkout-offer .offer-pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ff4d4d;
  animation: offer-ping 1.4s ease-out infinite;
}
@keyframes offer-ping { from { opacity: 0.8; transform: scale(0.6); } to { opacity: 0; transform: scale(1.6); } }
.checkout-offer.ended .offer-clock { background: #f1f2f4; color: #7c828c; }
.checkout-offer.ended .offer-pulse { background: #b9bfc8; }
.checkout-offer.ended .offer-pulse::after { display: none; }
.checkout-offer h1 { font-size: 30px; line-height: 1.1; }
.checkout-offer h1 #offer-who:not(:empty) { display: block; }
.checkout-offer h1 .accent { color: var(--blue); }
.checkout-offer .offer-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 18px; }
.checkout-offer .offer-faces[hidden] { display: none; }
.checkout-offer .offer-face {
  position: relative; margin: 0; padding: 0 0 12px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, #ffffff, #f3f5f8);
  box-shadow: 0 0 0 1px rgb(30 40 60 / 0.06), 0 18px 36px -24px rgb(29 31 36 / 0.35);
}
.checkout-offer .offer-stage { position: relative; height: 178px; }
.checkout-offer .offer-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.checkout-offer .offer-face figcaption { font-size: 14px; font-weight: 600; color: var(--ink); }
/* What's still locked on their scan, a name at a time. */
.checkout-offer .offer-lock {
  position: absolute; left: 50%; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px; translate: -50% 0; white-space: nowrap;
  background: rgb(255 255 255 / 0.92); box-shadow: 0 0 0 1px rgb(30 40 60 / 0.07), 0 8px 18px -8px rgb(29 31 36 / 0.35);
  font-size: 12px; transition: opacity 0.35s ease;
}
.checkout-offer .offer-lock.out { opacity: 0; }
.checkout-offer .offer-lock b { font-weight: 600; color: var(--ink); }
.checkout-offer .offer-lock i {
  width: 10px; height: 12px; background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Crect x='0.5' y='5' width='9' height='6.5' rx='1.6' fill='%231d1f24'/%3E%3Cpath d='M2.6 5V3.6a2.4 2.4 0 0 1 4.8 0V5' fill='none' stroke='%231d1f24' stroke-width='1.3'/%3E%3C/svg%3E");
}
/* The deal: the price falling to half, the stamp landing. */
.checkout-offer .offer-deal { position: relative; margin: 2px 0 18px; }
.checkout-offer .offer-price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 0 2px; }
.checkout-offer .offer-price b { font-size: 54px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.checkout-offer .offer-per { margin-left: -10px; font-size: 20px; font-weight: 500; color: var(--ink); }
.checkout-offer .offer-price s { font-size: 22px; color: #9aa0a8; opacity: 0; transition: opacity 0.3s ease; }
.checkout-offer.dropped .offer-price s { opacity: 1; }
.checkout-offer .offer-then { margin: 0; font-size: 15px; color: #7c828c; }
.checkout-offer .offer-stamp {
  position: absolute; right: 6px; top: -6px; padding: 6px 11px; border-radius: 10px;
  background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 10px 22px -8px rgb(18 147 255 / 0.7);
  opacity: 0; transform: rotate(-10deg) scale(1.8);
}
.checkout-offer.dropped .offer-stamp { animation: offer-stamp 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes offer-stamp { to { opacity: 1; transform: rotate(-10deg) scale(1); } }
/* The button, glowing. */
.checkout-offer .offer-claim { position: relative; overflow: hidden; animation: offer-glow 2.2s ease-in-out infinite; }
.checkout-offer .offer-claim::after {
  content: ''; position: absolute; inset: 0; translate: -120% 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  animation: offer-sheen 2.6s ease-in-out infinite 0.8s;
}
@keyframes offer-glow { 50% { box-shadow: 0 12px 30px -6px rgb(18 147 255 / 0.65); } }
@keyframes offer-sheen { 60%, 100% { translate: 120% 0; } }
.checkout-offer.ended .offer-claim { animation: none; }
.checkout-offer.ended .offer-claim::after { display: none; }
.checkout-offer .offer-proof { margin: 12px 0 0; font-size: 13px; color: #7c828c; }
.checkout-offer .offer-proof span { color: var(--ink); font-weight: 600; }
.checkout-offer .text-button {
  display: block; margin: 2px auto 0; padding: 10px 16px; border: 0; background: none;
  color: #9aa0a8; font: inherit; font-size: 14px; cursor: pointer;
}
.checkout-offer .error { min-height: 20px; margin: 6px 0; }
@media (prefers-reduced-motion: reduce) {
  .checkout-offer .offer-claim, .checkout-offer .offer-claim::after, .checkout-offer .offer-pulse::after { animation: none; }
}

/* ?safari=1 in TikTok's browser: Safari first (Apple Pay), the card here as a text button. */
.checkout-email.to-safari form { display: none; }
.safari-way { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.safari-way .primary { width: 100%; }
.safari-hint { margin: 20px 0 0; text-align: center; font-size: 15px; }
.safari-way .text-button { margin-top: 4px; }
.safari-way[hidden] { display: none; }

/* "Save your plan" before the custom checkout: the field, the offers box from 16, Skip. */
.checkout-email.save-mode .email-offers {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0;
  font-size: 15px; line-height: 1.4; color: #4a4f57; cursor: pointer;
}
.checkout-email.save-mode .email-offers[hidden] { display: none; }
.checkout-email.save-mode .email-offers input {
  flex: none; width: 22px; height: 22px; margin: 0; padding: 0; border-radius: 6px; accent-color: var(--blue);
}
.checkout-email .email-skip {
  display: block; margin: 8px auto 0; padding: 12px 20px; border: 0; background: none;
  color: #7c828c; font: inherit; font-size: 15px; cursor: pointer;
}
.checkout-email .email-skip[hidden] { display: none; }