/* ==========================================================
   THE AI ACE
   FORM COMPONENTS
   ========================================================== */

/* ---------- FORM ---------- */

.form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* ---------- GROUP ---------- */

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* ---------- LABEL ---------- */

.form-label{

    color:var(--text-primary);

    font-size:.9rem;

    font-weight:600;

}

/* ---------- INPUT ---------- */

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

    width:100%;

    padding:15px 18px;

    border-radius:16px;

    background:var(--bg-card);

    color:var(--text-primary);

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

    transition:.3s;

}

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

    color:var(--text-muted);

}

/* ---------- FOCUS ---------- */

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

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

    box-shadow:0 0 0 4px rgba(255,180,0,.08);

}

/* ---------- TEXTAREA ---------- */

.form-textarea{

    resize:vertical;

    min-height:140px;

}

/* ---------- SEARCH ---------- */

.form-search{

    position:relative;

}

.form-search input{

    padding-left:52px;

}

.form-search svg{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-muted);

}

/* ---------- CHECKBOX ---------- */

.form-checkbox{

    display:flex;

    align-items:center;

    gap:12px;

}

.form-checkbox input{

    width:18px;

    height:18px;

}

/* ---------- RADIO ---------- */

.form-radio{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ---------- SWITCH ---------- */

.form-switch{

    display:flex;

    align-items:center;

    gap:14px;

}

/* ---------- ERROR ---------- */

.form-error{

    color:var(--color-danger);

    font-size:.82rem;

}

/* ---------- SUCCESS ---------- */

.form-success{

    color:var(--color-success);

    font-size:.82rem;

}

/* ---------- HELP ---------- */

.form-help{

    color:var(--text-muted);

    font-size:.8rem;

}

/* ---------- INLINE ---------- */

.form-inline{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/* ---------- RESPONSIVE ---------- */

@media(max-width:768px){

.form-inline{

flex-direction:column;

}

}