/*
|--------------------------------------------------------------------------
| Root Variables
|--------------------------------------------------------------------------
*/

:root{

    --kmg-primary:#E18C08;

    --kmg-primary-hover:#c77700;

    --kmg-dark:#000000;

    --kmg-white:#ffffff;

    --kmg-border:#e5e7eb;

    --kmg-text:#111827;

    --kmg-text-light:#6b7280;

    --kmg-bg:#f5f7fa;

    --kmg-card-bg:#ffffff;

    --kmg-radius:12px;

    --kmg-shadow:
            0 2px 10px rgba(0,0,0,0.05);

    --kmg-transition:0.2s ease;

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

.kmg-passport-wrapper{

    background:var(--kmg-card-bg);

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

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

    margin-bottom:20px;

    overflow:hidden;

    padding: 15px;

}

.kmg-card-head{

    padding:15px 14px;

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

}

.kmg-card-title{

    margin:0;

    font-size:18px;

    font-weight:600;

    color:var(--kmg-text);

}

.kmg-card-subtitle{

    margin-top:5px;

    color:var(--kmg-text-light);

    font-size:13px;

}

.kmg-card-body{

    padding:5px;

}

.kmg-card-footer{

    padding:5px 0px;

}
.kmg-passport-grid{

    display:grid;

    gap:20px;

    align-items:start;
    grid-template-columns:repeat(3,1fr);

}

/*
|--------------------------------------------------------------------------
| Form Modern
|--------------------------------------------------------------------------
*/

.kmg-passport-field{

    margin-bottom:0px;

}

.kmg-passport-field label{

    display:block;

    font-size: 18px;

    margin-bottom:8px;

    font-weight:600;

    color:var(--kmg-text);

}

.kmg-passport-field input[type="text"],
.kmg-passport-field input[type="email"],
.kmg-passport-field input[type="date"],
.kmg-passport-field input[type="time"],
.kmg-passport-field input[type="url"],
.kmg-passport-field textarea,
.kmg-passport-field select{

    width:100%;

    max-width:100%;

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

    border-radius:8px;

    padding:10px 12px;

    min-height:42px;

}
.kmg-passport-field select{ font-size: 18px;}

.kmg-passport-field textarea{

    min-height:100px;

}
.kmg-checkboxes{

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

    border-radius:8px;

    padding:10px 12px;

}
.kmg-passport-flex{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
/*
|--------------------------------------------------------------------------
| Hero Buttons
|--------------------------------------------------------------------------
*/

.kmg-club-btn{

    background:var(--kmg-primary) !important;

    color:#fff !important;

    border:none !important;

    border-radius:8px !important;

    padding:5px 15px !important;

    font-weight:600 !important;

    text-decoration:none !important;

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

    box-shadow:none !important;

    font-size: 18px!important;

}

.kmg-club-btn:hover{

    background:var(--kmg-primary-hover) !important;

    color:#fff !important;

    transform:translateY(-1px);

}
.kmg-btn-danger{

    background:#ef4444;

    color:#fff;

    border:none !important;

    border-radius:8px !important;

    padding:5px 10px !important;

    font-weight:600 !important;

    text-decoration:none !important;

    height: 100%;

}

.kmg-btn-danger:hover{

    background:#dc2626;

    color:#fff;

    transform:translateY(-1px);
}
/*
|--------------------------------------------------------------------------
| Table Align
|--------------------------------------------------------------------------
*/
.kmg-table{
    width: 100%;
}

.kmg-table td,
.kmg-table th{

    vertical-align:middle;

}
.kmg-table td {

    padding: 15px 15px;
}
.kmg-table th {
    background: #f8fafc;
    font-weight: 600;
    text-align: left;
}

.kmg-table tbody tr{

    transition:background .2s ease;

}

.kmg-table tbody tr:hover{

    background:#fafafa;

}
/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){

    .kmg-passport-grid{
        display: flex;
        flex-direction: column;
    }
    .kmg-passport-field {
        margin-bottom: 0px;
        width: 100%;
    }
    .kmg-passport-field label {
        text-align: left;
    }

}

@media(max-width:782px){

    .kmg-passport-grid{
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
        margin-bottom: 10px;
        border-bottom: 1px solid #6b7280;
        gap: 5px;
    }
    .kmg-passport-field {
        margin-bottom: 0px;
        width: 100%;
    }
    .kmg-passport-field label {
        text-align: left;
    }
}