hero-section {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1.25rem;
  background: var(--legacy-light-blue);
  @media (min-width: 993px) {
    background: var(--dark-blue-500);
  }
  @media (min-width: 1441px) {
    padding: 2.5rem;
  }

  > hero-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    @media (min-width: 993px) {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
    }
    @media (min-width: 993px) and (max-width: 1440px) {
      max-width: 67.5rem;
    }
    @media (min-width: 1441px) {
      max-width: 90rem;
    }

    > hero-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.38rem;
      @media (min-width: 993px) {
        align-items: flex-start;
        gap: 0;
        color: var(--pricefox-background-color);
      }

      > h1 {
        text-align: center;
      }

      > p {
        display: none;
        margin: 0;
        @media (min-width: 993px) {
          display: block;
        }
        @media (min-width: 1440px) {
          margin-top: 0.5rem;
        }
      }

      > info-with-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.38rem;
        @media (min-width: 993px) {
          flex-direction: row;
          gap: 2.06rem;
          margin-top: 2.13rem;
        }

        > img {
          width: 9.06rem;
          @media (min-width: 993px) and (max-width: 1440px) {
            width: 15.63rem;
          }
          @media (min-width: 1441px) {
            width: 20.13rem;
          }
        }

        > info {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 3.5rem;
          @media (min-width: 993px) {
            max-width: 27.75rem;
          }

          > ul {
            display: none;
            padding: 0;
            list-style-type: none;
            @media (min-width: 993px) {
              display: block;
            }

            li {
              display: flex;
              align-items: flex-start;
              gap: 0.55rem;

              &::before {
                content: url("/ασφάλεια-κατοικιδίου/assets/checkmark.svg");
              }
            }
          }

          > google-rating {
            display: flex;
            flex-direction: column;
            align-items: center;

            > rating {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 0.63rem;
              @media (min-width: 993px) {
                justify-content: flex-start;
              }

              #google-icon {
                width: 1.31rem;
              }

              p {
                margin: 0;
              }

              #stars {
                width: 5.19rem;
              }
            }

            > p {
              display: none;
              margin: 0;
              @media (min-width: 993px) {
                display: block;
              }
            }
          }
        }

      }
    }
  }
}

/*HERO FORM*/

/*The form's fieldset contains 2 hidden radio buttons that the user clicks through their labels.
These buttons "pick" which select is shown for the pet's breed and picking one is required to submit the form.
Their appearance changes accordingly when one is clicked.*/
hero-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  border-radius: 0.75rem;

  @media (min-width: 993px) {
    gap: 0.75rem;
    background: var(--pricefox-background-color);
  }
  @media (min-width: 993px) and (max-width: 1440px) {
    width: 21.88rem;
    padding: 1rem;
  }
  @media (min-width: 1441px) {
    width: 31.25rem;
    padding: 1.63rem;
  }

  > info {

    > p {
      margin: 0.25rem 0;
    }
  }

  > form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    @media (min-width: 993px) and (max-width: 1440px) {
      gap: 0.63rem;
    }
    @media (min-width: 1441px) {
      gap: 1rem;
    }

    > fieldset {
      position: relative;
      margin: 0;
      padding: 0;
      border: none;

      > legend {
        padding: 0;
        margin-bottom: 0.25rem;
      }

      > button-section {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        @media (min-width: 1441px) {
          gap: 1rem;
        }

        > label {
          background: var(--pricefox-faded-background-color);

          &:hover {
            background: var(--petrol-blue-100);
          }

          @media (min-width: 993px) {
            flex: 1;

          }
          @media (min-width: 993px) and (max-width: 1440px) {
            padding: 0.5rem;
          }

          > button-like-with-image {
            > p {
              margin: 0;
              color: var(--pricefox-primary-color);
            }

            > img {
              @media (min-width: 993px) and (max-width: 1440px) {
                width: 0.75rem;
              }
            }
          }
        }
      }

      /*We cannot use display:none because these radio buttons are required for form submission.
      We use position absolute and bottom: 0 to have the error message (if none is selected) placed correctly under the "buttons".
      Pointer-events is none so that the user won't accidentally click on the invisible radio buttons.*/

      > input[type="radio"] {
        opacity: 0;
        position: absolute;
        bottom: 0;
        pointer-events: none;
      }
    }

    > form-field {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;

      > label {
        > a {
          text-decoration: underline;
        }
      }

      &:has(input[type="checkbox"]) {
        > label {
          cursor: pointer;
        }
      }

      input[type=text], input[type=email], select {
        width: 100%;
        height: 3.38rem;
        padding: 0.5rem 1rem;
        background: white;
        border-radius: 0.66rem;
        border: 1px var(--pricefox-primary-color) solid;
        box-shadow: 0 2px 0 var(--pricefox-primary-color);
        color: var(--pricefox-primary-color);
        @media (min-width: 993px) and (max-width: 1440px) {
          height: 2.19rem;
        }

        &:focus {
          outline: none;
        }

        &::placeholder {
          color: var(--black-300);
        }

      }

      > select {
        cursor: pointer;

      }

      > select:has(option[disabled]:checked) {
        color: var(--black-300);
      }

      &:has(input[type=checkbox]) {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
      }

      /*input[type=checkbox] {*/
      /*  appearance: none;*/
      /*}*/
      /*input[type=checkbox]::before {*/
      /*  content: "";*/
      /*  display: block;*/
      /*  width: 1.13rem;*/
      /*  height: 1.13rem;*/
      /*  background-image: url('/ασφάλεια-κατοικιδίου/assets/checkbox-unchecked.svg');*/
      /*}*/
      /*input[type=checkbox]:checked::before {*/
      /*  content: "";*/
      /*  display: block;*/
      /*  width: 1.25rem;*/
      /*  height: 1.25rem;*/
      /*  background-image: url('/ασφάλεια-κατοικιδίου/assets/checkbox-checked.svg');*/
      /*  background-position: center;*/
      /*}*/
    }

    > button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 3.38rem;
      margin-top: 0.25rem;
      border-radius: 0.66rem;
      border: 1px var(--pricefox-primary-color) solid;
      box-shadow: 4px 4px 0 var(--pricefox-primary-color);
      background: var(--warm-orange-500);
      color: var(--pricefox-background-color);
      cursor: pointer;
      @media (min-width: 993px) {
        margin: 0;
      }
      @media (min-width: 993px) and (max-width: 1440px) {
        height: 2.5rem;
      }

      > p {
        font-weight: 700;
      }
    }

    /*#cat-select is the select shown as faded when the user has not selected a pet yet, #dog-select is only shown when the user selects dog*/

    &:not(:has(input[name="pet_type"]:checked)) {
      > #cat-select {
        opacity: 50%;
        pointer-events: none;
      }
    }

    > #dog-select {
      display: none;
    }

    &:has(#dog:checked) {
      > #cat-select {
        display: none;
      }

      > #dog-select {
        display: flex;
      }
    }

    &:has(#cat:checked) {
      > fieldset > button-section > label[for="cat"] {
        background: var(--petrol-blue-400);
        box-shadow: inset 0 0 0 3px var(--dark-blue-300);

        > button-like-with-image {
          > p {
            color: var(--pricefox-background-color);
          }
        }
      }
    }

    &:has(#dog:checked) {
      > fieldset > button-section > label[for="dog"] {
        background: var(--petrol-blue-400);
        box-shadow: inset 0 0 0 3px var(--dark-blue-300);

        > button-like-with-image {
          > p {
            color: var(--pricefox-background-color);
          }
        }
      }
    }
  }
}