/*======================================
EIVOX CARDS CSS
Version: 1.0
======================================*/


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

.card{

    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;

    background:var(--card);

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

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

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

    overflow:hidden;

    transition:var(--transition);

}


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

.card:hover{

    transform:translateY(-4px);

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

    border-color:var(--primary);

}


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

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

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

}


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

.card-body{

    flex:1;

    padding:20px;

}


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

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:20px;

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

}


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

.card-title{

    font-size:1.15rem;

    font-weight:var(--weight-bold);

    color:var(--text);

}


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

.card-subtitle{

    margin-top:6px;

    color:var(--text-muted);

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

}


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

.card-sm{

    border-radius:var(--radius);

}


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

.card-lg{

    border-radius:32px;

}


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

.card-outline{

    background:transparent;

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

}


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

.card-glass{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}


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

.card-click{

    cursor:pointer;

}


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

.product-card{

    display:flex;

    flex-direction:column;

    background:var(--card);

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

    overflow:hidden;

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

    transition:var(--transition);

}

.product-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

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

}


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

.card-image{

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.card:hover .card-image img,

.product-card:hover .card-image img{

    transform:scale(1.05);

}


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

.card-content{

    padding:20px;

}


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

.card-actions{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

}


/*======================================
BADGE
======================================*/

.card-badge{

    position:absolute;

    top:15px;

    left:15px;

    padding:6px 12px;

    border-radius:999px;

    background:var(--danger);

    color:#fff;

    font-size:12px;

    font-weight:600;

    z-index:2;

}


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

@media(max-width:767px){

    .card-header,

    .card-body,

    .card-footer,

    .card-content{

        padding:16px;

    }

}