/* Layout-only skin for the pinned purchases-js SDK. Card fields, validation,
   totals and the real submit button remain provider-owned. No generated
   Svelte selectors, moved DOM nodes or replacement payment controls. */
#webCheckout .rcb-ui-container.inside {
  height: auto;
  overflow: visible;
}
#webCheckout #layout-query-container {
  height: auto;
  container-type: inline-size;
  overflow: visible;
}
#webCheckout .rcb-ui-layout {
  flex-direction: column;
  min-height: 0;
}
#webCheckout .rcb-ui-navbar {
  width: 100%;
}
#webCheckout .layout-wrapper-outer {
  width: 100%;
  padding: 0;
  flex: none;
}
#webCheckout .layout-wrapper {
  flex-basis: auto;
  width: 100%;
  min-width: 0;
}
#webCheckout .layout-content {
  padding: 0;
  gap: 16px;
  height: auto;
}
#webCheckout .navbar-body {
  padding: 0 0 24px;
  border-bottom: 2px solid #e2e7ec;
}
#webCheckout .navbar-header {
  display: none;
}
#webCheckout .rcb-main-block.layout-content {
  padding-top: 24px;
}
#webCheckout .rcb-subscribe-to {
  display: none;
}
#webCheckout .rcb-pricing-info {
  gap: 20px;
}
#webCheckout .rcb-pricing-info > .rcb-pricing-info-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
}
#webCheckout .rcb-product-title .rcb-typography {
  font:
    800 18px/1.5 Nunito,
    sans-serif;
}
#webCheckout .rcb-product-price-container .rcb-typography {
  font:
    700 18px/1.5 Nunito,
    sans-serif;
}
#webCheckout .rcb-pricing-table .rcb-typography {
  font:
    800 16px/1.5 Nunito,
    sans-serif;
}
#webCheckout .rc-checkout-secure-container {
  margin-top: 24px;
}
#webCheckout .footer-caption {
  text-align: left;
}
#webCheckout .rc-checkout-pay-container {
  margin-top: 24px;
}
#webCheckout .rc-checkout-pay-container button {
  width: 100%;
}
#webCheckout .rc-checkout-pay-container button .rcb-typography {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  #webCheckout * {
    animation: none !important;
    transition: none !important;
  }
}
/* The step before card details uses summary rows, labelled fields and a
   fixed action bar. The status and plan legend remain available to assistive tech. */
.checkout-page .payment-panel:is([data-phase="ready"], [data-phase="consent"]) .payment-message,
.checkout-page .payment-plans legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.checkout-page .payment-plans {
  gap: 4px;
  margin: 0;
}
.checkout-page .payment-plans label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 4px 0;
  font:
    800 18px/1.5 Nunito,
    sans-serif;
  cursor: pointer;
}
.checkout-page .payment-panel .payment-plans input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #0879ba;
}
/* Once a plan is chosen, checkout shows it as one summary row. */
.checkout-page .payment-panel[data-phase="consent"] .payment-plans label:not(:has(input:checked)),
.checkout-page .payment-panel[data-phase="consent"] .payment-plans input {
  display: none;
}
.checkout-page .payment-panel[data-phase="consent"] .payment-plans label {
  cursor: default;
}
.checkout-page .payment-plan-price {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}
.checkout-page .payment-disclosure,
.checkout-page [data-payment-email-note] {
  color: #596579;
  font-size: 14px;
  font-weight: 600;
}
.checkout-page [data-payment-disclosure] {
  margin: 2px 0 0;
}
.checkout-page .payment-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 0;
  padding-bottom: 24px;
  border-bottom: 2px solid #e2e7ec;
  font-weight: 800;
}
.checkout-page .payment-panel [data-payment-email-note] {
  margin: 24px 0 0;
}
.checkout-page .payment-web-consent {
  margin-top: 24px;
}
.checkout-page .payment-panel .payment-field {
  margin: 0 0 8px;
  color: #596579;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.checkout-page .payment-panel .payment-field input {
  min-height: 60px;
  margin-top: 10px;
  padding: 0 20px;
  border: 2px solid #e2e7ec;
  border-radius: 16px;
  color: #46536a;
  font:
    700 17px/1.4 Nunito,
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.checkout-page .payment-field input::placeholder {
  color: #a3acb9;
}
.checkout-page .payment-panel .payment-consent-choice {
  padding: 16px 0 0;
}
.checkout-page .payment-fineprint {
  margin: 16px 0 0;
}
.checkout-page .payment-fineprint a {
  color: #0879ba;
  text-underline-offset: 3px;
}
.checkout-page .payment-panel [data-web-consent-submit] {
  margin-top: 24px;
}
/* The consent form and provider checkout share the same action appearance
   and phone bar. Each keeps its own real submit control and visibility. */
#webCheckout .rc-checkout-pay-container button,
.checkout-page .payment-panel :is([data-payment-buy], [data-web-consent-submit]) {
  min-height: 54px;
  border-radius: 16px;
  font:
    900 16px/1.3 Nunito,
    sans-serif;
  letter-spacing: 0.3px;
}
@media (max-width: 767px) {
  #webCheckout .rc-checkout-pay-container::before,
  .checkout-page:has(
      [data-payment-panel]:not([hidden]) :is([data-payment-buy]:not([hidden]), [data-web-consent]:not([hidden]))
    )::after {
    content: "";
    position: fixed;
    inset: auto 0 0;
    height: calc(96px + env(safe-area-inset-bottom));
    border-top: 2px solid #e2e7ec;
    background: #fff;
    z-index: 20;
    pointer-events: none;
    box-sizing: border-box;
  }
  #webCheckout .rc-checkout-pay-container button,
  .checkout-page .payment-panel :is([data-payment-buy], [data-web-consent-submit]) {
    position: fixed;
    z-index: 21;
    inset: auto 18px max(24px, env(safe-area-inset-bottom));
    width: calc(100% - 36px);
  }
  .checkout-page .payment-panel :is([data-payment-buy], [data-web-consent-submit]) {
    margin: 0;
  }
}
/* While checkout checks a buyer's access, and again while it confirms a
   payment, the page shows the app's three bouncing dots (page-loader.css)
   over the status line, centred under the title, and none of its links or
   actions yet (the owner, 1 Oct 2026: the half-built page looked broken). The
   page's own placeholder wears the same look until the panel takes over. */
.checkout-page {
  --brand: #36bffa;
}
.checkout-page .payment-loader {
  display: none;
}
.checkout-page .payment-panel:is([data-phase="loading"], [data-phase="verifying"]) .payment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 40vh;
  text-align: center;
}
.checkout-page .payment-panel:is([data-phase="loading"], [data-phase="verifying"]) .payment-loader {
  display: flex;
}
.checkout-page
  .payment-panel:is([data-phase="loading"], [data-phase="verifying"])
  :is(.payment-actions, .payment-recovery, .payment-links) {
  display: none;
}
@font-face {
  font-family: Nunito;
  src: url("/fonts/nunito.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: Fredoka;
  src: url("/fonts/fredoka-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
.checkout-page {
  margin: 0;
  min-height: 100dvh;
  background: #fff;
  color: #46536a;
  font:
    700 16px/1.5 Nunito,
    system-ui,
    sans-serif;
}
.checkout-page [hidden] {
  display: none !important;
}
.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 24px;
}
.checkout-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  color: #46536a;
  text-decoration: none;
  font:
    400 34px/1 system-ui,
    sans-serif;
}
/* The wordmark is live text in Fredoka Bold, as on the home page, with no
   corgi beside it (the owner, 1 Oct 2026). */
.checkout-brand {
  color: #41aef7;
  font:
    700 30px/1 Fredoka,
    Nunito,
    sans-serif;
  letter-spacing: -0.4px;
  text-decoration: none;
  white-space: nowrap;
}
.checkout-main {
  padding: 8px 24px 56px;
}
.checkout-main h1 {
  font:
    700 28px/1.2 Fredoka,
    Nunito,
    sans-serif;
  margin: 8px 0 24px;
}
.checkout-page a:focus-visible {
  outline: 3px solid #0879ba;
  outline-offset: 4px;
  border-radius: 4px;
}
.checkout-page .payment-panel {
  max-width: none;
  padding: 0;
}
.checkout-page .payment-hero {
  display: none;
}
.checkout-page .payment-card {
  padding: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.checkout-page .payment-recovery {
  border-top: 0;
}
.checkout-page .payment-links {
  justify-content: flex-start;
}
/* From tablet width checkout is one centred column: the back arrow, the title,
   every row, both steps' buttons and the wordmark share its two edges. */
@media (min-width: 768px) {
  .checkout-header,
  .checkout-main {
    max-width: 560px;
    margin-inline: auto;
  }
  .checkout-header {
    min-height: 88px;
  }
}
@media (max-width: 767px) {
  .checkout-header {
    min-height: 62px;
    padding-inline: 18px;
  }
  .checkout-brand {
    font-size: 26px;
  }
  .checkout-main {
    padding: 8px 18px 124px;
  }
  .checkout-main h1 {
    margin-bottom: 20px;
    font-size: 26px;
  }
}