/* Stripe Popup Payments — front-end
 * Mobile first: on phones the modal is a bottom sheet that respects the iOS
 * safe area and the on-screen keyboard instead of a centred box that overflows.
 */

/* The UA rule [hidden]{display:none} sits below author styles, so any element
   we give a `display` to would keep showing while hidden. This wins everywhere
   inside the plugin's own markup. */
.spp-modal [hidden],
.spp-upsell-page [hidden],
.spp-checkout-trigger [hidden] {
  display: none !important;
}

:root {
  --spp-primary: #0f766e;
  --spp-primary-dark: #0a5d57;
  --spp-text: #12212b;
  --spp-muted: #667681;
  --spp-border: #dfe7ea;
  --spp-bg: #f7faf9;
  --spp-radius: 16px;
  --spp-font: inherit;
}

/* ------------------------------------------------------------------ */
/* Trigger buttons                                                      */
/* ------------------------------------------------------------------ */

.spp-checkout-trigger {
  display: inline-block;
  cursor: pointer;
}
.spp-checkout-trigger > * {
  cursor: pointer;
}
.spp-checkout-trigger:focus-visible,
.spp-checkout-button:focus-visible {
  outline: 3px solid rgba(15, 118, 110, .45);
  outline: 3px solid color-mix(in srgb, var(--spp-primary) 45%, transparent);
  outline-offset: 3px;
}

.spp-checkout-button {
  appearance: none;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--spp-primary), var(--spp-primary-dark));
  color: #fff;
  padding: 14px 26px;
  min-width: 190px;
  box-shadow: 0 9px 24px rgba(15, 118, 110, .25);
  font: 700 16px/1.3 var(--spp-font, inherit);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.spp-checkout-button:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(15, 118, 110, .32); }
.spp-checkout-button small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; opacity: .88; }

.spp-checkout-button.spp-style-outline {
  background: transparent;
  color: var(--spp-primary);
  border: 2px solid var(--spp-primary);
  box-shadow: none;
}
.spp-checkout-button.spp-style-minimal {
  background: none;
  color: var(--spp-primary);
  box-shadow: none;
  padding: 6px 0;
  min-width: 0;
  text-decoration: underline;
}
.spp-checkout-button.spp-style-block { display: block; width: 100%; }

.spp-admin-warning { display: inline-block; padding: 10px; background: #fff3cd; color: #7a5600; border-radius: 6px; }

/* ------------------------------------------------------------------ */
/* Modal shell                                                          */
/* ------------------------------------------------------------------ */

body.spp-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.spp-modal {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-family: var(--spp-font, inherit);
  -webkit-text-size-adjust: 100%;
}
.spp-modal.is-open { display: flex; }

.spp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 17, 25, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.spp-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  max-height: calc(100vh - 28px);
  background: #fff;
  border-radius: var(--spp-radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  color: var(--spp-text);
  animation: spp-pop .22s ease;
}

@supports (height: 100dvh) {
  .spp-modal__panel { max-height: calc(100dvh - 28px); }
}

.spp-modal__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 28px;
}

.spp-modal__grip { display: none; }

.spp-modal__close {
  position: absolute;
  inset-inline-start: 14px;
  top: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #eef3f3;
  color: #30434d;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.spp-modal__close:hover { background: #e2eaea; }

@keyframes spp-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ------------------------------------------------------------------ */
/* Header + summary                                                     */
/* ------------------------------------------------------------------ */

.spp-modal__brand {
  font-size: 12px;
  color: var(--spp-primary);
  font-weight: 700;
  margin-bottom: 7px;
  /* Clears the close button, which is 38px wide at 14px from the edge. */
  padding-inline-start: 58px;
  min-height: 20px;
}
.spp-lock {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-end: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  vertical-align: baseline;
}
.spp-modal h2 { font-size: 24px; line-height: 1.35; margin: 0 0 16px; }

.spp-summary {
  border: 1px solid var(--spp-border);
  border-radius: 14px;
  background: var(--spp-bg);
  overflow: hidden;
}
.spp-summary__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  min-width: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.spp-summary__row:last-child { border-bottom: 0; }
.spp-summary__label { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 55%; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.spp-summary__label small { color: var(--spp-muted); font-size: 12px; font-weight: 400; line-height: 1.6; }
.spp-summary__value { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.spp-summary__value del { color: var(--spp-muted); font-size: 12.5px; }
.spp-summary__value strong { font-size: 15px; }

.spp-summary__row--bump { background: rgba(255, 255, 255, .55); }
.spp-summary__row--bump .spp-summary__label { color: var(--spp-primary); }
.spp-summary__row--save .spp-summary__label,
.spp-summary__row--save .spp-summary__value strong { color: #a32828; font-size: 13px; }
.spp-summary__row--save { background: #fff6f5; }
.spp-summary__row--total { background: #fff; padding-top: 15px; padding-bottom: 15px; }
.spp-summary__row--total .spp-summary__label { font-size: 15px; }
.spp-summary__row--total .spp-summary__value strong { font-size: 20px; color: var(--spp-primary); }

/* ------------------------------------------------------------------ */
/* Stages + form                                                        */
/* ------------------------------------------------------------------ */

.spp-stage { margin-top: 19px; }

.spp-stage label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 14px;
}
.spp-stage label em { font-style: normal; color: var(--spp-muted); font-weight: 400; }
.spp-stage label small { display: block; color: var(--spp-muted); font-size: 11px; font-weight: 400; margin-top: 5px; }

.spp-stage input[type="text"],
.spp-stage input[type="email"],
.spp-stage input[type="tel"] {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #cbd7dc;
  border-radius: 10px;
  padding: 13px;
  margin-top: 6px;
  background: #fff;
  color: var(--spp-text);
  outline: none;
  /* 16px keeps iOS Safari from zooming the page when a field is focused. */
  font: 400 16px var(--spp-font, inherit);
}
.spp-stage input:focus {
  border-color: var(--spp-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--spp-primary) 15%, transparent);
}

.spp-honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

.spp-primary-button {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--spp-primary);
  color: #fff;
  padding: 16px 18px;
  margin-top: 10px;
  font: 700 16px var(--spp-font, inherit);
  cursor: pointer;
  min-height: 52px;
}
.spp-primary-button:hover { background: var(--spp-primary-dark); }
.spp-primary-button:disabled { cursor: wait; opacity: .72; }

.spp-text-button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--spp-muted);
  padding: 13px 0;
  margin-top: 4px;
  font: 600 14px var(--spp-font, inherit);
  cursor: pointer;
  text-decoration: underline;
}
.spp-text-button:disabled { opacity: .5; cursor: wait; }

.spp-back-button {
  border: 0;
  background: transparent;
  color: var(--spp-primary);
  font: 700 13px var(--spp-font, inherit);
  cursor: pointer;
  margin: 0 0 14px;
  padding: 6px 0;
}

/* ------------------------------------------------------------------ */
/* Express checkout (Apple Pay / Google Pay / Link)                      */
/* ------------------------------------------------------------------ */

.spp-express { margin-bottom: 4px; }
.spp-express.is-loading { min-height: 52px; }
.spp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  color: var(--spp-muted);
  font-size: 12px;
}
.spp-divider::before,
.spp-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--spp-border);
}

/* ------------------------------------------------------------------ */
/* Order bump                                                           */
/* ------------------------------------------------------------------ */

.spp-bump:not([hidden]) {
  display: flex !important;
}

.spp-bump {
  gap: 13px;
  align-items: flex-start;
  margin: 20px 0 6px !important;
  padding: 17px;
  border: 2px dashed var(--spp-primary);
  border-radius: 14px;
  background: #f7fbfa;
  background: color-mix(in srgb, var(--spp-primary) 5%, #fff);
  cursor: pointer;
  font-weight: 400 !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.spp-bump.is-on {
  background: #eaf5f3;
  background: color-mix(in srgb, var(--spp-primary) 11%, #fff);
  border-style: solid;
  box-shadow: 0 6px 18px rgba(15, 118, 110, .13);
}
.spp-bump__check { flex: none; display: flex; align-items: center; padding-top: 2px; }
.spp-bump input[type="checkbox"] {
  width: 23px;
  height: 23px;
  margin: 0;
  accent-color: var(--spp-primary);
  cursor: pointer;
}
.spp-bump__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spp-bump__badge {
  align-self: flex-start;
  background: var(--spp-primary);
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 700;
}
.spp-bump__body strong { font-size: 15px; line-height: 1.6; }
.spp-bump__body small { color: var(--spp-muted); font-size: 12.5px; line-height: 1.75; }
.spp-bump__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.spp-bump__prices b { color: var(--spp-primary); font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.spp-bump__prices del { color: #9fadb4; font-size: 12px; opacity: .8; font-weight: 400; }
.spp-bump__prices em {
  font-style: normal;
  background: #feeceb;
  color: #a32828;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Upsell + result                                                      */
/* ------------------------------------------------------------------ */

.spp-upsell { text-align: center; }

/* Paid confirmation — a quiet receipt line, not a competing headline. */
.spp-upsell__done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f1fbf6;
  border: 1px solid #cdeddd;
  color: #087453;
  font-size: 13px;
  font-weight: 700;
}
.spp-upsell__done-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #087453;
  color: #fff;
  font-size: 13px;
  flex: none;
}

/* The offer itself, visually separated so it reads as a bonus, not a second bill. */
.spp-offer-card {
  border: 2px solid var(--spp-primary);
  border-radius: 16px;
  overflow: hidden;
  text-align: start;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 118, 110, .12);
}

.spp-offer-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: var(--spp-primary);
  color: #fff;
}
.spp-offer-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .18);
  flex: none;
}
.spp-offer-card__intro { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.spp-offer-card__intro strong { font-size: 15px; line-height: 1.4; }
.spp-offer-card__intro small { font-size: 12px; opacity: .9; line-height: 1.5; }
.spp-offer-card__head .spp-bump__badge {
  background: #fff;
  color: var(--spp-primary);
  flex: none;
  margin: 0;
}

.spp-offer-card__body { padding: 20px 18px; text-align: center; }
.spp-offer-card__body h3 { font-size: 20px; line-height: 1.5; margin: 0 0 12px; }
.spp-offer-card__body p { color: var(--spp-muted); line-height: 1.85; margin: 0 0 14px; font-size: 14px; }

/* The new price leads on its own line; the old price and the saving sit
   under it, so the eye lands on what is paid before what is saved. */
.spp-upsell__price {
  display: inline-grid;
  justify-items: center;
  gap: 4px;
  background: var(--spp-bg);
  border: 1px solid var(--spp-border);
  border-radius: 14px;
  padding: 13px 26px;
  margin-bottom: 16px;
  line-height: 1.25;
}
.spp-upsell__price b {
  grid-row: 1;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--spp-primary);
  font-variant-numeric: tabular-nums;
}
.spp-upsell__price del {
  grid-row: 2;
  color: #93a3a9;
  font-size: 14px;
  font-weight: 500;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}
.spp-upsell__price em {
  grid-row: 3;
  font-style: normal;
  background: #feeceb;
  color: #a32828;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 3px;
}

/* Typography of the offer itself: a headline that reads as a headline. */
.spp-offer-card__body h3 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0 0 10px;
}
.spp-offer-card__body p {
  font-size: 14.5px;
  line-height: 1.8;
  max-width: 42ch;
  margin-inline: auto;
}
.spp-upsell__note { display: block; color: var(--spp-muted); font-size: 11px; margin-top: 12px; }

.spp-result { text-align: center; padding: 22px 0; }
.spp-result__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #d9f8ea;
  color: #087453;
  font-size: 30px;
  font-weight: 700;
}
.spp-result__icon--sm { width: 42px; height: 42px; font-size: 21px; margin-bottom: 10px; }
.spp-result h3 { margin: 0 0 8px; }
.spp-result p { color: var(--spp-muted); }

/* ------------------------------------------------------------------ */
/* Messages + footer                                                    */
/* ------------------------------------------------------------------ */

.spp-message { margin-top: 14px; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.7; }
.spp-message.is-error { background: #fff0f0; color: #9c1c1c; border: 1px solid #ffd1d1; }
.spp-message.is-success { background: #ecfdf5; color: #087453; border: 1px solid #bcebd9; }

.spp-modal__footer {
  text-align: center;
  color: var(--spp-muted);
  font-size: 11px;
  border-top: 1px solid #edf1f2;
  margin-top: 20px;
  padding-top: 14px;
}

.spp-spinner {
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spp-spin .8s linear infinite;
}
@keyframes spp-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* Phones — bottom sheet                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .spp-modal {
    align-items: flex-end;
    padding: 0;
  }

  /* The pay button follows the customer down the form instead of hiding at the
     bottom of a long card form. */
  .spp-stage .spp-primary-button {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 14px;
    margin-bottom: 0;
    box-shadow: 0 -14px 22px -12px rgba(0, 0, 0, .22);
  }

  .spp-summary__row { padding: 11px 14px; }
  .spp-summary__label { font-size: 13.5px; }
  .spp-summary__value strong { font-size: 14.5px; }

  .spp-modal__panel {
    width: 100%;
    border-radius: 20px 20px 0 0;
    /* --spp-vh is set from visualViewport, so the sheet shrinks with the
       keyboard instead of hiding the pay button behind it. */
    max-height: var(--spp-vh, 92vh);
    animation: spp-slide .26s ease;
  }

  @supports (height: 100dvh) {
    .spp-modal__panel { max-height: var(--spp-vh, 92dvh); }
  }

  .spp-modal__scroll {
    padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .spp-modal__grip {
    display: block;
    width: 44px;
    height: 4px;
    margin: 9px auto 0;
    border-radius: 99px;
    background: #d5dee1;
    flex: none;
  }

  .spp-modal__close {
    top: 16px;
    inset-inline-start: 12px;
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .spp-modal h2 { font-size: 20px; margin-bottom: 14px; }
  .spp-modal__brand { padding-inline-start: 52px; }

  .spp-summary__row { padding: 12px 14px; }
  .spp-summary__row--total .spp-summary__value strong { font-size: 19px; }

  .spp-stage { margin-top: 16px; }
  .spp-primary-button { min-height: 54px; font-size: 16px; }
  .spp-bump { padding: 14px; }
  .spp-bump__body strong { font-size: 14.5px; }

  .spp-checkout-button { width: 100%; }
}

@keyframes spp-slide { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .spp-modal__panel { animation: none; }
  .spp-checkout-button { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Rich upsell — in the modal and on a standalone page                  */
/* ------------------------------------------------------------------ */

.spp-upsell__image {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 4px auto 14px;
  border-radius: 12px;
  border: 1px solid var(--spp-border);
}

.spp-upsell__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  text-align: start;
  display: grid;
  gap: 9px;
}
.spp-upsell__list li {
  position: relative;
  padding-inline-start: 27px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--spp-text);
}
.spp-upsell__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d9f8ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087453' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

.spp-upsell__timer {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff4f4;
  color: #a32828;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.spp-upsell__timer.is-done { opacity: .55; }

/* Standalone page version */
.spp-upsell-page {
  max-width: 520px;
  margin: 32px auto;
  padding: 30px 24px;
  border: 1px solid var(--spp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(22, 46, 58, .08);
  text-align: center;
  font-family: var(--spp-font, inherit);
  color: var(--spp-text);
}
.spp-upsell-page h2 { font-size: 24px; line-height: 1.4; margin: 0 0 14px; }
.spp-upsell-page p { color: var(--spp-muted); line-height: 1.85; margin: 0 0 16px; }
.spp-upsell-page .spp-primary-button { max-width: 380px; margin-inline: auto; }
.spp-upsell-page .spp-text-button { display: inline-block; width: auto; }
.spp-upsell-page--done { padding: 24px; }

@media (max-width: 640px) {
  .spp-upsell-page { margin: 16px 12px; padding: 24px 18px; border-radius: 16px; }
  .spp-upsell-page h2 { font-size: 21px; }
}

.spp-wallet-note {
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px dashed #e2c9a0;
  border-radius: 10px;
  background: #fffaf0;
  color: #7a5600;
  font-size: 12px;
  line-height: 1.85;
}

.spp-modal__panel.is-nudge { animation: spp-nudge .42s ease; }
@keyframes spp-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .spp-modal__panel.is-nudge { animation: none; }
}

.spp-upsell-page .spp-offer-card { text-align: start; }
.spp-upsell-page .spp-offer-card__body { padding: 24px 20px; }

/* ------------------------------------------------------------------ */
/* Steps, trust marks, exit confirmation                                */
/* ------------------------------------------------------------------ */

.spp-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  counter-reset: none;
}
.spp-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--spp-bg);
  border: 1px solid var(--spp-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--spp-muted);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.spp-steps li span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #d6e0e3;
  color: #fff;
  font-size: 11.5px;
  flex: none;
}
.spp-steps li.is-current {
  background: color-mix(in srgb, var(--spp-primary) 9%, #fff);
  border-color: var(--spp-primary);
  color: var(--spp-primary);
}
.spp-steps li.is-current span { background: var(--spp-primary); }
.spp-steps li.is-done { color: #087453; border-color: #cdeddd; background: #f1fbf6; }
.spp-steps li.is-done span { background: #087453; }

.spp-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--spp-border);
}
.spp-trust__cards { display: flex; gap: 6px; flex-wrap: wrap; }
.spp-card-mark {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--spp-border);
  color: var(--mark, var(--spp-muted));
  font: 700 10.5px/1.4 var(--spp-font, inherit);
  letter-spacing: .04em;
  direction: ltr;
}
.spp-trust__note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #087453;
  font-size: 12px;
  font-weight: 600;
}

.spp-leaving { text-align: center; padding: 14px 0 4px; }
.spp-leaving h3 { font-size: 20px; margin: 0 0 10px; }
.spp-leaving p { color: var(--spp-muted); line-height: 1.85; margin: 0 0 8px; font-size: 14.5px; }

@media (max-width: 640px) {
  .spp-steps { margin-bottom: 14px; }
  .spp-steps li { padding: 7px 10px; font-size: 12px; }
}

/* ------------------------------------------------------------------ */
/* Coupons                                                              */
/* ------------------------------------------------------------------ */

.spp-coupon { margin-top: 16px; }

.spp-coupon__toggle {
  border: 0;
  background: none;
  padding: 6px 0;
  color: var(--spp-primary);
  font: 600 13px var(--spp-font, inherit);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spp-coupon__row { display: flex; gap: 8px; }
.spp-coupon__row input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #cbd7dc;
  border-radius: 10px;
  padding: 12px 13px;
  background: #fff;
  color: var(--spp-text);
  font: 600 15px var(--spp-font, inherit);
  letter-spacing: .06em;
  text-transform: uppercase;
  outline: none;
}
.spp-coupon__row input:focus {
  border-color: var(--spp-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--spp-primary) 15%, transparent);
}
.spp-coupon__row button {
  flex: none;
  border: 1px solid var(--spp-primary);
  border-radius: 10px;
  background: #fff;
  color: var(--spp-primary);
  padding: 0 20px;
  font: 700 14px var(--spp-font, inherit);
  cursor: pointer;
}
.spp-coupon__row button:hover { background: var(--spp-primary); color: #fff; }
.spp-coupon__row button:disabled { opacity: .55; cursor: wait; }

.spp-coupon__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #f1fbf6;
  border: 1px dashed #9dd9bf;
  color: #0a6047;
  font-size: 13px;
  font-weight: 700;
}
.spp-coupon__applied button {
  flex: none;
  border: 0;
  background: none;
  color: #0a6047;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: .6;
}
.spp-coupon__applied button:hover { opacity: 1; }

.spp-coupon__error {
  display: block;
  margin-top: 7px;
  color: #9c1c1c;
  font-size: 12.5px;
  line-height: 1.7;
}

.spp-summary__row--coupon { background: #f7fdfa; }
.spp-summary__row--coupon .spp-summary__label,
.spp-summary__row--coupon .spp-summary__value strong { color: #0a6047; font-size: 13.5px; }

/* ------------------------------------------------------------------ */
/* Customer order status page                                           */
/* ------------------------------------------------------------------ */

.spp-status-card {
  max-width: 520px;
  margin: 30px auto;
  border: 1px solid var(--spp-border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 40px rgba(22, 46, 58, .07);
  font-family: var(--spp-font, inherit);
  color: var(--spp-text);
  direction: rtl;
}
.spp-status-card--empty { padding: 26px; text-align: center; color: var(--spp-muted); }
.spp-status-card--empty p { margin: 0; }

.spp-status-card__head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px;
  background: var(--spp-bg);
  border-bottom: 1px solid var(--spp-border);
}
.spp-status-card__head strong { font-size: 19px; line-height: 1.5; }
.spp-status-card__head small { color: var(--spp-muted); font-size: 13.5px; line-height: 1.8; }
.spp-status-card__badge {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #e6eef1;
  color: #52626b;
}
.spp-tone-green .spp-status-card__badge { background: #dcf8eb; color: #087453; }
.spp-tone-red .spp-status-card__badge { background: #feeceb; color: #a32828; }
.spp-tone-orange .spp-status-card__badge { background: #fff0d9; color: #935a00; }
.spp-tone-blue .spp-status-card__badge { background: #e6f0fb; color: #1d5f9c; }

.spp-status-card__rows { margin: 0; padding: 8px 22px; }
.spp-status-card__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--spp-border);
  font-size: 14px;
}
.spp-status-card__rows > div:last-child { border-bottom: 0; }
.spp-status-card__rows dt { color: var(--spp-muted); margin: 0; }
.spp-status-card__rows dd { margin: 0; font-weight: 600; }
.spp-status-card__rows .is-total dd { color: var(--spp-primary); font-size: 18px; font-weight: 800; }
.spp-status-card__save { color: #0a6047; font-size: 12.5px; }

.spp-status-card .spp-primary-button { width: calc(100% - 44px); margin: 6px 22px 0; text-align: center; text-decoration: none; display: block; }
.spp-status-card__note { display: block; padding: 16px 22px 20px; color: var(--spp-muted); font-size: 11.5px; text-align: center; }

@media (max-width: 640px) {
  .spp-status-card { margin: 16px 12px; }
  .spp-status-card__head { padding: 18px; }
  .spp-status-card__rows { padding: 6px 18px; }
  .spp-status-card .spp-primary-button { width: calc(100% - 36px); margin-inline: 18px; }
}

/* ------------------------------------------------------------------ */
/* Offers block — shared by both stages                                 */
/*                                                                      */
/* The bump and the coupon field used to live inside the card form, so   */
/* wallet buyers (who never reach that stage) could take neither.        */
/* ------------------------------------------------------------------ */
.spp-offers{display:grid;gap:12px;margin-bottom:16px}
.spp-offers:empty{display:none}
.spp-offers > [hidden]{display:none!important}

/* ==================================================================== */
/* Isolation layer                                                       */
/*                                                                       */
/* The modal is injected into pages this plugin does not control, and     */
/* landing-page CSS routinely ships "defensive" rules aimed at it — the   */
/* pattern [class*="spp-modal"]{max-width:620px!important} is common in   */
/* AI-generated pages. Applied to the full-screen overlay and its         */
/* backdrop, that collapses the checkout into a corner and blanks the     */
/* page behind it, and a merchant reads it as a broken plugin.            */
/*                                                                       */
/* !important ties are resolved by specificity, so these selectors are    */
/* deliberately heavier than anything a page would reasonably write, and  */
/* they pin only the geometry the checkout cannot survive without.        */
/* ==================================================================== */

html body .spp-modal.spp-modal {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  overflow: hidden !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  z-index: 999999 !important;
}
html body .spp-modal.spp-modal.is-open { display: flex !important; }

html body .spp-modal.spp-modal .spp-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

html body .spp-modal.spp-modal .spp-modal__panel {
  position: relative !important;
  width: min(100%, 520px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  transform: none !important;
}

html body .spp-modal.spp-modal .spp-modal__scroll {
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

html body .spp-modal.spp-modal .spp-modal__close {
  position: absolute !important;
  inset-inline-start: 14px !important;
  inset-inline-end: auto !important;
  top: 12px !important;
  bottom: auto !important;
  margin: 0 !important;
}

@media (min-width: 641px) {
  html body .spp-modal.spp-modal .spp-modal__panel {
    max-height: calc(100vh - 28px) !important;
    border-radius: var(--spp-radius) !important;
  }
  @supports (height: 100dvh) {
    html body .spp-modal.spp-modal .spp-modal__panel { max-height: calc(100dvh - 28px) !important; }
  }
}

@media (max-width: 640px) {
  html body .spp-modal.spp-modal .spp-modal__panel {
    width: 100% !important;
    max-height: var(--spp-vh, 92vh) !important;
    border-radius: 20px 20px 0 0 !important;
  }
  @supports (height: 100dvh) {
    html body .spp-modal.spp-modal .spp-modal__panel { max-height: var(--spp-vh, 92dvh) !important; }
  }
}

/* ==================================================================== */
/* Wallet block, step indicator, and overflow hardening (2.7.0)          */
/* ==================================================================== */

/* The wallet route is the fastest path to a sale on a phone, so it reads as
   an offer of its own rather than a stray button above a form. */
.spp-express { margin: 4px 0 0; min-width: 0; max-width: 100%; overflow: hidden; }
.spp-express__lead {
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--spp-primary);
  text-align: center;
}
.spp-express #spp-express-element { min-width: 0; max-width: 100%; }
.spp-divider { margin: 16px 0 2px; }

/* Nothing inside the sheet may be wider than the sheet. A single wide child —
   a wallet button row, a long product name — used to push the panel past the
   viewport, which on RTL shifts the whole modal sideways and clips the labels. */
html body .spp-modal.spp-modal .spp-modal__scroll > * { min-width: 0; max-width: 100%; }
html body .spp-modal.spp-modal iframe { max-width: 100% !important; }

/* A page's CSS must never be able to reveal a stage that should be hidden —
   that is how two sets of buttons ended up stacked on one screen. */
html body .spp-modal.spp-modal [hidden] { display: none !important; }

/* Step indicator: where you are, and what you have already done. */
.spp-steps li {
  background: #f2f5f6;
  border-color: #e3eaec;
  color: #7a8b93;
}
.spp-steps li span { background: #c2ced3; font-weight: 700; }
.spp-steps li.is-current {
  background: var(--spp-primary);
  border-color: var(--spp-primary);
  color: #fff;
  box-shadow: 0 6px 16px -8px var(--spp-primary);
}
.spp-steps li.is-current span { background: rgba(255, 255, 255, .28); color: #fff; }
.spp-steps li.is-done {
  background: #eafaf2;
  border-color: #bfe8d4;
  color: #0b6b4c;
}
.spp-steps li.is-done span { background: #0b6b4c; color: #fff; font-size: 0; }
.spp-steps li.is-done span::after { content: "✓"; font-size: 12px; }

/* ==================================================================== */
/* No zoom, no sideways drift (2.7.1)                                    */
/* ==================================================================== */

/* iOS Safari zooms the whole page when a field smaller than 16px takes
   focus, and it does not zoom back out. A landing page that styles its own
   inputs at 14px reaches ours too, so the size is pinned here at a
   specificity no page rule can beat. This is the entire cause of "the form
   suddenly gets huge and I can no longer see the popup". */
html body .spp-modal.spp-modal input,
html body .spp-modal.spp-modal select,
html body .spp-modal.spp-modal textarea {
  font-size: 16px !important;
  line-height: 1.4 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body .spp-modal.spp-modal input[type="checkbox"],
html body .spp-modal.spp-modal input[type="radio"] {
  width: auto !important;
  max-width: none !important;
}
html body .spp-modal.spp-modal {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  touch-action: manipulation;
}

/* Padding must never add to a width the sheet already fills. */
html body .spp-modal.spp-modal *,
html body .spp-modal.spp-modal *::before,
html body .spp-modal.spp-modal *::after {
  box-sizing: border-box;
}

/* `overflow-x: hidden` still builds a scroll container, and the browser may
   scroll it sideways to reveal a focused field — inside an RTL sheet that
   pushes every heading off the right edge, which is the shift seen on step 2.
   `clip` refuses to scroll at all. */
@supports (overflow: clip) {
  html body .spp-modal.spp-modal { overflow: clip !important; }
  html body .spp-modal.spp-modal .spp-modal__panel { overflow-x: clip !important; }
  html body .spp-modal.spp-modal .spp-modal__scroll { overflow-x: clip !important; }
}

/* The clamp on direct children left the card form — nested three levels down —
   free to be wider than the sheet. */
html body .spp-modal.spp-modal .spp-stage,
html body .spp-modal.spp-modal .spp-stage > *,
html body .spp-modal.spp-modal .spp-offers,
html body .spp-modal.spp-modal .spp-offers > *,
html body .spp-modal.spp-modal .spp-express,
html body .spp-modal.spp-modal .spp-express > *,
html body .spp-modal.spp-modal #spp-payment-element,
html body .spp-modal.spp-modal #spp-payment-element > *,
html body .spp-modal.spp-modal #spp-express-element,
html body .spp-modal.spp-modal #spp-express-element > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Every extra pixel of side padding is a pixel the card form does not have. */
@media (max-width: 400px) {
  .spp-modal__scroll { padding-left: 14px; padding-right: 14px; }
  .spp-modal h2 { font-size: 18.5px; }
}

/* Until the card form reports ready, pressing pay can only produce an error. */
.spp-primary-button.is-preparing { opacity: .62; cursor: progress; }

/* ==================================================================== */
/* Price hold (2.9.0)                                                    */
/* ==================================================================== */

/* Urgency the customer can verify. The clock counts a real server-side hold,
   and it stops — visibly, as a reward — the moment they reach the payment
   step, so it can never lapse while a card number is being typed. */
.spp-hold {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #fff8ed;
  border: 1px solid #f0dcb8;
  color: #8a5a06;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;
}
.spp-hold::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
}
.spp-hold.is-urgent {
  background: #fff1f0;
  border-color: #f3c9c4;
  color: #a32828;
}
.spp-hold.is-locked {
  background: #eafaf2;
  border-color: #bfe8d4;
  color: #0b6b4c;
}
.spp-hold.is-locked::before {
  content: "✓";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  opacity: 1;
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .spp-hold.is-urgent::before { animation: spp-pulse 1.1s ease-in-out infinite; }
}
@keyframes spp-pulse { 50% { opacity: .25; } }

/* ==================================================================== */
/* Phone: the country travels with the number (3.5.0)                    */
/* ==================================================================== */

/* One field, two controls. The whole row reads left-to-right — like the
   number itself — so the dial code sits on the left, right where a customer
   typing "+968 5xxxxxxxx" expects it, instead of trailing an RTL flex order
   at the far side of the box the digits start from. */
.spp-phone {
  display: flex;
  direction: ltr;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
}

.spp-phone__country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid #cbd7dc;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.spp-phone__country::after {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: var(--spp-muted);
  margin-top: 3px;
}
.spp-phone__flag { font-size: 19px; line-height: 1; }
.spp-phone__dial {
  font: 600 15px var(--spp-font, inherit);
  color: var(--spp-text);
  unicode-bidi: isolate;
}

/* The real <select> covers its own row and stays invisible: tapping anywhere on
   the box opens the platform's own country wheel, which is searchable, scrolls
   at sixty frames a second and needs no code of ours. A hand-built dropdown
   would be worse on every phone this shop actually sells to. */
.spp-phone__country select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.spp-phone input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0 !important;
  text-align: left;
}

.spp-stage label.spp-phone-label:focus-within .spp-phone__country {
  border-color: var(--spp-primary);
}