/*=========================================================
    ORDER GRID
=========================================================*/

.kk-order-grid{

    display:grid;

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

    gap:18px;

}

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

.kk-order-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    background:#fff;

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

    border-radius:20px;

    cursor:pointer;

    transition:all .3s ease;

}

.kk-order-card input{

    display:none;

}

.kk-order-card:hover{

    transform:translateY(-4px);

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

    border-color:var(--kk-secondary);

}

/*=========================================================
    ICON
=========================================================*/

.kk-order-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    background:#FFF6E8;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.kk-order-icon i{

    color:var(--kk-primary);

    font-size:24px;

}

/*=========================================================
    CONTENT
=========================================================*/

.kk-order-content{

    flex:1;

}

.kk-order-content h4{

    margin:0 0 4px;

    font-size:17px;

    color:var(--kk-text);

}

.kk-order-content p{

    margin:0;

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

    font-size:13px;

}

/*=========================================================
    CHECK
=========================================================*/

.kk-check{

    position:absolute;

    top:12px;

    right:12px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--kk-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transform:scale(.5);

    transition:.3s;

}

.kk-order-card.selected{

    border:2px solid var(--kk-primary);

    background:#FFF8EC;

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

}

.kk-order-card.selected .kk-check{

    opacity:1;

    transform:scale(1);

}

.kk-order-card.selected .kk-order-icon{

    background:var(--kk-primary);

}

.kk-order-card.selected .kk-order-icon i{

    color:#fff;

}

/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:768px){

    .kk-order-grid{

        grid-template-columns:1fr;

    }

}