/*==================================================
  forms.css
  LinksHub UI v2
==================================================*/

/*==============================
  Form Wrapper
==============================*/

.form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.form-row{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

}

.form-column{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/*==============================
  Form Group
==============================*/

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    width:100%;

}

.form-inline{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

/*==============================
  Labels
==============================*/

label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    font-weight:600;

    color:var(--text);

}

.required::after{

    content:"*";

    color:var(--danger);

    margin-left:4px;

}

/*==============================
  Inputs
==============================*/

.form-control{

    width:100%;

    min-height:48px;

    padding:13px 16px;

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

    border-radius:var(--radius);

    background:var(--surface);

    color:var(--text);

    transition:all .25s ease;

}

.form-control::placeholder{

    color:var(--muted);

}

.form-control:hover{

    border-color:#cbd5e1;

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(79,70,229,.12);

}

textarea.form-control{

    min-height:160px;

    resize:vertical;

}

select.form-control{

    appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%2364758b'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2364758b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 14px center;

    padding-right:42px;

}

/*==============================
  Input Sizes
==============================*/

.input-sm{

    min-height:40px;

    padding:10px 14px;

    font-size:13px;

}

.input-lg{

    min-height:56px;

    padding:16px 20px;

    font-size:16px;

}

/*==============================
  Input Group
==============================*/

.input-group{

    display:flex;

    width:100%;

}

.input-group .form-control{

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

}

.input-group .btn{

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

}

/*==============================
  Icons
==============================*/

.input-icon{

    position:relative;

}

.input-icon i{

    position:absolute;

    top:50%;

    left:16px;

    transform:translateY(-50%);

    color:var(--muted);

    pointer-events:none;

}

.input-icon .form-control{

    padding-left:46px;

}

.input-icon-right{

    position:relative;

}

.input-icon-right i{

    position:absolute;

    top:50%;

    right:16px;

    transform:translateY(-50%);

    color:var(--muted);

}

.input-icon-right .form-control{

    padding-right:46px;

}

/*==============================
  Validation
==============================*/

.is-valid{

    border-color:var(--success)!important;

}

.is-valid:focus{

    box-shadow:0 0 0 4px rgba(34,197,94,.12);

}

.is-invalid{

    border-color:var(--danger)!important;

}

.is-invalid:focus{

    box-shadow:0 0 0 4px rgba(239,68,68,.12);

}

.valid-feedback{

    font-size:13px;

    color:var(--success);

}

.invalid-feedback{

    font-size:13px;

    color:var(--danger);

}

/*==============================
  Checkbox
==============================*/

.checkbox{

    display:flex;

    align-items:center;

    gap:10px;

}

.checkbox input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}

/*==============================
  Radio
==============================*/

.radio{

    display:flex;

    align-items:center;

    gap:10px;

}

.radio input{

    accent-color:var(--primary);

}

/*==============================
  Switch
==============================*/

.switch{

    position:relative;

    width:54px;

    height:30px;

}

.switch input{

    display:none;

}

.switch-slider{

    position:absolute;

    inset:0;

    background:#cbd5e1;

    border-radius:999px;

    transition:.25s;

}

.switch-slider::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    left:3px;

    top:3px;

    border-radius:50%;

    background:#fff;

    transition:.25s;

}

.switch input:checked + .switch-slider{

    background:var(--primary);

}

.switch input:checked + .switch-slider::before{

    transform:translateX(24px);

}

/*==============================
  Help Text
==============================*/

.form-text{

    font-size:13px;

    color:var(--muted);

}

/*==============================
  Responsive
==============================*/

@media(max-width:768px){

.form-row{

    grid-template-columns:1fr;

}

.input-group{

    flex-direction:column;

}

.input-group .form-control,

.input-group .btn{

    border-radius:var(--radius);

}

}