/* --- VIP Advertisement Styling --- */
.vip-advertisement {
    border: 3px solid transparent !important;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7) border-box;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.vip-advertisement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1), rgba(69, 183, 209, 0.1));
    pointer-events: none;
    z-index: 1;
}

.vip-advertisement .card-body {
    position: relative;
    z-index: 2;
}

.vip-advertisement:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.vip-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    z-index: 10;
    animation: vipPulse 2s infinite;
}

.vip-badge i {
    margin-right: 3px;
    animation: vipIconPulse 1.5s ease-in-out infinite;
}

@keyframes vipPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes vipIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* VIP card title styling */
.vip-advertisement .card-title a {
    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* VIP shop name styling */
.vip-advertisement .shop-name strong {
    color: #FF6B6B;
}

/* Mobile-specific adjustments for VIP badge */
@media (max-width: 767.98px) {
    .vip-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
        top: 5px;
        right: 5px;
    }
}

/* ========================================================================= */
/* == NEW CHANGES - FOR COPYING TO OTHER THEMES                           == */
/* ========================================================================= */

/* --- General VIP Badge Styling --- */
.vip-badge {
    text-transform: none; /* Remove uppercase */
    /* icon has been removed from PHP function nail_render_vip_badge */
}

/* --- General VIP Text Color Fixes --- */
.vip-advertisement .card-title a,
.vip-advertisement.vip-technicians .card-title a,
.vip-advertisement.vip-salon-for-sale .card-title a {
    -webkit-text-fill-color: var(--color-primary); /* Use primary color for link */
    background: none; /* Remove gradient */
    text-decoration: none; /* Ensure no underline */
    color: var(--color-primary);
}

.vip-advertisement .shop-name strong {
    color: var(--color-text-dark); /* Restore original shop name color */
}

/* --- Specific VIP Category Styling --- */

/* 1. Technicians Needed */
.vip-advertisement.vip-technicians {
    border: 3px solid transparent;
    background: linear-gradient(white, #e0feff) padding-box, linear-gradient(135deg, #007bff, #8aeffc) border-box; /* Blue gradient border */
}

.vip-advertisement.vip-technicians .vip-badge {
    background: linear-gradient(135deg, #ff5b2e, #ff0000); /* Primary gradient background */
}

/* 2. Salon For Sale */
.vip-advertisement.vip-salon-for-sale {
    border: 3px solid transparent;
    background: linear-gradient(white, #fde9f4) padding-box, linear-gradient(135deg, #e83e8c, #FFC107) border-box;
}

.vip-advertisement.vip-salon-for-sale .vip-badge {
    background: linear-gradient(135deg, #0054ff, #001849);
}

/* ========================================================================= */
/* == DESKTOP-SPECIFIC FIXES (New Changes)                                == */
/* ========================================================================= */
@media (min-width: 768px) {
    /* Restore fixed image height for desktop view */
    .post-type-archive-advertisement .card .card-img-top {
        height: 300px;
        /* object-fit: cover; */
    }
}

/* ========================================================================= */
/* == MOBILE-SPECIFIC LAYOUT (New Changes)                                == */
/* ========================================================================= */

@media (max-width: 767.98px) {
    /* --- General Card Styling for Mobile --- */
    .card.h-100 {
        border: 1px solid #dee2e6; /* Thin grey border for all cards */
        height: 130px !important; /* Set a fixed height for all cards */
    }

    .ad-card-horizontal {
        display: flex;
        overflow: hidden;
        flex-direction: row;
        height: 100%; /* Ensure horizontal layout takes full card height */
    }

    /* --- Thumbnail Styling --- */
    .ad-card-thumbnail-link {
        flex: 0 0 120px; /* Fixed width for the image container */
        position: relative; /* Needed for VIP badge positioning */
        display: block;
    }

    .ad-card-thumbnail-link .card-img-top {
        height: 100%;
        width: 100%;
        /* object-fit: cover; */
        position: absolute;
        top: 0;
        left: 0;
        border-radius: var(--bs-card-border-radius) 0 0 var(--bs-card-border-radius) !important;
    }

    /* --- Card Body Layout --- */
    .card-body {
        flex: 1 1 auto;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .card-title {
        border-bottom: none; /* Remove border from title */
        font-size: .75rem;
        margin-bottom: 0.1rem;  
        padding-bottom: 0.1rem;
    }

    /* --- Meta Info (Shop & Location on one line) --- */
    .card-meta-line {
        display: flex;
        flex-wrap: nowrap; /* Force onto a single line */
        align-items: baseline;
        gap: 5px;
        margin-bottom: 0rem;
    }
    .card .location .fas{
        width: 3px;
    }
    .card i.fas.fa-store.me-1 {
        margin-right: 0px !important;
    }
    .card-meta-line .shop-name,
    .card-meta-line .location {
        margin-bottom: 0 !important; /* Remove bottom margin */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Add ... if text is too long */
    }

    .card-meta-line .shop-name strong {
        font-size: 0.6rem;
    }

    .card-meta-line .location small {
        font-size: 0.5rem;
        color: var(--color-text) !important;
    }

    /* --- Description --- */
    .ad-card-description {
        font-size: 0.65rem;
        margin-top: 5px;
        margin-bottom: 0;
        /* Truncate text to 2 lines */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* --- VIP Badge on Mobile --- */
    .vip-badge {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        padding: 4px 8px;
        font-size: 0.7rem;
        box-shadow: none;
    }
    
    /* Correct badge position on VIP cards */
    .vip-advertisement .ad-card-thumbnail-link .vip-badge,
    .ad-card-thumbnail-link .vip-badge {
        position: absolute;
        top: 5px;
        right: 0;
        left: auto;
    }
    .post-type-archive-advertisement .col-12.col-md-6.col-lg-4.mb-4,.latest-ads-section .col-12.col-md-4.mb-4 {
        margin-bottom: .7rem !important;
    }
    .vip-advertisement .ad-card-thumbnail-link .card-img-top{
        border-radius: 0 !important;
    }
}

/* Homepage Specific Fixes for Overflow Issue */
.home .home-state .vce-mega-menu-posts-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}