/*
 * Fesselliebe checkout contrast layer
 * Version 1.14.18 / package 2.3.21
 * Purely visual: no checkout forms, hooks or JavaScript behaviour are changed here.
 */

body#checkout,
#checkout {
  --fl-checkout-bg: var(--bw-bg, #09090b);
  --fl-checkout-surface: #17171a;
  --fl-checkout-surface-2: #202024;
  --fl-checkout-surface-3: #29292e;
  --fl-checkout-border: #56565f;
  --fl-checkout-border-strong: #8b8b95;
  --fl-checkout-text: #f7f5f3;
  --fl-checkout-muted: #c9c5c1;
  --fl-checkout-accent: var(--bw-accent, #d00032);
  --fl-checkout-accent-hover: #b8002c;
  --fl-checkout-success: #68d391;
  color: var(--fl-checkout-text) !important;
  background: var(--fl-checkout-bg) !important;
}

/* ---------- Checkout canvas / steps ---------- */
body#checkout #wrapper,
body#checkout main,
body#checkout #content-wrapper,
body#checkout #content,
#checkout .checkout-grid,
#checkout .checkout-step,
#checkout .step,
#checkout .step__content,
#checkout .checkout-step__content,
#checkout .checkout-step__body,
#checkout .final-summary {
  background-color: transparent !important;
  color: var(--fl-checkout-text) !important;
}

#checkout h1,
#checkout h2,
#checkout h3,
#checkout h4,
#checkout h5,
#checkout h6,
#checkout .h1,
#checkout .h2,
#checkout .h3,
#checkout .h4,
#checkout .step-title,
#checkout .step__title,
#checkout .checkout-step__title,
#checkout .final-summary__header,
#checkout legend {
  color: var(--fl-checkout-text) !important;
  opacity: 1 !important;
}

#checkout p,
#checkout li,
#checkout dt,
#checkout dd,
#checkout label,
#checkout .form-label,
#checkout .form-check-label,
#checkout .text-body,
#checkout .text-body-emphasis {
  color: var(--fl-checkout-text) !important;
  opacity: 1 !important;
}

#checkout small,
#checkout .small,
#checkout .form-text,
#checkout .text-muted,
#checkout .text-body-secondary,
#checkout .text-body-tertiary,
#checkout .checkout-step__subtitle,
#checkout .step__subtitle {
  color: var(--fl-checkout-muted) !important;
  opacity: 1 !important;
}

#checkout hr,
#checkout .border-top,
#checkout .border-bottom,
#checkout .border,
#checkout [class*="border-"] {
  border-color: var(--fl-checkout-border) !important;
}

/* ---------- Address selector: current Hummingbird BEM markup ---------- */
#checkout .address__list,
#checkout .js-address-selector {
  color: var(--fl-checkout-text) !important;
}

#checkout .address-card,
#checkout .address-card__container,
#checkout .address-selector__item,
#checkout .address-item {
  background: var(--fl-checkout-surface) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
  box-shadow: none !important;
}

#checkout .address-card__container {
  border: 1px solid var(--fl-checkout-border) !important;
  border-radius: 10px !important;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

#checkout .address-card:hover .address-card__container,
#checkout .address-card__container:hover,
#checkout .address-selector__item:hover {
  background: var(--fl-checkout-surface-2) !important;
  border-color: var(--fl-checkout-border-strong) !important;
}

#checkout .address-card.selected .address-card__container,
#checkout .address-card:has(input:checked) .address-card__container,
#checkout .address-selector__item:has(input:checked),
#checkout .address-item:has(input:checked) {
  background: #1d1d21 !important;
  color: #fff !important;
  border-color: #f1f1f1 !important;
  box-shadow: inset 4px 0 0 var(--fl-checkout-accent) !important;
}

#checkout .address-card__header,
#checkout .address-card__alias,
#checkout .address-card__content,
#checkout .address-card__content *,
#checkout .address-card address,
#checkout .address-card address *,
#checkout .address-card__actions,
#checkout .address-card__actions * {
  color: var(--fl-checkout-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#checkout .address-card__alias {
  font-weight: 800 !important;
}

#checkout .address-card__content,
#checkout .address-card address {
  color: var(--fl-checkout-muted) !important;
  line-height: 1.55 !important;
}

#checkout .address-card__edit,
#checkout .address-card__actions .link-body-emphasis,
#checkout .address-card__actions a:not(.link-danger):not(.address-card__delete) {
  color: #f4f2ef !important;
  text-decoration-color: #f4f2ef !important;
}

#checkout .address-card__delete,
#checkout .address-card__actions .link-danger,
#checkout a.text-danger {
  color: #ff607d !important;
  text-decoration-color: #ff607d !important;
}

/* ---------- Radios / checkboxes ---------- */
#checkout .form-check-input,
#checkout input[type="radio"],
#checkout input[type="checkbox"] {
  background-color: #101012 !important;
  border-color: #c6c3c0 !important;
  opacity: 1 !important;
}

#checkout .form-check-input:checked,
#checkout input[type="radio"]:checked,
#checkout input[type="checkbox"]:checked {
  background-color: var(--fl-checkout-accent) !important;
  border-color: #fff !important;
}

#checkout .form-check-input:focus,
#checkout input[type="radio"]:focus,
#checkout input[type="checkbox"]:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--fl-checkout-accent) 35%, transparent) !important;
}

/* ---------- Address/forms/comment fields ---------- */
#checkout .form-control,
#checkout .form-select,
#checkout input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
#checkout select,
#checkout textarea,
#checkout .input-group-text {
  background-color: #111114 !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
  opacity: 1 !important;
}

#checkout .form-control::placeholder,
#checkout textarea::placeholder,
#checkout input::placeholder {
  color: #a9a5a1 !important;
  opacity: 1 !important;
}

#checkout .form-control:focus,
#checkout .form-select:focus,
#checkout input:not([type="radio"]):not([type="checkbox"]):focus,
#checkout select:focus,
#checkout textarea:focus {
  background-color: #151518 !important;
  color: #fff !important;
  border-color: var(--fl-checkout-accent) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fl-checkout-accent) 25%, transparent) !important;
}

#checkout input:-webkit-autofill,
#checkout input:-webkit-autofill:hover,
#checkout input:-webkit-autofill:focus,
#checkout textarea:-webkit-autofill,
#checkout select:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #151518 inset !important;
  caret-color: #fff !important;
}

/* ---------- Shipping methods ---------- */
#checkout .delivery-options,
#checkout .delivery-options__list,
#checkout .delivery-option,
#checkout .delivery-option__container,
#checkout .delivery-option__content,
#checkout .delivery-option__label,
#checkout .carrier,
#checkout .carrier__container,
#checkout .carrier-item {
  background: var(--fl-checkout-surface) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
}

/* Parent theme often paints a white row inside .delivery-option. */
#checkout .delivery-option > div,
#checkout .delivery-option > label,
#checkout .delivery-option > .row,
#checkout .delivery-option .row,
#checkout .delivery-option .col,
#checkout .delivery-option [class*="col-"],
#checkout .delivery-option .form-check,
#checkout .delivery-option .form-check-label {
  background-color: transparent !important;
  color: var(--fl-checkout-text) !important;
}

#checkout .delivery-option {
  border: 1px solid var(--fl-checkout-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

#checkout .delivery-option:hover {
  background: var(--fl-checkout-surface-2) !important;
  border-color: var(--fl-checkout-border-strong) !important;
}

#checkout .delivery-option:has(input:checked) {
  background: #1d1d21 !important;
  border-color: #f1f1f1 !important;
  box-shadow: inset 4px 0 0 var(--fl-checkout-accent) !important;
}

#checkout .delivery-option label,
#checkout .delivery-option p,
#checkout .delivery-option span,
#checkout .delivery-option strong,
#checkout .delivery-option .carrier-name,
#checkout .delivery-option .carrier-delay,
#checkout .delivery-option .carrier-price,
#checkout .delivery-option__name,
#checkout .delivery-option__description,
#checkout .delivery-option__price {
  color: var(--fl-checkout-text) !important;
  opacity: 1 !important;
}

#checkout .delivery-option .carrier-delay,
#checkout .delivery-option__description,
#checkout .delivery-option small {
  color: var(--fl-checkout-muted) !important;
}

#checkout .delivery-option img {
  opacity: 1 !important;
}

/* ---------- Payment methods ---------- */
#checkout .payment-options,
#checkout .payment-options__list,
#checkout .payment-option,
#checkout .payment-option__form-check,
#checkout .payment-option__additional-information,
#checkout .js-payment-option-form,
#checkout .payment-form {
  background-color: var(--fl-checkout-surface) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
}

#checkout .payment-option {
  border: 1px solid var(--fl-checkout-border) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

#checkout .payment-option:hover,
#checkout .payment-option:has(input:checked) {
  border-color: #f1f1f1 !important;
}

#checkout .payment-option:has(input:checked) {
  box-shadow: inset 4px 0 0 var(--fl-checkout-accent) !important;
}

#checkout .payment-option__label,
#checkout .payment-option__label *,
#checkout .payment-option__additional-information,
#checkout .payment-option__additional-information * {
  color: var(--fl-checkout-text) !important;
  opacity: 1 !important;
}

/* ---------- Buttons: never invert to an unreadable white CTA ---------- */
#checkout .btn,
#checkout button,
#checkout [role="button"] {
  font-size: var(--bw-font-button, 14px) !important;
}

#checkout .btn-primary,
#checkout button[type="submit"].btn-primary,
#checkout a.btn-primary {
  background: var(--fl-checkout-accent) !important;
  color: #fff !important;
  border-color: var(--fl-checkout-accent) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#checkout .btn-primary *,
#checkout button[type="submit"].btn-primary *,
#checkout a.btn-primary * {
  color: #fff !important;
  fill: currentColor !important;
}

#checkout .btn-primary:hover,
#checkout .btn-primary:focus,
#checkout .btn-primary:focus-visible,
#checkout .btn-primary:active,
#checkout button[type="submit"].btn-primary:hover,
#checkout button[type="submit"].btn-primary:focus,
#checkout a.btn-primary:hover,
#checkout a.btn-primary:focus {
  background: var(--fl-checkout-accent-hover) !important;
  color: #fff !important;
  border-color: #ff6684 !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fl-checkout-accent) 28%, transparent) !important;
}

#checkout .btn-outline-primary,
#checkout .btn-outline-secondary,
#checkout .btn-outline-tertiary,
#checkout .btn-basic,
#checkout a.btn-basic,
#checkout button.btn-basic {
  background: #151518 !important;
  color: #fff !important;
  border-color: var(--fl-checkout-border-strong) !important;
  opacity: 1 !important;
}

#checkout .btn-outline-primary *,
#checkout .btn-outline-secondary *,
#checkout .btn-outline-tertiary *,
#checkout .btn-basic * {
  color: #fff !important;
  fill: currentColor !important;
}

#checkout .btn-outline-primary:hover,
#checkout .btn-outline-primary:focus,
#checkout .btn-outline-secondary:hover,
#checkout .btn-outline-secondary:focus,
#checkout .btn-outline-tertiary:hover,
#checkout .btn-outline-tertiary:focus,
#checkout .btn-basic:hover,
#checkout .btn-basic:focus {
  background: var(--fl-checkout-surface-3) !important;
  color: #fff !important;
  border-color: var(--fl-checkout-accent) !important;
}

#checkout .btn:disabled,
#checkout .btn.disabled,
#checkout button:disabled {
  background: #313137 !important;
  color: #c8c8ce !important;
  border-color: #5b5b63 !important;
  opacity: .78 !important;
}

/* ---------- Order review / final summary ---------- */
#checkout .final-summary,
#checkout .final-summary__content,
#checkout .final-summary__section,
#checkout .final-summary .address__list,
#checkout .final-summary .address-card,
#checkout .final-summary .address-card__container,
#checkout .final-summary__order-table,
#checkout .final-summary__order-table.card,
#checkout .final-summary__order-table .card-body,
#checkout .final-summary .card,
#checkout .final-summary .card-body {
  background: var(--fl-checkout-surface) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
}

#checkout .final-summary .address-card__content,
#checkout .final-summary .address-card__content *,
#checkout .final-summary address,
#checkout .final-summary address * {
  color: var(--fl-checkout-muted) !important;
  opacity: 1 !important;
}

#checkout .grid-table,
#checkout .grid-table__inner,
#checkout .grid-table__header,
#checkout .grid-table__row,
#checkout .grid-table__cell,
#checkout .grid-table__cell-group {
  background-color: var(--fl-checkout-surface) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
}

#checkout .grid-table__header {
  background-color: var(--fl-checkout-surface-2) !important;
  font-weight: 800 !important;
}

#checkout .grid-table__row:nth-child(even),
#checkout .grid-table__inner:nth-child(even) {
  background-color: #1b1b1f !important;
}

#checkout .grid-table a,
#checkout .final-summary a:not(.btn):not(.link-danger) {
  color: #fff !important;
}

/* ---------- Cart/order summary cards ---------- */
#checkout .cart-summary,
#checkout .cart-summary-products,
#checkout .cart-summary-line,
#checkout .cart-summary-totals,
#checkout .cart-summary-subtotals-container,
#checkout .cart-summary .card,
#checkout .cart-summary .card-body,
#checkout .order-options,
#checkout .order-options .card,
#checkout .order-options .card-body {
  background-color: var(--fl-checkout-surface) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
}

#checkout .cart-summary-line .label,
#checkout .cart-summary-products,
#checkout .cart-summary-products p,
#checkout .cart-summary-products a,
#checkout .cart-summary-line .value,
#checkout .cart-summary-line.cart-total .label,
#checkout .cart-summary-line.cart-total .value {
  color: var(--fl-checkout-text) !important;
  opacity: 1 !important;
}

/* ---------- Accordion / tabs used by checkout modules ---------- */
#checkout .accordion,
#checkout .accordion-item,
#checkout .accordion-body,
#checkout .accordion-collapse,
#checkout .tab-content,
#checkout .tab-pane {
  background-color: var(--fl-checkout-surface) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
}

#checkout .accordion-button {
  background: var(--fl-checkout-surface-2) !important;
  color: var(--fl-checkout-text) !important;
  border-color: var(--fl-checkout-border) !important;
  box-shadow: none !important;
}

#checkout .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2) !important;
}

/* ---------- Links / state labels ---------- */
#checkout a:not(.btn):not(.link-danger) {
  color: #f2f0ed !important;
  text-decoration-color: #9d9aa0 !important;
}

#checkout a:not(.btn):not(.link-danger):hover,
#checkout a:not(.btn):not(.link-danger):focus {
  color: #fff !important;
  text-decoration-color: var(--fl-checkout-accent) !important;
}

#checkout .alert,
#checkout .alert * {
  opacity: 1 !important;
}

/* ---------- Responsive checkout ---------- */
@media (max-width: 767.98px) {
  #checkout .address__list,
  #checkout .js-address-selector {
    grid-template-columns: 1fr !important;
  }

  #checkout .address-card,
  #checkout .address-card__container,
  #checkout .delivery-option,
  #checkout .payment-option {
    width: 100% !important;
    min-width: 0 !important;
  }

  #checkout .buttons-wrapper,
  #checkout .checkout-step__actions,
  #checkout .step__actions {
    gap: 10px !important;
  }

  #checkout .buttons-wrapper .btn,
  #checkout .checkout-step__actions .btn,
  #checkout .step__actions .btn {
    max-width: 100% !important;
  }

  #checkout .grid-table__row,
  #checkout .grid-table__inner {
    color: var(--fl-checkout-text) !important;
  }
}
