/*
Contact Form 7 Styles for LorexTheme
Author: Boodgrand
Description: Dedicated styles for Contact Form 7 integration
*/

.wp-theme-lorextheme {
  /* ==========================================================================
     CONTACT FORM 7 BASE STYLES
  ========================================================================== */
  
  .wpcf7 {
    font-family: var(--wp--preset--font-family--satoshi-variable);
    font-size: var(--wp--preset--font-size--text-m);

    .wpcf7-form {      
      display: flex;
      flex-direction: column;
      gap: var(--wp--preset--spacing--sp-6);
    }

    .wpcf7-spinner {
      display: none;
    }

    label {
      display: flex;
      flex-direction: column;
      gap: var(--wp--preset--spacing--sp-3);
    }

    input[type="text"], 
    input[type="email"], 
    input[type="tel"], 
    input[type="url"], 
    input[type="password"], 
    input[type="search"], 
    input[type="number"], 
    input[type="date"], 
    input[type="month"], 
    input[type="week"], 
    input[type="time"], 
    input[type="datetime"], 
    input[type="datetime-local"], 
    input[type="color"], 
    textarea, 
    select, 
    button {
      width: 100%;
      font-family: inherit;
      font-size: inherit;
      border: 1px solid var(--wp--preset--color--background-dark-primary-heavy);
      padding: var(--wp--preset--spacing--sp-5) var(--wp--preset--spacing--sp-8);
      border-radius: var(--wp--custom--border-radius--regular);
      background-color: var(--wp--preset--color--background-dark-primary-heavy);
      outline: none;
      transition: all var(--wp--custom--transition--slow);
      &:hover,
      &:focus {
        border-color: var(--wp--preset--color--background-dark-secondary);
      }
      &::placeholder {
        color: var(--wp--preset--color--text-tertiary);
      }
    }

    input[type="submit"] {
      font-family: inherit;
      font-size: inherit;
      font-weight: 500;
      width: fit-content;
      background-color: var(--wp--preset--color--brand-purple);
      color: var(--wp--preset--color--white);
      border: 1px solid transparent;
      padding: var(--wp--preset--spacing--sp-5) var(--wp--preset--spacing--sp-8);
      border-radius: var(--wp--custom--border-radius--max);
      transition: all var(--wp--custom--transition--slow);
      &:not(:disabled) {
        cursor: pointer;
        &:hover {
          background-color: var(--wp--preset--color--brand-purple-heavy);
        }
      }
      &:disabled {
        opacity: 0.5;
      }

      .lx-modal__dialog & {
        margin-top: var(--wp--preset--spacing--sp-4);
        padding-right: 40px; 
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.75423 7.9667L4.55206 2.76453C4.4165 2.62898 4.34811 2.46025 4.34689 2.25836C4.34556 2.05648 4.41261 1.88353 4.54806 1.73953C4.69473 1.59286 4.86967 1.51953 5.07289 1.51953C5.27611 1.51953 5.44973 1.59286 5.59373 1.73953L11.0332 7.17103C11.1466 7.28436 11.2287 7.41009 11.2797 7.5482C11.3308 7.68642 11.3564 7.82592 11.3564 7.9667C11.3564 8.10748 11.3308 8.24698 11.2797 8.3852C11.2287 8.52331 11.1466 8.64903 11.0332 8.76236L5.58106 14.2145C5.43439 14.3612 5.26289 14.4318 5.06656 14.4262C4.87023 14.4206 4.69873 14.3445 4.55206 14.1979C4.4165 14.0512 4.34595 13.8797 4.34039 13.6834C4.33484 13.487 4.40539 13.3155 4.55206 13.1689L9.75423 7.9667Z' fill='%23fff'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 16px;
        transition: background-position var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast);
        &:not(:disabled)&:hover {
          background-position: right 12px center;
          background-color: var(--wp--preset--color--brand-purple-heavy);
        }
      }
    }

    /* ==========================================================================
     CUSTOM CHECKBOX STYLES
    ========================================================================== */

    .wpcf7-acceptance,
    .wpcf7-checkbox {
      display: flex;
      flex-direction: column;
      gap: var(--wp--preset--spacing--sp-2);
      .wpcf7-list-item {
        margin: 0;
        label {
          font-size: var(--wp--preset--font-size--text-s);
          font-weight: 600;
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: var(--wp--preset--spacing--sp-2);
        }
      }
    }

    .wpcf7-acceptance,
    .wpcf7-checkbox {
      .wpcf7-list-item-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        gap: var(--wp--preset--spacing--sp-5);
        &::before {
          content: "";
          display: inline-block;
          border: 1px solid var(--wp--preset--color--background-dark-secondary);
          box-sizing: border-box;
          width: 20px;
          height: 20px;
          border-radius: 8px;
        }
      }
      input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        &:hover + .wpcf7-list-item-label::before,
        &:checked + .wpcf7-list-item-label::before {
          transition: background-color var(--wp--custom--transition--slow), border-color var(--wp--custom--transition--slow);
          background-color: var(--wp--preset--color--brand-purple);
          border-color: var(--wp--preset--color--brand-purple);
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
          background-size: 14px;
          background-position: center;
          background-repeat: no-repeat;
        }
        &:hover + .wpcf7-list-item-label::before {
          border-color: var(--wp--preset--color--brand-purple-heavy);
          background-color: var(--wp--preset--color--brand-purple-heavy);
        }
      }
    }

    .subscribe-wrap {
      display: flex;
      gap: var(--wp--preset--spacing--sp-4);
      .wpcf7-email {
        background-color: var(--wp--preset--color--background-light-secondary);
        border-color: var(--wp--preset--color--background-light-secondary);
        color: var(--wp--preset--color--text-contrast);
        &::placeholder {
          color: var(--wp--preset--color--text-placeholder);
        }
      }
    }

    /* ==========================================================================
     FORM VALIDATION STYLES
    ========================================================================== */

    .wpcf7-form-control-wrap {
      display: flex;
      position: relative;
      .wpcf7-not-valid {
        border-color: var(--wp--preset--color--base-danger);
      }
      .wpcf7-not-valid-tip {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: var(--wp--preset--spacing--sp-8);
        color: var(--wp--preset--color--base-danger);
        font-size: var(--wp--preset--font-size--text-xs);
      }
    }

    form {
      .wpcf7-response-output {
        font-size: var(--wp--preset--font-size--text-s);
        font-weight: 500;
        width: fit-content;
        margin: 0;
        padding: var(--wp--preset--spacing--sp-4) var(--wp--preset--spacing--sp-8);
        border-radius: var(--wp--custom--border-radius--regular);
        border: 0;
      }
      &.sent {
        .wpcf7-response-output {
          color: var(--wp--preset--color--base-positive-heavy);
          background-color: var(--wp--preset--color--base-positive-light);
        }
      }
      &.failed, &.aborted {
        .wpcf7-response-output {
          color: var(--wp--preset--color--base-danger-heavy);
          background-color: var(--wp--preset--color--base-danger-light);
        }
      }
      &.invalid, &.unaccepted, &.payment-required, &.spam {
        .wpcf7-response-output {
          color: var(--wp--preset--color--base-warning-heavy);
          background-color: #FFEBD9;
        }
      }
    }
  }
}

footer{
  .wpcf7{
    input[type="submit"] {
      &:hover {
        background-color: var(--wp--preset--color--brand-purple-light) !important;
      }
    }
  }
}