.fox-form-in {
  .fox-group {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #dbe0e9;
    border-radius: 10px;
    padding: 0 15px;
    height: 70px;
    html[dir="ltr"] & {
      &.fox-phone {
        flex-direction: row-reverse;
        gap: 15px;
      }
    }
     html[dir="rtl"] & {
      &.fox-phone {
        input {
          text-align: right;
        }
      }
    }
    @media (max-width: 767px) {
      height: 50px;
    }
    background-color: #ffffff;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
    cursor: text;

    &:focus-within,
    &:has(.custom-input:not(:placeholder-shown)) {
      border-color: #0f0c36;
    }

    svg {
      flex-shrink: 0;
      pointer-events: none;
      @media (max-width: 767px) {
        width: 20px;
        height: 20px;
      }
    }

    .fox-input {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
      height: 100%;
      &:has(.custom-input:focus) .custom-label,
      &:has(.custom-input:not(:placeholder-shown)) .custom-label {
        transform: translateY(0);
        font-size: clamp(
          12.01px,
          calc(12.01px + 0.99 * (100vw - 680px) / 520),
          13px
        );
        @media (min-width: 1440px) {
          font-size: clamp(
            13px,
            calc(13px + 2.26 * (100vw - 1440px) / 160),
            15.26px
          );
        }
        @media (max-width: 767px) {
          font-size: 9.57px;
        }
        color: #606e84;
      }

      .custom-label {
        color: #0f0c36;
        font-size: clamp(
          14.76px,
          calc(14.76px + 1.24 * (100vw - 680px) / 520),
          16px
        );
        @media (min-width: 1440px) {
          font-size: clamp(
            16px,
            calc(16px + 2.82 * (100vw - 1440px) / 160),
            18.82px
          );
        }
        @media (max-width: 767px) {
          font-size: 11.71px;
        }
        margin: 0;
        transition:
          font-size 0.2s ease,
          transform 0.2s ease,
          color 0.2s ease;
        cursor: text;
      }

      .custom-input {
        border: none;
        outline: none;
        background: transparent;
        font-size: clamp(
          14.76px,
          calc(14.76px + 1.24 * (100vw - 680px) / 520),
          16px
        );
        @media (min-width: 1440px) {
          font-size: clamp(
            16px,
            calc(16px + 2.82 * (100vw - 1440px) / 160),
            18.82px
          );
        }
        @media (max-width: 767px) {
          font-size: 11.71px;
        }
        color: #1f1f2e;
        padding: 0;
        width: 100%;
        height: 0;
        opacity: 0;
        transition:
          height 0.2s ease,
          opacity 0.2s ease,
          transform 0.2s ease,
          color 0.2s ease;

        &::placeholder {
          color: transparent;
          transition: color 0.2s ease;
        }

        &:focus::placeholder {
          color: #acb9ce;
        }

        &:not(:placeholder-shown) {
          color: #0f0c36;
        }
        &:focus,
        &:not(:placeholder-shown) {
          height: 20px;
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }
  .error-msg-text {
    color: #ff0000;
    font-size: clamp(
      13.84px,
      calc(13.84px + 1.16 * (100vw - 680px) / 520),
      15px
    );
    @media (min-width: 1440px) {
      font-size: clamp(
        15px,
        calc(15px + 2.63 * (100vw - 1440px) / 160),
        17.63px
      );
    }
    margin-top: 3px;
  }
}
.error-action {
  background-color: transparent !important;
}