/* stylelint-disable selector-pseudo-class-no-unknown -- for contact form styling */
:global {
  .contact_form {
    > div {
      margin: 3.2rem auto;

      @include min(tablet) {
        margin: 4rem auto;
      }
    }
  }
}

.formComponent {
  padding: 2.4rem;
  width: 100%;
  box-shadow: 0 4px 6px -2px rgb(27 27 28 / 2%), 0 12px 16px -4px rgb(27 27 28 / 5%);
  border-radius: 16px;
  background: #f4f4f4;
  gap: 2.4rem;

  @include flex-direction(column);
  
  @include min(tablet) {
    padding: 2.4rem;
  }

  .title {
    font-size: 2.4rem;
    line-height: 3.2rem;
    font-weight: 700;
    text-transform: capitalize; 
    margin: 0;
    color: #1b1b1c;

    @include min(tablet) {
      font-size: 3.2rem;
      line-height: 4rem;
    } 
  }

  form {
    width: 100%;
  }

  input {
    height: 4.4rem;
  }

  input,
  textarea,
  select {
    background: var(--color-4);
    font-size: 1.4rem;
    line-height: 2.1rem;
    padding: 1.6rem;
    width: 100%;
    max-width: 100%;
    outline: none;
    border-radius: 0.8rem;
    border: 1.5px solid #F4F4F4;
  }

  .invalid {
    border: 1px solid var(--color-39);
    color: var(--color-39);
  }
  /* stylelint-disable selector-no-qualifying-type -- needed for file input styling */
  input[type="file"], input[type="range"] {
    height: auto;
  }

  input[type="color"],
  input[type="range"] {
    padding: 0;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
    height: auto;
  }
  
  textarea {
    display: block;
    resize: vertical;
    resize: none;
    height: 20.8rem;
    padding: 1.2rem;
  }

  label {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.7rem;
    color: #262629;

    .invalid {
      color: var(--color-39);
    }
  }


  button{
    text-align: start;
  }

}

.formGroup {
  width: 100%;

  @include flex-direction(column);

  gap: 0.4rem;
}

.formAlerts {
  display: inline-block;
  grid-column: span 2 / span 2;
  order: -1;
  margin-bottom: 3rem;

  @include min(tablet) {
    order: unset;
  }

  @include min(desktop) {
    display: inline-block;
  }

  div {
    border-radius: 1.6rem;
    font-size: 1.6rem;
    font-weight: 600;
    width: 100%;
    height: 4.4rem;
    padding: 1.6rem;

    @include flex-align(center, start);
  }
}


.alertSuccess {
  border-color: var(--color-44);
  color: var(--color-44) ;
}

.alertWarning {
  border-color: var(--color-39);
  color: var(--color-39);
}

.alertWarningMessage {
  @include flex-align(center, flex-start);

  gap: 0.5rem;
  background: var(--color-39);
  border-radius: 0.4rem;
  color: var(--color-4);
  margin-top: 0.8rem;
  padding: 8px;
}

.twoCol {
  @include flex-direction(column);

  gap: 2.4rem;

  @include min(tablet) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 4.8rem;
  }

  button {
    width: 100%;
  }
}

.singleCol {
  @include flex-direction(column);

  gap: 2.4rem;
}

.fullWidth {
  grid-column: span 2 / span 2;
}

.formButton {
  grid-column: span 2 / span 2;

  button {
    width: auto;
  }
}

.recaptcha {
  overflow: hidden;

  &.invalid {
    border: 1px solid var(--color-39, #DD4B39);
    color: var(--color-39, #DD4B39);
  }
  /* stylelint-disable selector-max-compound-selectors -- needed for captcha styling */
  > div > div > div {
    width: 100% !important;

    iframe {
      width: 100%;
    }

    @include min(tablet) {
      width: 304px !important;

      iframe {
        width: 304px;
      }
    }
  }
}

.commentForm{
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  margin-top: 3.5rem;

  input::placeholder, textarea::placeholder {
    color: var(--comment-input-placeholder-color);
  }

    input:not([type="range"]),
    textarea,
    select {
      background: var(--comment-input-bg, #fff) !important;
      font-size: var(--comment-input-font-size, 1.4rem);
      line-height: 2.1rem;
      padding: var(--comment-input-padding, 1.6rem);
      max-width: 100%;
      outline: none;
      border-radius: var(--comment-input-border-radius, 0.8rem);
      border: var(--comment-input-border, 1px solid #E2E8F0) !important;
      color: var(--comment-input--font-color, #0F172A) !important;
    }


  > form{
    display: flex;
    grid-template-columns: 1fr 1fr;

    @include min(tablet){
      display: grid;
      gap: 1.6rem;
    }

    label{
      font-size: var(--comment-label-font-size,1.6rem);
      font-weight: var(--comment-label-font-weigth,600);
      color: var(--comment-label-font-color,#262629);
    }

    div > input ~ span, div > textarea ~ span{
      display: none;
    }

    input:user-invalid{
      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
    }

    textarea:user-invalid{
      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
    }

    input:user-invalid ~ span{
      display: block;
    }

    textarea:user-invalid ~ span{
      display: block;
    }

    textarea:not(:placeholder-shown):invalid ~ span{
      display: block;     
    }

    input:not([type='checkbox'], :placeholder-shown):invalid ~ span{
      display: block;     
    }

    input:not(:placeholder-shown, [type="checkbox"]):invalid, textarea:not(:placeholder-shown):invalid{
      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
    }

    > .formButton{
      border: .2rem solid #161128;
      padding: 8px 16px !important;
      margin-left: auto;
      border-radius: 5rem;
      font-size: 1.4rem;
      font-weight: 700;
      background: transparent !important;
      text-align: center !important;
      line-height: 2.2rem;
      text-transform: capitalize;
      color: #161128 !important; 
      height: 4rem !important;
      grid-column: 1 / -1;
      width: 100%;
      margin-bottom: 3.4rem;

      @include min(tablet){
        width: auto !important;
      }
    }
  }

  div:has(>input[type="checkbox"] ) {
    display: grid;
    row-gap: 0;
    grid-template-columns: 1.3rem 1fr;
  }

  input[type="checkbox"]{
    appearance: none;
     appearance: none;
          appearance: none;
    padding: 0 !important;
    outline: none;
    position: relative;
    width: 1.3rem;
    height: 1.3rem;
    border: .15rem solid var(--comment-checkbox-border, #515156) !important;
    background-color: var(--comment-checkbox-bg, #F2EFEC) !important;;
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;

    &::before {
      content: '';
      color: #fff !important;
      position: absolute;
      inset: 0;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      border-radius: 2px;
      transform: scale(0);
              transform: scale(0);
      transition: -webkit-transform 0.25s ease-in-out;
      transition: -webkit-transform 0.25s ease-in-out;
      transition: transform 0.25s ease-in-out;
      transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      filter: brightness(0) invert(1);
      background-color: #fff;
    }

    &:checked{
      background-color:  var(--comment-checkbox-border, #515156) !important;
    }

    &:checked::before {
      transform: scale(.7);
              transform: scale(.7);
    }

    + label{
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 2.2rem;

      @include min(tablet){
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.6rem;
      }
    }
  } 

  .alertDanger, .alertSuccess, .alertWarning {
    background-color: var(--alert-error-bg, #FEE2E2);
    color: var(--alert-error-text, #09090B);

    @include flex-align(center, start);

    min-height: 5.8rem;

    &::before{
      content: "";
      height: 2.4rem;
      margin-right: .8rem;
      width: 2.4rem;
      background-repeat: no-repeat;

      @include flex-align(center, center);

      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.7118 8.29C15.6188 8.19627 15.5082 8.12188 15.3864 8.07111C15.2645 8.02034 15.1338 7.9942 15.0018 7.9942C14.8698 7.9942 14.7391 8.02034 14.6172 8.07111C14.4954 8.12188 14.3848 8.19627 14.2918 8.29L12.0018 10.59L9.71179 8.29C9.52348 8.1017 9.26809 7.99591 9.00179 7.99591C8.73549 7.99591 8.48009 8.1017 8.29179 8.29C8.10348 8.47831 7.9977 8.7337 7.9977 9C7.9977 9.2663 8.10348 9.5217 8.29179 9.71L10.5918 12L8.29179 14.29C8.19806 14.383 8.12367 14.4936 8.0729 14.6154C8.02213 14.7373 7.99599 14.868 7.99599 15C7.99599 15.132 8.02213 15.2627 8.0729 15.3846C8.12367 15.5064 8.19806 15.617 8.29179 15.71C8.38475 15.8037 8.49535 15.8781 8.61721 15.9289C8.73907 15.9797 8.86978 16.0058 9.00179 16.0058C9.1338 16.0058 9.26451 15.9797 9.38636 15.9289C9.50822 15.8781 9.61882 15.8037 9.71179 15.71L12.0018 13.41L14.2918 15.71C14.3848 15.8037 14.4954 15.8781 14.6172 15.9289C14.7391 15.9797 14.8698 16.0058 15.0018 16.0058C15.1338 16.0058 15.2645 15.9797 15.3864 15.9289C15.5082 15.8781 15.6188 15.8037 15.7118 15.71C15.8055 15.617 15.8799 15.5064 15.9307 15.3846C15.9814 15.2627 16.0076 15.132 16.0076 15C16.0076 14.868 15.9814 14.7373 15.9307 14.6154C15.8799 14.4936 15.8055 14.383 15.7118 14.29L13.4118 12L15.7118 9.71C15.8055 9.61704 15.8799 9.50644 15.9307 9.38458C15.9814 9.26272 16.0076 9.13201 16.0076 9C16.0076 8.86799 15.9814 8.73729 15.9307 8.61543C15.8799 8.49357 15.8055 8.38297 15.7118 8.29ZM19.0718 4.93C18.1493 3.9749 17.0459 3.21308 15.8258 2.68899C14.6058 2.1649 13.2936 1.88904 11.9658 1.8775C10.638 1.86596 9.32121 2.11898 8.09225 2.62179C6.86328 3.1246 5.74677 3.86713 4.80784 4.80605C3.86891 5.74498 3.12638 6.8615 2.62357 8.09046C2.12076 9.31943 1.86775 10.6362 1.87928 11.964C1.89082 13.2918 2.16668 14.604 2.69077 15.824C3.21486 17.0441 3.97669 18.1475 4.93179 19.07C5.85426 20.0251 6.9577 20.7869 8.17774 21.311C9.39778 21.8351 10.71 22.111 12.0378 22.1225C13.3656 22.134 14.6824 21.881 15.9113 21.3782C17.1403 20.8754 18.2568 20.1329 19.1957 19.194C20.1347 18.255 20.8772 17.1385 21.38 15.9095C21.8828 14.6806 22.1358 13.3638 22.1243 12.036C22.1128 10.7082 21.8369 9.396 21.3128 8.17596C20.7887 6.95592 20.0269 5.85247 19.0718 4.93ZM17.6618 17.66C16.3538 18.9694 14.6323 19.7848 12.7906 19.9673C10.9488 20.1498 9.10079 19.6881 7.56131 18.6608C6.02183 17.6335 4.88615 16.1042 4.34776 14.3335C3.80938 12.5628 3.90159 10.6601 4.6087 8.94979C5.31581 7.23943 6.59406 5.82715 8.22568 4.95356C9.8573 4.07998 11.7413 3.79913 13.5568 4.15888C15.3723 4.51862 17.0068 5.49669 18.182 6.92646C19.3572 8.35623 20.0003 10.1492 20.0018 12C20.0054 13.0513 19.8004 14.0928 19.3987 15.0644C18.9971 16.0359 18.4067 16.9182 17.6618 17.66Z' fill='%23EF4444'/%3E%3C/svg%3E");
    }
  }

  .alertSuccess{
    background-color: var(--alert-error-bg, #DCFCE7);

    &::before{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.72 8.79L10.43 13.09L8.78 11.44C8.69036 11.3353 8.58004 11.2503 8.45597 11.1903C8.33191 11.1303 8.19678 11.0965 8.05906 11.0912C7.92134 11.0859 7.78401 11.1091 7.65568 11.1594C7.52736 11.2096 7.41081 11.2859 7.31335 11.3833C7.2159 11.4808 7.13964 11.5974 7.08937 11.7257C7.03909 11.854 7.01589 11.9913 7.02121 12.1291C7.02653 12.2668 7.06026 12.4019 7.12028 12.526C7.1803 12.65 7.26532 12.7604 7.37 12.85L9.72 15.21C9.81344 15.3027 9.92426 15.376 10.0461 15.4258C10.1679 15.4755 10.2984 15.5008 10.43 15.5C10.6923 15.4989 10.9437 15.3947 11.13 15.21L16.13 10.21C16.2237 10.117 16.2981 10.0064 16.3489 9.88458C16.3997 9.76272 16.4258 9.63201 16.4258 9.5C16.4258 9.36799 16.3997 9.23728 16.3489 9.11542C16.2981 8.99356 16.2237 8.88296 16.13 8.79C15.9426 8.60375 15.6892 8.49921 15.425 8.49921C15.1608 8.49921 14.9074 8.60375 14.72 8.79ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z' fill='%2316A34A'/%3E%3C/svg%3E");
    }
  }
}