/* ============================================================
   Pop-up checkout (CheckoutModal) — styled to match the MOSS Wallet SDK
   pop-up (account.megaeth.com): a single white card on a dark dimmed
   backdrop, faint botanical watermark, MOSS green actions, Helvetica Neue.
   The merchant chip shows the merchant's own logo, exactly as the real wallet shows it.
   Sizes are in px, independent of the storefront's enlarged rem scale.
   ============================================================ */

/* ---- Host-CSS isolation ----
   Storefront themes (Flatsome, Wix, etc.) set global button text-transform /
   letter-spacing and heading font-family that cascade INTO this injected
   modal, making it render UPPERCASE, wide-spaced, and in the wrong font on the
   demo sites (the standalone app has no such theme, so it looked fine there).
   Force the modal's own typography on every descendant — including the
   separately-portaled payment sheet. !important beats host rules regardless of
   their specificity, as long as the host rule itself isn't !important. */
.co-overlay, .co-overlay *, .co-overlay *::before, .co-overlay *::after,
.co-sheet-overlay, .co-sheet-overlay *, .co-sheet-overlay *::before, .co-sheet-overlay *::after {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  font-style: normal !important;
  text-decoration: none !important;
}

.co-overlay {
  --moss-green: #3f7357;
  --moss-green-dark: #335f48;
  --moss-ink: #0f211a;
  --moss-sub: #5f6f66;
  --moss-line: #e4e1db;
  --moss-sand: #f4f2ee;
  --moss-mint: #e6efe9;

  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  background: rgba(13, 22, 17, 0.58);
  backdrop-filter: blur(2px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--moss-ink);
  animation: co-overlay-in 0.25s ease both;
}

@keyframes co-overlay-in {
  from {
    opacity: 0;
  }
}

/* the card (mirrors the wallet pop-up card) — sand surface.
   zoom scales the whole card (text, spacing, buttons) ~20% larger overall;
   the narrower base width + taller body padding make it 10% narrower / taller. */
.co-panel {
  position: relative;
  width: 100%;
  max-width: 413px;
  margin: auto;
  zoom: 0.864;
  background: var(--moss-sand);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(8, 24, 16, 0.42);
  overflow: hidden;
  animation: co-panel-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes co-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

/* Narrow viewports (phones, split/half-width windows): the card is a fixed
   size, so on a small window it would fill ~80%+ of the width with desktop-
   sized type and read as oversized. Scale the WHOLE card down proportionally
   (text + spacing together via zoom) so it stays a compact centered popup with
   comfortable margins. Desktop (>=600px) keeps the original look. */
@media (max-width: 600px) {
  .co-overlay {
    padding: 24px 14px;
  }
  .co-panel {
    zoom: 0.76;
  }
}
@media (max-width: 440px) {
  .co-overlay {
    padding: 16px 12px;
  }
  .co-panel {
    zoom: 0.68;
  }
}
@media (max-width: 360px) {
  .co-panel {
    zoom: 0.6;
  }
}

/* ============================================================
   Inline (integrated) checkout — the same MOSS card embedded
   directly in the host checkout page instead of a pop-up overlay.
   The widget mounts it inside a Shadow DOM, so it fills whatever
   container the host gives it and reflows to that container's width.
   ============================================================ */
.co-embed,
.co-embed *,
.co-embed *::before,
.co-embed *::after {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  font-style: normal !important;
  text-decoration: none !important;
}

.co-embed {
  --moss-green: #3f7357;
  --moss-green-dark: #335f48;
  --moss-ink: #0f211a;
  --moss-sub: #5f6f66;
  --moss-line: #e4e1db;
  --moss-sand: #f4f2ee;
  --moss-mint: #e6efe9;

  position: relative;
  color: var(--moss-ink);
  /* react to the host column width, not the viewport, so the same module fits
     a roomy checkout column or a tight sidebar with no per-site tuning */
  container-type: inline-size;
  /* mobile safety net: never push a horizontal scrollbar onto the host page,
     no matter how narrow the phone column gets */
  max-width: 100%;
  overflow-x: clip;
}

/* defensive: nothing inside the card may exceed the container width on mobile */
.co-embed * {
  max-width: 100%;
}

.co-embed .co-input,
.co-embed .co-primary,
.co-embed .co-applepay,
.co-embed .co-gpay,
.co-embed .co-signbtn,
.co-embed .co-method {
  box-sizing: border-box;
}

/* Reuse the pop-up card, but un-overlay it and let it FILL its container flush
   to the edges: square corners, no border, no shadow (the host's payment option
   frames it), no zoom (width is fluid), no entrance pop. */
.co-embed .co-panel {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

/* Fluid breathing room; caps the readable content so a very wide host column
   doesn't stretch the single-column steps into a banner. */
.co-embed .co-body-inner {
  padding: 46px clamp(24px, 7%, 64px) 50px;
}

.co-embed .co-body-inner > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Locked gate — dim + block the card until the host clears a prerequisite. */
.co-embed.locked .co-panel {
  opacity: 0.5;
  filter: grayscale(0.25);
  pointer-events: none;
  user-select: none;
}

.co-gate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--moss-green);
  cursor: pointer;
}

.co-gate svg {
  flex-shrink: 0;
}

/* Inline back control — floats in the card's top-left (the inline variant has
   no header bar). Sits in the body's top padding, above the step heading. */
.co-iback {
  position: absolute;
  top: 14px;
  left: 12px;
  z-index: 3;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 9px;
  color: rgba(15, 33, 26, 0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.co-iback:hover {
  background: rgba(15, 33, 26, 0.06);
  color: var(--moss-ink);
}

@container (max-width: 380px) {
  .co-iback {
    top: 10px;
    left: 8px;
  }
}

/* Apple Pay / Google Pay wallet pair. Stacked by default (so the pop-up, which
   has no container context, keeps its single column). When the embed's host
   column is wide enough, they sit side by side — driven by the CONTAINER width,
   so the module reflows to whatever layout each site gives it. */
.co-wallets {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 16px;
}

.co-wallets > button {
  margin: 0;
}

@container (min-width: 430px) {
  .co-wallets {
    flex-direction: row;
  }
  .co-wallets > button {
    flex: 1;
    min-width: 0;
  }
}

/* Tight phone columns: trim the gutters + heading so the card stays comfortable
   when the host's payment column is only ~320–380px wide. Driven by the
   CONTAINER width, so it triggers on a real phone AND in a narrow desktop
   sidebar — wherever the card actually is. */
@container (max-width: 380px) {
  .co-embed .co-body-inner {
    padding: 34px 18px 38px;
  }
  .co-embed .co-h1 {
    font-size: 22px;
  }
  .co-embed .co-signbtn,
  .co-embed .co-method {
    padding-left: 14px;
    padding-right: 14px;
    gap: 11px;
  }
}

/* ---------- header bar ---------- */
.co-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

/* ---------- checkout progress bar (sits under the header) ---------- */
.co-stepbar {
  position: relative;
  z-index: 1;
  height: 3px;
  background: rgba(15, 33, 26, 0.07);
}

.co-stepbar-fill {
  display: block;
  height: 100%;
  background: var(--moss-green);
  border-radius: 0 99px 99px 0;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* merchant logo mark */
.co-merch-logo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.co-merch-logo.sm {
  height: 30px;
}

.co-merch-id {
  line-height: 1.25;
  min-width: 0;
}

.co-merch-name {
  font-weight: 700;
  font-size: 16px;
}

.co-merch-tag {
  font-size: 12px;
  color: var(--moss-sub);
}

.co-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.co-x {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 10px;
  color: var(--moss-sub);
  display: grid;
  place-items: center;
}

.co-x:hover {
  background: var(--moss-sand);
  color: var(--moss-ink);
}

/* Collapsing slot that slides the back button in/out, sliding the logo with it.
   margin-right cancels the header's 12px gap while collapsed so the logo stays
   flush-left when there's no back button. */
.co-back-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  width: 0;
  margin-right: -12px;
  opacity: 0;
  transition:
    width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease;
}

.co-back-wrap.show {
  width: 28px;
  margin-right: 0;
  opacity: 1;
}

.co-back {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 9px;
  color: rgba(15, 33, 26, 0.45);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.co-back:hover {
  color: rgba(15, 33, 26, 0.8);
}

/* ---------- body & footer ---------- */
.co-body {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.co-body-inner {
  padding: 50px 28px 52px;
}

.co-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  border-top: 1px solid var(--moss-line);
  font-size: 12px;
  color: var(--moss-sub);
}

.co-foot b {
  color: rgba(15, 33, 26, 0.7);
  font-weight: 700;
}

/* MOSS wordmark in the footer — sized to sit in line with the adjacent text */
.co-moss-logo {
  height: 13px;
  width: auto;
  display: block;
}

/* ---------- typography ---------- */
.co-h1 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}

.co-h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 20px 0 0;
}

.co-sub {
  font-size: 14px;
  color: var(--moss-sub);
  line-height: 1.5;
  margin-bottom: 7px;
}

.co-sub b {
  color: rgba(15, 33, 26, 0.82);
  font-weight: 600;
}

.co-narrow {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.co-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--moss-green);
  margin: 3px 0 20px;
}

.co-legal {
  text-align: center;
  font-size: 12px;
  color: #8a948d;
  line-height: 1.5;
  margin-top: 20px;
}

.co-center {
  text-align: center;
}

/* ---------- sign-in option buttons ---------- */
.co-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.co-signbtn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--moss-line);
  border-radius: 15px;
  text-align: left;
}

.co-signbtn:hover {
  border-color: #cfccc5;
  background: #fcfbf9;
}

.co-signbtn-ico {
  display: grid;
  place-items: center;
  width: 24px;
  color: var(--moss-ink);
}

.co-signbtn-main {
  flex: 1;
}

.co-signbtn-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.co-signbtn-sub {
  display: block;
  font-size: 12px;
  color: var(--moss-sub);
  margin-top: 2px;
}

.co-chev {
  flex-shrink: 0;
  color: rgba(15, 33, 26, 0.28);
  transition: transform 0.2s ease;
}

.co-chev.open {
  transform: rotate(90deg);
}

/* ---------- divider ---------- */
.co-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 12px;
  color: rgba(15, 33, 26, 0.4);
}

.co-divider-line {
  flex: 1;
  height: 1px;
  background: var(--moss-line);
}

/* ---------- buttons ---------- */
.co-primary {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 15px;
  background: var(--moss-green);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.co-primary:hover:not(:disabled) {
  background: var(--moss-green-dark);
}

.co-primary:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.co-applepay {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 15px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 11px;
}

/* Apple mark 10% larger here only (sign-in "Continue with Apple" unaffected) */
.co-applepay svg {
  width: 22px;
  height: 22px;
}

.co-applepay:hover {
  background: #1c1c1c;
}

.co-gpay {
  width: 100%;
  height: 56px;
  border: 1px solid var(--moss-line);
  border-radius: 15px;
  background: #fff;
  color: var(--moss-ink);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 16px;
}

.co-gpay:hover {
  border-color: #cfccc5;
}

/* ---------- method rows (card / USDm) ---------- */
.co-method {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  margin-top: 11px;
  background: #fff;
  border: 1px solid var(--moss-line);
  border-radius: 15px;
  text-align: left;
}

.co-method:hover {
  border-color: #cfccc5;
  background: #fcfbf9;
}

.co-method-ico {
  flex-shrink: 0;
  color: rgba(15, 33, 26, 0.7);
}

.co-method-main {
  flex: 1;
}

.co-method-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.co-method-sub {
  display: block;
  font-size: 12px;
  color: var(--moss-sub);
  margin-top: 2px;
}

.co-method-coin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

/* ---------- smooth slide-down reveal (card form, payment details) ---------- */
.co-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.co-reveal.open {
  grid-template-rows: 1fr;
}

.co-reveal-inner {
  overflow: hidden;
  min-height: 0;
}

/* ---------- fields ---------- */
.co-field {
  display: block;
}

.co-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--moss-sub);
  margin-bottom: 6px;
}

.co-input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--moss-line);
  border-radius: 13px;
  background: #fff;
  padding: 0 15px;
  font-size: 15px;
  font-family: inherit;
  color: var(--moss-ink);
}

.co-input:focus {
  outline: none;
  border-color: var(--moss-green);
  background: #fff;
}

.co-cardform {
  padding: 13px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* gap below a standalone field before the button that follows it */
.co-field--mb {
  margin-bottom: 16px;
}

.co-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.co-sim {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--moss-sub);
}

.co-sim input {
  width: 16px;
  height: 16px;
  accent-color: #c0262d;
}

/* ---------- email code inputs ---------- */
.co-code {
  display: flex;
  gap: 9px;
  justify-content: space-between;
  margin-bottom: 9px;
}

.co-code input {
  width: 100%;
  height: 58px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border: 1px solid var(--moss-line);
  border-radius: 13px;
  background: #fff;
  color: var(--moss-ink);
  font-family: inherit;
}

.co-code input:focus {
  outline: none;
  border-color: var(--moss-green);
  background: #fff;
}

.co-code input.err {
  border-color: #e06b6b;
  background: #fdf0f0;
}

.co-err {
  font-size: 12.5px;
  color: #c0262d;
  margin-bottom: 9px;
}

.co-note {
  margin-top: 10px;
}

.co-center-text {
  text-align: center;
}

.co-hint {
  font-size: 12.5px;
  color: var(--moss-sub);
  margin-bottom: 20px;
}

.co-hint-dim {
  color: rgba(15, 33, 26, 0.3);
}

.co-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--moss-green);
}

/* ---------- passkey step ---------- */
.co-glyph {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--moss-mint);
  color: var(--moss-green);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.co-benefits {
  list-style: none;
  max-width: 320px;
  margin: 0 auto 24px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co-benefit {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: rgba(15, 33, 26, 0.8);
}

.co-benefit-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--moss-mint);
  color: var(--moss-green);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.co-whatis {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  font-size: 12.5px;
  font-family: inherit;
  color: rgba(15, 33, 26, 0.45);
}

.co-whatis:hover {
  color: rgba(15, 33, 26, 0.7);
}

.co-info {
  margin-top: 12px;
  padding: 13px;
  border-radius: 13px;
  text-align: left;
  background: #fdf6e9;
  color: #9a6a16;
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- simulated OS passkey sheet ---------- */
.co-sheet-overlay {
  /* This overlay is portaled to <body>, outside .co-overlay, so it needs its
     own copy of the MOSS tokens + font — otherwise var(--moss-green) is
     undefined and the green "Continue" button renders transparent. */
  --moss-green: #3f7357;
  --moss-green-dark: #335f48;
  --moss-ink: #0f211a;
  --moss-sub: #5f6f66;
  --moss-line: #e4e1db;
  --moss-sand: #f4f2ee;
  --moss-mint: #e6efe9;

  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--moss-ink);
}

.co-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(4px);
}

.co-sheet {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 12px;
  padding: 26px;
  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.3);
}

.co-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.co-sheet-name {
  font-size: 15px;
  font-weight: 700;
}

.co-sheet-host {
  font-size: 12px;
  color: var(--moss-sub);
}

.co-sheet-body {
  text-align: center;
  padding: 8px 0 18px;
}

.co-sheet-badge {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  margin: 0 auto;
  background: rgba(15, 33, 26, 0.06);
  color: var(--moss-ink);
  display: grid;
  place-items: center;
}

.co-sheet-badge.done {
  border-radius: 50%;
  background: var(--moss-mint);
  color: var(--moss-green);
}

.co-sheet-title {
  font-size: 17px;
  font-weight: 800;
  margin-top: 18px;
}

.co-sheet-sub {
  font-size: 12.5px;
  color: var(--moss-sub);
  margin-top: 4px;
}

@media (min-width: 480px) {
  .co-sheet-overlay {
    align-items: center;
  }
  .co-sheet {
    border-radius: 26px;
  }
}

/* ---------- spinner / processing ---------- */
.co-spinner {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--moss-mint);
  border-top-color: var(--moss-green);
  animation: co-spin 0.8s linear infinite;
}

.co-spinner-lg {
  width: 52px;
  height: 52px;
  border-width: 3px;
}

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

.co-pad {
  padding: 40px 0;
}

.co-progress {
  width: 240px;
  max-width: 80%;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 99px;
  background: rgba(15, 33, 26, 0.08);
  overflow: hidden;
}

.co-progress-bar {
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: var(--moss-green);
  animation: co-bar 1.4s ease-in-out infinite;
}

@keyframes co-bar {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(360%);
  }
}

/* ---------- confirmation ---------- */
.co-check {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--moss-mint);
  color: var(--moss-green);
  display: grid;
  place-items: center;
}

.co-check-lg {
  width: 32px;
  height: 32px;
}

.co-receipt {
  text-align: left;
  margin: 20px 0 16px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--moss-line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.co-kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.co-kv-k {
  color: rgba(15, 33, 26, 0.5);
}

.co-kv-v {
  color: rgba(15, 33, 26, 0.86);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.co-kv-v.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* payment-method tag on the confirmation (icon + label / masked card) */
.co-mtag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.co-mtag-coin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
}

.co-paydetails {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  background: none;
  border: none;
  font-size: 12.5px;
  font-family: inherit;
  color: rgba(15, 33, 26, 0.45);
}

.co-paydetails:hover {
  color: rgba(15, 33, 26, 0.7);
}

.co-details {
  text-align: left;
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--moss-line);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.co-secondary {
  width: 100%;
  height: 50px;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--moss-sub);
}

.co-secondary:hover {
  color: var(--moss-ink);
}

/* ---------- declined banner ---------- */
.co-banner {
  margin-bottom: 16px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #fdf0f0;
  border: 1px solid #f4cccc;
}

.co-banner-title {
  font-size: 14px;
  font-weight: 700;
  color: #c0262d;
}

.co-banner-body {
  font-size: 12.5px;
  color: #cf5b5b;
  margin-top: 2px;
}

/* ---------- animations ---------- */
.co-fadeup {
  animation: co-fadeup 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes co-fadeup {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.co-pop {
  animation: co-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes co-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.08);
  }
}

/* ============================================================
   Checkout page — accepted-methods strip that replaces the old
   inline payment drop-down (uses the storefront's rem scale).
   ============================================================ */
.pm-accepted {
  border: 1px solid #d4d4dc;
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-accepted-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.pm-accepted-marks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.pm-accepted-marks .usdm-logo {
  width: 26px;
  height: 26px;
}

.pm-accepted-note {
  font-size: 0.95rem;
  color: var(--ink-soft);
}