/* ==========================
   Smart Pekua
   Content Creators
========================== */


/* ==========================
   Creator Card
========================== */

.creator-card{

    display:flex;

    gap:15px;

    background:#fff;

    border-radius:20px;

    padding:16px;

    margin-bottom:16px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.25s;

}


.creator-card:active{

    transform:scale(.98);

}


/* ==========================
   Creator Image
========================== */

.creator-image{

    width:90px;

    height:90px;

    border-radius:18px;

    object-fit:cover;

    flex-shrink:0;

    background:#EAF3FF;

}


/* ==========================
   Creator Information
========================== */

.creator-info{

    flex:1;

    min-width:0;

}


.creator-name{

    margin:0 0 5px;

    font-size:21px;

    line-height:1.4;

    color:#222;

    font-weight:bold;

}


/* ==========================
   Admin / Director
========================== */

.creator-admin{

    color:#555;

    font-size:14px;

    line-height:1.6;

    margin-bottom:5px;

}


/* ==========================
   Category
========================== */

.creator-category{

    color:#1976D2;

    font-size:14px;

    font-weight:bold;

    margin-bottom:4px;

}


/* ==========================
   Location
========================== */

.creator-location{

    color:#666;

    font-size:14px;

    margin-bottom:12px;

}


/* ==========================
   Social Links
========================== */

.creator-links{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-bottom:12px;

}


.creator-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 11px;

    border-radius:9px;

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:bold;

    transition:.2s;

}


.creator-link:active{

    transform:scale(.94);

}


/* Facebook */

.creator-link.facebook{

    background:#1877F2;

}


/* YouTube */

.creator-link.youtube{

    background:#FF0000;

}


/* WhatsApp */

.creator-link.whatsapp{

    background:#25D366;

}


/* ==========================
   Details Button
========================== */

.creator-details-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#1E88E5;

    color:#fff;

    text-decoration:none;

    padding:9px 14px;

    border-radius:10px;

    font-size:14px;

    font-weight:bold;

    transition:.2s;

}


.creator-details-btn:active{

    transform:scale(.95);

}


/* ==========================
   No Result
========================== */

.no-result{

    text-align:center;

    color:#777;

    padding:30px 15px;

    font-size:17px;

}


/* ==========================
   Mobile
========================== */

@media(max-width:480px){

    .creator-card{

        gap:12px;

        padding:14px;

        border-radius:18px;

    }


    .creator-image{

        width:78px;

        height:78px;

        border-radius:15px;

    }


    .creator-name{

        font-size:18px;

    }


    .creator-admin,
    .creator-category,
    .creator-location{

        font-size:13px;

    }


    .creator-link{

        padding:6px 9px;

        font-size:12px;

    }


    .creator-details-btn{

        padding:8px 11px;

        font-size:13px;

    }

}


/* ==========================
   Very Small Screen
========================== */

@media(max-width:350px){

    .creator-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }


    .creator-info{

        width:100%;

    }


    .creator-links{

        justify-content:center;

    }

}

/* =========================================
   CONTENT CREATOR CARD ANIMATION
========================================= */

.creator-card {

    opacity: 0;

    transform:
        translateY(35px)
        scale(0.97);

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;

    transition-delay:
        var(--creator-delay, 0s);

    will-change:
        opacity,
        transform;

}


/* =========================================
   Visible
========================================= */

.creator-card.show {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


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

.creator-card.show:hover {

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

}


/* =========================================
   Creator Image
========================================= */

.creator-image {

    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.4s ease;

}


/* =========================================
   Image Zoom
========================================= */

.creator-card.show:hover
.creator-image {

    transform: scale(1.05);

    filter:
        brightness(1.04)
        saturate(1.08);

}


/* =========================================
   Creator Name
========================================= */

.creator-name {

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}


.creator-card.show:hover
.creator-name {

    color: #1e88e5;

    transform:
        translateX(3px);

}


/* =========================================
   Details Arrow
========================================= */

.creator-details-btn {

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.creator-card.show:hover
.creator-details-btn {

    transform:
        translateY(-2px);

}


.creator-details-btn::after {

    transition:
        transform 0.3s ease;

}


/* =========================================
   Social Buttons
========================================= */

.creator-link {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.creator-link:hover {

    transform:
        translateY(-2px);

}


/* =========================================
   Reduced Motion
========================================= */

@media (prefers-reduced-motion: reduce) {

    .creator-card,
    .creator-image,
    .creator-name,
    .creator-details-btn,
    .creator-link {

        animation: none !important;

        transition: none !important;

    }

}