/* ========================================
   VIP SECTION (Homepage)
   ======================================== */

.cs-vip-section { padding: 48px 0; }
.cs-vip-section__header { text-align: center; margin-bottom: 36px; }
.cs-vip-section__title {
    font-family: var(--heading-font, 'Jockey One', sans-serif) !important;
    font-size: 32px; color: #1a1a2e; margin: 0 0 8px;
}
.cs-vip-section__subtitle { color: #6b7280; font-size: 16px; margin: 0; }

.cs-vip-grid { display: flex; gap: 24px; overflow-x: auto; padding: 0 20px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.cs-vip-grid::-webkit-scrollbar { height: 4px; }
.cs-vip-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.cs-vip-grid::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 4px; }

.cs-vip-card {
    flex: 0 0 260px; scroll-snap-align: start;
    background: #fff; border-radius: 20px; overflow: hidden;
    border: 1px solid #e5e7eb; text-decoration: none; color: inherit;
    transition: all 0.3s; position: relative;
}
.cs-vip-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); border-color: #FFD700; }

.cs-vip-card__banner {
    height: 80px; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative;
}
.cs-vip-card__banner::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px;
    background: linear-gradient(180deg, transparent, #fff);
}
.cs-vip-card__photo-wrap { 
    display: flex; justify-content: center; margin-top: -45px; position: relative; z-index: 1;
}
.cs-vip-card__photo {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.cs-vip-card__photo-placeholder {
    width: 90px; height: 90px; border-radius: 50%;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; border: 4px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.cs-vip-card__body { padding: 12px 20px 20px; text-align: center; }
.cs-vip-card__badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; color: #F57F17;
    background: #FFF8E1; border-radius: 10px; padding: 2px 10px;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.cs-vip-card__name { font-size: 18px; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; }
.cs-vip-card__subtitle { font-size: 13px; color: #9ca3af; margin: 0 0 12px; }
.cs-vip-card__stat { font-size: 13px; color: #6b7280; }
.cs-vip-card__stat strong { color: #374151; }

.cs-vip-card__cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px; padding: 8px 16px; border-radius: 20px;
    background: linear-gradient(135deg, #FFD700, #FFA000); color: #1a1a2e;
    font-size: 13px; font-weight: 700; text-decoration: none; transition: all 0.2s;
}
.cs-vip-card__cta:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255,215,0,0.4); }

@media (max-width: 600px) {
    .cs-vip-card { flex: 0 0 220px; }
}