/* Checkout (checkout.html) and the pages after it (payment-success.html, order-received.html).
   The form on the left, the order summary on the right (sticky on wide screens, first on phones so the price is seen
   before the form). The two ways to pay are real radio buttons drawn as cards. */
.checkout { padding-top: calc(var(--sf-header-height) + clamp(24px, 4vw, 48px)); }
.checkout__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1024px) { .checkout__grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); } }
.checkout__main { min-width: 0; }
/* Phones and tablets: the heading first, then the price, then the form (the main column's pieces join the grid). */
@media (max-width: 1023px) {
  .checkout__grid { gap: 0; }
  .checkout__main { display: contents; }
  .checkout__summary { order: 1; margin-top: 24px; }
  .checkout__form, .checkout__empty { order: 2; }
}
.checkout__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--sf-fg-muted); font-size: var(--sf-fs-small); font-weight: var(--sf-fw-semibold); text-decoration: none; }
.checkout__back .sf-icon { width: 16px; height: 16px; transform: scaleX(-1); }
.checkout__back:hover { color: var(--sf-fg); }
.checkout__title { margin-top: 12px; }
.checkout__lead { margin-top: 12px; }
.checkout__notice { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--sf-border-strong); border-radius: var(--sf-radius-sm); background: var(--sf-hover); color: var(--sf-fg); font-size: var(--sf-fs-small); }
.checkout__notice[hidden] { display: none; }
.checkout__empty { margin-top: 24px; padding: 24px; border: 1px dashed var(--sf-border-strong); border-radius: var(--sf-radius-md); }
.checkout__empty p { margin: 8px 0 0; color: var(--sf-fg-muted); }
.checkout__links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.checkout__form { margin-top: 28px; display: grid; gap: 28px; }
.checkout__form[hidden] { display: none; }
.checkout__set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 18px; }
.checkout__set > legend { margin-bottom: 4px; padding: 0; }
.checkout__set .sf-field + .sf-field { margin-top: 0; }
.checkout__set[hidden] { display: none; }
.checkout__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .checkout__row { grid-template-columns: 1fr 1fr; } }

/* the ways to pay */
.checkout__method { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--sf-control-border);
  border-radius: var(--sf-radius-md); background: var(--sf-control-bg); cursor: pointer;
  transition: border-color var(--sf-dur-fast) var(--sf-ease-out), background-color var(--sf-dur-fast) var(--sf-ease-out), box-shadow var(--sf-dur-fast) var(--sf-ease-out); }
.checkout__method[hidden] { display: none; }
.checkout__method input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.checkout__method:hover { border-color: var(--sf-fg-muted); }
.checkout__method.is-on { border-color: var(--sf-focus); box-shadow: inset 0 0 0 1px var(--sf-focus); background: color-mix(in srgb, var(--sf-electric-blue) 6%, var(--sf-control-bg)); }
.checkout__method:focus-within { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.checkout__method-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--sf-electric-blue) 12%, transparent); color: var(--sf-fg-accent); }
.checkout__method-icon .sf-icon { width: 20px; height: 20px; }
.checkout__method-text { display: grid; gap: 4px; min-width: 0; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }
.checkout__method-text strong { font-size: 1rem; color: var(--sf-fg); }
.checkout__method::after { content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; border: 1.5px solid var(--sf-control-border); border-radius: 50%; }
.checkout__method.is-on::after { border: 6px solid var(--sf-focus); }

/* the terms */
.checkout__check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--sf-fs-small); color: var(--sf-fg-body); cursor: pointer; }
.checkout__check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sf-electric-blue); }
.checkout__agree.sf-field--error .checkout__check { color: var(--sf-fg); }
.checkout__submit { width: 100%; }
@media (min-width: 640px) { .checkout__submit { width: auto; min-width: 280px; } }
.checkout__status { margin: 0; }
.checkout__fine { margin: 0; color: var(--sf-fg-muted); }
.checkout__form > .checkout__fine + .checkout__fine { margin-top: -20px; }

/* the order summary */
.checkout__summary { min-width: 0; }
@media (min-width: 1024px) { .checkout__summary { position: sticky; top: var(--sf-sticky-top); transition: top 360ms var(--sf-ease-out); } }
.checkout__card { display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px); }
.checkout__plan { margin: 0; font-size: 1.125rem; font-weight: var(--sf-fw-bold); color: var(--sf-fg); }
.checkout__lines { display: grid; gap: 10px; margin: 0; padding: 16px 0; border-top: 1px solid var(--sf-border); border-bottom: 1px solid var(--sf-border); }
.checkout__lines[hidden] { display: none; }
.checkout__lines > div { display: flex; justify-content: space-between; gap: 16px; font-size: var(--sf-fs-small); }
.checkout__lines > div[hidden] { display: none; }
.checkout__lines dt { color: var(--sf-fg-muted); }
.checkout__lines dd { margin: 0; color: var(--sf-fg); font-weight: var(--sf-fw-semibold); font-variant-numeric: tabular-nums; }
.checkout__off { color: var(--sf-fg-success) !important; }
.checkout__total { padding-top: 10px; border-top: 1px dashed var(--sf-border); }
.checkout__total dt { color: var(--sf-fg); font-weight: var(--sf-fw-semibold); }
.checkout__total dd { font-size: 1.375rem; font-weight: var(--sf-fw-extrabold); letter-spacing: -0.01em; }
.checkout__offer-note, .checkout__spend { margin: 0; color: var(--sf-fg-muted); }
.checkout__offer-note[hidden], .checkout__spend[hidden] { display: none; }
.checkout__trust { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--sf-fs-small); color: var(--sf-fg-body); }
.checkout__trust li { display: flex; gap: 10px; align-items: center; }
.checkout__trust li[hidden] { display: none; }
.checkout__trust .sf-icon { flex: none; width: 16px; height: 16px; color: var(--sf-fg-accent); }
.checkout__help { margin: 16px 0 0; color: var(--sf-fg-muted); }

/* after the checkout */
.pay-result__receipt { display: inline-block; margin: 20px auto 0; padding: 10px 16px; border: 1px solid var(--sf-border-strong); border-radius: var(--sf-radius-pill);
  color: var(--sf-fg); font-size: var(--sf-fs-small); font-weight: var(--sf-fw-semibold); }
.pay-result__receipt[hidden], .pay-result .thanks-steps[hidden], .pay-result [data-co-contact][hidden] { display: none; }
@media print { .checkout__back, .checkout__form, .checkout__help { display: none; } .checkout__summary { position: static; } }