/* ==========================================================
   LicitaAI.club
   form.css
   Design System
   Mobile First
   Versão: 1.0
==========================================================*/

/*==========================================================
  GROUP
==========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:var(--space-5);

}

/*==========================================================
  LABEL
==========================================================*/

.form-label{

    font-size:var(--font-size-sm);

    font-weight:600;

    color:var(--text-primary);

}

/*==========================================================
  INPUT BASE
==========================================================*/

.form-input,
.form-select,
.form-textarea{

    width:100%;

    height:var(--input-height);

    padding:0 16px;

    background:var(--color-white);

    border:1px solid var(--border-color);

    border-radius:12px;

    color:var(--text-primary);

    transition:var(--transition-fast);

}

/*==========================================================
  TEXTAREA
==========================================================*/

.form-textarea{

    min-height:140px;

    padding:16px;

    resize:vertical;

}

/*==========================================================
  FOCUS
==========================================================*/

.form-input:focus,
.form-select:focus,
.form-textarea:focus{

    border-color:var(--color-primary);

    box-shadow:0 0 0 4px rgba(15,76,129,.12);

}

/*==========================================================
  PLACEHOLDER
==========================================================*/

.form-input::placeholder,
.form-textarea::placeholder{

    color:var(--color-gray-400);

}

/*==========================================================
  HELP
==========================================================*/

.form-help{

    font-size:12px;

    color:var(--color-gray-500);

}

/*==========================================================
  ERROR
==========================================================*/

.form-error{

    font-size:12px;

    color:var(--color-danger);

}

/*==========================================================
  SUCCESS
==========================================================*/

.form-success{

    font-size:12px;

    color:var(--color-success);

}

/*==========================================================
  SEARCH
==========================================================*/

.form-search{

    position:relative;

}

.form-search i{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

}

.form-search .form-input{

    padding-left:46px;

}

/* ==========================================================
   CAMPO DE SENHA
========================================================== */

.password-field{

    position:relative;

}

.password-field .form-input{

    padding-right:50px;

}

.password-toggle{

    position:absolute;

    top:50%;

    right:12px;

    transform:translateY(-50%);

    width:32px;

    height:32px;

    border:none;

    background:transparent;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#94A3B8;

    transition:.2s;

}

.password-toggle:hover{

    color:var(--color-primary);

}

.password-toggle i{

    width:20px;

    height:20px;

}