#block__search {
  background: white;
  padding-block: 40px 0;
}

/* Searchform */
#searchform {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    "name send"
    "details details";
  gap: 24px;

  #searchform__name {
    grid-area: name;
  }
  #searchform__details {
    grid-area: details;
  }
  #searchform__send {
    grid-area: send;
  }
}

 #searchform__name input {
  width: 100%;
  font-size: 3rem;
  text-align: center;

  &:not(:placeholder-shown) {
    color: var(--highlight)
  }
}

#searchform__send {
  position: relative;
  background: var(--highlight);
  background: var(--primary-light);
  font-weight: bold;
  text-align: left;

  svg {
    position: absolute;
    top: calc(50% - 1.2rem);
    right: 2.4rem;
    width: 2.4rem;
    height: 2.4rem;
  }

  &:hover,
  &:focus {
    background: var(--primary);
    path {
      stroke: var(--white);
    }
  }
}

#searchform__details {
  position: relative;
  margin-bottom: 0;
  border: none;
  border-radius: var(--br) var(--br) 0 0;
  background-color: var(--primary-light);
  padding: 0 2.4rem;

  &.rounded {
    border-radius: var(--br);
  }

  summary {
    margin-inline: -2.4rem;
    border-radius: var(--br) var(--br) 0 0;
    background-color: var(--primary);
    padding: 1.6rem 2.4rem 1.6rem 6.4rem;
    color: var(--white);

    &::before {
      display: block;
      position: absolute;
      top: 1.8rem;
      left: 2.4rem;
      transform: rotate(270deg) scaleX(-1);
      transition: opacity 0.3s, transform 0.3s;
      background: transparent url('../media/icon_arrow_white.svg') 0 0 no-repeat;
      background-size: 32px 32px;
      width: 32px;
      height: 32px;
      content: '';
    }
  }

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

  &:open {
    padding: 0 2.4rem 2.4rem 2.4rem;

    summary::before {
      transform: rotate(270deg) scaleX(1);
    }
  }

  .form__item {
    display: grid;
    grid-template-columns: 1fr 5fr;
    margin-block: 2rem;
  }

  .searchform__two {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    margin: 0 auto;
    width: max-content;
    max-width: 100%;
  }
}

/* Responsiveness */
@media (max-width: 800px) {
  #searchform {
    grid-template-areas:
      "name name"
      "send send"
      "details details";
    gap: 24px;

    .form__item {
      grid-template-columns: 1fr;
    }

    .searchform__two {
      display: block;
      .form__item {
        grid-template-columns: 1fr 5fr;
      }
    }
  }
}

@media (max-width: 400px) {
  #searchform {
    .form__item {
      display: block;

      input {
        width: 100%;
      }
    }

    .searchform__two .form__item {
      display: grid;
      grid-template-columns: 1fr 5fr;
    }
  }
}