/**
 * Custom Checkout Layout Stylesheet for GridChoice
 *
 * Provides smooth fluid container behavior between 768px and 991.98px
 * so columns shrink proportionally across tablet viewports while maintaining
 * standard container constraints for >= 992px and standard mobile stacking for < 768px.
 */

.form-field-optional {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.2;
  margin-inline-start: .25rem;
  white-space: nowrap;
}

@layer utilities {
  @media (min-width: 768px) and (max-width: 991.98px) {
    /* Fluid container scaling between 768px and 991.98px */
    #checkout .columns-container.container,
    .page-order .columns-container.container {
      max-width: 95% !important;
      width: 100% !important;
    }

    /* Side-by-side columns: Content (left, order 1), Aside (right, order 2) */
    #checkout .checkout-grid__content,
    .page-order .checkout-grid__content {
      flex: 0 0 auto !important;
      width: 66.66666667% !important;
      order: 1 !important;
    }

    #checkout .checkout-grid__aside,
    .page-order .checkout-grid__aside {
      flex: 0 0 auto !important;
      width: 33.33333333% !important;
      order: 2 !important;
    }

    /* Sticky sidebar on tablet */
    #checkout .checkout-grid__aside-wrapper,
    .page-order .checkout-grid__aside-wrapper {
      position: sticky !important;
      top: var(--scroll-padding-top) !important;
      z-index: 1020 !important;
    }

    /* Keep order summary expanded on tablet */
    #checkout .checkout__summary-accordion-header,
    .page-order .checkout__summary-accordion-header {
      display: none !important;
    }

    #checkout .checkout__summary-accordion-wrapper > .accordion-collapse,
    .page-order .checkout__summary-accordion-wrapper > .accordion-collapse {
      display: block !important;
    }
  }
}

/* Relocated footer in aside wrapper (>= 768px) */
@media (min-width: 768px) {
  #checkout .checkout-grid__content .form-label,
  #checkout .checkout-grid__content .form-control,
  #checkout .checkout-grid__content .form-select {
	  font-size: .8rem;
  }
  #checkout .checkout-grid__content .form-control,
  #checkout .checkout-grid__content .form-select {
    padding: .25rem .8rem;
    background-color: #fff9e5;
  }
  #checkout .checkout-grid__content .form-label {
    margin-bottom: .25rem;
  }
  #checkout .opc-delivery-address-fields .mb-3 {
    margin-bottom: .5rem;
  }

  #checkout .js-opc-contact-section {
	margin-top: 1rem;
  }

  #checkout .checkout-grid__aside-wrapper {
    /*
    border: 1px solid #D2C8A3;
    background-color: #F9F1E6;
    padding: 1rem;
    border-radius: .5rem;
    */
    border: 1px solid #b1b1b1;
    background-color: #f7f7f7;
    padding: 1rem;
    border-radius: .3rem;
  }

  #checkout .checkout-grid__aside-wrapper .accordion-button,
  #checkout .checkout-grid__aside-wrapper .accordion-item {
    background-color: unset;
  }

  .checkout-grid__aside-wrapper .one-page-checkout__footer {
    padding-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .checkout-grid__aside-wrapper .one-page-checkout__footer .js-conditions-to-approve {
    margin-top: 0 !important;
    margin-bottom: 1rem;
  }
}

/* Guest checkout notice styling */
.one-page-checkout__guest-notice {
  font-size: 0.8rem;
  color: var(--bs-body-color, #212529);
  line-height: 1.5;
}

.one-page-checkout__guest-notice .one-page-checkout__link {
  color: var(--bs-primary, #0b69f6);
  text-decoration: underline;
  font-weight: 500;
}

.one-page-checkout__guest-notice .one-page-checkout__link:hover {
  text-decoration: none;
}

/* Passive terms notice styling */
.one-page-checkout__terms-passive-notice {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--bs-secondary-color, #6c757d);
}

.one-page-checkout__terms-passive-notice .one-page-checkout__link {
  color: var(--bs-primary, #0b69f6);
  text-decoration: underline;
}

.one-page-checkout__terms-passive-notice .one-page-checkout__link:hover {
  text-decoration: none;
}

#checkout .payment-options__list .paypal-mark,
#checkout #opc-payment-methods .paypal-mark {
  border: unset !important;
  background-color: unset !important;
  padding: 0 !important;
  margin: 0 0 0 5px !important;
}

/* Single PayPal option: the radio + "PayPal" label are redundant because the
   PayPal / Venmo / Card buttons below ARE the choice. The radio stays in the DOM
   (the checkout needs it checked to submit) and is only hidden visually.
   The class is applied by custom-checkout.js (hideSinglePaypalRadio). */
#checkout .opc-single-payment-option .payment-option__form-check {
  display: none;
}

/* ---------------------------------------------------------------------------
   Payment methods as a horizontal tab strip (one-page checkout)
   ---------------------------------------------------------------------------
   The OPC renders each payment option as a `.payment-option` wrapper holding a
   radio + label (`.payment-option__form-check`) and the module's form
   (`.js-payment-option-form`, plus an optional `.js-additional-information`).
   The module's JS only toggles `display` on the form panels, so by default the
   radios sit in a vertical list and the selected form slides in below its row.

   This turns that into a tab strip without touching the DOM or the JS:
   `display: contents` on the wrapper promotes the radio row and the form to
   flex items of `#opc-payment-methods`; the radio rows become the strip
   (order 0) and the form panels are pushed below it at full width (order 1).
   Because the markup is unchanged, the module's show/hide, the theme's
   `closest('.payment-option')` lookups and the radio-group semantics all keep
   working, and the layout survives the innerHTML re-render on every
   address/carrier refresh.

   Only applied with 2+ options: a single option already hides its radio row
   (`.opc-single-payment-option`) and needs no strip.
   --------------------------------------------------------------------------- */
#checkout #opc-payment-methods:has(> .payment-option + .payment-option) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#checkout #opc-payment-methods:has(> .payment-option + .payment-option) > .payment-option {
  display: contents;
}

/* Tab strip. `flex: 1 1 0` + `min-width: 0` gives every tab an equal share of
   the row regardless of label length. */
#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__form-check {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: .5rem;
  /* -1px pulls the tab over the panel's top border so the active tab merges
     into the panel below it. */
  margin: 0 0 -1px;
  padding: .5rem .75rem;
  border: 1px solid var(--bs-border-color, #b9bdc1);
  border-radius: .375rem .375rem 0 0;
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  cursor: pointer;
}

#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__form-check:hover {
  background-color: #fff;
}

#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__form-check:has(input:checked) {
  /* z-index keeps the white bottom border above the panel's top border. */
  z-index: 1;
  border-bottom-color: #fff;
  background-color: #fff;
  font-weight: 600;
}

/* Bootstrap floats the radio out of the label's padding box; as a flex item it
   needs the negative margin cleared. The z-index keeps the radio above the
   label's full-tab hit area so it stays directly clickable. */
#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__input {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
}

#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__label {
  flex: 1 1 auto;
  cursor: pointer;
}

/* Extend the label's hit area over the tab's padding so the whole tab is
   clickable, not just the text. */
#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__label::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Form panel below the strip. `order: 1` puts every panel after every tab, and
   `flex-basis: 100%` forces each onto its own line. The square top corners let
   the panel merge with the active tab above it. */
#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .js-additional-information,
#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .js-payment-option-form {
  order: 1;
  flex: 1 1 100%;
  padding: .75rem;
  border: 1px solid var(--bs-border-color, #b9bdc1);
  border-radius: 0 0 .375rem .375rem;
  background-color: #fff;
}

/* The optional additional-information block sits directly above the form (the
   module shows/hides both together), so the -1px margin collapses their
   adjacent borders into one and the block loses its bottom corners, making the
   pair read as a single panel. */
#checkout #opc-payment-methods:has(> .payment-option + .payment-option) .js-additional-information {
  margin-bottom: -1px;
  border-radius: 0;
}

/* Narrow screens: stack the tabs full width instead of squeezing the labels. */
@media (max-width: 575.98px) {
  #checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__form-check {
    flex: 1 1 100%;
    margin-bottom: 0;
    border-radius: .375rem;
  }

  #checkout #opc-payment-methods:has(> .payment-option + .payment-option) .payment-option__form-check:has(input:checked) {
    border-bottom-color: var(--bs-border-color, #b9bdc1);
  }

  #checkout #opc-payment-methods:has(> .payment-option + .payment-option) .js-additional-information,
  #checkout #opc-payment-methods:has(> .payment-option + .payment-option) .js-payment-option-form {
    margin-top: .5rem;
  }
}

#checkout .order-confirmation__product-img {
  height: unset !important;
}

#checkout #ps_checkout-express-checkout-banner {
  opacity: 0.5;
}

#checkout #ps_checkout-card-fields-form {
  background-color: #e1ecf6;
  border-radius: .3rem;
  border: 1px solid #4f6175;
  padding: .5rem;
}

#checkout #ps_checkout-card-fields-form .form-control-label {
  font-weight: bold;
}

#checkout #ps_checkout-card-buttons-container .btn {
  border-radius: 0;
  font-weight: bold;
  margin-bottom: .5rem;

  --bs-btn-color: white;
  --bs-btn-bg: #4a92d4;
  --bs-btn-border-color: black;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3c82c2;
  --bs-btn-hover-border-color: black;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2a67a0;
  --bs-btn-active-border-color: black;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: #e9ecef;
  --bs-btn-disabled-border-color: #bcc4cb;
}
/*
#checkout .delivery-options__list {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
}
*/
#checkout .checkout-summary__header {
  font-size: .95rem;
  font-weight: bold;
}
#checkout .cart-summary__products-accordion .accordion-button {
  color: black;
  font-size: .9rem;
}

#checkout .js-opc-delivery-section {
  border-top: unset !important;
}

#checkout .address-card__alias {
  font-size: 1rem !important;
}

#checkout #ps_checkout-loader {
  display: none;
}

/* Checkout step navigation: whole step (number + label) is clickable, with hover highlight */
.checkout-steps__list .checkout-steps__step {
  border-radius: .375rem;
  padding-block: .5rem;
  padding-inline: .25rem;
  transition: background-color .15s ease-in-out;
}

.checkout-steps__list .checkout-steps__step:hover {
  background-color: rgba(0, 0, 0, .05);
}

.checkout-steps__list .checkout-steps__step:before,
.checkout-steps__list .checkout-steps__step:after {
  top: 1.1875rem;
}

.checkout-steps__list .checkout-steps__number {
  pointer-events: none;
}

.checkout-steps__list .checkout-steps__btn {
  white-space: nowrap;
}

.checkout-steps__list .checkout-steps__btn::after {
  content: "";
  inset: 0;
  position: absolute;
}

@media (min-width: 768px) {
  #checkout #customer-form > section {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #checkout #customer-form > section > * {
    grid-column: 1 / -1;
  }

  #checkout #customer-form > section > .customer-form-field--firstname,
  #checkout #customer-form > section > .customer-form-field--lastname,
  #checkout #customer-form > section > .customer-form-field--email,
  #checkout #customer-form > section > .customer-form-field--email_confirmation {
    grid-column: auto;
  }

  /* Field set and order follow each country's address format, so spans adapt to the fields present. */
  #checkout .js-address-form .form-fields {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #checkout .js-address-form .form-fields > * {
    grid-column: 1 / -1;
  }

  #checkout .js-address-form .form-fields > .customer-form-field--firstname,
  #checkout .js-address-form .form-fields > .customer-form-field--lastname,
  #checkout .js-address-form .form-fields > .customer-form-field--address1,
  #checkout .js-address-form .form-fields > .customer-form-field--address2 {
    grid-column: span 3;
  }

  #checkout .js-address-form .form-fields:not(:has(> .customer-form-field--address2)) > .customer-form-field--address1 {
    grid-column: 1 / -1;
  }

  #checkout .js-address-form .form-fields > .customer-form-field--city,
  #checkout .js-address-form .form-fields > .customer-form-field--id_state,
  #checkout .js-address-form .form-fields > .customer-form-field--postcode {
    grid-column: span 2;
  }

  #checkout .js-address-form .form-fields:not(:has(> .customer-form-field--id_state)) > .customer-form-field--city,
  #checkout .js-address-form .form-fields:not(:has(> .customer-form-field--id_state)) > .customer-form-field--postcode,
  #checkout .js-address-form .form-fields:not(:has(> .customer-form-field--postcode)) > .customer-form-field--city,
  #checkout .js-address-form .form-fields:not(:has(> .customer-form-field--postcode)) > .customer-form-field--id_state {
    grid-column: span 3;
  }

  #checkout .js-address-form .form-fields:not(:has(> .customer-form-field--id_state)):not(:has(> .customer-form-field--postcode)) > .customer-form-field--city {
    grid-column: 1 / -1;
  }

  #checkout .one-page-checkout__section {
    padding-left: 1rem;
  }
  #checkout .opc-step__footer {
    margin-left: 1rem;
  }
}

/* One-page checkout collapsible steps */
.opc-step__header {
  grid-row: 1;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  /*
  border: 1px solid #cdcac6;
  border-radius: .4rem;
  background-color: #fdf9ef;
  */
}

.opc-step__header button {
  font-size: .8rem;
}

.opc-steps-enabled .opc-step:not(.is-active) > .opc-step__header {
  display: flex;
}

.opc-steps-enabled .opc-step:not(.is-active) {
  grid-template-rows: auto 0fr;
}

.opc-step__panel {
  grid-row: 2;
  min-height: 0;
  overflow: visible;
  transition: visibility .3s;
}

.opc-steps-enabled .opc-step:not(.is-active) > .opc-step__panel {
  overflow: hidden;
  visibility: hidden;
}

/* Clip content while a step animates so it cannot spill over neighbouring steps. */
.opc-steps-enabled .opc-step.is-transitioning > .opc-step__panel {
  overflow: hidden;
}

.opc-step__header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: .3rem;
}

.opc-step__title {
  font-weight: 600;
}

.opc-step__summary {
  color: var(--bs-secondary-color, #6c757d);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.opc-step__summary-label {
  display: block;
  margin-top: .3rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
}

.opc-step__summary:empty {
  display: none;
}

.opc-step__change {
  display: none;
  flex-shrink: 0;
  padding: 0;
  text-decoration: underline;
}

.opc-step.is-editable .opc-step__change {
  display: inline-block;
}

.opc-step__footer {
  margin-top: 1rem;
}
/*
.opc-step__footer .btn {
  --bs-btn-color: #000;
  --bs-btn-bg: #e7eaf2;
  --bs-btn-border-color: #a8abc5;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #dadee9;
  --bs-btn-hover-border-color: #8a8697;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #bec5dc;
  --bs-btn-active-border-color: #8a8697;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: #e9ecef;
  --bs-btn-disabled-border-color: #ced4da;
}
*/
.opc-steps-enabled {
  counter-reset: opc-step;
}

.opc-steps-enabled .opc-step {
  display: grid;
  grid-template-rows: auto 1fr;
  transition: grid-template-rows .3s ease;
  position: relative;
  margin-bottom: 1.25rem;
  padding-inline-start: 3rem;
  counter-increment: opc-step;
}

.opc-steps-enabled .opc-step::before {
  content: counter(opc-step);
  position: absolute;
  inset-inline-start: 0;
  top: .45rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #fff;
  color: #868686;
  font-weight: 600;
  border: 1px solid #d2d2d2;
}

.opc-steps-enabled .opc-step.is-active::before {
  /*
  background-color: #fbf6f1;
  color: #000;
  font-size: 1.3rem;
  width: 2.5rem;
  height: 2.5rem;
  left: -.3rem; 
  background-color: #64a0c7;
  */
  background-color: #1381ca;
  color: #fff;
  font-size: 1.3rem;
  width: 2.5rem;
  height: 2.5rem;
  left: -.3rem;
  border-color: #000;
}

/* Connector line runs from this circle down to the next step's circle. */
.opc-steps-enabled .opc-step::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(1rem - 1px);
  top: 2.5rem;
  bottom: -1.75rem;
  width: 1px;
  background-color: #d2d2d2;
}

.opc-steps-enabled .opc-step[data-opc-step="payment"]::after {
  display: none;
}

.opc-steps-enabled .opc-step[data-opc-step="contact"] > .opc-step__panel .one-page-checkout__title {
  margin-block-start: -.75rem;
}

/* Applied only during the first render so the initial state is set without animating.
   The panel is clipped too, so content can never spill over the following step headers. */
body.opc-steps-booting .opc-step,
body.opc-steps-booting .opc-step__panel {
  transition: none;
}

body.opc-steps-booting .opc-step > .opc-step__panel {
  overflow: hidden;
}

/* Address modal header is a flex row without justify-content; push the close button to the right edge. */
.address-form-container .modal-header .btn-close {
  margin-inline-start: auto;
}

/* ---------------------------------------------------------------------------
   Saved addresses whose country is disabled in the shop.

   Core only filters saved addresses on the ADDRESS being active, never on its
   COUNTRY, so accounts migrated from the legacy shop can hold addresses in
   countries this shop no longer ships to. They stay visible (hiding them would
   look like the address had been deleted) but are rendered disabled with a note.
   --------------------------------------------------------------------------- */

.opc-address-item--unavailable {
  cursor: not-allowed;
}

.opc-address-item--unavailable .form-check-input:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.opc-address-item--unavailable .form-check-input:disabled ~ * {
  cursor: not-allowed;
}

.opc-address-item__unavailable-note {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
}

.opc-address-item__unavailable-note .material-icons {
  font-size: .8rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Native (non-OPC) address selector block. */
.address-card--unavailable {
  cursor: not-allowed;
  opacity: .75;
}

.address-card--unavailable .form-check-input:disabled {
  cursor: not-allowed;
}

.address-card__unavailable-note {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
}

#opc-payment-methods-loader {
  z-index: 9999;
}