/**
 * Unified Chip & Button Design System
 * Professional glass-morphism style for Explore + Nightlife pages
 * v1.0
 */

/* ============================================
   1. SHARED CHIP BASE — Cuisine & Genre Chips
   ============================================ */

.sl-cuisine-chip,
.sl-chip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: rgba(18, 18, 24, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 50px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    letter-spacing: 0.01em !important;
    position: relative !important;
    overflow: hidden !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Subtle inner glow on hover */
.sl-cuisine-chip::before,
.sl-chip-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50px !important;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.06), transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.sl-cuisine-chip:hover::before,
.sl-chip-btn:hover::before {
    opacity: 1 !important;
}

/* Hover state */
.sl-cuisine-chip:hover,
.sl-chip-btn:hover {
    border-color: rgba(212, 175, 55, 0.35) !important;
    color: #D4AF37 !important;
    background: rgba(22, 22, 30, 0.85) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(212, 175, 55, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transform: translateY(-1px) !important;
}

/* Active / Selected state */
.sl-cuisine-chip.active,
.sl-chip-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(184, 150, 46, 0.12) 100%) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    color: #D4AF37 !important;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.25) !important;
}

.sl-cuisine-chip.active::before,
.sl-chip-btn.active::before {
    opacity: 1 !important;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08), transparent 70%) !important;
}

/* Pressed state */
.sl-cuisine-chip:active,
.sl-chip-btn:active {
    transform: translateY(0px) scale(0.97) !important;
    transition-duration: 0.1s !important;
}

/* Icon styling inside chips */
.sl-cuisine-chip i,
.sl-chip-btn i {
    font-size: 11px !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s !important;
}

.sl-cuisine-chip:hover i,
.sl-chip-btn:hover i,
.sl-cuisine-chip.active i,
.sl-chip-btn.active i {
    opacity: 1 !important;
}

/* ============================================
   2. FILTER CHIP (special gold-tinted variant)
   ============================================ */

.sl-chip-filter {
    background: rgba(212, 175, 55, 0.08) !important;
    border-color: rgba(212, 175, 55, 0.25) !important;
    color: rgba(212, 175, 55, 0.85) !important;
}

.sl-chip-filter:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: #D4AF37 !important;
}

/* ============================================
   3. CUISINE / GENRE FILTER ROW
   ============================================ */

.sl-cuisine-filters {
    display: none;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 2px 4px !important;
    -ms-overflow-style: none !important;
    animation: slChipFadeIn 0.3s ease !important;
}

.sl-cuisine-filters::-webkit-scrollbar { display: none !important; }
.sl-cuisine-filters.visible { display: flex !important; }

@keyframes slChipFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   4. MAP CHIP ROW
   ============================================ */

.sl-map-chips {
    display: flex;
    gap: 8px !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 2px;
}
.sl-map-chips::-webkit-scrollbar { display: none; }

/* ============================================
   5. VIEW TOGGLE BUTTONS
   ============================================ */

.sl-view-btn {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    background: rgba(18, 18, 24, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.sl-view-btn:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    color: #D4AF37 !important;
}

.sl-view-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(184, 150, 46, 0.10)) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: #D4AF37 !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.12) !important;
}

/* ============================================
   6. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .sl-cuisine-chip,
    .sl-chip-btn {
        padding: 7px 13px !important;
        font-size: 11.5px !important;
        gap: 5px !important;
    }
    
    .sl-view-btn {
        padding: 5px 11px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .sl-cuisine-chip,
    .sl-chip-btn {
        padding: 6px 11px !important;
        font-size: 11px !important;
    }
}