/**
 * Alpine Funded - Checkout v2
 *
 * Loaded only while the v2 variant is active (see mu-plugins/af-checkout-variant.php).
 * Every selector is prefixed .af-pay / body.checkout-v2 so the old checkout is untouched.
 */

.checkout-v2 {
  --af-pay-blue: #017fdd;
  --af-pay-ink: #030130;
  --af-pay-body: #2d2d2d;
  --af-pay-muted: #666666;
  --af-pay-label: #7e8c96;
  --af-pay-line: #cbe4f1;
  --af-pay-field: #eff7fb;
  --af-pay-page: #f6fbfc;
  --af-pay-card: #ffffff;
}

/* The page tint must cover the whole viewport: .af-pay is capped at 1440, so on
   a wider screen the body colour showed at the sides. Matching the class count of
   the theme's `body.woocommerce-checkout` settles it without !important. */
body.checkout-v2.woocommerce-checkout,
body.checkout-v2 .af-pay {
  background: var(--af-pay-page);
}

.af-pay {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 120px 64px;
  color: var(--af-pay-body);
  /* Inherited, so one declaration covers every control: without it a tap paints
	   the browser's own grey-blue block over the method row or the pay button. */
  -webkit-tap-highlight-color: transparent;
}

/* A long press on a control selects its text instead of pressing it, and the
   selection highlight reads as a stray blue fill across the row. */
.af-pay button,
.af-pay label,
.af-pay .af-pay-btn-secondary {
  -webkit-user-select: none;
  user-select: none;
}

/* The checkout sits in a boxed Elementor container (~1140px). Only v2 escapes it,
   so the old checkout keeps the layout it has today. */
body.checkout-v2 .alpn-default-checkout-woo,
body.checkout-v2 .alpn-default-checkout-woo > .e-con-inner {
  max-width: none;
  padding: 0;
}

/* Elementor's 50px top margin, dropped because v2 opens with its own nav bar.
   .elementor-element is in the selector to outweigh Elementor's own three-class
   `.elementor-1177 .elementor-element.elementor-element-d978735`. */
body.checkout-v2 .elementor-element.alpn-default-checkout-woo {
  --margin-top: 0px;
  --margin-bottom: 0px;
}

body.checkout-v2 header[data-elementor-type="header"] {
  display: none;
}

.af-flow-nav {
  padding: 24px 0;
}

.af-flow-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.af-flow-nav__home {
  display: block;
  line-height: 0;
}

.af-flow-nav__logo {
  display: block;
  width: auto;
  height: 48px;
}

.af-flow-nav__badge {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--af-pay-label);
}

/* The platform is chosen on step 1 and carried through the session. The field
   stays in the DOM so its value still posts and the YourPropFirm validator is
   satisfied; only the card around it is taken out of the layout. */

.af-pay-addons {
  display: none;
}

.af-pay-stepper {
  padding: 28px 0 32px;
}

.af-pay-stepper__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.af-pay-stepper__step,
.af-pay-stepper__back {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.af-pay-stepper__step {
  color: var(--af-pay-blue);
}

.af-pay-stepper__back {
  color: var(--af-pay-muted);
  font-weight: 400;
  text-decoration: none;
}

.af-pay-stepper__back:hover {
  color: var(--af-pay-blue);
}

.af-pay-stepper__track {
  height: 4px;
  border-radius: 100px;
  background: var(--af-pay-line);
  overflow: hidden;
}

.af-pay-stepper__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  background: var(--af-pay-blue);
}

.af-pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 32px;
  align-items: start;
}

.af-pay-col-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.af-pay-col-side {
  position: sticky;
  top: 24px;
  align-self: start;
}

@media (max-width: 1024px) {
  .af-pay-col-side {
    position: static;
  }
}

.af-pay-head__title {
  margin: 0 0 8px;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  color: var(--af-pay-ink);
}

.af-pay-head__sub {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--af-pay-muted);
}

.af-pay-card,
.af-pay-summary,
.af-pay-links,
.af-pay-faq {
  background: var(--af-pay-card);
  border: 1px solid var(--af-pay-line);
  border-radius: 16px;
  padding: 24px;
}

.af-pay-card--billing {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 24px 12px;
}

@media (max-width: 1024px) {
  .af-pay-card--billing {
    padding: 4px 16px 4px;
  }
}

.af-pay-card--billing .af-pay-divider {
  margin: 0;
}

.af-pay-card__label {
  margin: 0;
  margin-bottom: 12px;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  /* color: #7e8c96; */
}

.af-pay-divider {
  height: 1px;
  background: var(--af-pay-line);
  margin: 16px 0;
}

.af-pay-hint {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--af-pay-muted);
}

/* Carries the wrapper id: WooCommerce's own
   `.woocommerce form .form-row .input-checkbox` is a three-class selector and was
   setting the size and the 8px gap out from under a shorter one. */
#alpnDefaultCheckoutWoo .af-pay input[type="checkbox"] {
  /* appearance: none is not optional here — while the native widget paints
     itself, border, border-radius and background are all ignored and only
     accent-color gets through, which is why the box stayed square and grey. */
  -webkit-appearance: none;
  appearance: none;
  /* display matters as much as appearance: WooCommerce sets .input-checkbox to
     `display: inline`, and once the native widget is gone that is a non-replaced
     inline box, which ignores width and height — the box measured 2x25. */
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  border: 1.5px solid var(--af-pay-blue);
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
}

#alpnDefaultCheckoutWoo .af-pay input[type="checkbox"]:checked {
  background: var(--af-pay-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath d='M1 4.5 4.4 8 11 1' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px 9px no-repeat;
}

#alpnDefaultCheckoutWoo .af-pay input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--af-pay-blue);
  outline-offset: 2px;
}

.af-pay .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* .form-row-wide is deliberately NOT used: on this install nearly every field
   carries that class, so address_1/address_2 and postcode/city would stretch and
   stop pairing up. */
.af-pay #billing_company_field,
.af-pay #billing_country_field,
.af-pay #billing_phone_field,
.af-pay #billing_email_field {
  grid-column: 1 / -1;
}

.af-pay .woocommerce-billing-fields__field-wrapper .form-row {
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
}

/* Labels are hidden visually, not removed — a placeholder is no substitute for a
   label as far as a screen reader is concerned. */
.af-pay
  .woocommerce-billing-fields__field-wrapper
  .form-row
  > label:not(.checkbox) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.checkout-v2 .af-pay .form-row input.input-text,
.checkout-v2 .af-pay .form-row textarea,
.checkout-v2 .af-pay .form-row select,
.checkout-v2 .af-pay input[type="text"],
.checkout-v2 .af-pay input[type="email"],
.checkout-v2 .af-pay input[type="tel"],
.checkout-v2 .af-pay input[type="password"],
.checkout-v2 .af-pay select,
.checkout-v2 .af-pay .select2-container .select2-selection--single {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--af-pay-line) !important;
  border-radius: 12px;
  background: var(--af-pay-field);
  font-size: 14px;
  line-height: 21px;
  color: var(--af-pay-body);
  box-shadow: none;
  outline: 0;
}

/* The placeholder must not move while you type. WooCommerce fades it out half a
   second after focus (`.woocommerce form .form-row [placeholder]:focus::-webkit-input-placeholder`),
   and Easy Login WooCommerce turns every focused placeholder black from an unscoped
   `[placeholder]:focus::-webkit-input-placeholder { color: #000 !important }`. Hence
   the long selector below and the !important on colour. */
.af-pay input::placeholder,
.af-pay textarea::placeholder {
  color: var(--af-pay-muted);
  opacity: 1;
  transition: none;
}

.af-pay input:focus::placeholder,
.af-pay textarea:focus::placeholder {
  opacity: 1;
  color: var(--af-pay-muted) !important;
  transition: none;
}

body.checkout-v2 .af-pay form .form-row [placeholder]:focus::placeholder {
  opacity: 1;
  color: var(--af-pay-muted) !important;
  transition: none;
}

.checkout-v2 .af-pay .form-row input.input-text:focus,
.checkout-v2 .af-pay input:focus,
.checkout-v2 .af-pay select:focus {
  border-color: var(--af-pay-blue);
}

/* Select2 puts its own 8px padding and a 28px line-height on __rendered, so the
   country sat a couple of pixels above every other field. The dropdown is appended
   to <body>, outside .af-pay, so it is scoped on the body class instead. */

/* Select2 writes an inline width on the container and keeps its own 28px height
   on the control, which is why the country row came out 40px tall. */
.af-pay .select2-container {
  width: 100% !important;
}

.af-pay .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  /* !important: something sizes this control to 40px and specificity alone
	   does not clear it, so the country row sat 10px shorter than every other
	   field in the card. */
  height: 50px !important;
}

/* Select2 greys its placeholder to #999; every other field uses #666. */
.af-pay
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--af-pay-muted);
}

.af-pay .select2-container .select2-selection__rendered {
  /* !important: Select2's own 8px left padding sits on top of the control's
	   14px, so the country read 8px further in than every other placeholder. */
  padding: 0 !important;
  line-height: 21px;
  font-size: 14px;
  color: var(--af-pay-body);
}

/* The arrow rides the control's own flex line: absolute positioning resolved
   against an outer box and sat 5px above centre. A rotated-border caret renders
   lopsided at 1.5px, so the glyph is a stroked path. */
.af-pay .select2-container .select2-selection__arrow {
  position: static;
  flex: 0 0 10px;
  height: 6px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237E8C96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  transform-origin: center;
}

.af-pay .select2-container .select2-selection__arrow b {
  display: none;
}

.af-pay .select2-container--open .select2-selection__arrow {
  transform: scaleY(-1);
}

.af-pay .select2-container--open .select2-selection--single {
  border-color: var(--af-pay-blue);
}

/* Select2 appends a second copy of the container to <body> for the open dropdown.
   WooCommerce styles every `.select2-container` at `width: 100%`, which for that
   copy resolves against the viewport, not the field — 1425px starting at x145, so
   opening the country list gave the page ~150px of horizontal scroll. */
body.checkout-v2 > .select2-container {
  width: auto;
}

body.checkout-v2 .select2-container--default .select2-dropdown {
  border: 1px solid var(--af-pay-line, #cbe4f1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(3, 64, 112, 0.14);
  overflow: hidden;
}

body.checkout-v2 .select2-container--default .select2-search--dropdown {
  padding: 10px;
}

body.checkout-v2
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--af-pay-line, #cbe4f1);
  border-radius: 8px;
  background: var(--af-pay-field, #eff7fb);
  font-size: 14px;
  line-height: 21px;
  color: var(--af-pay-body, #2d2d2d);
  outline: 0;
}

body.checkout-v2
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border-color: var(--af-pay-blue, #017fdd);
}

body.checkout-v2
  .select2-container--default
  .select2-results
  > .select2-results__options {
  max-height: 260px;
  padding: 4px;
  scrollbar-width: thin;
}

body.checkout-v2 .select2-container--default .select2-results__option {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--af-pay-body, #2d2d2d);
}

body.checkout-v2
  .select2-container--default
  .select2-results__option--highlighted[aria-selected],
body.checkout-v2
  .select2-container--default
  .select2-results__option--highlighted[data-selected] {
  background: #ebf7ff;
  color: var(--af-pay-ink, #030130);
}

body.checkout-v2
  .select2-container--default
  .select2-results__option[aria-selected="true"],
body.checkout-v2
  .select2-container--default
  .select2-results__option[data-selected="true"] {
  background: var(--af-pay-field, #eff7fb);
  font-weight: 500;
  color: var(--af-pay-ink, #030130);
}

.af-pay .woocommerce-invalid input,
.af-pay .woocommerce-invalid select {
  border-color: #e02b2b;
}

.af-pay .woocommerce-privacy-policy-text p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 19px;
  color: var(--af-pay-muted);
}

.af-pay .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
  padding: 0;
}

.af-pay .checkbox,
.af-pay .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 19px;
  color: var(--af-pay-body);
  cursor: pointer;
}

/* A hanging indent, not flex. WooCommerce keeps these labels inline with
   `.woocommerce form .form-row label.checkbox { display: inline }`, so a wrapped
   line started back at the checkbox's edge. Flex fixed that but split the label
   into columns: the required asterisk is its own element, so it became a second
   flex item and sat at the end of line one rather than the end of the sentence. */
body.checkout-v2 .af-pay .form-row label.checkbox,
body.checkout-v2 .af-pay .form-row label.woocommerce-form__label-for-checkbox {
  display: block;
  padding-left: 30px;
  text-indent: -30px;
  gap: 0;
}

.af-pay input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 20px;
  accent-color: var(--af-pay-blue);
}

body.checkout-v2 .af-pay .woocommerce-message,
body.checkout-v2 .af-pay .woocommerce-info,
body.checkout-v2 .af-pay .woocommerce-error,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-message,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-info,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--af-pay-blue);
  border-left-width: 4px;
  border-radius: 12px;
  outline: none;
  box-shadow: none;
  background: var(--af-pay-card);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--af-pay-ink);
  list-style: none;
}

body.checkout-v2 .af-pay .woocommerce-error,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-error {
  border-color: #e02b2b;
  color: #9b1c1c;
}

/* WooCommerce's own ::before already carries the glyph, so only the shape is
   restyled. */
body.checkout-v2 .af-pay .woocommerce-message::before,
body.checkout-v2 .af-pay .woocommerce-info::before,
body.checkout-v2 .af-pay .woocommerce-error::before,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-message::before,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-info::before,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-error::before {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 50%;
  background: var(--af-pay-blue);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
}

/* WooCommerce's own glyph is a check *inside a circle*, which on top of the disc
   reads as a ring with a hollow tick. The page font's "\2713" draws thin and small,
   so the tick is the same stroked path the checkboxes use. */
body.checkout-v2 .af-pay .woocommerce-message::before,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-message::before {
  content: "";
  background: var(--af-pay-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath d='M1 4.5 4.4 8 11 1' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 8px 6px no-repeat;
}
body.checkout-v2 .af-pay .woocommerce-info::before,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-info::before {
  content: "i";
  font-family: inherit;
}

body.checkout-v2 .af-pay .woocommerce-error::before,
body.checkout-v2 .woocommerce-notices-wrapper .woocommerce-error::before {
  content: "!";
  font-family: inherit;
  background: #e02b2b;
}

/* #payment is the fragment update_order_review swaps, so it stays a plain column
   and the card chrome moves to the box inside it.

   !important because the theme paints `#payment { background: #eefaff }` with its
   own id, the same rule the old checkout relies on. */
.af-pay-payment {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

.af-pay-payment__card {
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #cbe4f1;
  box-shadow: 0px 6px 24px 0px #0340701a;
}

@media (max-width: 1024px) {
  .af-pay-payment__card {
    padding: 16px;
    border-radius: 14px;
  }
}

.af-pay-payment__secured {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 21px;
  color: var(--af-pay-muted);
}

.af-pay-payment__lock {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--af-pay-muted);
}

.af-pay-payment__provider {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--af-pay-ink);
}

.af-pay ul.payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

/* Fixed radio column so every label starts at the same x, and the icon is pushed
   to the end of the label — the gateway images are inside the label, not siblings.

   Flex, not grid: each li holds the radio, the label and the expandable
   .payment_box, and with a two-column grid the third child pushed the label onto
   its own row. Wrapping flex puts the box on its own line by itself. */
.af-pay ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* gap 0, and the 12px lives on the label instead: WooCommerce clearfixes the
	   row, and the blockified ::before is a zero-width flex item that would eat one
	   gap of its own and push the radio 12px past the card's left edge. */
  gap: 0;
  min-height: 44px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 0;
  margin-bottom: 0 !important;
}

.af-pay #payment ul.payment_methods li > label {
  flex: 1 1 0;
  min-width: 0;
  /* !important on display only: the label already spans the row (checked with
	   a temporary background), but something outside this sheet keeps it a block,
	   so its text and icon stayed inline and margin-left:auto had no axis to
	   work on. */
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: auto;
  margin: 0 0 0 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--af-pay-body);
  cursor: pointer;
}

.af-pay #payment ul.payment_methods li input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--af-pay-line);
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    border-width 0.15s ease;
}

.af-pay #payment ul.payment_methods li input[type="radio"]:checked {
  border: 6px solid var(--af-pay-blue);
}

/* The plugin's own sheet floats these left with a 5px margin
   (mollie-payments-for-woocommerce/public/css/mollie-gateway-icons.min.css).
   Pinned to the row rather than pushed within the label: a rule outside this sheet
   overrides the label's display with !important, so neither margin-left:auto (needs
   flex) nor float:right (needs block) can be relied on. Absolute positioning against
   the li is independent of both. */
.woocommerce-checkout.checkout-v2 #payment ul.payment_methods li > label,
.af-pay ul.payment_methods li > label {
  /* space-between is what actually right-aligns the gateway icon. An auto
	   left margin on the image does not survive here, and the selector is
	   doubled because the theme reaches these labels with #payment in the
	   chain. */
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.af-pay ul.payment_methods li > label img,
.af-pay ul.payment_methods li > label .mollie-gateway-icon {
  /* The plugin floats these left with a 5px margin
	   (mollie-payments-for-woocommerce/public/css/mollie-gateway-icons.min.css). */
  float: none;
  flex: 0 0 auto;
  max-height: 24px;
  width: auto;
  margin: 0;
}

.af-pay ul.payment_methods li .payment_box {
  flex: 1 1 100%;
  margin: 8px 0 0;
  padding: 14px;
  padding-inline: 0px !important;
  border-radius: 12px;
  background: var(--af-pay-field);
  font-size: 13px;
  line-height: 20px;
  color: var(--af-pay-muted);
}

.af-pay ul.payment_methods li .payment_box::before {
  display: none;
}

/* Class names come from the plugin's own stylesheet
   (mollie-payments-for-woocommerce/public/css/mollie-components.min.css):
   .mollie-components > .mollie-component#cardHolder|cardNumber|expiryDate|verificationCode,
   each preceded by a .mollie-component-label. */

.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-components {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 10px;
  background: #eff7fb;
  border: 1px solid var(--af-select-line);
}

/* Only the direct children of .mollie-components are flex items. Mollie also ships
   margin-top on adjacent children and 5% side padding on the wrappers, which is what
   opened a 73px hole between expiry and CVC; the flex gap replaces both. */
.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-components > div {
  flex: 1 1 100%;
  width: auto;
  margin: 0;
  /* !important: Mollie sets the side padding as a percentage and it survives
	   a more specific selector here, the same way the notice shadow did. */
  padding: 0 !important;
}

/* Each wrapper ends with an empty errors div that still takes a line box. */
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > div
  > div:empty {
  display: none;
}

.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-component {
  width: 100%;
}

/* Mollie only gives expiry date a placeholder of its own; the other three iframes
   render empty, so the plugin's label is laid over the box and checkout-v2.js
   removes it the moment the field is used. */
.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-components > div {
  position: relative;
}

.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-component-label {
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 48px;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--af-pay-muted);
  pointer-events: none;
}

/* Expiry date already has "MM / YY" inside the iframe — no stand-in needed. */
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > #expiryDate
  > .mollie-component-label,
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .af-pay-field--used
  > .mollie-component-label {
  display: none;
}

.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-component {
  min-height: 48px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--af-pay-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  display: flex;
  align-items: center;
}

.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-component iframe {
  width: 100%;
  border: 0;
}

.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-component.has-focus {
  border-color: var(--af-pay-blue);
}

.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-component.is-invalid {
  border-color: #e02b2b;
  box-shadow: none;
}

.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > #expiryDate,
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > #verificationCode {
  flex: 0 1 calc(50% - 5px);
  max-width: calc(50% - 5px);
  padding: 0;
}

/* Design order is card number, expiry + CVC, then name; Mollie emits the card
   holder first. Flex order rearranges it without touching the plugin. */
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > #cardNumber {
  order: 1;
}
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > #expiryDate {
  order: 2;
}
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > #verificationCode {
  order: 3;
}
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components
  > #cardHolder {
  order: 4;
}

.af-pay .payment_method_mollie_wc_gateway_creditcard .mollie-component-error {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: #e02b2b;
}

/* Mollie repeats "Secure payments provided by mollie" under the fields. */
.af-pay
  .payment_method_mollie_wc_gateway_creditcard
  .mollie-components-description {
  display: none;
}

/* The row carries no margin or padding of its own: WooCommerce's .form-row gives
   it both, which stacked with the column gap and left the acknowledgement 56px
   below the card instead of 20. */
.af-pay-place-order {
  display: flex;
  align-items: center;
  /* flex-start, not space-between: Section/Pay sets the terms 20 after the
     button, and space-between grew that 20 into the whole spare width. */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 !important;
  padding: 0 !important;
}

/* WooCommerce clearfixes .form-row and the theme leaves <noscript> as a block, so
   two zero-size flex items would sit on their own line and eat a row-gap each.
   Taking them out of flow is what a display override could not do: the clearfix
   rule wins on display, but nothing else sets position. */
.af-pay-place-order::before,
.af-pay-place-order::after {
  position: absolute;
}

.af-pay-place-order noscript {
  display: none;
}

.af-pay-place-order #acknowledge_checkbox_field {
  flex: 1 1 100%;
  margin: 0 0 8px;
  padding: 0;
}

@media (max-width: 768px) {
  .af-pay-place-order {
    padding: 0 !important;
  }
}

.af-pay #place_order {
  /* !important on width and text-transform only: a rule outside every stylesheet
	   in this repo stretches the order button and upper-cases it. The mobile block
	   below returns it to full width. */
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 320px;
  text-transform: none !important;
  font-weight: 600 !important;
  height: 60px;
  padding: 0 40px;
  border: 0;
  border-radius: 8px;
  background: var(--af-pay-blue);
  font-size: 16px !important;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.af-pay #place_order:hover {
  background: #0169b5;
}

.af-pay-place-order__terms {
  /* Left-aligned, not space-between: space-between was stretching the 20px gap
     into whatever the column had spare. */
  flex: 0 1 auto;
  margin: 0;
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  color: var(--af-pay-label);
}

.af-pay-summary {
  padding: 22px;
  display: block;
}

/* PayPal's Pay Later message. The plugin prints it inside a <tr><td>, and because
   this summary is a div rather than a table the parser discards both — and the
   inline display:none with them. What is left is an inline zoid span whose line box
   is 23px tall even when PayPal renders nothing. Zeroing the line height collapses
   it; a message that does render carries its own iframe height and still shows. */
body.checkout-v2 #wc-ppcp-paylater-msg-checkout,
body.checkout-v2 #wc-ppcp-paylater-msg-checkout > span {
  font-size: 0;
  line-height: 0;
}

.af-pay-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.af-pay-summary__head .af-pay-card__label {
  margin: 0;
}

.af-pay-summary__edit {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-pay-blue);
  text-decoration: none;
}

.af-pay-summary__title {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 33px;
  font-weight: 700;
  color: var(--af-pay-ink);
}

.af-pay-summary__meta {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--af-pay-muted);
}

.af-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--af-pay-body);
}

.af-pay-row__value {
  white-space: nowrap;
  font-weight: 500;
}

.af-pay-row--discount .af-pay-row__value,
.af-pay-row--discount .af-pay-row__value .amount {
  color: var(--af-pay-blue);
}

.af-pay-row--total {
  align-items: center;
  margin-top: 10px;
  padding-top: 2px;
}

.af-pay-row--total .af-pay-row__label {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-pay-label);
}

.af-pay-row--total .af-pay-row__value,
.af-pay-row--total .af-pay-row__value .amount {
  font-size: 30px;
  line-height: 45px;
  font-weight: 700;
  color: var(--af-pay-blue);
}

.af-pay-summary__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--af-pay-muted);
}

.af-pay-summary__renewal {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--af-pay-muted);
}

/* A zero-height child still takes a slot in .af-pay-col-main's 20px gap:
   the notices wrapper (printed empty by plugins such as Easy Login
   WooCommerce) and the order-attribution element, which only ever holds
   hidden inputs. Hidden inputs still submit inside a display:none box. */
body.checkout-v2 .woocommerce-notices-wrapper:empty,
body.checkout-v2 wc-order-attribution-inputs {
  display: none;
}

.af-pay-links,
.af-pay-faq {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .af-pay-links,
  .af-pay-faq {
    margin-top: 16px;
  }
}

.af-pay-links {
  padding: 16px 24px;
}

.af-pay .woocommerce-form-login-toggle,
.af-pay .woocommerce-form-coupon-toggle {
  margin: 0;
}

/* Carries the id for the same reason as the row rule above: without it the
   row rule, which now has one, would win the padding and border back. */
#alpnDefaultCheckoutWoo
  .af-pay-links
  .woocommerce-form-login-toggle
  .woocommerce-info,
#alpnDefaultCheckoutWoo
  .af-pay-links
  .woocommerce-form-coupon-toggle
  .woocommerce-info {
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--af-pay-body);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  background: transparent;
}

/* Only when there is a row above it to divide. A logged-in customer gets no
   "Returning customer?" row, and the rule then drew across the top of the card
   with nothing above it. */
#alpnDefaultCheckoutWoo
  .af-pay-links
  .woocommerce-form-login-toggle
  ~ .woocommerce-form-coupon-toggle
  .woocommerce-info {
  border-top: 1px solid var(--af-pay-line);
  padding-top: 12px;
}

.af-pay-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px;
  box-shadow: 0 6px 24px rgba(3, 64, 112, 0.1);
}

.af-pay .woocommerce-form-login-toggle,
.af-pay .woocommerce-form-coupon-toggle {
  margin: 0;
}

/* #alpnDefaultCheckoutWoo: the theme sets `#alpnDefaultCheckoutWoo
   .woocommerce-info { font-size: 16px }`, an id, so every class-only selector lost.
   .af-pay-links only exists on v2, so this stays scoped to the new checkout. */
#alpnDefaultCheckoutWoo .af-pay-links .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--af-pay-ink);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
}

body.checkout-v2
  .af-pay
  .af-pay-links
  .woocommerce-form-login-toggle
  ~ .woocommerce-form-coupon-toggle
  .woocommerce-info {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(203, 228, 241, 0.7);
}

body.checkout-v2 .af-pay .af-pay-links .woocommerce-info::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  background: transparent;
  border-radius: 0;
  color: var(--af-pay-blue);
  -webkit-mask: var(--af-pay-link-icon) center / 20px 20px no-repeat;
  mask: var(--af-pay-link-icon) center / 20px 20px no-repeat;
  background-color: var(--af-pay-blue);
}

body.checkout-v2
  .af-pay
  .af-pay-links
  .woocommerce-form-login-toggle
  .woocommerce-info {
  --af-pay-link-icon: url("../img/icon-user.svg");
}

body.checkout-v2
  .af-pay
  .af-pay-links
  .woocommerce-form-coupon-toggle
  .woocommerce-info {
  --af-pay-link-icon: url("../img/icon-tag.svg");
}

body.checkout-v2 .af-pay .af-pay-links .woocommerce-info a {
  color: var(--af-pay-blue);
  font-weight: 500;
  text-decoration: underline !important;
}

/* The login form is Easy Login WooCommerce, which ships its own sizes in an inline
   <style> with long selectors (`.xoo-el-form-container button.button.btn.xoo-el-action-btn`).
   The coupon form is sized by the theme from `#alpnDefaultCheckoutWoo
   form.checkout_coupon`, an id. So the selectors below are matched to those. */

.af-pay .af-pay-links .xoo-el-form-container,
.af-pay .woocommerce-form-login,
#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon {
  margin: 0;
  padding: 16px;
}

/* The plugin centres itself in a 700px column, which left the form floating in
   the middle of a 1200 card. */
.af-pay .af-pay-links .xoo-el-form-container.xoo-el-form-inline {
  max-width: none;
}

.af-pay .af-pay-links .xoo-el-section {
  padding: 0;
}

.af-pay .af-pay-links .xoo-el-notice:empty {
  display: none;
}

/* Easy Login WooCommerce sizes its notice band at calc(100% - 20px) with a negative
   bottom margin, both left over from a 20px section padding this layout removes, so
   the band came out narrower than the fields and sat tight against them. */
#alpnDefaultCheckoutWoo .af-pay-links .xoo-el-notice {
  width: 100%;
  margin: 0 0 12px;
}

#alpnDefaultCheckoutWoo .af-pay-links .xoo-el-notice > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  border: 1px solid var(--af-pay-blue);
  border-radius: 12px;
  background: var(--af-pay-card);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--af-pay-body);
}

#alpnDefaultCheckoutWoo .af-pay-links .xoo-el-notice > div::before {
  content: "i";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--af-pay-blue);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
}

/* Written against `> div.…` so it outweighs the shared rule above, which
   carries a type selector of its own. */
#alpnDefaultCheckoutWoo .af-pay-links .xoo-el-notice > div.xoo-el-notice-error {
  border-color: #e02b2b;
  color: #9b1c1c;
}

#alpnDefaultCheckoutWoo
  .af-pay-links
  .xoo-el-notice
  > div.xoo-el-notice-error::before {
  content: "!";
  background: #e02b2b;
}

#alpnDefaultCheckoutWoo
  .af-pay-links
  .xoo-el-notice
  > div.xoo-el-notice-success {
  border-color: #2e9e5b;
  color: #1c6b3c;
}

#alpnDefaultCheckoutWoo
  .af-pay-links
  .xoo-el-notice
  > div.xoo-el-notice-success::before {
  content: "¹3";
  background: #2e9e5b;
}

/* Every field group reserves 20px on its right for a section padding this layout
   removes, so the fields and the footer nav sat 20 narrower than the text above. */
#alpnDefaultCheckoutWoo .af-pay-links .xoo-aff-group {
  float: none;
  width: 100%;
}

#alpnDefaultCheckoutWoo .af-pay-links .xoo-el-nav-ft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  text-align: left;
  color: var(--af-pay-blue);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  cursor: pointer;
}

/* The lost-password form's way back is an empty <i> in a span — an arrow with no
   label, floating under the button. The plugin gives no string to filter, so the
   label is set here. */
#alpnDefaultCheckoutWoo .af-pay-links [data-section="lostpw"] .xoo-el-nav-ft {
  gap: 8px;
  margin-top: 14px;
}

#alpnDefaultCheckoutWoo
  .af-pay-links
  [data-section="lostpw"]
  .xoo-el-nav-ft::after {
  content: "Back to login";
}

#alpnDefaultCheckoutWoo .af-pay-links [data-section="lostpw"] .xoo-el-nav-ft i {
  font-size: 12px;
  line-height: 1;
}

#alpnDefaultCheckoutWoo
  .af-pay-links
  [data-section="lostpw"]
  .xoo-el-nav-ft:hover {
  text-decoration: underline;
}

#alpnDefaultCheckoutWoo .af-pay-links .xoo-el-notice a {
  margin-left: 0;
  color: var(--af-pay-blue);
  font-weight: 500;
  text-decoration: underline;
}

/* Easy Login 4.x stores this block's markup in an option with the sizes written
   into style attributes (`<span class="xoo-el-sing-head" style="font-size: 32px">`),
   so a selector alone loses. !important beats a style attribute as long as the
   inline declaration is not itself important, which it is not.
   Local still runs 3.0.4, where the same sizes come from the plugin's stylesheet
   and these rules already won — hence the two renders disagreeing. */
.af-pay .af-pay-links .xoo-el-sing-head {
  display: block;
  margin-bottom: 2px;
  font-size: 18px !important;
  line-height: 28px;
  font-weight: 600;
  color: var(--af-pay-ink);
}

/* 4.x wraps the pair in `.xoo-el-form-desc > p > strong`, with a <br> between the
   two spans and the paragraph margin in a style attribute.
   In the single section both spans are already block-level from the rules above,
   so there the <br> only buys a blank line (26px) and the paragraph 2px more —
   dropped, which puts 3.0.4 and 4.0.2 on one geometry. Scoped to that section:
   the login section's spans carry no classes at all and are plain inline, so its
   <br> is the only thing stacking them. */
.af-pay .af-pay-links [data-section="single"] .xoo-el-form-desc,
.af-pay .af-pay-links [data-section="single"] .xoo-el-form-desc p {
  margin: 0 !important;
  padding: 0;
}

.af-pay .af-pay-links [data-section="single"] .xoo-el-form-desc br {
  display: none;
}

/* Everywhere else the paragraph keeps its break, but its inline 16px bottom margin
   collapses to nothing against the notice, which then sits on the text. */
.af-pay .af-pay-links .xoo-el-form-desc p {
  margin-bottom: 14px !important;
}

.af-pay .af-pay-links .xoo-el-action-form {
  margin-top: 0;
}

.af-pay .af-pay-links .xoo-el-sing-subtxt,
.af-pay .af-pay-links .xoo-el-form-txt {
  display: block;
  margin-bottom: 14px;
  /* Same style attribute as the heading above, at 16px. */
  font-size: 14px !important;
  line-height: 21px;
  color: var(--af-pay-muted);
}

.af-pay .af-pay-links .xoo-el-sing-fields {
  margin: 0;
}

.af-pay .af-pay-links .xoo-aff-group {
  margin-bottom: 12px;
}

.af-pay .af-pay-links .xoo-aff-input-icon {
  display: none;
}

.af-pay .af-pay-links .xoo-aff-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.af-pay .af-pay-links .xoo-aff-group input[type="text"],
.af-pay .af-pay-links .xoo-aff-group input[type="password"],
.af-pay .af-pay-links .xoo-aff-group input[type="email"],
#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon #coupon_code {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--af-pay-line);
  border-radius: 10px;
  background: #ffffff;
  font-size: 14px;
  line-height: 21px;
  color: var(--af-pay-body);
}

/* Easy Login repaints every focused field (`.xoo-aff-group input:focus`), so the
   card's body colour has to be restated — these must not share a rule with the
   placeholder below, or typing greys the text out. */
.af-pay .af-pay-links .xoo-aff-group input[type="text"]:focus,
.af-pay .af-pay-links .xoo-aff-group input[type="password"]:focus,
.af-pay .af-pay-links .xoo-aff-group input[type="email"]:focus {
  color: var(--af-pay-body);
}

/* The theme keeps a `[placeholder]:focus` rule of its own, and clicking the
   toggle focuses this field straight away, so "Coupon code" has to be stated. */
#alpnDefaultCheckoutWoo
  .af-pay-links
  form.checkout_coupon
  #coupon_code::placeholder {
  color: var(--af-pay-label);
  opacity: 1;
}

#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon #coupon_code:focus {
  border-color: var(--af-pay-blue);
  background: #ffffff;
  color: var(--af-pay-body);
}

/* Room for the show/hide eye the plugin absolutely positions in the field. */
.af-pay .af-pay-links .xoo-aff-cont-password input[type="password"],
.af-pay .af-pay-links .xoo-aff-cont-password input[type="text"] {
  padding-right: 44px;
}

.af-pay .af-pay-links .xoo-el-login-btm-fields {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 21px;
}

.af-pay .af-pay-links .xoo-el-login-btm-fields a,
.af-pay .af-pay-links .xoo-el-lostpw-tgr,
.af-pay .af-pay-links .xoo-el-login-tgr {
  color: var(--af-pay-blue);
  font-weight: 500;
}

.af-pay
  .af-pay-links
  .xoo-el-form-container
  button.button.btn.xoo-el-action-btn,
#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon button,
.af-pay .woocommerce-form-login .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 200px;
  height: 48px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--af-pay-blue);
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  text-transform: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.af-pay
  .af-pay-links
  .xoo-el-form-container
  button.button.btn.xoo-el-action-btn:hover,
#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon button:hover,
.af-pay .woocommerce-form-login .button:hover {
  background: #0169b5;
}

/* WooCommerce floats these at 47% each; they wrap onto their own lines when the
   card is too narrow. */
#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  /* checkout.js appends the error into #coupon_code's parent, so that column
     grows and centring dropped the button half a line below the input. */
  align-items: flex-start;
  gap: 12px;
  width: auto;
  margin: 0;
  padding: 8px 16px;
}

#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon .form-row {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon .form-row-first {
  flex: 1 1 240px;
}
#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon .form-row-last {
  flex: 0 0 auto;
}
#alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon .clear {
  display: none;
}

.af-pay-faq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}

.af-pay-faq__title {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  color: var(--af-pay-ink);
}

.af-pay-faq__sub {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--af-pay-muted);
}

.af-pay-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 200px;
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid var(--af-pay-blue);
  border-radius: 8px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600 !important;
  color: var(--af-pay-blue);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .af-pay-btn-secondary {
    width: 100%;
  }
}

.af-pay-btn-secondary:hover {
  background: #ebf7ff;
  border-color: #0169b5;
  color: #0169b5;
}

.af-pay-btn-secondary:focus-visible {
  outline: 2px solid var(--af-pay-blue);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .af-pay {
    /* 4px left the FAQ card sitting on the footer. */
    padding: 0 20px 32px;
  }

  .af-pay-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* The summary lives in the other grid column, so ordering the two columns can
     only put it above or below the whole of the left one. display: contents takes
     both columns out of the box tree so their children become the grid's own items
     and can be ordered one by one. */
  .af-pay-col-main,
  .af-pay-col-side {
    display: contents;
  }

  .af-pay-col-main > * {
    order: 4;
  }

  .af-pay-head {
    order: 1;
  }

  .af-pay-col-main > .woocommerce-notices-wrapper {
    order: 2;
  }

  .af-pay-col-side__sticky {
    order: 3;
    position: static;
  }

  .af-pay-head__title {
    font-size: 28px;
    line-height: 36px;
  }

  .af-pay .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  /* Three ids: woocommerce-smallscreen.css sets
     `.woocommerce #payment #place_order { margin-bottom: 1em }`, which stacked
     with the row-gap and put the terms 30 below the button instead of 12. */
  #alpnDefaultCheckoutWoo #payment #place_order,
  .af-pay #place_order {
    min-width: 0;
    width: 100% !important;
    margin: 0;
  }
}

@media (max-width: 600px) {
  /* Both toggles are named so this outweighs the rule that gives row 2 its divider
     padding; otherwise padding-left would lose and the icon would sit on the text.
     The row stops being a flex line so the link lines up under the label. */
  #alpnDefaultCheckoutWoo
    .af-pay-links
    .woocommerce-form-login-toggle
    .woocommerce-info,
  #alpnDefaultCheckoutWoo
    .af-pay-links
    .woocommerce-form-coupon-toggle
    .woocommerce-info {
    display: block;
    position: relative;
    padding-left: 30px;
  }

  #alpnDefaultCheckoutWoo .af-pay-links .woocommerce-info::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  #alpnDefaultCheckoutWoo .af-pay-links .woocommerce-info a {
    display: block;
    margin-top: 2px;
  }

  .af-pay .af-pay-links {
    padding: 16px;
    border-radius: 14px;
  }

  .af-pay-faq {
    flex-direction: column;
    align-items: flex-start;
  }

  .af-pay .af-pay-links .xoo-el-form-container,
  .af-pay .woocommerce-form-login,
  #alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon {
    padding: 14px;
  }

  #alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon .form-row-first,
  #alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon .form-row-last {
    flex: 1 1 100%;
  }

  .af-pay
    .af-pay-links
    .xoo-el-form-container
    button.button.btn.xoo-el-action-btn,
  #alpnDefaultCheckoutWoo .af-pay-links form.checkout_coupon button,
  .af-pay .woocommerce-form-login .button {
    width: 100%;
    min-width: 0;
  }
}

/* Core uses an id (#payment) or the .woocommerce form .form-row chain, so a short
   selector loses — these blocks need the higher specificity. */

.checkout-v2 .af-pay #payment,
.woocommerce-checkout.checkout-v2 #payment {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.checkout-v2 .af-pay #payment div.payment_box,
.woocommerce-checkout.checkout-v2 #payment div.payment_box {
  margin: 8px 0 0;
  padding: 14px;
  padding-inline: 0px;
  border-radius: 12px;
  background: var(--af-pay-field);
  color: var(--af-pay-body);
}

.checkout-v2 .af-pay #payment div.payment_box::before,
.woocommerce-checkout.checkout-v2 #payment div.payment_box::before {
  display: none;
}

.checkout-v2 .af-pay #payment ul.payment_methods {
  padding: 0;
  border: 0;
}

.checkout-v2 .af-pay #payment div.payment_box input[type="text"],
.checkout-v2 .af-pay #payment div.payment_box input[type="tel"],
.checkout-v2 .af-pay #payment div.payment_box select {
  height: 46px;
  border-radius: 10px;
  background: var(--af-pay-card);
}

/* "Trading Platforms" from yourpropfirm: not in the design, but live functionality. */

.af-pay-addons:not(:empty) {
  background: var(--af-pay-card);
  border: 1px solid var(--af-pay-line);
  border-radius: 16px;
  padding: 24px;
}

.af-pay-addons h2,
.af-pay-addons h3,
.af-pay-addons h4 {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-pay-label);
}

/* Recurring total, rendered through woocommerce_review_order_after_order_total. */

.af-pay-summary .recurring-totals,
.af-pay-summary .wcs-recurring-totals-heading,
.af-pay-summary .order-total-recurring-total,
.af-pay-summary .subscription-details {
  font-size: 13px;
  line-height: 20px;
  color: var(--af-pay-muted);
}

.af-pay-summary table,
.af-pay-summary tbody,
.af-pay-summary tr {
  display: block;
  width: 100%;
  border: 0;
}

.af-pay-summary th,
.af-pay-summary td {
  display: inline-block;
  padding: 2px 0;
  border: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--af-pay-muted);
}

.af-pay-summary td {
  float: right;
}