/*=========================================================
    KKF CARD SYSTEM v2.0
=========================================================*/

/*=========================================================
    Base Card
=========================================================*/

.kk-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:var(--kk-surface);

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

    border-radius:var(--kk-radius-xl);

    overflow:hidden;

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

    transition:
        transform var(--kk-transition),
        box-shadow var(--kk-transition),
        border-color var(--kk-transition);

}

/*=========================================================
    Hover
=========================================================*/

.kk-card:hover{

    transform:
        translateY(-8px)
        scale(1.01);

    border-color:

        rgba(212,175,55,.35);

    box-shadow:

        var(--kk-shadow-hover);

}

/*=========================================================
    Premium Border
=========================================================*/

.kk-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

        linear-gradient(

            135deg,

            transparent,

            rgba(212,175,55,.18),

            transparent

        );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.kk-card:hover::before{

    opacity:1;

}

/*=========================================================
    Card Image
=========================================================*/

.kk-card-image{

    position:relative;

    overflow:hidden;

}

.kk-card-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:

        transform .45s ease,

        filter .45s ease;

}

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

    transform:scale(1.08);

    filter:saturate(1.08);

}

/*=========================================================
    Card Header
=========================================================*/

.kk-card-header{

    padding:30px;

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

}

/*=========================================================
    Card Body
=========================================================*/

.kk-card-body{

    flex:1;

    padding:32px;

}

/*=========================================================
    Card Footer
=========================================================*/

.kk-card-footer{

    padding:22px 32px;

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

}

/*=========================================================
    Card Title
=========================================================*/

.kk-card-title{

    margin:0 0 12px;

    color:var(--kk-text);

    font-size:24px;

    font-weight:700;

    line-height:1.3;

}

/*=========================================================
    Card Text
=========================================================*/

.kk-card-text{

    margin:0;

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

    line-height:1.8;

}

/*=========================================================
    Card Badge
=========================================================*/

.kk-card-badge{

    position:absolute;

    top:20px;

    left:20px;

    z-index:2;

}

/*=========================================================
    Card Overlay
    (Gallery / Hero / Promotions)
=========================================================*/

.kk-card-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

}

/*=========================================================
    Compact Card
=========================================================*/

.kk-card-sm{

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

}

/*=========================================================
    Large Card
=========================================================*/

.kk-card-lg{

    border-radius:40px;

}

/*=========================================================
    Glass Card
=========================================================*/

.kk-card-glass{

    backdrop-filter:blur(18px);

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

    background:

        rgba(255,255,255,.75);

}

/*=========================================================
    Skeleton
=========================================================*/

.kk-skeleton{

    background:

        linear-gradient(

            90deg,

            #F3F3F3 25%,

            #FAFAFA 50%,

            #F3F3F3 75%

        );

    background-size:200% 100%;

    animation:kkSkeleton 1.4s infinite;

}

@keyframes kkSkeleton{

    from{

        background-position:200% 0;

    }

    to{

        background-position:-200% 0;

    }

}
/*=========================================================
    Active Card
=========================================================*/

.kk-card-active{

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

    box-shadow:

        0 0 0 4px

        rgba(255,179,0,.12);

}