/* =====================================================
   KASI MATTRESS
   FORMS
   Version: 1.0.0
   ===================================================== */

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

.km-form{
    display:flex;
    flex-direction:column;
    gap:var(--space-6);
}

/* ==========================================
   ROWS
========================================== */

.km-form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-6);
}

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

.km-form-group{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}

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

.km-label{
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-semibold);
    color:var(--text);
}

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

.km-input,
.km-select,
.km-textarea{

    width:100%;

    padding:16px 18px;

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

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

    background:var(--white);

    color:var(--text);

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

    transition:all var(--transition-normal);

}

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

    color:var(--text-muted);

}

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

    border-color:var(--primary);

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

}

.km-textarea{

    min-height:180px;

    resize:vertical;

}

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

.km-checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.km-checkbox input{

    margin-top:4px;

}

.km-checkbox label{

    line-height:1.6;

}

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

.km-radio-group{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.km-radio{

    display:flex;

    align-items:center;

    gap:10px;

}

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

.km-file{

    padding:18px;

    border:2px dashed var(--border);

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

    background:var(--background-color);

}

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

.km-help{

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

    color:var(--text-muted);

}

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

.km-error{

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

    color:var(--danger);

}

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

.km-success{

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

    color:var(--success);

}

/* ==========================================
   REQUIRED
========================================== */

.km-required{

    color:var(--danger);

}

/* ==========================================
   NEWSLETTER
========================================== */

.km-newsletter-form{

    display:flex;

    gap:var(--space-4);

}

.km-newsletter-form .km-input{

    flex:1;

}

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

.km-search-form{

    position:relative;

}

.km-search-form .km-input{

    padding-right:60px;

}

.km-search-btn{

    position:absolute;

    top:50%;

    right:18px;

    transform:translateY(-50%);

    color:var(--text-muted);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

    .km-form-row{

        grid-template-columns:1fr;

    }

    .km-newsletter-form{

        flex-direction:column;

    }

}