.checkout-section {
  --return-link-color: var(--tertiary-text-color);
  --original-price-sale-color: var(--tertiary-text-color);
  --sale-color: var(--red-100);
  --soldout-color: var(--error-color);
  --label-color: var(--tertiary-text-color);
  --label-bg-color: var(--primary-bg-color);
  --select-bg-color: var(--primary-bg-color);
  --radio-color: var(--primary-text-color);
  --inactive-radio-color: var(--tertiary-text-color);
  --variation-label-color: var(--tertiary-text-color);
  --error-dialog-bg-color: var(--popup-bg-color);
  --remove-discount-button-bg-color: var(--tertiary-button-bg-color);

  visibility: hidden;

  &[data-empty] {
    visibility: visible;
  }

  &[data-empty="true"] :is(.checkout-overview, .checkout-form, .checkout-section .return-link) {
    display: none;
  }

  &[data-empty="true"] .container {
    row-gap: 2rem;
  }

  &[data-empty="true"] .empty-checkout-container {
    display: flex;
  }
}

body:has(.checkout-error-dialog[open]) {
  overflow: hidden;
}

body:has(.checkout-section) .header-section {
  position: static;

  &.not-scrolling-up {
    translate: none;
  }
}

body:has(.checkout-section) :is(footer, .topbar-section, .header-navigation, .header-utils) {
  display: none;
}

body:has(.checkout-section) .header-section .container {
  justify-content: center;
}

.checkout-title-container {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 1rem;
}

.checkout-title {
  text-align: left;

  @media (width >= 56.25rem) {
    text-align: center;
  }
}

.checkout-section .return-link {
  width: fit-content;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25rem;
  transition: text-decoration-color 0.3s;
  color: var(--return-link-color);
  display: flex;
  column-gap: 0.5rem;
  align-items: center;

  &:hover {
    text-decoration-color: currentColor;
  }

  &:before {
    mask-image: url('../../assets/icons/arrow-left.svg');
    display: block;
  }
}

.checkout-section .container {
  row-gap: 2rem;

  @media (width >= 56.25rem) {
    row-gap: 4rem;
  }
}

.empty-checkout-container {
  display: none;
  flex-direction: column;
  row-gap: 2rem;
  align-items: center;
  justify-content: center;
}

.checkout-overview {
  display: flex;
  row-gap: 2rem;
  flex-direction: column;
  border-bottom: var(--border-secondary);
  padding-bottom: 2rem;

  @media (width >= 56.25rem) {
    grid-column: 9 / -1;
    grid-row: 2 / 2;
    border-left: var(--border-secondary);
    padding-left: 3rem;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.checkout-details {
  appearance: none;
  overflow: clip;

  @supports selector(::details-content) and (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) {
    &::details-content {
      transition: height 0.3s, opacity 0.3s, content-visibility 0.3s;
      transition-behavior: allow-discrete;
      opacity: 0;
      height: 0;
      content-visibility: hidden;
    }
  }

  &[open] {
    @supports not (transition-behavior: allow-discrete) {
      display: flex;
      flex-direction: column;
    }
    
    @supports selector(::details-content) and (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) {
      &::details-content {
        opacity: 1;
        height: auto;
        content-visibility: visible;
        display: flex;
        flex-direction: column;
      }
    }
  }
}

.checkout-details[open] .checkout-details-title-text:after {
  rotate: -180deg;
}

.checkout-details-title {
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: flex;
  column-gap: 1.5rem;
  text-align: left;

  &::-webkit-details-marker {
    display: none;
  }

  @media (width >= 56.25rem) {
    justify-content: space-between;
  }
}

.checkout-details-title-text {
  display: flex;
  column-gap: 1rem;
  align-items: center;

  &:after {
    mask-image: url("../../assets/icons/angle-down.svg");
    display: block;
    transition: rotate 0.3s;
  }
}

.checkout-details-title-total {
  display: none;

  @media (width >= 56.25rem) {
    display: inline;
  }
}

.checkout-items {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  border-bottom: var(--border-secondary);
  padding-block: 2rem;
}

.checkout-item {
  display: grid;
  grid-template-columns: minmax(0, 5rem) 1fr;
  column-gap: 1rem;

  @media (width >= 56.25rem) {
    column-gap: 2rem;
  }
}

.checkout-item-image-container {
  display: flex;
  height: fit-content;
}

.checkout-item-image {
  object-fit: cover;
  aspect-ratio: 1 / 1;
  width: 100%;
}

.checkout-item-details-container {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  width: 100%;
}

.checkout-item-title-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: 0.5rem;
}

.checkout-item hgroup {
  row-gap: 0;
}

.checkout-item-name {
  text-align: left;
}

.checkout-item-comment:has(.checkout-item-comment-value:empty) {
  display: none;
}

.checkout-item-variations:has(.checkout-item-variation-label:empty, .checkout-item-variation-value:empty) {
  display: none;
}

.checkout-item-variations {
  display: flex;
  flex-direction: column;
}

.checkout-item-variation, 
.checkout-item-quantity,
.checkout-item-comment {
  color: var(--variation-label-color);
  width: fit-content;
}

.checkout-item-price {
  display: flex;
  text-align: left;
  width: fit-content;
  column-gap: 0.5rem;
  flex-wrap: wrap;

  &:has(.checkout-item-sale-price:not(:empty)) .checkout-item-original-price {
    text-decoration: line-through;
    color: var(--original-price-sale-color);
  }

  @media (width >= 56.25rem) {
    text-align: end;
  }
}

.checkout-item-sale-price {
  color: var(--sale-color);
  
  &:empty {
    display: none;
  }
}

.checkout-item-sold-out {
  font-weight: var(--font-weight-semibold);
  color: var(--soldout-color);
  display: none;
  column-gap: 1rem;
  align-items: center;

  &:before {
    display: block;
    mask-image: url('../../assets/icons/warning.svg');
  }
}

.checkout-item[data-stockquantity="0"] .checkout-item-sold-out {
  display: flex;
}

.checkout-items[aria-busy="false"] .checkout-item.template {
  display: none;
}

.checkout-items[aria-busy="true"] .checkout-item.template.skeleton :is(.checkout-item-image-container, .checkout-item-name, .checkout-item-quantity, .checkout-item-original-price) {
  color: transparent;
  border-radius: 0.5rem;
  border: var(--border-transparent);
  background-color: var(--skeleton-start-bg-color);
  animation: skeleton-loading 1s infinite alternate;
  opacity: 0.7;
  pointer-events: none;
  min-width: 5rem;
  min-height: 1lh;
}

.checkout-items[aria-busy="true"] .checkout-item.template.skeleton .checkout-item-name {
  width: 8rem;
  margin-bottom: 0.25rem;
}

.checkout-items[aria-busy="true"] .checkout-item.template.skeleton .checkout-item-image {
  opacity: 0;
}

.coupon-form {
  margin-block: 2rem;
}

.coupon-form-container {
  display: flex;
  column-gap: 1rem;

  &[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
  }
}

.coupon-form button[type="submit"] {
  width: fit-content;
  min-width: fit-content;
  position: relative;
}

.coupon-form[aria-busy="true"] button[type="submit"]:after {
  mask-image: url('../../assets/icons/loader.svg');
  display: block;
  animation: spin 1s linear infinite;
  position: absolute;
  left: 50%;
  translate: -50% 0;
}

.coupon-form[aria-busy="true"] button[type="submit"] span {
  visibility: hidden;
}

.coupon-message {
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;

  &:empty {
    display: none;
  }

  &.error {
    color: var(--error-color);

    &:before {
      display: block;
      mask-image: url('../../assets/icons/warning.svg');
    }
  }

  &.success {
    color: var(--success-color);

    &:before {
      display: block;
      mask-image: url('../../assets/icons/check.svg');
    }
  }
}

.coupon-remove-button {
  background-color: var(--remove-discount-button-bg-color);
  font-weight: var(--font-weight-semibold);
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  margin-top: 0.5rem;
  transition: border-color 0.3s;
  border: var(--border-transparent);

  &:hover {
    border-color: currentColor;
  }

  &:empty {
    display: none;
  }

  &:before {
    display: block;
    mask-image: url('../../assets/icons/tag.svg');
  }

  &:after {
    display: block;
    mask-image: url('../../assets/icons/close.svg');
  }
}

.checkout-summary {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.checkout-summary li {
  display: flex;
  justify-content: space-between;
}

.checkout-summary .checkout-total {
  font-weight: var(--font-weight-semibold);
  margin-top: 0.5rem;
}

.checkout-summary .checkout-discount:not(:has(.checkout-discount-amount[data-amount])) {
  display: none;
}

.checkout-discount-amount {
  color: var(--sale-color);
}

.checkout-details:has(.checkout-items[aria-busy="true"]) .checkout-total-amount {
  color: transparent;
  border-radius: 0.5rem;
  border: var(--border-transparent);
  background-color: var(--skeleton-start-bg-color);
  animation: skeleton-loading 1s infinite alternate;
  opacity: 0.7;
  pointer-events: none;
  min-width: 5rem;
  height: 1lh;
}

.checkout-summary .checkout-error-message {
  justify-content: start;
  color: var(--error-color);
  column-gap: 1rem;
  align-items: center;

  &:empty {
    display: none;
  }

  &:before {
    display: block;
    mask-image: url('../../assets/icons/warning.svg');
  }
}

.checkout-summary .checkout-delivery-hours-error-message,
.checkout-summary .checkout-pickup-hours-error-message {
  display: none;
  justify-content: start;
  color: var(--error-color);
  column-gap: 1rem;
  align-items: center;

  &:before {
    display: block;
    mask-image: url('../../assets/icons/warning.svg');
  }
}

.checkout-section:has(#delivery-hours-slot[data-unavailable="true"]):has(#shipping:checked) .checkout-summary .checkout-delivery-hours-error-message,
.checkout-section:has(#pickup-hours-slot[data-unavailable="true"]):has(#pickup:checked) .checkout-summary .checkout-pickup-hours-error-message {
  display: flex;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;

  @media (width >= 56.25rem) {
    grid-column: 1 / 9;
    grid-row: 2 / 2;
    padding-right: 3rem;
  }
}

.checkout-form-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1rem;
  text-align: left;
}

.checkout-form fieldset {
  border: none;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  min-inline-size: initial;
}

.form-label,
.select-label {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  position: relative;
  width: 100%;
  min-width: 0;
}

.form-label-text,
.select-label-text {
  position: absolute;
  background-color: var(--label-bg-color);
  color: var(--label-color);
  padding-inline: 0.25rem;
  left: 0.5rem;
  top: -0.75rem;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.form-label input[type="text"],
.form-label input[type="email"],
.form-label input[type="tel"],
.form-label textarea {
  padding: 0.75rem;
  border: var(--border-secondary);
}

.form-label textarea {
  resize: vertical;
  field-sizing: content;
  min-height: 3lh;
  box-sizing: content-box;
}

.select-label:after {
  mask-image: url('../../assets/icons/angle-down.svg');
  display: flex;
  position: absolute;
  right: 1rem;
  pointer-events: none;
  top: 50%;
  translate: 0 -50%;
  background-color: var(--label-color);
}

.select-label[for="delivery-hours-slot"][aria-busy="true"]:before,
.select-label[for="pickup-hours-slot"][aria-busy="true"]:before {
  mask-image: url('../../assets/icons/loader.svg');
  display: flex;
  position: absolute;
  left: 1rem;
  pointer-events: none;
  top: 50%;
  translate: 0 -50%;
  background-color: var(--label-color);
  animation: spin 1s linear infinite;
}

.fulfillment-details-fieldset:has(#pickup:checked) .select-label[for="delivery-hours-slot"],
.fulfillment-details-fieldset:has(#shipping:checked) .select-label[for="pickup-hours-slot"] {
  display: none;
}

.select-label select {
  appearance: none;
  cursor: pointer;
  padding: 0.75rem;
  padding-right: 2.5rem;
  border: var(--border-secondary);
  opacity: 1;
  background-color: var(--select-bg-color);
	overflow: hidden;
	text-overflow: ellipsis;
}

.inline-field-group {
  display: grid;
  row-gap: 1.5rem;

  @media (width >= 56.25rem) {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0;
  }
}

.radio-group {
  display: flex;
  flex-direction: column;
  border: var(--border-secondary);
}

.radio-label {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  padding: 0.75rem;
  cursor: pointer;
  border-top: var(--border-secondary);

  &:first-child {
    border-top: none;
  }
}

.radio-label input[type="radio"] {
  cursor: pointer;
  accent-color: var(--radio-color);
}

.radio-label-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
  column-gap: 1rem;
}

.radio-label:not(:has(:checked)) .radio-label-price {
  color: var(--inactive-radio-color);
}

.radio-label-price {
  font-weight: var(--font-weight-semibold);
  min-width: fit-content;
}

.checkout-form .pickup-location-fieldset {
  display: none;
}

.checkout-form .shipping-method-fieldset .shipping-methods {
  display: none;
}

.checkout-form .shipping-method-fieldset .shipping-methods.visible {
  display: block;
}

.checkout-form:not(:has(.pickup-location-fieldset input[name="pickup-location"])) .fulfillment-details-fieldset label[for="pickup"],
.checkout-form:not(:has(.shipping-method-fieldset input[name^="shipping-method-"])) .fulfillment-details-fieldset label[for="shipping"] {
  display: none;
}

.checkout-section[data-sitetype="webshop"] .fulfillment-details-fieldset label[for="shipping"] .radio-label-text:after {
  mask-image: url('../../assets/icons/truck.svg');
  display: block;
  background-color: var(--inactive-radio-color);
}

.checkout-section[data-sitetype="restaurant"] .fulfillment-details-fieldset label[for="shipping"] .radio-label-text:after {
  mask-image: url('../../assets/icons/bicycle.svg');
  display: block;
  background-color: var(--inactive-radio-color);
}

.checkout-section[data-sitetype="webshop"] .fulfillment-details-fieldset label[for="pickup"] .radio-label-text:after {
  mask-image: url('../../assets/icons/store.svg');
  display: block;
  background-color: var(--inactive-radio-color);
}

.checkout-section[data-sitetype="restaurant"] .fulfillment-details-fieldset label[for="pickup"] .radio-label-text:after {
  mask-image: url('../../assets/icons/pickup.svg');
  display: block;
  background-color: var(--inactive-radio-color);
}

.fulfillment-details-fieldset label:has(input[name="fulfillment-type"][type="radio"]:checked) .radio-label-text:after {
  background-color: currentColor;
}

.checkout-form:has(input[type="radio"][name="fulfillment-type"][value="pickup"]:checked) .pickup-location-fieldset,
.checkout-form:has(input[type="radio"][name="fulfillment-type"][value="pickup"]:checked) .invoice-address-fields {
  display: flex;
}

.checkout-form:has(input[type="radio"][name="fulfillment-type"][value="pickup"]:checked) .shipping-method-fieldset,
.checkout-form:has(input[type="radio"][name="fulfillment-type"][value="pickup"]:checked) .fulfillment-details-fieldset > *:not(.radio-group, .checkout-form-title, label[for="pickup-hours-slot"]),
.checkout-form:has(input[type="radio"][name="fulfillment-type"][value="pickup"]:checked) .invoice-setting-fieldset .radio-group {
  display: none;
}

.fulfillment-details-fieldset[data-shipping-count="0"] .radio-group {
  border-top: none;
}

.address-fields {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.invoice-address-fields {
  display: none;
  flex-direction: column;
  row-gap: 1.5rem;
}

.checkout-form:has(input[type="radio"][name="invoice-setting"][value="different-from-shipping"]:checked) .invoice-address-fields {
  display: flex;
}

.checkout-section .invoice-setting-fieldset {
  display: flex;
}

.checkout-section:has(input[type="radio"][name="payment-method"][value="cash"]:checked) .invoice-setting-fieldset,
.checkout-section:has(input[type="radio"][name="payment-method"][value="pinnen"]:checked) .invoice-setting-fieldset {
  display: none;
}

.checkout-section[data-sitetype="restaurant"]:has(input[type="radio"][name="fulfillment-type"][value="pickup"]:checked):not(:has(input[type="radio"][name="payment-method"][value="klarna"]:checked)) .invoice-setting-fieldset {
  display: none;
}

.checkout-submit-button {
  width: 100%;

  &:disabled {
    pointer-events: none;
    opacity: 0.7;
  }
}

.checkout-form[aria-busy="true"] .checkout-submit-button {
  pointer-events: none;
  opacity: 0.7;

  &:before {
    mask-image: url('../../assets/icons/loader.svg');
    display: block;
    animation: spin 1s linear infinite;
  }
}

.checkout-form:not([aria-busy="true"]) .checkout-submit-button:before {
  mask-image: url('../../assets/icons/lock.svg');
  display: block;
}

.checkout-error-dialog {
  width: 30rem;
  max-width: 90%;
  max-height: 90%;
  background-color: var(--error-dialog-bg-color);
  border: var(--border-primary);
  margin: auto;

  &::backdrop {
    background-color: var(--backdrop-bg-color);
  }
}

.checkout-error-dialog-content {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 1rem;
  align-items: center;
}

.checkout-error-dialog-title {
  color: var(--error-color);
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;

  &:before {
    display: block;
    mask-image: url('../../assets/icons/warning.svg');
  }
}

.checkout-error-dialog-message {
  text-align: center;
}

.checkout-error-dialog-button {
  margin-top: 1rem;
}

.checkout-error-dialog-close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;

  &:before {
    mask-image: url('../../assets/icons/close.svg');
    display: block;
  }
}