/**
* Checkout page test variant. Scoped to .checkout-v2 (CheckoutVariantLayout), so the control layout
* keeps the tenant checkout.css styling. --checkout-main-column is set in CheckoutVariantLayout.tsx.
*/

.checkout-v2 .gc-dg-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: transparent !important;
  font-family: var(--font-family-body);
}

/* space-500 is 19px on narrow screens, but the payment cards use 20px at every size */
.checkout-v2 {
  --checkout-card-padding: 20px;
}

/*
* No payment method picked yet (.checkout-v2--no-method): the SDK has Bank Account open underneath,
* so its active styling, form and summary lines are hidden. The active card rules exclude this state
* inside :where() to keep their specificity.
*/
.checkout-v2--no-method .gc-dg-tab-content {
  display: none !important;
}

.checkout-v2--no-method #gc-dg-appliances [data-gc-dg-element='gc-dg-item-discount-value'],
.checkout-v2--no-method [data-gc-dg-element='gc-dg-summary-total'] > * {
  display: none;
}

.checkout-v2--no-method [data-gc-dg-element='gc-dg-summary-total']::before {
  content: 'No payment method selected yet';
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
}

/* The wrapper renders its own heading, so the SDK banner and heading row are hidden */
.checkout-v2 #gc-dg-discount-banner,
.checkout-v2 .gc-payment-heading {
  display: none;
}

@media (min-width: 992px) {
  .checkout-v2 .gc-dg-layout {
    display: grid;
    grid-template-columns: var(--checkout-main-column) minmax(0, 1fr);
    column-gap: 40px;
  }

  .checkout-v2 .gc-dg-layout-sidebar {
    align-self: start;
  }

  /*
  * The main column stretches to the row height and the CTA sits at its bottom, so the CTA stays the
  * last thing in the panel even when the sidebar is taller.
  * The "Go back" link aligned with the CTA row relies on this.
  */
  .checkout-v2 .gc-dg-layout-main {
    display: flex;
    flex-direction: column;
  }

  .checkout-v2 #gc-dg-submit-button {
    margin-top: auto;
  }
}

/*
* Single column (below the sidebar layout): the order summary goes between the payment cards and the
* CTA, where the SDK puts it above the cards. The main column is unwrapped with display: contents so
* its payment block and CTA become items of the layout column, next to the summary.
*/
@media (max-width: 991px) {
  .checkout-v2 .gc-dg-layout-main {
    display: contents;
  }

  .checkout-v2 .gc-dg-layout-sidebar {
    order: 0;
    margin-top: var(--spacing-space-500);
  }

  .checkout-v2 #gc-dg-summary {
    margin-bottom: 0 !important;
  }

  .checkout-v2 #gc-dg-submit-button {
    order: 1;
  }
}

/*
* Payment method cards
* The SDK accordion is flattened with display: contents so both cards sit side by side and the
* active form spans the full column underneath. The tab button is stretched over the whole card,
* and the SDK info block (subtitle + promo badge) is overlaid on it in the same grid cell. The
* overlay ignores pointer events, so a click anywhere on the card lands on the tab button.
*/

.checkout-v2 .gc-dg-payment-options-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  /* The SDK sets a 16px row gap; the space between the cards and the form is the form's margin-top */
  row-gap: 0;
}

.checkout-v2 .gc-dg-payment-accordion {
  display: contents;
}

.checkout-v2 #gc-dg-ach-tab,
.checkout-v2 [data-gc-dg-element='gc-dg-ach-payment-additional-info'] {
  grid-column: 1;
  grid-row: 1;
}

.checkout-v2 #gc-dg-card-tab,
.checkout-v2 [data-gc-dg-element='gc-dg-cc-payment-additional-info'] {
  grid-column: 2;
  grid-row: 1;
}

.checkout-v2 .gc-dg-tab-content {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--spacing-space-600);
}

/* Tab button = card surface */
.checkout-v2 .gc-dg-payment-accordion-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--spacing-space-400);
  align-items: start;
  min-height: 196px;
  padding: var(--checkout-card-padding);
  background-color: var(--color-bg-main-container);
  border: 1px solid var(--color-neutral-300);
  /* 16px has no radius token (radius-300 is 15px, radius-400 is 20px) */
  border-radius: 16px;
  transition:
    border-color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.checkout-v2 .gc-dg-payment-accordion-header:hover:not(:disabled) {
  border-color: var(--color-neutral-500);
}

.checkout-v2:where(:not(.checkout-v2--no-method)) .gc-dg-payment-accordion-header.active {
  border-color: var(--color-input-border-default);
  box-shadow: 0 4px 10px rgb(2 101 193 / 15%);
}

.checkout-v2 .gc-dg-payment-accordion-header:focus-visible {
  outline: 3px solid var(--color-border-focus-1);
  outline-offset: 2px;
}

.checkout-v2 .gc-dg-payment-radio-indicator {
  display: none !important;
}

.checkout-v2 .gc-dg-payment-accordion-header::before {
  content: '';
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  /* Figma binds this radius to space-200 (8px) */
  border-radius: var(--spacing-space-200);
  background: var(--color-neutral-150) center / 24px no-repeat;
}

/* The icon tile is highlighted on the selected payment method only */
.checkout-v2:where(:not(.checkout-v2--no-method)) .gc-dg-payment-accordion-header.active::before {
  background-color: var(--color-primary-300);
}

.checkout-v2 #gc-dg-ach-tab::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M12.5156 0.1875L23.1562 6.09375C23.6719 6.375 24 6.89062 24 7.45312C24 8.34375 23.25 9.04688 22.4062 9.04688H1.59375C0.703125 9.04688 0 8.34375 0 7.45312C0 6.89062 0.28125 6.375 0.796875 6.09375L11.4375 0.1875C11.7656 0 12.1875 0 12.5156 0.1875ZM10.6875 6.79688C10.5469 6.60938 10.5 6.32812 10.5 6.04688C10.5 5.25 11.1562 4.54688 12 4.54688C12.7969 4.54688 13.5 5.25 13.5 6.04688C13.5 6.32812 13.4062 6.60938 13.2656 6.79688H19.8281L12 2.48438L4.125 6.79688H10.6875ZM3 10.5469H5.25V18.0469H8.25V10.5469H10.5V18.0469H13.5V10.5469H15.75V18.0469H18.75V10.5469H21V18.0469H21.375C21.9844 18.0469 22.5 18.5625 22.5 19.1719C22.5 19.8281 21.9844 20.2969 21.375 20.2969H3C2.34375 20.2969 1.875 19.8281 1.875 19.1719C1.875 18.5625 2.34375 18.0469 3 18.0469V10.5469ZM1.5 21.7969H22.875C23.4844 21.7969 24 22.3125 24 22.9219C24 23.5781 23.4844 24.0469 22.875 24.0469H1.5C0.84375 24.0469 0.375 23.5781 0.375 22.9219C0.375 22.3125 0.84375 21.7969 1.5 21.7969Z' fill='black'/%3E%3C/svg%3E");
}

/* Wider than the 24px icon slot, so it keeps its own 27x24 size */
.checkout-v2 #gc-dg-card-tab::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='24' viewBox='0 0 27 24' fill='none'%3E%3Cpath d='M3 3.75C2.57812 3.75 2.25 4.125 2.25 4.5V19.5C2.25 19.9219 2.57812 20.25 3 20.25H24C24.375 20.25 24.75 19.9219 24.75 19.5V4.5C24.75 4.125 24.375 3.75 24 3.75H3ZM0 4.5C0 2.85938 1.3125 1.5 3 1.5H24C25.6406 1.5 27 2.85938 27 4.5V19.5C27 21.1875 25.6406 22.5 24 22.5H3C1.3125 22.5 0 21.1875 0 19.5V4.5ZM4.5 16.875C4.5 16.2656 4.96875 15.75 5.625 15.75H7.875C8.48438 15.75 9 16.2656 9 16.875C9 17.5312 8.48438 18 7.875 18H5.625C4.96875 18 4.5 17.5312 4.5 16.875ZM10.5 16.875C10.5 16.2656 10.9688 15.75 11.625 15.75H16.875C17.4844 15.75 18 16.2656 18 16.875C18 17.5312 17.4844 18 16.875 18H11.625C10.9688 18 10.5 17.5312 10.5 16.875Z' fill='black'/%3E%3C/svg%3E");
  background-size: auto;
}

.checkout-v2 button.gc-dg-tab-link > span.gc-dg-text-2xl {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  /* 20/24 (h4 on desktop) at every size: the h4 token is 16px on narrow screens */
  font-size: 20px !important;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  text-transform: capitalize;
}

.checkout-v2 .gc-dg-card-brand-icons {
  grid-column: 1 / -1;
  grid-row: 3;
  /* One row: the room under the price line holds one. The icons narrow on the tightest cards. */
  flex-wrap: nowrap;
  justify-content: start;
  gap: var(--spacing-space-200);
  margin-left: 0;
}

.checkout-v2 {
  --checkout-brand-icon-width: 53px;
  --checkout-brand-icon-height: 36px;
}

/*
* The SDK icons are square images with the card tile centred vertically, so they are drawn as a
* square of the tile width. The negative margins take the transparent space above and below the tile
* out of the row, which leaves 53x36 tiles as in the design.
*/
.checkout-v2 .gc-dg-card-brand-icons img.gc-dg-svg-icon {
  min-width: 0;
  width: var(--checkout-brand-icon-width);
  height: var(--checkout-brand-icon-width);
  margin-block: calc((var(--checkout-brand-icon-height) - var(--checkout-brand-icon-width)) / 2);
}

/* Info block overlay: price line under the title row, promo badge pinned to the bottom of the card */
.checkout-v2 [data-gc-dg-element$='-payment-additional-info'] {
  position: relative;
  z-index: 1;
  display: flex;
  margin: 0 !important;
  padding: var(--checkout-card-padding);
  pointer-events: none;
}

.checkout-v2 [data-gc-dg-element$='-payment-additional-info'] > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* The generic subtitle is dropped: the design shows the per-method price line in its place */
.checkout-v2 [data-gc-dg-element$='-payment-additional-info'] p.gc-dg-text-sm,
.checkout-v2 [data-gc-dg-element$='-payment-additional-info'] hr,
.checkout-v2 [data-gc-dg-element$='-payment-additional-info'] p:empty {
  display: none;
}

/* 68px = 44px icon row + 24px gap, so the price line starts under the title row */
.checkout-v2
  [data-gc-dg-element$='-payment-additional-info']
  > div
  > :is(p.gc-dg-basket-monthly-total, [data-gc-dg-element$='-payment-summary-text']) {
  margin: 68px 0 0 !important;
  font-size: var(--font-size-body-medium) !important;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
}

.checkout-v2
  [data-gc-dg-element='gc-dg-cc-payment-additional-info']
  > div
  > p[data-gc-dg-element='gc-dg-cc-payment-summary-text'] {
  margin-bottom: calc(var(--spacing-space-300) + var(--checkout-brand-icon-height)) !important;
}

.checkout-v2 [data-gc-dg-element$='-payment-additional-info'] p.gc-dg-basket-monthly-total strong {
  font-weight: var(--font-weight-regular);
}

.checkout-v2 div[data-gc-dg-element$='-payment-discount-banner'] {
  margin: auto 0 0 !important;
  padding-top: var(--spacing-space-300);
}

/* The card payment method has no promotion, so its banner is empty */
.checkout-v2 div[data-gc-dg-element$='-payment-discount-banner']:empty {
  display: none;
}

/* font-size: 0 hides the "Promotion applied - " text node visually, screen readers still read it */
.checkout-v2 .gc-dg-container .gc-dg-discount-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-space-200);
  box-sizing: border-box;
  height: 36px;
  padding: var(--spacing-space-100) var(--spacing-space-200);
  font-size: 0;
  /*
  * Tailwind only emits theme variables that some utility uses, and nothing uses these two yet,
  * so the fallbacks carry the theme values.
  */
  background-color: var(--color-success-50, #f1fcef);
  color: var(--color-text-success);
  border: 1px solid var(--color-success-400, #54b934);
  border-radius: var(--radius-100);
}

/* Gift icon: same glyph and colour as assets/icons/GiftIcon.tsx */
.checkout-v2 .gc-dg-container .gc-dg-discount-box::before {
  content: '';
  flex: 0 0 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2333751E' d='M5.41406 1.05469L6 2.01562L6.5625 1.05469C6.9375 0.398438 7.61719 0 8.36719 0H8.4375C9.5625 0 10.5 0.9375 10.5 2.0625C10.5 2.41406 10.4062 2.71875 10.2656 3H10.875C11.4844 3 12 3.51562 12 4.125V5.625C12 6.11719 11.6719 6.53906 11.25 6.70312V6.75V10.5C11.25 11.3438 10.5703 12 9.75 12H2.25C1.40625 12 0.75 11.3438 0.75 10.5V6.75V6.70312C0.304688 6.53906 0 6.11719 0 5.625V4.125C0 3.51562 0.492188 3 1.125 3H1.71094C1.57031 2.71875 1.5 2.41406 1.5 2.0625C1.5 0.9375 2.41406 0 3.5625 0H3.60938C4.35938 0 5.03906 0.398438 5.41406 1.05469ZM10.875 4.125H8.4375H6.75V5.625H10.125H10.875V4.125ZM5.25 4.125H3.5625H1.125V5.625H1.875H5.25V4.125ZM5.25 6.75H1.875V10.5C1.875 10.7109 2.03906 10.875 2.25 10.875H5.25V6.75ZM6.75 10.875H9.75C9.9375 10.875 10.125 10.7109 10.125 10.5V6.75H6.75V10.875ZM8.4375 3C8.95312 3 9.375 2.60156 9.375 2.0625C9.375 1.54688 8.95312 1.125 8.4375 1.125H8.36719C8.01562 1.125 7.71094 1.3125 7.52344 1.61719L6.70312 3H6.75H8.4375ZM5.25 3H5.27344L4.45312 1.61719C4.28906 1.3125 3.96094 1.125 3.60938 1.125H3.5625C3.02344 1.125 2.625 1.54688 2.625 2.0625C2.625 2.60156 3.02344 3 3.5625 3H5.25Z'/%3E%3C/svg%3E")
    center / 20px no-repeat;
}

.checkout-v2 .gc-dg-container .gc-dg-discount-box strong {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
}

/*
* Payment form
*/

.checkout-v2 .gc-dg-tab-content label:not([for^='gc-dg-tandc']) {
  display: block;
  margin-bottom: var(--spacing-space-200) !important;
  font-size: var(--font-size-body-medium) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-body-medium);
}

.checkout-v2 .gc-dg-tab-content input[type='text'],
.checkout-v2 div.gc-dg-paysafe-field {
  box-sizing: border-box;
  min-height: 50px;
  margin-bottom: var(--spacing-space-500) !important;
  border: 1px solid var(--color-input-border-default);
  border-radius: var(--radius-100);
}

.checkout-v2 .gc-dg-tab-content input[type='text'] {
  padding: var(--spacing-space-200) var(--spacing-space-400) !important;
  font-size: var(--font-size-body-medium) !important;
}

/* A validation message sits right under its field and takes over the spacing to the next field */
.checkout-v2
  .gc-dg-tab-content
  :is(input[type='text'], div.gc-dg-paysafe-field):has(
    + .gc-dg-error-message:is(:not(.gc-dg-hidden), [data-checkout-v2-required]):not(
        [data-checkout-v2-dismissed]
      )
  ) {
  margin-bottom: var(--spacing-space-200) !important;
}

/* The ID outranks the SDK #gc-dg-payment p margin */
.checkout-v2
  #gc-dg-payment
  .gc-dg-tab-content
  :is(input[type='text'], div.gc-dg-paysafe-field)
  + .gc-dg-error-message {
  margin: 0 0 var(--spacing-space-500);
}

/* The error summary and payment error sit under the box above them as a field message does */
.checkout-v2 #gc-dg-submit-button .gc-dg-error-message {
  margin: var(--spacing-space-200) 0 0;
}

/*
* Validation states set by useFieldValidationState, as on the personal details inputs. The field
* rules above override the SDK error border, so only the attribute draws them.
*/
.checkout-v2 #gc-dg-payment [data-checkout-v2-field='success'] {
  border-color: var(--color-input-border-success);
}

.checkout-v2 #gc-dg-payment [data-checkout-v2-field='error'] {
  border-color: var(--color-input-border-error);
}

/* Padding and icon position as in the design system Input. Glyph from assets/icons/CircleCheck.tsx */
.checkout-v2 #gc-dg-payment input[data-checkout-v2-field='success'] {
  padding-right: 41px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath fill='%233B8524' d='M8.375 1C5.84375 1 3.5625 2.34375 2.3125 4.5C1.03125 6.6875 1.03125 9.34375 2.3125 11.5C3.5625 13.6875 5.84375 15 8.375 15C10.875 15 13.1562 13.6875 14.4062 11.5C15.6875 9.34375 15.6875 6.6875 14.4062 4.5C13.1562 2.34375 10.875 1 8.375 1ZM8.375 16C5.5 16 2.875 14.5 1.4375 12C0 9.53125 0 6.5 1.4375 4C2.875 1.53125 5.5 0 8.375 0C11.2188 0 13.8438 1.53125 15.2812 4C16.7188 6.5 16.7188 9.53125 15.2812 12C13.8438 14.5 11.2188 16 8.375 16ZM11.7188 6.375L7.71875 10.375C7.53125 10.5625 7.1875 10.5625 7 10.375L5 8.375C4.8125 8.1875 4.8125 7.84375 5 7.65625C5.1875 7.46875 5.53125 7.46875 5.71875 7.65625L7.375 9.3125L11 5.65625C11.1875 5.46875 11.5312 5.46875 11.7188 5.65625C11.9062 5.84375 11.9062 6.1875 11.7188 6.375Z'/%3E%3C/svg%3E")
    right var(--spacing-space-400) center / 17px 16px no-repeat;
}

/* The wrapper holds an iframe, so the icon is drawn over it */
.checkout-v2 #gc-dg-payment div.gc-dg-paysafe-field[data-checkout-v2-field='success'] {
  position: relative;
  padding-right: 41px;
}

.checkout-v2 #gc-dg-payment div.gc-dg-paysafe-field[data-checkout-v2-field='success']::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--spacing-space-400);
  width: 17px;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath fill='%233B8524' d='M8.375 1C5.84375 1 3.5625 2.34375 2.3125 4.5C1.03125 6.6875 1.03125 9.34375 2.3125 11.5C3.5625 13.6875 5.84375 15 8.375 15C10.875 15 13.1562 13.6875 14.4062 11.5C15.6875 9.34375 15.6875 6.6875 14.4062 4.5C13.1562 2.34375 10.875 1 8.375 1ZM8.375 16C5.5 16 2.875 14.5 1.4375 12C0 9.53125 0 6.5 1.4375 4C2.875 1.53125 5.5 0 8.375 0C11.2188 0 13.8438 1.53125 15.2812 4C16.7188 6.5 16.7188 9.53125 15.2812 12C13.8438 14.5 11.2188 16 8.375 16ZM11.7188 6.375L7.71875 10.375C7.53125 10.5625 7.1875 10.5625 7 10.375L5 8.375C4.8125 8.1875 4.8125 7.84375 5 7.65625C5.1875 7.46875 5.53125 7.46875 5.71875 7.65625L7.375 9.3125L11 5.65625C11.1875 5.46875 11.5312 5.46875 11.7188 5.65625C11.9062 5.84375 11.9062 6.1875 11.7188 6.375Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
}

/*
* Error messages as in the design system Input, with the CircleExclamationIcon glyph. The icon is
* positioned, as some messages (the ACH holder name limit) hold several block lines.
* The error summary and payment error sit with the CTA, outside the payment forms.
*/
.checkout-v2 :is(#gc-dg-payment, #gc-dg-submit-button) .gc-dg-error-message {
  position: relative;
  padding-left: calc(15px + var(--spacing-space-100));
  color: var(--color-text-error);
  font-family: var(--font-family-typography-body-small);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-typography-body-small);
  line-height: var(--line-height-body-small);
}

.checkout-v2 :is(#gc-dg-payment, #gc-dg-submit-button) .gc-dg-error-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: var(--line-height-body-small);
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 14'%3E%3Cpath d='M7.32812 0.875C5.11328 0.875 3.11719 2.05078 2.02344 3.9375C0.902344 5.85156 0.902344 8.17578 2.02344 10.0625C3.11719 11.9766 5.11328 13.125 7.32812 13.125C9.51562 13.125 11.5117 11.9766 12.6055 10.0625C13.7266 8.17578 13.7266 5.85156 12.6055 3.9375C11.5117 2.05078 9.51562 0.875 7.32812 0.875ZM7.32812 14C4.8125 14 2.51562 12.6875 1.25781 10.5C0 8.33984 0 5.6875 1.25781 3.5C2.51562 1.33984 4.8125 0 7.32812 0C9.81641 0 12.1133 1.33984 13.3711 3.5C14.6289 5.6875 14.6289 8.33984 13.3711 10.5C12.1133 12.6875 9.81641 14 7.32812 14ZM7.32812 3.5C7.54688 3.5 7.76562 3.71875 7.76562 3.9375V7.4375C7.76562 7.68359 7.54688 7.875 7.32812 7.875C7.08203 7.875 6.89062 7.68359 6.89062 7.4375V3.9375C6.89062 3.71875 7.08203 3.5 7.32812 3.5ZM7.98438 9.625C7.98438 10.0078 7.68359 10.2812 7.32812 10.2812C6.94531 10.2812 6.67188 10.0078 6.67188 9.625C6.67188 9.26953 6.94531 8.96875 7.32812 8.96875C7.68359 8.96875 7.98438 9.26953 7.98438 9.625Z'/%3E%3C/svg%3E")
    center / 15px 14px no-repeat;
}

/* Dismissed until the next SDK validation */
.checkout-v2 [data-checkout-v2-dismissed] {
  display: none !important;
}

/* Required error on blur, before the SDK validates */
.checkout-v2 [data-checkout-v2-required] {
  display: block;
}

@media (min-width: 601px) {
  .checkout-v2 #gc-dg-expiryDate,
  .checkout-v2 #gc-dg-cvv {
    width: calc(50% - var(--spacing-space-500) / 2);
  }
}

/*
* The card holder name input sits inside a bordered Paysafe field wrapper, which already has the
* 16px side padding
*/
.checkout-v2 div.gc-dg-paysafe-field input[type='text'] {
  min-height: 0;
  height: 100%;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0;
}

/*
* "Review and confirm" box: the SDK consent wrapper becomes the card, with heading, label and details
* rendered by CheckoutConsent, so the SDK heading and label are hidden.
*/
.checkout-v2 .gc-dg-tab-content > div:has(> h4) {
  /* Collapses with the last field's 20px bottom margin, giving the 32px gap from the design */
  margin-top: var(--spacing-space-700);
  padding: var(--spacing-space-500);
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-card-border-neutral);
  /* 8px has no radius token (radius-200 is 10px) */
  border-radius: 8px;
}

.checkout-v2 .gc-dg-tab-content > div:has(> h4) > h4,
.checkout-v2 [id^='gc-dg-tandc-container-'] > label {
  display: none;
}

.checkout-v2 .checkout-v2__consent-label {
  flex: 1;
}

/* The SDK sets its own heading font, case and colour on headings and margins on paragraphs */
.checkout-v2 #gc-dg-payment .checkout-v2__consent-heading h4 {
  margin: 0 0 var(--spacing-space-400);
  font-family: var(--font-family-typography-h4);
  text-transform: none;
  color: var(--color-text-body);
}

.checkout-v2 #gc-dg-payment .checkout-v2__consent-details p {
  margin: 0;
}

/*
* The tenant checkout.css restyles links in labels of these checkboxes (underline, regular weight),
* which would double the TextLink underline
*/
.checkout-v2 .checkout-v2__consent-label a,
.checkout-v2 .checkout-v2__consent-label a:hover {
  font-family: var(--font-family-typography-body-strong);
  font-weight: var(--font-weight-typography-body-strong);
  text-decoration: none;
}

.checkout-v2 .gc-dg-tab-content > div:has(> h4) > div,
.checkout-v2 [id^='gc-dg-tandc-container-'] {
  margin: 0 !important;
}

/* SDK "When will my plan start?" block — not part of the new design */
.checkout-v2 #gc-dg-payment_information {
  display: none;
}

/*
* CTA
*/

/* The back link column is the "Go back" link width plus the 32px gap to the CTA */
.checkout-v2 {
  --checkout-cta-height: 48px;
  --checkout-back-link-width: 134px;
}

.checkout-v2 .gc-dg-container .gc-dg-submit-btn {
  width: 100%;
  max-width: none !important;
  height: var(--checkout-cta-height);
  margin-top: var(--spacing-space-700) !important;
  font-size: var(--font-size-body-large) !important;
  line-height: var(--line-height-body-large);
  border-radius: 999px !important;
  box-shadow: 0 2px 0 rgb(0 0 0 / 10%);
}

/*
* CTA row: "Go back" is rendered by the wrapper right after the SDK panel. The CTA is the last
* element of the panel, so it leaves room on its left and drops its bottom margin, and "Go back"
* is pulled up by exactly the CTA height into that room, vertically centred.
* Narrow screens keep the default stacked layout.
*/
@media (min-width: 601px) {
  .checkout-v2 .gc-dg-container .gc-dg-submit-btn {
    width: calc(100% - var(--checkout-back-link-width));
    margin-bottom: 0 !important;
    margin-left: var(--checkout-back-link-width) !important;
  }

  .checkout-v2 .checkout-v2__back {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--checkout-back-link-width);
    height: var(--checkout-cta-height);
    margin-top: calc(-1 * var(--checkout-cta-height));
  }
}

/*
* No payment method picked yet, sidebar layout: the summary is taller than the two cards, so it is
* taken out of the row height (positioned in its own grid column) and runs alongside the FAQs, and
* the CTA row sits right under the cards, as in the design.
*/
@media (min-width: 992px) {
  .checkout-v2--no-method .gc-dg-layout {
    position: relative;
  }

  .checkout-v2--no-method .gc-dg-layout-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    grid-row: 1;
    grid-column: 2;
  }

  .checkout-v2--no-method .gc-dg-container .gc-dg-submit-btn {
    margin-top: var(--spacing-space-600) !important;
  }
}

/*
* Order summary (sidebar)
* Restyled SDK summary: copy and structure stay as rendered by the SDK.
* Never set `display` on .gc-dg-ach-price / .gc-dg-cc-price elements. The SDK swaps them with
* .gc-dg-hidden, which is a plain display: none, so a display value here would reveal the prices
* of the payment method that is not selected. Where a layout is needed, :not(.gc-dg-hidden) guards it.
*/

.checkout-v2 #gc-dg-summary .gc-dg-cards {
  padding: var(--spacing-space-400) var(--spacing-space-400) var(--spacing-space-600);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-card-border-order);
  /* 8px has no radius token (radius-200 is 10px) */
  border-radius: 8px !important;
}

/* Always expanded: no collapse icon, header does not toggle on click */
.checkout-v2 #gc-dg-summary .gc-dg-accordion-header {
  cursor: default;
  pointer-events: none;
}

.checkout-v2 #gc-dg-summary .gc-dg-accordion-icon {
  display: none;
}

.checkout-v2 #gc-dg-summary .gc-dg-accordion-header h3 {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h4);
}

.checkout-v2 #gc-dg-summary .gc-dg-accordion-content {
  margin-top: var(--spacing-space-600);
}

/* Protection item card */
.checkout-v2 #gc-dg-appliances .gc-dg-inner-card-container {
  margin-bottom: 0;
  padding: var(--spacing-space-400);
  background-color: var(--color-bg-main-container);
  border: 1px solid var(--color-card-border-order);
  border-radius: 8px;
}

.checkout-v2 #gc-dg-appliances .gc-dg-inner-card-container > p.gc-dg-font-lg {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-space-200);
  margin: 0;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h5);
}

.checkout-v2 #gc-dg-appliances .gc-dg-inner-card-container > p.gc-dg-font-lg::before {
  content: '';
  flex: 0 0 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1d' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.3 7.5 9.5 4.3-1.2 7.5-4.9 7.5-9.5V6L12 3Z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 24px no-repeat;
}

/* Less detail: monthly cost, subtotal and tax rows are dropped (the totals below include tax) */
.checkout-v2 #gc-dg-appliances [data-gc-dg-element='gc-dg-item-monthly-cost'],
.checkout-v2 #gc-dg-appliances .gc-dg-inner-card-container > .gc-dg-mt-4,
.checkout-v2 #gc-dg-appliances [data-gc-dg-element$='-item-discount-amount'] {
  display: none;
}

/*
* Discount row as a green bullet line. The line itself is the SDK banner element, which the SDK
* hides for the card payment method, so its display is never set here.
*/
.checkout-v2 #gc-dg-appliances [data-gc-dg-element='gc-dg-item-discount-value'] {
  margin: 0;
}

/* Spacing only while a badge is shown (the card payment method has none) */
.checkout-v2
  #gc-dg-appliances
  [data-gc-dg-element='gc-dg-item-discount-value']:has(> :not(.gc-dg-hidden)) {
  margin-top: var(--spacing-space-200);
}

.checkout-v2 #gc-dg-appliances [data-gc-dg-element$='-item-discount-banner'] {
  position: relative;
  flex: 1;
  padding-left: var(--spacing-space-600);
  color: var(--color-text-success);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
}

.checkout-v2 #gc-dg-appliances [data-gc-dg-element$='-item-discount-banner']::before {
  content: '•';
  position: absolute;
  left: var(--spacing-space-200);
}

/* Cover benefits: bullet lines like the promotion line, in the body colour */
.checkout-v2 #gc-dg-appliances .checkout-v2__item-benefits {
  margin-top: var(--spacing-space-200);
}

/* No gap under a shown promotion line (the SDK hides the other method's line) */
.checkout-v2:where(:not(.checkout-v2--no-method))
  #gc-dg-appliances
  .gc-dg-inner-card-container:has(
    [data-gc-dg-element='gc-dg-item-discount-value'] > :not(.gc-dg-hidden)
  )
  > .checkout-v2__item-benefits {
  margin-top: 0;
}

.checkout-v2 #gc-dg-appliances .checkout-v2__item-benefits li {
  position: relative;
  padding-left: var(--spacing-space-600);
  color: var(--color-text-body);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
}

.checkout-v2 #gc-dg-appliances .checkout-v2__item-benefits li::before {
  content: '•';
  position: absolute;
  left: var(--spacing-space-200);
}

/* Totals: the monthly total first, then the promotion footnote and the payment start date */
.checkout-v2 #gc-dg-summary [data-gc-dg-element='gc-dg-summary-total'] {
  margin: 16px 0 0;
}

.checkout-v2 #gc-dg-summary [data-gc-dg-element='gc-dg-summary-total'] > div {
  margin-bottom: 0;
}

.checkout-v2 [data-gc-dg-element='gc-dg-summary-total'] .gc-dg-ach-price:not(.gc-dg-hidden),
.checkout-v2 [data-gc-dg-element='gc-dg-summary-total'] .gc-dg-cc-price:not(.gc-dg-hidden) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The label is rewritten by useSummaryTotalCopy, e.g. "First 6 monthly payments, incl. $0.26 tax" */
.checkout-v2 [data-gc-dg-element$='-monthly-total-row'] {
  order: -1;
  align-items: flex-start;
  column-gap: var(--spacing-space-400);
  margin-bottom: 4px;
}

.checkout-v2 [data-gc-dg-element$='-monthly-total-row'] p {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-bold);
  line-height: 24px;
}

.checkout-v2 [data-gc-dg-element$='-monthly-total-row'] p:first-child {
  white-space: pre-line;
}

.checkout-v2 [data-gc-dg-element$='-monthly-total-row'] p:last-child {
  flex: none;
  white-space: nowrap;
}

.checkout-v2
  .gc-dg-ach-price:has([data-gc-dg-element='gc-dg-ach-monthly-promotion-text'])
  [data-gc-dg-element='gc-dg-ach-monthly-total-row']
  p {
  color: var(--color-text-success);
}

.checkout-v2 #gc-dg-summary [data-gc-dg-element$='-monthly-promotion-text'],
.checkout-v2 [data-gc-dg-element='gc-dg-summary-total'] .gc-dg-ach-price > p,
.checkout-v2 [data-gc-dg-element='gc-dg-summary-total'] .gc-dg-cc-price > p {
  margin: 0;
  color: var(--color-neutral-700);
  font-size: var(--font-size-body-small);
  /* The SDK .gc-dg-text-xs line height is as tall as the text */
  line-height: var(--line-height-body-small);
}

/*
* Billing address, moved into the payment form by useBillingAddressPlacement, so the field styles
* above apply to its edit form too.
*/

/* Divider above the billing address, spaced like the fields */
.checkout-v2 #gc-dg-billing-address-root {
  padding-top: var(--spacing-space-500);
  border-top: 1px solid var(--color-neutral-500);
}

/* The SDK bottom margin would add to the field spacing, in read and edit mode */
.checkout-v2 #gc-dg-billing_address > div {
  margin-bottom: 0;
}

/* The hint slot (CheckoutBillingHint) wraps onto its own line. Read mode only. */
.checkout-v2 #gc-dg-billing_address {
  flex-wrap: wrap;
}

.checkout-v2 .checkout-v2__billing-hint {
  flex-basis: 100%;
}

/* The ID outranks the SDK #gc-dg-payment p margin */
.checkout-v2 #gc-dg-payment .checkout-v2__billing-hint p {
  margin: 0;
}

.checkout-v2 #gc-dg-billing_address:has(.gc-dg-btn-save) > .checkout-v2__billing-hint {
  display: none;
}

.checkout-v2 #gc-dg-billing_address > div > h3 {
  margin: 0 0 var(--spacing-space-200);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body-medium);
  text-transform: none;
}

/* Edit mode: the fields have their own labels */
.checkout-v2 #gc-dg-billing_address > div:has(.gc-dg-btn-save) > h3 {
  display: none;
}

/* Edit mode: the form sits straight in the payment form, without the SDK inner card around it */
.checkout-v2
  #gc-dg-billing_address
  > div:has(.gc-dg-btn-save)
  > [data-testid='gc-dg-billing-address'] {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* The field margins space the fields, as in the payment form */
.checkout-v2 #gc-dg-billing_address :is(.gc-dg-form, .gc-dg-form-field) {
  gap: 0;
}

/* The state field input sits in an autocomplete wrapper, so its error is the wrapper's sibling */
.checkout-v2
  #gc-dg-billing_address
  .gc-dg-autocomplete-container:has(+ .gc-dg-error-message:not([data-checkout-v2-dismissed]))
  input {
  margin-bottom: var(--spacing-space-200) !important;
}

.checkout-v2 #gc-dg-billing_address .gc-dg-autocomplete-container + .gc-dg-error-message {
  margin: 0 0 var(--spacing-space-500);
}

/* Full width fields, like the payment form (the SDK makes them narrower than the form) */
.checkout-v2 #gc-dg-billing_address .gc-dg-form-field :is(input, select) {
  width: 100%;
}

/*
* Read mode: the address and the Change link look like one input under the label. The SDK keeps them
* in separate elements, so they share the second grid row, and the field frame is drawn by a
* pseudo-element over that row.
*/
.checkout-v2 #gc-dg-billing_address > div:has(.gc-dg-btn-edit) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(50px, auto);
  align-items: center;
  column-gap: var(--spacing-space-200);
}

.checkout-v2 #gc-dg-billing_address > div:has(.gc-dg-btn-edit) > h3 {
  grid-column: 1 / -1;
}

.checkout-v2 #gc-dg-billing_address > div:has(.gc-dg-btn-edit)::after {
  content: '';
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: stretch;
  border: 1px solid var(--color-input-border-default);
  border-radius: var(--radius-100);
  pointer-events: none;
}

.checkout-v2
  #gc-dg-billing_address
  > div:has(.gc-dg-btn-edit)
  > [data-testid='gc-dg-billing-address'] {
  grid-row: 2;
  grid-column: 1;
  margin: 0;
  padding: var(--spacing-space-200) 0 var(--spacing-space-200) var(--spacing-space-400);
  background: none;
  border: 0;
}

.checkout-v2
  #gc-dg-billing_address
  > div:has(.gc-dg-btn-edit)
  > [data-testid='gc-dg-billing-address']
  p {
  margin: 0;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
}

.checkout-v2 #gc-dg-billing_address > div:has(.gc-dg-btn-edit) > div:last-child {
  grid-row: 2;
  grid-column: 2;
  margin: 0;
  padding-right: var(--spacing-space-400);
}

/* "Change" (renamed by useSdkCopy) as a strong text link */
.checkout-v2 .gc-dg-container .gc-dg-btn-edit,
.checkout-v2 .gc-dg-container .gc-dg-btn-edit:hover,
.checkout-v2 .gc-dg-container .gc-dg-btn-edit:active {
  padding: 0;
  background-color: transparent !important;
  border-width: 0 0 1px !important;
  border-style: solid !important;
  border-color: var(--color-text-link-default) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-text-link-default) !important;
  font-family: var(--font-family-typography-body-large-strong) !important;
  font-size: var(--font-size-body-large) !important;
  font-weight: var(--font-weight-typography-body-large-strong) !important;
  line-height: var(--line-height-body-large) !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.checkout-v2 .gc-dg-container .gc-dg-btn-edit:hover {
  border-color: transparent !important;
}

/*
* Narrow screens: no copy below 16px. The theme scales the small type tokens down, so they are raised
* here (checkout.css sizes the SDK with them too). SDK classes with fixed sizes follow below.
*/
@media (max-width: 600px) {
  .checkout-v2 {
    --font-size-body-xlarge: 16px;
    --font-size-body-medium: 16px;
    --font-size-body-small: 16px;
    --font-size-body-xsmall: 16px;
    --font-size-h5: 16px;
    --font-size-h6: 16px;
    --font-size-eyebrow-small: 16px;
    --font-size-eyebrow-xsmall: 16px;
    --font-size-button-small: 16px;
    --font-size-button-xsmall: 16px;
    --line-height-body-medium: 20px;
    --line-height-body-small: 20px;
    --line-height-body-xsmall: 20px;
    --line-height-h5: 20px;
    --line-height-h6: 20px;
    --line-height-eyebrow-small: 20px;
    --line-height-eyebrow-xsmall: 20px;
    --line-height-button-small: 20px;
    --line-height-button-xsmall: 20px;
  }

  /* The container class outranks the SDK .gc-dg-submit-btn--loading .gc-dg-btn-subtitle rule */
  .checkout-v2
    .gc-dg-container
    :is(
      .gc-dg-text-xs,
      .gc-dg-text-sm,
      .gc-dg-label,
      .gc-dg-btn,
      .gc-dg-btn-subtitle,
      .gc-dg-autocomplete-state-code,
      .gc-padlock-secure
    ) {
    font-size: 16px;
  }
}

/*
* Narrow screens: each payment method is its own card, with the selected method's form inside it.
* The card surface moves from the tab button to the accordion wrapper.
*/
@media (max-width: 600px) {
  .checkout-v2 .gc-dg-payment-options-container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-space-500);
  }

  /* The SDK pads the accordion on narrow screens; here the padding comes from its children */
  .checkout-v2 .gc-dg-payment-accordion {
    /* Gap above a card scrolled to by useSelectedMethodScroll, less than the gap between cards */
    scroll-margin-top: var(--spacing-space-400);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 !important;
    background-color: var(--color-bg-main-container);
    border: 1px solid var(--color-neutral-300);
    border-radius: 16px;
    transition:
      border-color 150ms ease-out,
      box-shadow 150ms ease-out;
  }

  .checkout-v2:where(:not(.checkout-v2--no-method))
    .gc-dg-payment-accordion:has(> .gc-dg-payment-accordion-header.active) {
    border-color: var(--color-input-border-default);
    box-shadow: 0 4px 10px rgb(2 101 193 / 15%);
  }

  .checkout-v2 #gc-dg-card-tab,
  .checkout-v2 [data-gc-dg-element='gc-dg-cc-payment-additional-info'] {
    grid-column: 1;
    grid-row: 1;
  }

  .checkout-v2 .gc-dg-payment-accordion-header,
  .checkout-v2 .gc-dg-payment-accordion-header.active {
    min-height: 0;
    border: 0;
    box-shadow: none;
  }

  .checkout-v2 .gc-dg-tab-content {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    padding: 0 var(--checkout-card-padding) var(--checkout-card-padding) !important;
  }

  /* CTA first, then "Go back" under it */
  .checkout-v2 .gc-dg-container .gc-dg-submit-btn {
    margin-bottom: 0 !important;
  }

  .checkout-v2 .checkout-v2__back {
    margin-top: var(--spacing-space-700);
  }

  .checkout-v2 .gc-dg-layout-sidebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: auto;
    margin-top: 0;
  }

  body:has(.checkout-v2) {
    padding-bottom: var(--checkout-summary-height, 0px);
  }

  .checkout-v2 #gc-dg-summary .gc-dg-cards {
    padding: var(--spacing-space-400);
    border-bottom: 0;
    border-radius: 8px 8px 0 0 !important;
  }

  .checkout-v2 #gc-dg-summary details[open].gc-dg-cards {
    padding-bottom: var(--spacing-space-600);
  }

  .checkout-v2 #gc-dg-summary .gc-dg-accordion-header {
    cursor: pointer;
    pointer-events: auto;
  }

  .checkout-v2 #gc-dg-summary .gc-dg-accordion-icon {
    display: block;
  }

  .checkout-v2 #gc-dg-summary details[open] .gc-dg-accordion-content {
    max-height: 60dvh;
    overflow-y: auto;
  }

  .checkout-v2 #gc-dg-summary details:not([open])::details-content {
    content-visibility: visible;
  }

  .checkout-v2 #gc-dg-summary details:not([open]) .gc-dg-accordion-content {
    margin-top: var(--spacing-space-200);
  }

  .checkout-v2
    #gc-dg-summary
    details:not([open])
    .gc-dg-accordion-content
    > :not([data-gc-dg-element='gc-dg-summary-total']) {
    display: none;
  }

  .checkout-v2 #gc-dg-summary details:not([open]) [data-gc-dg-element='gc-dg-summary-total'] {
    margin-top: 0;
  }

  .checkout-v2 #gc-dg-summary details:not([open]) :is(.gc-dg-ach-price, .gc-dg-cc-price) > p {
    display: none;
  }

  /*
  * Collapsed, the total keeps the promotion footnote under it (Bank Account). The gap spaces the two,
  * so the total adds no margin when it is shown alone (Credit Card).
  */
  .checkout-v2 #gc-dg-summary details:not([open]) [data-gc-dg-element$='-monthly-total-row'] {
    margin-bottom: 0;
  }

  .checkout-v2 #gc-dg-summary details:not([open]) :is(.gc-dg-ach-price, .gc-dg-cc-price) {
    gap: var(--spacing-space-200);
  }

  body:has(.checkout-v2) .grecaptcha-badge {
    visibility: hidden;
  }

  @supports (-webkit-touch-callout: none) {
    .checkout-v2 #gc-dg-summary details:is([open], :not([open])).gc-dg-cards {
      padding-bottom: var(--spacing-space-100);
    }
  }
}