/*
|--------------------------------------------------------------------------
| MOAKHAT COMPONENTS
| Version 1.0
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.card{

    background:var(--surface);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:24px;

    margin-bottom:24px;

}

/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.btn{

    display:inline-block;

    padding:12px 22px;

    border-radius:var(--radius);

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    border:none;

    cursor:pointer;

    transition:.25s;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:#5F735A;

    color:#fff;

}

.btn-secondary{

    background:#fff;

    color:var(--primary);

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

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

}

.btn-danger:hover{

    opacity:.9;

}

/*
|--------------------------------------------------------------------------
| Badge
|--------------------------------------------------------------------------
*/

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.badge-success{

    background:#E7F3EA;

    color:var(--success);

}

.badge-warning{

    background:#FFF7E3;

    color:var(--warning);

}

.badge-danger{

    background:#FCE9E9;

    color:var(--danger);

}

/*
|--------------------------------------------------------------------------
| Alert
|--------------------------------------------------------------------------
*/

.alert{

    padding:18px;

    border-radius:var(--radius);

    margin-bottom:20px;

}

.alert-success{

    background:#EAF6EC;

    color:var(--success);

}

.alert-warning{

    background:#FFF8E8;

    color:#9A6B00;

}

.alert-danger{

    background:#FDECEC;

    color:var(--danger);

}

/*
|--------------------------------------------------------------------------
| Navigation Card
|--------------------------------------------------------------------------
*/

.nav-card{

    display:block;

    background:#fff;

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

    border-radius:var(--radius);

    padding:20px;

    margin-bottom:18px;

    transition:.25s;

}

.nav-card:hover{

    box-shadow:var(--shadow);

    transform:translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| Section Title
|--------------------------------------------------------------------------
*/

.section-title{

    margin-bottom:25px;

}

.section-title h2{

    margin-bottom:8px;

}

.section-title p{

    color:var(--text-light);

    margin:0;

}

/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.empty-state{

    text-align:center;

    padding:50px 20px;

    color:var(--text-light);

}

.empty-state img{

    max-width:120px;

    margin-bottom:20px;

}