hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--dark-blue-100);
  @media (min-width: 993px) {
    background: var(--dark-blue-500);
    padding: 1.25rem 2.625rem;
    position: relative;
  }
  @media (min-width: 1441px) {
    padding: 2.5rem;
  }

  > img {
    width: 100vw;
    height: 4.375rem;
    object-fit: cover;
    @media (min-width: 993px) {
      display: none;
    }
  }

  > hero-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    max-width: 28.125rem;
    @media (min-width: 993px) {
      flex-direction: row;
      justify-content: space-between;
      max-width: 75rem;
    }
    @media (min-width: 1441px) {
      max-width: 90rem;
    }

    > hero-info {
      display: grid;
      grid-template-areas:
        "ti ti ti"
        "in in in";
      gap: 0.5rem;
      padding: 1.25rem 1.25rem 0;
      @media (min-width: 993px) {
        grid-template-areas:
          "ti ti ti"
          "im in in";
        grid-template-columns: max-content max-content 1fr;
        gap: 1.5rem;
        max-width: 23.25rem;
        height: fit-content;
        padding: 0;
        color: var(--pricefox-background-color);
        position: sticky;
        top: 7.5rem;
      }
      @media (min-width: 1441px) {
        gap: 1.5rem;
        max-width: 48.75rem;
      }

      > hero-title {
        grid-area: ti;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        > h1 {
          text-align: left;
        }

        > p {
          margin: 0;
        }
      }

      > img {
        display: none;
        grid-area: im;
        align-self: center;
        width: 4.25rem;
        aspect-ratio: 322 / 303;
        @media (min-width: 993px) {
          display: block;
          align-self: flex-start;
          width: 14vw;
        }
        @media (min-width: 1441px) {
          display: block;
          width: 20.13rem;
        }
      }

      > info {
        grid-area: in;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
        @media (min-width: 993px) {
          width: 23.25rem;
        }
        @media (min-width: 1441px) {
          gap: 2rem;
          width: 27.75rem;
        }

        > ul {
          display: none;
          margin: 0;
          padding: 0;
          list-style-type: none;
          @media (min-width: 993px) {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
          }

          li {
            display: flex;
            align-items: baseline;
            gap: 1rem;

            &::before {
              content: url("../img/checkmark.svg");
              width: 0.75rem;
              height: 0.56rem;
            }

            > p {
              display: flex;
              align-items: center;
              margin: 0;
              > svg {
                margin: 0.25rem;
              }
            }
          }
        }

        > google-rating {
          display: flex;
          align-items: flex-start;
          gap: 0.625rem;
          > icon {
            width: 1.25rem;
          }
          > stars-info {
            display: flex;
            flex-direction: column;
            > rating {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 0.625rem;
              @media (min-width: 993px) {
                justify-content: flex-start;
              }

              #google-icon {
                width: 1.31rem;
                aspect-ratio: 1;
              }

              p {
                margin: 0;
              }

              picture {
                width: 5.19rem;
                > img {
                  width: 100%;
                  aspect-ratio: 83 / 21;
                }
              }
              > ratings-amount {
                display: none;
                margin: 0;
                @media (min-width: 993px) {
                  display: block;
                }
              }
            }
          }
        }
        > quote {
          display: none;
          padding-left: 0.75rem;
          border-left: 2px var(--petrol-blue-500) solid;
          @media (min-width: 993px) {
            display: block;
          }
        }
      }
    }
  }
}
/*HERO FORM*/
hero-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  border: 1px var(--petrol-blue-50) solid;
  border-radius: 0.75rem;
  background: var(--pricefox-background-color);

  @media (min-width: 993px) {
    width: 35vw;
    border: none;
  }

  @media (min-width: 1441px) {
    width: 31.25rem;
    padding: 1.5rem;
  }

  > info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    > p {
      display: none;
      margin: 0;
      @media (min-width: 993px) {
        display: block;
      }
    }
  }

  > form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;

    > form-group {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 0.5rem;
      padding: 1rem;
      background: var(--gray-50);
      border: 1px var(--pricefox-faded-background-color) solid;
      border-radius: 0.5rem;

      > h3 {
        margin: 0;
      }

      > fields {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;

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

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

          > fieldset-content {
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
            position: relative;

            > button-section {
              display: flex;
              flex-direction: row;
              gap: 0.5rem;

              > label:not(:has(toggle-token-transparent)) {
                background: var(--pricefox-faded-background-color);

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

                p {
                  color: var(--pricefox-primary-color);
                }
              }
              > label {
                > toggle-token-transparent {
                  > img {
                    width: 5.25rem;
                    height: 3rem;
                  }
                }
              }
            }

            /*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"],
          input[type="tel"],
          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);

            &: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: flex-start;
            gap: 0.25rem;
          }
        }
      }
    }

    #provider {
      label {
        flex: 1 1 45%;
        @media (min-width: 1441px) {
          flex: 1 1 25%;
        }
      }
    }

    > 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;

      > p {
        font-weight: 700;
      }
    }

    &:has(#gas:checked),
    &:has(#b2b:checked) {
      #night_invoice,
      #social_invoice {
        display: none;
      }
    }

    #b2b-select {
      display: none;
    }

    &:has(#b2b:checked) {
      &:has(#energy:checked),
      &:has(#dual:checked) {
        #b2b-select {
          display: flex;
        }
      }
    }

    &:has(:invalid) {
      > button {
        opacity: 50%;
      }
    }
  }
}