/* ===========================================
   PREMIUM CANDIDATE CARD
===========================================*/

:root{

    --pink:#ff2c93;
    --pink-dark:#e0007b;

    --gold:#d4af37;

    --text:#1f2937;

    --muted:#6b7280;

    --border:#ececec;

    --bg:#fafafa;

    --success:#16a34a;

}

.booking-grid-item{

    margin-bottom:30px;

}

/*==============================
CARD
==============================*/

.premium-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid #ededed;

    transition:.35s;

    box-shadow:
    0 8px 30px rgba(15,23,42,.05),
    0 2px 8px rgba(15,23,42,.05);

    height:100%;

}

.premium-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(15,23,42,.10);

}

/*==============================
TOP
==============================*/

.premium-top{

    display:flex;

    gap:22px;

    padding:22px;

}

/*==============================
IMAGE
==============================*/

.premium-image{

    width:220px;
    height:285px;

    position:relative;

    border-radius:20px;

    overflow:hidden;

    flex-shrink:0;

    cursor:pointer;

    background:#fff;

    border:4px solid #fff;

    box-shadow:
        0 0 0 1px #e8e8e8,
        0 0 0 6px rgba(212,175,55,.15),
        0 12px 30px rgba(0,0,0,.10);

}

.premium-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .45s ease;

}

.premium-card:hover .premium-image img{

    transform:scale(1.08);

}
/*==============================
READY BADGE
==============================*/

.available-badge{

    position:absolute;

    left:12px;

    bottom:12px;

    background:#ffffffef;

    padding:8px 14px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    color:#16a34a;

    display:flex;

    align-items:center;

    gap:6px;

    backdrop-filter:blur(10px);

}

.available-badge i{

    color:#16a34a;

}

/*==============================
RIGHT
==============================*/

.premium-info{

    flex:1;

    display:flex;

    flex-direction:column;

}

/*==============================
CATEGORY
==============================*/

.category-tag{

    display:inline-block;

    width:max-content;

    padding:7px 16px;

    background:#fff8e7;

    color:#946200;

    border-radius:40px;

    font-size:20px;

    font-weight:700;

    margin-bottom:12px;

}

/*==============================
NAME
==============================*/

.premium-info h2{

    font-size:31px;

    font-weight:800;

    color:#222;

    line-height:1.2;

    margin-bottom:12px;

}

/*==============================
SALARY
==============================*/

.salary-tag{

    display:inline-flex;

    width:max-content;

    align-items:center;

    gap:8px;

    background:#fff2f8;

    color:var(--pink-dark);

    border-radius:50px;

    padding:10px 18px;

    font-size:18px;

    font-weight:800;

    margin-bottom:14px;

}

.salary-tag i{

    color:var(--gold);

}

/*==============================
VERIFIED
==============================*/

.verified{

    color:#444;

    display:flex;

    gap:8px;

    align-items:center;

    font-weight:600;

    margin-bottom:14px;

}

.verified i{

    color:var(--gold);

}

/*==============================
DESCRIPTION
==============================*/

.candidate-description{

    color:#666;

    line-height:26px;

    margin:0;

}

/*==============================
INFO BAR
==============================*/

.quick-details{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    border-top:1px solid #efefef;

    border-bottom:1px solid #efefef;

}

.detail{

    display:flex;

    gap:14px;

    align-items:center;

    padding:18px;

}

.detail:not(:last-child){

    border-right:1px solid #efefef;

}

.detail i{

    width:48px;

    height:48px;

    border-radius:14px;

    background:#fff8e7;

    color:var(--gold);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.detail small{

    display:block;

    color:#9ca3af;

    text-transform:uppercase;

    font-size:11px;

    letter-spacing:1px;

    margin-bottom:3px;

}

.detail strong{

    font-size:17px;

    color:#222;

}

/*==============================
EXPERTISE
==============================*/

.expertise-area{

    padding:22px;

}

.expertise-area h5{

    font-weight:700;

    margin-bottom:15px;

}

.skill-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.skill-list span{

    background:#f6f6f6;

    padding:10px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    color:#555;

    transition:.3s;

}

.skill-list span:hover{

    background:#fff2f8;

    color:var(--pink-dark);

}

/*==============================
BUTTON
==============================*/

.premium-footer{

    padding:0 22px 22px;

}

.premium-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#ff2c93,#e0007b);

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 10px 22px rgba(255,44,147,.18);

}

.premium-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(255,44,147,.25);

}
/*=====================================================
 PREMIUM FINISHING TOUCHES
======================================================*/

/* Gold Accent Line */

.premium-card{
    position:relative;
}

.premium-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#D4AF37,#F4D97A,#D4AF37);
}

/* Image Zoom */

.premium-image{
    overflow:hidden;
}

.premium-image img{
    transition:transform .45s ease;
}

.premium-card:hover .premium-image img{
    transform:scale(1.08);
}

/* Name Hover */

.premium-card:hover h2{
    color:#111827;
}

/* Salary Glow */

.salary-tag{

    box-shadow:
    0 4px 15px rgba(255,44,147,.08);

}

/* Verified */

.verified{

    font-size:15px;

}

.verified i{

    color:#D4AF37;

}

/* Better Button */

.premium-btn{

    letter-spacing:.4px;

}

.premium-btn:hover{

    background:linear-gradient(135deg,#E0007B,#C9006D);

}

/* Skills */

.skill-list span{

    cursor:default;

}

.skill-list span:hover{

    transform:translateY(-2px);

}

/* Detail */

.detail{

    transition:.25s;

}

.detail:hover{

    background:#FAFAFA;

}

.detail:hover i{

    transform:scale(1.08);

}

/* Description */

.candidate-description{

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* Premium Scroll */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#D4AF37;

    border-radius:20px;

}

/*=====================================================
 RESPONSIVE
======================================================*/

@media(max-width:1200px){

.premium-image{

    width:190px;

    height:250px;

}

.premium-info h2{

    font-size:27px;

}

}

@media(max-width:991px){

.premium-top{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.premium-image{

    width:240px;

    height:300px;

}

.category-tag{

    margin:auto auto 15px;

}

.salary-tag{

    margin:auto auto 15px;

}

.verified{

    justify-content:center;

}

.quick-details{

    grid-template-columns:1fr;

}

.detail{

    border-right:none !important;

    border-bottom:1px solid #EFEFEF;

}

.detail:last-child{

    border-bottom:none;

}

}

@media(max-width:768px){

.booking-grid-item{

    margin-bottom:22px;

}

.premium-top{

    padding:18px;

}

.expertise-area{

    padding:18px;

}

.premium-footer{

    padding:0 18px 18px;

}

.premium-image{

    width:210px;

    height:270px;

}

.premium-info h2{

    font-size:24px;

}

.salary-tag{

    font-size:16px;

}

}

@media(max-width:576px){

.premium-card{

    border-radius:18px;

}

.premium-image{

    width:180px;

    height:230px;

}

.premium-info h2{

    font-size:22px;

}

.salary-tag{

    width:100%;

    justify-content:center;

}

.premium-btn{

    height:52px;

    font-size:15px;

}

.skill-list{

    justify-content:center;

}

}

/* ==========================
   LIGHTBOX
==========================*/

.lightbox-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:opacity .3s;

    z-index:999999;

}

.lightbox-overlay.active{

    opacity:1;

    visibility:visible;

}

.lightbox-wrapper{

    position:relative;

    max-width:900px;

    width:90%;

}

.lightbox-img{

    width:100%;

    max-height:90vh;

    object-fit:contain;

    border-radius:15px;

    display:block;

}

.lightbox-close-btn{

    position:absolute;

    top:-50px;

    right:0;

    border:none;

    background:none;

    color:#fff;

    font-size:45px;

    cursor:pointer;

}

.lightbox-caption{

    color:#fff;

    text-align:center;

    margin-top:15px;

    font-size:18px;

}