@use '../components/mixins' as mixins;

.contact {
  display: flex;
  flex-direction: column;
  gap: 20px;

  &__card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: white;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 40px 60px;

    &--headbooker {
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: #f8f8fd;

      @include mixins.media-md {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      h4 {
        font-weight: 600;
      }
    }
  }

  &__title {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--tide-booking-heading-color);
    margin: 0;

    h3,
    h4,
    h5 {
      margin-bottom: 0px;
    }

    span {
      color: var(--tide-booking-text-medium);
    }
  }

  &__radio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    &--error {
      position: absolute;
      left: 0px;
      bottom: -20px;
      transition: all 0.3s ease-in-out;
      margin: 0px 0px;
      margin-bottom: 0px;
      font-size: 14px;
      color: var(--tide-booking-invalid-dark);
    }

    .radiobutton {
      &__input {
        cursor: pointer;
        margin-top: 0px;
      }
    }
  }

  &__form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 25px;

    &__group {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 100%;

      &--2 {
        @include mixins.media-sm {
          flex: 1 1 calc(50% - 50px);
        }
      }

      &--3 {
        @include mixins.media-sm {
          flex: 1 1 calc(50%);
        }

        @include mixins.media-lg {
          flex: 1 1 calc(33.333% - 50px);
        }
      }

      &--4 {
        @include mixins.media-sm {
          flex: 1 1 calc(50% - 50px);
        }

        @include mixins.media-lg {
          flex: 1 1 calc(25% - 50px);
        }
      }

      &:has(.contact__error) {
        input,
        textarea {
          // border-color: var(--tide-booking-invalid-dark);
          background: var(--tide-booking-invalid-light);

          &::placeholder {
            color: var(--tide-booking-invalid-dark);
          }
        }
      }
    }

    &__label {
      margin-bottom: 10px;
      color: var(--tide-booking-input-label-color);
      font-weight: var(--tide-booking-input-label-font-weight);
      font-style: var(--tide-booking-input-label-font-style);
    }

    &__actions {
      max-width: 200px;
    }
  }

  &__error {
    position: absolute;
    left: 0px;
    bottom: -15px;
    transition: all 0.3s ease-in-out;
    margin: 0px 15px;
    margin-bottom: 0px;
    font-size: 14px;
    color: var(--tide-booking-invalid-dark);
  }

  &__dropdown {
    position: relative;

    &--error {
      .contact__dropdown__trigger {
        background: var(--tide-booking-invalid-light);
        color: var(--tide-booking-invalid-dark);
      }
    }

    &__trigger {
      width: 100%;
      height: 44px;
      padding: 0 12px;
      color: var(--tide-booking-dropdown-color);
      background: var(--tide-booking-dropdown-background);
      border: var(--tide-booking-dropdown-border);
      border-radius: var(--tide-booking-dropdown-border-radius);
      transition: all 0.3s ease-in-out;

      display: flex;
      align-items: center;
      justify-content: space-between;

      cursor: pointer;
      font-size: var(--tide-booking-font-size-body-lg);
      line-height: 1;

      &:hover {
        border: var(--tide-booking-dropdown-border-hover);
        color: var(--tide-booking-dropdown-color-hover);
        background: var(--tide-booking-dropdown-background-hover);
      }

      &:focus {
        outline: none;
        border: var(--tide-booking-dropdown-border-focus);
        color: var(--tide-booking-dropdown-color-focus);
        background: var(--tide-booking-dropdown-background-focus);
      }
    }

    &__menu {
      position: absolute;
      z-index: 10;
      top: calc(100% + 4px);
      left: 0;
      right: 0;

      background: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;

      max-height: 220px;
      overflow-y: auto;
      @extend %scrollbar-thin;
      padding: 0px 0;
      margin: 0px;
    }

    &__option {
      width: 100%;
      padding: 15px 15px;

      background: none;
      border: none;
      text-align: left;

      cursor: pointer;
      font-size: 14px;
      line-height: 1.5;

      @include media-md {
        font-size: 16px;
      }

      &:hover,
      &--active {
        background: #f2f2f2;
      }

      &:focus {
        outline: none;
        background: #eaeaea;
      }
    }
  }
}