/* Search Modal */
.search-modal__form {
  .field {
    flex-direction: column;
  }

  .self-service {
    .prefixbox-autocomplete-container {
      display: flex;
      position: relative;
      background: transparent;
      max-height: 750px;

      .prefixbox-group-container.pfbx-ac-products {
        column-gap: 2rem;
      }

      .prefixbox-autocomplete-submit-button.pfbx-ac-view-all {
        margin-block-start: 2rem;
        font-family: var(--font-heading-family);
        font-style: var(--font-heading-style);
        font-weight: var(--font-heading-weight);
        background-color: transparent;

        &:hover,
        &:focus-visible {
          background-color: var(--px-text-hover-bg);
        }
      }

      .prefixbox-autocomplete-product-container {
        margin-block-end: 2rem;

        .prefixbox-autocomplete-product {
          max-height: unset;
          text-align: center;
          justify-content: flex-start;
          gap: 8px !important;

          .prefixbox-autocomplete-left {
            aspect-ratio: 1;
            overflow: visible;
          }

          .prefixbox-autocomplete-right {
            margin-top: auto;
          }

          &:hover {
            background-color: transparent;

            .card__heading {
              text-decoration: underline;
            }
          }
        }
      }

      .caption {
        padding-block: 0.75rem;
      }

      .card__heading {
        padding-bottom: 2rem;

        b {
          color: inherit;
        }
      }

      .prefixbox-autocomplete-right form {
        max-width: unset;
        width: 100%;
        margin-block-start: 2rem;

        button[name=add] {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          padding: 1rem 2rem;
          cursor: pointer;
          font: inherit;
          font-size: 1.4rem;
          text-decoration: none;
          color: rgb(var(--color-button-text));
          -webkit-appearance: none;
          appearance: none;
          background-color: rgba(var(--color-button), var(--alpha-button-background));
          border: 1px solid rgb(var(--color-foreground));
          font-weight: 700;
          transition: all 0.2s ease-in-out;

          &::before,
          &::after {
            display: none;
          }
        }
      }
    }

    &.grid-layout:not(.col-2) .col-1 {
      padding-block-start: 10px;
      background-color: transparent;
    }
  }
}

/* Search page */
.self-service {
  #prefixbox-main {
    margin-bottom: 40px !important;

    #pfbx-result-informations {
      padding-block: 16px;
    }

    #container-for-custom-layout-changer {
      display: none;
    }

    #results {
      --px-product-row-gap: 40px;

      .prefixbox-product-container {
        overflow: visible !important;

        .prefixbox-product {
          justify-content: flex-start !important;

          .prefixbox-product-header {
            padding-block-start: 2rem !important;

            p {
              font-size: 1.3rem;
              text-transform: uppercase;
            }
          }

          .prefixbox-product-details {
            margin-top: auto;

            .prefixbox-product-form-wrapper {
              display: block;
              width: 100%;
              margin-top: 12px;

              form {
                margin-top: 1.2rem;

                button[name=add] {
                  display: inline-flex;
                  justify-content: center;
                  align-items: center;
                  padding: 1rem 2rem;
                  cursor: pointer;
                  font: inherit;
                  font-size: 1.4rem;
                  text-decoration: none;
                  color: rgb(var(--color-button-text));
                  -webkit-appearance: none;
                  appearance: none;
                  background-color: rgba(var(--color-button), var(--alpha-button-background));
                  border: 1px solid rgb(var(--color-foreground));
                  font-weight: 700;
                  transition: all 0.2s ease-in-out;

                  &::before,
                  &::after {
                    display: none;
                  }
                }
              }
            }
          }

          .prefixbox-product-name {
            margin: 0 !important;
            font-size: 1.5rem;
          }

          .prefixbox-search-product-footer {
            margin-top: 2rem !important;
          }

          .prefixbox-search-price-container {
            font-size: 1.5rem !important;
          }
        }
      }
    }
  }
}

/* Filters */
.self-service {
  #mobile-drawer-filters,
  #left-mode-filters {
    > div {
      gap: 0 !important;
    }

    .prefixbox-mobile-filter-container-header {
      border: 0 !important;
    }

    .prefixbox-filter-container-header {
      display: block;
      width: 100%;
      padding-block: 1rem 0 !important;
      font-family: var(--font-heading-family);
      font-style: var(--font-heading-style);
      font-weight: var(--font-heading-weight);
      font-size: 2.1rem !important;
      border-top: 1px solid rgba(var(--color-eclipse), .75);
    }

    .prefixbox-mobile-filter-container,
    .prefixbox-filter-container {
      padding-block: 1.5rem;
      margin: 0;
      border-top: 1px solid rgba(var(--color-eclipse), .75);

      .prefixbox-mobile-filter-group-name,
      .prefixbox-filter-group-name {
        font-size: 1.4rem;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.04rem;

        &.arrow-down-icon::after {
          top: 10px;
        }
      }

      .prefixbox-mobile-value-filter-values,
      .prefixbox-value-filter-values {
        margin-top: 24px !important;
      }

      .prefixbox-mobile-value-filter-value,
      .prefixbox-value-filter-value {
        label {
          &::before {
            top: -1px;
            margin-right: 12px;
            box-shadow: none;
          }

          &::after {
            top: 3px;
          }
        }
      }

      .prefixbox-mobile-default-radio-filter-values > *,
      .prefixbox-default-radio-filter-values > * {
        display: none !important;
      }

      .prefixbox-mobile-radio-filter-value,
      .prefixbox-radio-filter-value {
        align-items: center;
        padding-block: 5px !important;

        input[type=radio] {
          margin-block: 0;
          margin-right: 12px;
          color: currentColor;
          width: 1.15em;
          height: 1.15em;
          border: 0.15em solid currentColor;
          border-radius: 50%;
          accent-color: currentColor;
        }
      }
    }
  }
}