/*
|--------------------------------------------------------------------------
| KitchenCAD PRO - UI Kit
|--------------------------------------------------------------------------
| Componenti grafici riutilizzabili
| Card
| Buttons
| Inputs
| Select
| Badge
|--------------------------------------------------------------------------
*/

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

.kcp-top-types{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.kcp-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    height:115px;

    gap:8px;

    padding:12px;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:12px;

    cursor:pointer;

    transition:all .22s ease;

    user-select:none;

}

.kcp-card:hover{

    border-color:#C8A16B;

    transform:translateY(-2px);

    box-shadow:0 8px 24px rgba(0,0,0,.08);

}

.kcp-card.active{

    border-color:#2F343A;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    position:relative;

}

.kcp-card.active::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:4px;

    background:#C8A16B;

    border-radius:12px 0 0 12px;

}

.kcp-card-title{

    font-size:14px;

    font-weight:600;

    color:#2F343A;

    letter-spacing:.3px;

    margin-top:10px;

    margin-bottom:-4px;

}

.kcp-card-description{

    margin-top:-8px;

    font-size:13px;

    color:#707780;

    line-height:1.45;

}

.kcp-card-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    height:38px;

    color:#2F343A;

}

.kcp-card-icon svg{

    width:64px;

    height:44px;

    display:block;

    margin:auto;

}

.kcp-card-icon svg.kcp-svg-lineare{

    width:90px;

    height:auto;

}

/* ==========================================================
   BUTTONS
========================================================== */

.kcp-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:42px;

    padding:0 22px;

    border-radius:10px;

    border:none;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:all .20s ease;

}

.kcp-btn-primary{

    background:#2F343A;

    color:#fff;

}

.kcp-btn-primary:hover{

    background:#1F2327;

    transform:translateY(-1px);

}

.kcp-btn-secondary{

    background:#fff;

    color:#2F343A;

    border:1px solid #D8DCE2;

}

.kcp-btn-secondary:hover{

    border-color:#C8A16B;

    color:#2F343A;

}

/* ==========================================================
   INPUTS & SELECT
========================================================== */

.kcp-input,
.kcp-select{

    width:100%;

    height:44px;

    padding:0 14px;

    border:1px solid #D8DCE2;

    border-radius:10px;

    background:#fff;

    color:#2F343A;

    font-size:14px;

    transition:all .20s ease;

    outline:none;

    box-sizing:border-box;

}

.kcp-input:focus,
.kcp-select:focus{

    border-color:#C8A16B;

    box-shadow:0 0 0 3px rgba(200,161,107,.15);

}

.kcp-input::placeholder{

    color:#9AA2AC;

}

.kcp-label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#2F343A;

}