/*
|--------------------------------------------------------------------------
| DJDLager V3
| Forms
|--------------------------------------------------------------------------
*/

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

label {

    font-weight: 600;

    color: var(--text);

    margin-bottom: .45rem;

}

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

.form-control,
.form-select,
textarea {

    min-height: 48px;

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

    border-radius: var(--radius-sm);

    background: var(--surface);

    color: var(--text);

    transition: var(--transition);

}

textarea {

    min-height: 140px;

}

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

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

    border-color: var(--primary);

    box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb),.15);

}

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

::placeholder {

    color: var(--text-muted);

}

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

.input-group-text {

    background: var(--surface);

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

    color: var(--text-light);

}

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

.form-check-input:checked {

    background: var(--primary);

    border-color: var(--primary);

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn {

    min-height: 44px;

    border-radius: var(--radius-sm);

    font-weight: 600;

    transition: var(--transition);

}

.btn:hover {

    transform: translateY(-1px);

}

/* ==========================================================
   PRIMARY
========================================================== */

.btn-primary {

    background: var(--primary);

    border-color: var(--primary);

}

.btn-primary:hover {

    background: var(--primary-hover);

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

}

/* ==========================================================
   LIGHT
========================================================== */

.btn-light {

    background: var(--surface);

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

}

.btn-light:hover {

    background: var(--surface-subtle);

}

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

.form-card {

    background: var(--surface);

    border-radius: var(--radius-md);

    padding: 2rem;

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

    box-shadow: var(--shadow-sm);

}