/* ==========================================================
   FITUI
   Forms System
   ========================================================== */

:root{

    --fit-form-bg:#10141d;
    --fit-form-border:rgba(255,255,255,.08);
    --fit-form-border-focus:var(--fit-yellow,#ffd22e);

    --fit-form-radius:16px;

    --fit-form-padding:16px 18px;

}

/* ==========================================================
   FORM
========================================================== */

.fit-form{

    display:flex;
    flex-direction:column;
    gap:24px;

}

.fit-form-grid{

    display:grid;
    gap:24px;

}

.fit-form-grid-2{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;

}

@media(max-width:768px){

.fit-form-grid-2{

    grid-template-columns:1fr;

}

}

/* ==========================================================
   FIELD
========================================================== */

.fit-field{

    display:flex;
    flex-direction:column;
    gap:10px;

}

.fit-field-inline{

    display:flex;
    align-items:center;
    gap:12px;

}

.fit-label{

    color:#fff;
    font-size:.95rem;
    font-weight:700;

}

.fit-help{

    color:rgba(255,255,255,.58);
    font-size:.84rem;
    line-height:1.6;

}

.fit-error{

    color:#ff6b6b;
    font-size:.84rem;

}

.fit-success{

    color:#34d399;
    font-size:.84rem;

}

/* ==========================================================
   INPUTS
========================================================== */

.fit-input,
.fit-select,
.fit-textarea{

    width:100%;

    padding:var(--fit-form-padding);

    border-radius:var(--fit-form-radius);

    border:1px solid var(--fit-form-border);

    background:var(--fit-form-bg);

    color:#fff;

    font-size:15px;

    transition:.25s ease;

    appearance:none;

}

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

    color:rgba(255,255,255,.35);

}

.fit-input:hover,
.fit-select:hover,
.fit-textarea:hover{

    border-color:rgba(255,255,255,.16);

}

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

    outline:none;

    border-color:var(--fit-form-border-focus);

    box-shadow:0 0 0 4px rgba(255,210,46,.12);

}

.fit-textarea{

    min-height:150px;

    resize:vertical;

}

.fit-select{

    cursor:pointer;

}

/* ==========================================================
   READONLY
========================================================== */

.fit-readonly{

    padding:18px;

    border-radius:18px;

    background:#0c1118;

    border:1px solid rgba(255,255,255,.06);

}

.fit-readonly-value{

    margin-top:12px;

    padding:16px;

    border-radius:14px;

    background:#070b12;

    border:1px solid rgba(255,255,255,.05);

    color:#fff;

    font-weight:600;

    line-height:1.5;

}

/* ==========================================================
   BADGE
========================================================== */

.fit-auto-badge{

    display:inline-flex;

    align-items:center;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(34,197,94,.15);

    color:#4ade80;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}

/* ==========================================================
   CHECKBOX
========================================================== */

.fit-checkbox{

    display:flex;
    align-items:center;
    gap:12px;

}

.fit-checkbox input{

    width:18px;
    height:18px;

}

/* ==========================================================
   RADIO
========================================================== */

.fit-radio{

    display:flex;
    align-items:center;
    gap:12px;

}

.fit-radio input{

    width:18px;
    height:18px;

}

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

.fit-search-input{

    position:relative;

}

.fit-search-input input{

    padding-left:48px;

}

.fit-search-input svg{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    opacity:.55;

}

/* ==========================================================
   FILE
========================================================== */

.fit-file{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.fit-file input[type=file]{

    padding:14px;

    border:1px dashed rgba(255,255,255,.15);

    border-radius:16px;

    background:#0c1018;

}

/* ==========================================================
   SWITCH
========================================================== */

.fit-switch{

    display:flex;
    align-items:center;
    gap:14px;

}