芝麻web文件管理V1.00

编辑当前文件:/home/unicorntechnolog/public_html/newtzar/events.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tzar Night Club - Events</title>
    
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">

/* --- GLOBAL STYLES --- */
        body, html {
            background-color: #000000b9;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            height: 100%;
            margin: 0;
            overflow-y: auto;
        }

/* ===========================================
           IMAGE BACKGROUND (REPLACED VIDEO)
        =========================================== */
        .image-bg-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            overflow: hidden;
        }

.bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('./assets/images/dance-floor.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed; /* This makes it fixed */
            opacity: 0.5;
            /* filter: brightness(0.6); */
        }

/* ===========================================
           FIXED TOP BAR STYLES - LOGO SIZE FIXED
        ============================================ */
        /* Top Bar */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            z-index: 1000;
            pointer-events: none;
        }

.top-bar * {
            pointer-events: auto;
        }

.top-logo {
            width: 120px; /* Fixed size */
            height: 120px; /* Fixed size */
            object-fit: contain;
            transition: all 0.3s ease;
            opacity: 1;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.48);
            padding: 10px;
            border-radius: 50%;
        }

.top-logo.hidden {
            display: none;
        }

.top-logo.visible {
            opacity: 1;
        }

.top-logo:hover {
            transform: scale(1.05);
        }

.menu-btn {
            background: rgba(30, 30, 30, 0.8);
            backdrop-filter: blur(10px);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.2);
            padding: 8px 24px;
            border-radius: 50px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 1;
            transform: translateY(0);
        }

.menu-btn.visible {
            opacity: 1;
            transform: translateY(0);
        }

.menu-btn:hover {
            background: #fff;
            color: #000;
        }

/* ===========================================
           METALAB MENU STYLES
        =========================================== */
        /* SIDEBAR CONTAINER (Desktop Only) */
        .sidebar-container {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 20px;
            z-index: 900;
            pointer-events: none;
            opacity: 0;
            transform: translateX(-20px);
            transition: all var(--transition-speed) var(--ease);
        }

.sidebar-container.context-visible {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

.nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: all var(--transition-speed) var(--ease);
            pointer-events: auto;
        }

.nav-link-item {
            display: block;
            margin-bottom: 15px;
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            color: #fff;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            width: fit-content;
            padding: 0;
            border-radius: 0;
            position: relative;
            background: transparent;
            border: none;
        }

.nav-link-item:hover {
            color: d5d4d4ff;
            transform: translateX(5px);
        }

.nav-link-item.active {
            color: #d5d4d4ff !important;
            font-weight: 500;
            font-size: 1.7rem !important;
            transform: translateX(5px);
            background: none;
            border: none;
            box-shadow: none;
        }

/* Main Content */
        .main-wrapper {
            margin-left: 0;
            width: 100%;
            transition: transform var(--transition-speed) var(--ease), opacity var(--transition-speed) var(--ease), filter var(--transition-speed) var(--ease);
            transform-origin: center right;
            will-change: transform, opacity;
        }

/* OPEN STATE CLASSES */
        body.menu-open .sidebar-container {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

body.menu-open .main-wrapper {
            transform: scale(0.85) translateX(50px);
            opacity: 0.4;
            filter: blur(2px);
            pointer-events: none;
        }

/* Update top menu button text */
        body.menu-open .menu-btn {
            background: #fff;
            color: #000;
        }

/* Mobile Context Menu (Hidden on Desktop) - SIMPLIFIED */
        .mobile-context-menu {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(5, 5, 5, 0.98);
            backdrop-filter: blur(30px);
            border-top: 1px solid rgba(212, 175, 55, 0.3);
            z-index: 1000;
            display: none;
            padding: 15px 10px;
            box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.8);
        }
        
        .mobile-context-menu.active {
            display: block;
            animation: slideUp 0.3s ease-out;
        }
        
        @keyframes slideUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .mobile-nav-list {
            display: flex;
            justify-content: space-around;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .mobile-nav-item {
            text-align: center;
            flex: 1;
            padding: 10px 5px;
        }
        
        .mobile-nav-link {
            color: #888;
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 5px;
            border-radius: 12px;
            position: relative;
        }
        
        .mobile-nav-link.active {
            color: #d5d4d4ff;
            background: rgba(212, 175, 55, 0.15);
        }
        
        .mobile-nav-link i {
            font-size: 1.2rem;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }
        
        .mobile-nav-link.active i {
            color: #d5d4d4ff;
            transform: scale(1.1);
        }
        
        .mobile-nav-label {
            font-size: 0.7rem;
            letter-spacing: 0.5px;
            margin-top: 2px;
        }
        
        /* Mobile Menu Toggle Button */
        .mobile-menu-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: var(--gold-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #050505;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 1002;
            box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
            transition: all 0.3s ease;
            border: 2px solid #050505;
            display: none;
        }
        
        .mobile-menu-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(212, 175, 55, 0.6);
        }
        
        .mobile-menu-toggle.active {
            transform: rotate(45deg);
            background: #050505;
            color: var(--gold-color);
            border-color: var(--gold-color);
        }
        
        /* Mobile Global Menu */
        .mobile-global-menu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(5, 5, 5, 0.98);
            backdrop-filter: blur(30px);
            z-index: 1001;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .mobile-global-menu.active {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .mobile-global-nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        
        .mobile-global-nav-item {
            margin: 25px 0;
        }
        
        .mobile-global-nav-link {
            color: #fff;
            text-decoration: none;
            font-size: 2.2rem;
            font-family: 'Playfair Display', serif;
            font-weight: 400;
            transition: all 0.3s ease;
            display: inline-block;
            padding: 10px 20px;
        }
        
        .mobile-global-nav-link:hover {
            color: var(--gold-color);
            transform: scale(1.05);
        }
        
        .mobile-close-menu {
            position: absolute;
            top: 30px;
            right: 30px;
            color: var(--gold-color);
            font-size: 1.2rem;
            cursor: pointer;
            background: none;
            border: none;
            padding: 10px;
        }

/* WhatsApp Button */
        .whatsapp-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
            border: 2px solid white;
            text-decoration: none;
        }
        
        .whatsapp-button:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
            background: #128C7E;
        }
        
        .whatsapp-button span {
            display: none;
            margin-left: 10px;
            font-size: 0.9rem;
            font-family: var(--font-body);
        }
        
        /* ===========================================
           MODERN EVENTS PAGE DESIGN STARTS HERE
        ============================================ */
        
        /* --- MODERN HERO SECTION --- */
        .events-hero {
            position: relative;
            padding: 180px 20px 100px;
            text-align: center;
            overflow: hidden;
            /* background: linear-gradient(180deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,0.9) 100%); */
        }

.hero-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 800px;
            /* background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0) 70%); */
            z-index: -1;
            pointer-events: none;
        }

.hero-title {
            font-family: 'Playfair Display', serif;
            font-size: 4.5rem;
            font-weight: 700;
            background: var(--gradient-gold);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            letter-spacing: -1px;
            line-height: 1.1;
        }

.hero-subtitle {
            font-size: 1.3rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto 40px;
            line-height: 1.6;
            font-weight: 300;
        }

.hero-stats {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-top: 60px;
            flex-wrap: wrap;
        }

.stat-item {
            text-align: center;
        }

.stat-number {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            font-weight: 700;
            background: var(--gradient-gold);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
            margin-bottom: 5px;
        }

.stat-label {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-secondary);
        }

/* --- MODERN FILTER SECTION --- */
        .modern-filter-section {
            max-width: 1400px;
            margin: 0 auto 60px;
            padding: 0 20px;
        }

.filter-container {
            background: rgba(17, 17, 17, 0.8);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(212, 175, 55, 0.1);
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

.filter-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
        }

.filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            flex-wrap: wrap;
            gap: 20px;
        }

.filter-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 600;
            color: var(--text-primary);
        }

.filter-search {
            position: relative;
            max-width: 400px;
            flex-grow: 1;
        }

.filter-search input {
            width: 100%;
            padding: 16px 24px 16px 50px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.filter-search input:focus {
            outline: none;
            border-color: var(--primary-gold);
            box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
        }

.filter-search i {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-gold);
            font-size: 1.2rem;
        }

.filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

.filter-group {
            position: relative;
        }

.filter-label {
            display: block;
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 500;
        }

.modern-select {
            width: 100%;
            padding: 16px 20px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23D4AF37' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 20px center;
            background-size: 16px;
        }

.modern-select:focus {
            outline: none;
            border-color: var(--primary-gold);
            box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
        }

.filter-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

.results-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

.results-count {
            font-size: 1.1rem;
            color: var(--text-primary);
            font-weight: 500;
        }

.results-count span {
            color: var(--primary-gold);
            font-weight: 600;
        }

.view-options {
            display: flex;
            gap: 10px;
        }

.view-option {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

.view-option.active {
            background: var(--primary-gold);
            color: var(--dark-bg);
            border-color: var(--primary-gold);
        }

.view-option:hover:not(.active) {
            border-color: var(--primary-gold);
            color: var(--primary-gold);
        }

/* --- MODERN EVENTS GRID - SIMPLIFIED --- */
        .modern-events-grid {
            max-width: 1400px;
            margin: 0 auto 80px;
            padding: 0 20px;
        }

.events-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 30px;
        }

.modern-event-card {
            background: rgba(17, 17, 17, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(212, 175, 55, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

.modern-event-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

.modern-event-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary-gold);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
        }

.modern-event-card:hover::before {
            opacity: 1;
        }

.card-header {
            position: relative;
            height: 280px;
            overflow: hidden;
        }

.card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

.modern-event-card:hover .card-image {
            transform: scale(1.05);
        }

.card-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

.event-date {
            text-align: center;
            min-width: 70px;
        }

.date-day {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-gold);
            line-height: 1;
        }

.date-month {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-primary);
            font-weight: 500;
        }

.event-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            color: var(--text-primary);
        }

.status-sold {
            background: rgba(255, 77, 77, 0.2);
            border-color: rgba(255, 77, 77, 0.4);
            color: #FF9999;
        }

.status-featured {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(138, 43, 226, 0.2));
            border-color: rgba(212, 175, 55, 0.4);
            color: var(--gold-light);
        }

.card-content {
            padding: 30px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

.event-category {
            display: inline-block;
            padding: 6px 15px;
            background: rgba(212, 175, 55, 0.1);
            border-radius: 20px;
            font-size: 0.8rem;
            color: var(--primary-gold);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
            font-weight: 500;
        }

.event-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 20px;
            line-height: 1.3;
            color: var(--text-primary);
        }

.event-description {
            color: var(--text-secondary);
            margin-bottom: 30px;
            line-height: 1.6;
            flex-grow: 1;
            font-size: 0.95rem;
        }

.card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 25px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

.event-price {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-gold);
        }

.event-price span {
            font-size: 0.9rem;
            color: var(--text-secondary);
            font-weight: 400;
            margin-left: 5px;
        }

/* --- LIST VIEW STYLES --- */
        .modern-events-grid.list-view .events-container {
            grid-template-columns: 1fr;
        }

.modern-events-grid.list-view .modern-event-card {
            flex-direction: row;
            height: auto;
        }

.modern-events-grid.list-view .card-header {
            width: 300px;
            height: auto;
            flex-shrink: 0;
        }

.modern-events-grid.list-view .card-content {
            flex-grow: 1;
        }

/* --- PAGINATION --- */
        .modern-pagination {
            display: flex;
            justify-content: center;
            margin: 60px 0;
        }

.pagination-nav {
            display: flex;
            gap: 10px;
            align-items: center;
        }

.page-button {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(17, 17, 17, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 1rem;
        }

.page-button:hover {
            border-color: var(--primary-gold);
            color: var(--primary-gold);
        }

.page-button.active {
            background: var(--primary-gold);
            border-color: var(--primary-gold);
            color: var(--dark-bg);
        }

.page-button.disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

.pagination-dots {
            color: var(--text-secondary);
            margin: 0 5px;
        }

/* --- MAP SECTION --- */
        .modern-map-section {
            padding: 80px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

.section-header {
            text-align: center;
            margin-bottom: 50px;
        }

.section-title {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--text-primary);
        }

.section-subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }

.map-wrapper {
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(212, 175, 55, 0.2);
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

.map-frame {
            width: 100%;
            height: 400px;
            border: 0;
            /* filter: grayscale(100%) invert(100%) hue-rotate(180deg) contrast(90%); */
        }

.map-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(212, 175, 55, 0.05), transparent);
            pointer-events: none;
            z-index: 1;
        }

/* --- NO RESULTS STATE --- */
        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 80px 20px;
        }

.no-results-icon {
            font-size: 4rem;
            color: var(--text-secondary);
            margin-bottom: 30px;
            opacity: 0.3;
        }

.no-results-title {
            font-size: 2rem;
            color: var(--text-primary);
            margin-bottom: 15px;
            font-weight: 600;
        }

.no-results-text {
            color: var(--text-secondary);
            max-width: 500px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }

.reset-filters {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 30px;
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid var(--primary-gold);
            color: var(--primary-gold);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }

.reset-filters:hover {
            background: var(--primary-gold);
            color: var(--dark-bg);
        }

/* --- LOADING ANIMATION --- */
        .loading-spinner {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 60px;
            grid-column: 1 / -1;
        }

.spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(212, 175, 55, 0.1);
            border-top-color: var(--primary-gold);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

/* --- ANIMATIONS --- */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.modern-event-card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
        }

.modern-event-card:nth-child(1) { animation-delay: 0.1s; }
        .modern-event-card:nth-child(2) { animation-delay: 0.2s; }
        .modern-event-card:nth-child(3) { animation-delay: 0.3s; }
        .modern-event-card:nth-child(4) { animation-delay: 0.4s; }
        .modern-event-card:nth-child(5) { animation-delay: 0.5s; }
        .modern-event-card:nth-child(6) { animation-delay: 0.6s; }

/* ===========================================
           IMPROVED FOOTER DESIGN (EXACTLY AS BEFORE)
        =========================================== */
        .main-footer {
            background-color: #000000;
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

.footer-container {
            width: 100%;
            max-width: 1400px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            position: relative;
            border: 1px solid rgba(212, 175, 55, 0.1);
            background: rgba(5, 5, 5, 0.95);
        }

/* Header for context */
        .footer-header {
            padding: 60px 80px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
            position: relative;
            overflow: hidden;
        }

.footer-header h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--gold);
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }

.footer-header p {
            font-size: 1.1rem;
            color: white;
            max-width: 600px;
            line-height: 1.6;
        }

/* MAIN FOOTER DESIGN */
        .luxury-footer-content {
            padding: 100px 80px 80px;
            position: relative;
            overflow: hidden;
        }

/* Gold Accent Line */
        .accent-line {
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, var(--gold), #e8b962);
            margin-bottom: 50px;
            position: relative;
        }

.accent-line::after {
            content: '';
            position: absolute;
            right: -20px;
            top: -3px;
            width: 8px;
            height: 8px;
            background: var(--gold);
            transform: rotate(45deg);
        }

/* Main Grid Layout */
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 100px;
            margin-bottom: 100px;
        }

/* Left Column - Main Content */
        .footer-main h2 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 4rem;
            font-weight: 500;
            color: var(--gold);
            line-height: 1.1;
            margin-bottom: 30px;
            letter-spacing: -1px;
        }

.footer-main p {
            font-size: 1.2rem;
            color: white;
            line-height: 1.8;
            margin-bottom: 50px;
            max-width: 500px;
        }

/* Membership Button */
        .membership-btn {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            background: transparent;
            border: 1px solid var(--gold);
            color: var(--gold);
            padding: 20px 40px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

.membership-btn:hover {
            background: var(--gold);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
        }

.membership-btn i {
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }

.membership-btn:hover i {
            transform: translateX(5px);
        }

/* Social Media */
        .social-section {
            margin-top: 60px;
        }

.social-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            color: white;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 25px;
            position: relative;
            padding-left: 20px;
        }

.social-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 1px;
            background: var(--gold);
        }

.social-icons {
            display: flex;
            gap: 15px;
        }

.social-icon {
            width: 45px;
            height: 45px;
            border: 1px solid rgba(212, 175, 55, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.social-icon:hover {
            border-color: var(--gold);
            color: var(--gold);
            transform: translateY(-3px);
        }

/* Right Column - Quick Links */
        .quick-links h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 30px;
            position: relative;
            padding-left: 20px;
        }

.quick-links h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 1px;
            background: var(--gold);
        }

.quick-links-list {
            list-style: none;
            padding: 0;
        }

.quick-links-list li {
            margin-bottom: 20px;
        }

.quick-links-list a {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding-left: 20px;
        }

.quick-links-list a::before {
            content: '›';
            position: absolute;
            left: 0;
            color: var(--gold);
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
        }

.quick-links-list a:hover {
            color: var(--gold);
            padding-left: 25px;
        }

.quick-links-list a:hover::before {
            opacity: 1;
            transform: translateX(0);
        }

/* Bottom Section - Contact Info */
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 60px;
        }

.club-info {
            font-size: 0.9rem;
            color: #dddddd;
            line-height: 1.8;
        }

.club-info div {
            margin-bottom: 5px;
        }

.club-info i {
            color: var(--gold);
            margin-right: 10px;
            width: 15px;
        }

.club-tagline {
            font-style: italic;
            color: white;
            margin-bottom: 10px;
            font-size: 1rem;
        }

.contact-info {
            font-size: 0.9rem;
            color: #dddddd;
            line-height: 1.8;
        }

.contact-info div {
            margin-bottom: 5px;
        }

.contact-info i {
            color: var(--gold);
            margin-right: 10px;
            width: 15px;
        }

/* CENTERED COPYRIGHT */
        .footer-copyright {
            text-align: center;
            padding: 30px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

.copyright-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            color: #666;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

/* ===========================================
           RESPONSIVE DESIGN - UPDATED WITH FILTER OPTIMIZATION
        =========================================== */
        @media (max-width: 1200px) {
            .top-logo {
                width: 100px;
                height: 100px;
            }
            
            .hero-title {
                font-size: 3.8rem;
            }
            
            .events-container {
                grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            }
            
            .modern-events-grid.list-view .card-header {
                width: 250px;
            }
            
            .footer-grid {
                gap: 60px;
            }
            
            .footer-main h2 {
                font-size: 3.5rem;
            }
            
            .footer-header,
            .luxury-footer-content {
                padding: 60px 50px;
            }
            
            .footer-copyright {
                padding: 25px 50px;
            }
        }

@media (max-width: 992px) {
            .top-logo {
                width: 90px;
                height: 90px;
            }
            
            /* Show mobile elements */
            .mobile-context-menu {
                display: block !important;
            }
            
            .mobile-menu-toggle {
                display: flex !important;
            }
            
            /* Hide desktop menu elements on mobile */
            .menu-btn {
                display: none !important;
            }
            
            .sidebar-container {
                display: none !important;
            }
            
            /* WhatsApp button positioning for mobile */
            .whatsapp-button {
                bottom: 90px;
                right: 20px;
                z-index: 1000;
            }
            
            /* Adjust body padding for mobile menu */
            body {
                padding-bottom: 80px;
            }
            
            .hero-title {
                font-size: 3.2rem;
            }
            
            .hero-subtitle {
                font-size: 1.1rem;
                padding: 0 20px;
            }
            
            .hero-stats {
                gap: 30px;
            }
            
            .stat-number {
                font-size: 2.5rem;
            }
            
            /* Tablet filter optimization */
            .filter-container {
                padding: 30px;
            }
            
            .filter-header {
                flex-direction: column;
                align-items: stretch;
            }
            
            .filter-search {
                max-width: 100%;
            }
            
            .filter-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
            
            .events-container {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
            
            .modern-events-grid.list-view .modern-event-card {
                flex-direction: column;
            }
            
            .modern-events-grid.list-view .card-header {
                width: 100%;
                height: 200px;
            }
            
            .filter-actions {
                flex-direction: column;
                gap: 20px;
                align-items: stretch;
            }
            
            .view-options {
                justify-content: center;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 60px;
            }
            
            .footer-bottom {
                flex-direction: column;
                text-align: left;
                gap: 25px;
                margin-bottom: 80px;
            }
            
            .footer-header h1 {
                font-size: 3rem;
            }
            
            .footer-main h2 {
                font-size: 3rem;
            }
            
            .footer-header,
            .luxury-footer-content {
                padding: 60px 40px;
            }
        }

/* ===========================================
           MOBILE FILTER OPTIMIZATION (768px and below)
        =========================================== */
        @media (max-width: 768px) {
            .top-logo {
                width: 80px;
                height: 80px;
            }
            
            /* Mobile menu adjustments */
            .mobile-context-menu {
                padding: 10px 5px;
            }
            
            .mobile-nav-list {
                justify-content: space-between;
            }
            
            .mobile-nav-item {
                padding: 5px 2px;
            }
            
            .mobile-nav-link {
                font-size: 0.65rem;
                padding: 6px 3px;
            }
            
            .mobile-nav-link i {
                font-size: 1rem;
            }
            
            .mobile-nav-label {
                font-size: 0.6rem;
            }
            
            .mobile-menu-toggle {
                width: 50px;
                height: 50px;
                bottom: 100px;
                right: 15px;
                font-size: 1.3rem;
            }
            
            .mobile-global-nav-link {
                font-size: 1.8rem;
            }
            
            .mobile-global-nav-item {
                margin: 20px 0;
            }
            
            /* WhatsApp button for mobile */
            .whatsapp-button {
                width: 50px;
                height: 50px;
                bottom: 160px;
                right: 15px;
                font-size: 1.5rem;
            }
            
            .whatsapp-button.expanded {
                padding: 0 15px;
            }
            
            /* Mobile Hero Optimization */
            .events-hero {
                padding: 140px 15px 60px;
            }
            
            .hero-title {
                font-size: 2.8rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
            
            .hero-stats {
                gap: 20px;
                margin-top: 40px;
            }
            
            .stat-item {
                flex: 1;
                min-width: 120px;
            }
            
            .stat-number {
                font-size: 2rem;
            }
            
            /* MOBILE FILTER OPTIMIZATION */
            .modern-filter-section {
                margin-bottom: 40px;
                padding: 0 15px;
            }
            
            .filter-container {
                padding: 25px 20px;
                border-radius: 20px;
                background: rgba(10, 10, 10, 0.95);
                backdrop-filter: blur(15px);
                border: 1px solid rgba(212, 175, 55, 0.15);
                animation: slideDown 0.4s ease-out;
            }
            
            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .filter-header {
                margin-bottom: 25px;
                gap: 15px;
            }
            
            .filter-title {
                font-size: 1.6rem;
                text-align: center;
                width: 100%;
                background: linear-gradient(135deg, #D4AF37 0%, #F4E4C1 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                padding-bottom: 10px;
                border-bottom: 1px solid rgba(212, 175, 55, 0.2);
            }
            
            .filter-search {
                max-width: 100%;
                margin-top: 10px;
            }
            
            .filter-search input {
                padding: 14px 20px 14px 45px;
                font-size: 0.95rem;
                background: rgba(0, 0, 0, 0.7);
                border: 1px solid rgba(212, 175, 55, 0.2);
                min-height: 44px;
            }
            
            .filter-search i {
                left: 15px;
                font-size: 1rem;
            }
            
            .filter-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 20px;
            }
            
            .filter-group {
                margin-bottom: 5px;
            }
            
            .filter-label {
                font-size: 0.75rem;
                margin-bottom: 8px;
                letter-spacing: 1px;
                color: #D4AF37;
                display: flex;
                align-items: center;
                gap: 8px;
                min-height: 20px;
            }
            
            .filter-label::before {
                content: '→';
                font-size: 0.8rem;
                opacity: 0.7;
            }
            
            .modern-select {
                padding: 14px 16px;
                font-size: 0.95rem;
                background: rgba(0, 0, 0, 0.7);
                border: 1px solid rgba(212, 175, 55, 0.2);
                border-radius: 10px;
                min-height: 44px;
                transition: all 0.3s ease;
            }
            
            .modern-select:active {
                transform: scale(0.98);
            }
            
            .modern-select:focus {
                border-color: #D4AF37;
                box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
            }
            
            .filter-actions {
                margin-top: 25px;
                padding-top: 20px;
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
            
            .results-info {
                justify-content: center;
            }
            
            .results-count {
                font-size: 1rem;
            }
            
            .view-options {
                justify-content: center;
                gap: 15px;
            }
            
            .view-option {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background: rgba(212, 175, 55, 0.1);
                border: 1px solid rgba(212, 175, 55, 0.3);
                transition: all 0.3s ease;
                min-height: 44px;
            }
            
            .view-option:active {
                transform: scale(0.95);
            }
            
            .view-option.active {
                background: #D4AF37;
                border-color: #D4AF37;
                transform: scale(1.05);
            }
            
            /* Make filter container more compact */
            .filter-container::before {
                height: 2px;
                background: linear-gradient(90deg, transparent, #D4AF37, transparent);
                opacity: 0.3;
            }
            
            /* Events Grid */
            .events-container {
                grid-template-columns: 1fr;
            }
            
            .card-header {
                height: 220px;
            }
            
            .event-title {
                font-size: 1.6rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .footer-header,
            .luxury-footer-content {
                padding: 50px 30px;
            }
            
            .footer-header h1 {
                font-size: 2.5rem;
            }
            
            .footer-main h2 {
                font-size: 2.5rem;
            }
            
            .footer-main p {
                font-size: 1.1rem;
            }
            
            .membership-btn {
                padding: 18px 35px;
            }
        }

@media (max-width: 576px) {
            .top-logo {
                width: 70px;
                height: 70px;
            }
            
            /* Mobile menu fine-tuning */
            .mobile-context-menu {
                padding: 8px 3px;
            }
            
            .mobile-nav-link {
                font-size: 0.6rem;
            }
            
            .mobile-nav-link i {
                font-size: 0.9rem;
            }
            
            .mobile-menu-toggle {
                width: 45px;
                height: 45px;
                bottom: 10px;
                right: 10px;
                font-size: 1.2rem;
            }
            
            /* WhatsApp button for small screens */
            .whatsapp-button {
                width: 45px;
                height: 45px;
                bottom: 60px;
                right: 10px;
                font-size: 1.3rem;
            }
            
            /* Small Screen Hero */
            .hero-title {
                font-size: 2.3rem;
            }
            
            .hero-subtitle {
                font-size: 0.95rem;
            }
            
            /* Small Screen Filter Optimization */
            .modern-filter-section {
                padding: 0 10px;
            }
            
            .filter-container {
                padding: 20px 15px;
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            }
            
            .filter-title {
                font-size: 1.4rem;
                padding-bottom: 8px;
            }
            
            .filter-search input {
                padding: 12px 18px 12px 42px;
                font-size: 0.9rem;
            }
            
            .filter-grid {
                gap: 15px;
            }
            
            .filter-label {
                font-size: 0.7rem;
                letter-spacing: 0.8px;
            }
            
            .modern-select {
                padding: 12px 14px;
                font-size: 0.9rem;
                border-radius: 8px;
            }
            
            .filter-actions {
                margin-top: 20px;
                padding-top: 15px;
            }
            
            .results-count {
                font-size: 0.95rem;
            }
            
            .view-option {
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }
            
            /* Reset Filters Button */
            .reset-filters {
                min-height: 44px;
            }
            
            .reset-filters:active {
                transform: scale(0.98);
            }
            
            /* Events Grid */
            .modern-event-card {
                border-radius: 20px;
            }
            
            .card-content {
                padding: 25px;
            }
            
            .event-title {
                font-size: 1.5rem;
            }
            
            .event-price {
                font-size: 1.6rem;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .section-subtitle {
                font-size: 0.95rem;
            }
            
            .map-frame {
                height: 300px;
            }
            
            .footer-header,
            .luxury-footer-content {
                padding: 40px 20px;
            }
            
            .footer-header h1 {
                font-size: 2.2rem;
            }
            
            .footer-main h2 {
                font-size: 2.2rem;
            }
            
            .social-icons {
                justify-content: flex-start;
            }
            
            .footer-grid {
                gap: 40px;
                margin-bottom: 60px;
            }
            
            .membership-btn {
                width: 100%;
                justify-content: center;
            }
            
            .footer-bottom {
                margin-bottom: 60px;
            }
            
            .copyright-text {
                font-size: 0.8rem;
            }
        }

@media (max-width: 400px) {
            /* Very Small Screen Hero */
            .hero-title {
                font-size: 2rem;
            }
            
            .stat-number {
                font-size: 1.8rem;
            }
            
            .stat-item {
                min-width: 100px;
            }
            
            .stat-label {
                font-size: 0.7rem;
                letter-spacing: 1px;
            }
            
            /* Very Small Screen Filter */
            .modern-filter-section {
                padding: 0 8px;
            }
            
            .filter-container {
                padding: 18px 12px;
                border-radius: 14px;
            }
            
            .filter-title {
                font-size: 1.3rem;
            }
            
            .filter-search input {
                padding: 11px 16px 11px 40px;
            }
            
            .filter-label {
                font-size: 0.65rem;
            }
            
            .modern-select {
                padding: 11px 12px;
                font-size: 0.85rem;
            }
            
            .view-option {
                width: 36px;
                height: 36px;
            }
            
            /* Compact layout for very small screens */
            .event-title {
                font-size: 1.4rem;
            }
            
            .card-overlay {
                padding: 20px;
            }
            
            .date-day {
                font-size: 2rem;
            }
        }

/* Ensure the filter doesn't take the whole screen height on short screens */
        @media (max-height: 700px) and (max-width: 768px) {
            .modern-filter-section {
                margin-bottom: 30px;
            }
            
            .filter-container {
                max-height: 70vh;
                overflow-y: auto;
            }
            
            /* Hide scrollbar but keep functionality */
            .filter-container::-webkit-scrollbar {
                width: 4px;
            }
            
            .filter-container::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.2);
            }
            
            .filter-container::-webkit-scrollbar-thumb {
                background: rgba(212, 175, 55, 0.3);
                border-radius: 2px;
            }
        }

/* Add smooth transitions for better UX */
        .filter-container,
        .filter-search input,
        .modern-select,
        .view-option {
            transition: all 0.3s ease;
        }

/* Ensure desktop design stays untouched */
        @media (min-width: 769px) {
            .modern-filter-section {
                padding: 0 20px;
            }
            
            .filter-container {
                padding: 40px;
                border-radius: 24px;
                background: rgba(17, 17, 17, 0.8);
            }
            
            .filter-header {
                margin-bottom: 40px;
                flex-direction: row;
                align-items: center;
            }
            
            .filter-title {
                font-size: 2rem;
                text-align: left;
                width: auto;
                padding-bottom: 0;
                border-bottom: none;
            }
            
            .filter-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 25px;
            }
            
            .filter-actions {
                flex-direction: row;
                align-items: center;
                text-align: left;
            }
            
            .results-info {
                justify-content: flex-start;
            }
            
            .view-options {
                justify-content: flex-end;
            }
        }

@media (min-width: 993px) {
            .mobile-context-menu,
            .mobile-menu-toggle,
            .mobile-global-menu {
                display: none !important;
            }
            
            body {
                padding-bottom: 0;
            }
            
            .menu-btn {
                display: block !important;
            }
            
            .whatsapp-button {
                bottom: 30px;
                right: 30px;
            }
        }
       
    </style>
</head>
<body>
    
    <div class="image-bg-container">
        <div class="bg-image"></div>
    </div>

<div class="top-bar">
        <img src="./assets/images/logo/TZAR-logo-white.png" alt="TZAR Night Club Logo" class="top-logo" onclick="window.location.href='/'">
        <button class="menu-btn" id="menuBtn">Menu</button>
    </div>

<div class="sidebar-container">
        
        <ul class="nav-list global-menu">
            <li><a href="/" class="nav-link-item">HOME</a></li>
            <li><a href="/about" class="nav-link-item">ABOUT</a></li>
            <li><a href="/bar-menu" class="nav-link-item">BAR-MENU</a></li>
            <li><a href="/contact" class="nav-link-item">CONTACT</a></li>
            <li><a href="/events" class="nav-link-item active">EVENTS</a></li>
            <li><a href="/gift-card" class="nav-link-item">GIFT CARD</a></li>
            <li><a href="/cart" class="nav-link-item">CART</a></li>
        </ul>
    </div>

<div class="mobile-context-menu" id="mobileContextMenu">
    </div>

<div class="mobile-menu-toggle" id="mobileMenuToggle">
        <i class="bi bi-plus"></i>
    </div>

<div class="mobile-global-menu" id="mobileGlobalMenu">
        <button class="mobile-close-menu" id="mobileCloseMenu">
            <i class="bi bi-x-lg"></i>
        </button>
        <ul class="mobile-global-nav-list">
            <li class="mobile-global-nav-item">
                <a href="/" class="mobile-global-nav-link">HOME</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/about" class="mobile-global-nav-link">ABOUT</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/bar-menu" class="mobile-global-nav-link">BAR-MENU</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/contact" class="mobile-global-nav-link">CONTACT</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/events" class="mobile-global-nav-link">EVENTS</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/gift-card" class="mobile-global-nav-link">GIFT CARD</a>
            </li>
            <li class="mobile-global-nav-item">
                <a href="/cart" class="mobile-global-nav-link">CART</a>
            </li>
        </ul>
    </div>

<a href="https://wa.me/35794546487" target="_blank" class="whatsapp-button" id="whatsappButton">
        <i class="bi bi-whatsapp"></i>
        <span>Contact Us</span>
    </a>

<main class="main-wrapper">
        
        <section class="events-hero">
            <div class="hero-glow"></div>
            <div class="container">
                <h1 class="hero-title">Exclusive Events</h1>
                <p class="hero-subtitle">Experience Limassol's most premium nightlife. From intimate jazz evenings to electrifying DJ performances, discover events that redefine luxury nightlife.</p>
                
                <div class="hero-stats">
                    <div class="stat-item">
                        <div class="stat-number" id="totalEvents">6</div>
                        <div class="stat-label">Upcoming Events</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">3</div>
                        <div class="stat-label">Featured This Month</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">150+</div>
                        <div class="stat-label">VIP Members</div>
                    </div>
                </div>
            </div>
        </section>

<section class="modern-filter-section">
            <div class="filter-container">
                <div class="filter-header">
                    <h2 class="filter-title">Find Your Event</h2>
                    <div class="filter-search">
                        <i class="fas fa-search"></i>
                        <input type="text" id="modernSearchInput" placeholder="Search events, DJs, or themes...">
                    </div>
                </div>
                
                <div class="filter-grid">
                    <div class="filter-group">
                        <label class="filter-label">Event Category</label>
                        <select class="modern-select" id="modernFilterType">
                            <option value="all">All Categories</option>
                            <option value="featured">Featured Events</option>
                            <option value="party">Parties</option>
                            <option value="techno">Techno</option>
                            <option value="vip">VIP Exclusive</option>
                            <option value="jazz">Jazz</option>
                            <option value="soldout">Sold Out</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">Date Range</label>
                        <select class="modern-select" id="modernFilterDate">
                            <option value="all">All Dates</option>
                            <option value="this-week">This Week</option>
                            <option value="this-month">This Month</option>
                            <option value="next-month">Next Month</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">Price Range</label>
                        <select class="modern-select" id="modernFilterPrice">
                            <option value="all">Any Price</option>
                            <option value="0-50">Under €50</option>
                            <option value="50-100">€50 - €100</option>
                            <option value="100+">Premium (€100+)</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">Sort By</label>
                        <select class="modern-select" id="modernFilterSort">
                            <option value="date-asc">Date: Soonest</option>
                            <option value="date-desc">Date: Latest</option>
                            <option value="price-asc">Price: Low to High</option>
                            <option value="price-desc">Price: High to Low</option>
                            <option value="popular">Most Popular</option>
                        </select>
                    </div>
                </div>
                
                <div class="filter-actions">
                    <div class="results-info">
                        <div class="results-count">Showing <span id="modernResultsCount">6</span> events</div>
                    </div>
                    <div class="view-options">
                        <button class="view-option active" id="modernGridView" title="Grid View">
                            <i class="fas fa-th-large"></i>
                        </button>
                        <button class="view-option" id="modernListView" title="List View">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

<section class="modern-events-grid" id="modernEventsGrid">
            <div class="loading-spinner" id="loadingSpinner">
                <div class="spinner"></div>
            </div>
            
            <div class="events-container" id="modernEventsContainer">
                
            </div>
            
            
            <div class="no-results" id="noResults" style="display: none;">
                <div class="no-results-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h3 class="no-results-title">No Events Found</h3>
                <p class="no-results-text">Try adjusting your search criteria or filters to find the perfect event.</p>
                <button class="reset-filters" id="resetFilters">
                    <i class="fas fa-redo"></i>
                    Reset All Filters
                </button>
            </div>
        </section>

<div class="modern-pagination">
            <nav class="pagination-nav" id="modernPagination">
                
            </nav>
        </div>

<section class="modern-map-section">
            <div class="section-header">
                <h2 class="section-title">Our Premium Location</h2>
                <p class="section-subtitle">Visit us at the heart of Limassol's luxury district for an unforgettable experience</p>
            </div>
            
            <div class="map-wrapper">
                <div class="map-overlay"></div>
                <iframe class="map-frame" 
                    src="https://maps.google.com/maps?q=TZAR%20Limassol&t=&z=13&ie=UTF8&iwloc=&output=embed" 
                    allowfullscreen>
                </iframe>
            </div>
        </section>

<footer class="main-footer">
            <div class="footer-container">
                <div class="footer-header">
                    <h1>TZAR NIGHT CLUB</h1>
                    <p>Limassol's most exclusive members-only establishment, where luxury meets exceptional experience.</p>
                </div>

<div class="luxury-footer-content">
                    <div class="accent-line"></div>
                    
                    <div class="footer-grid">
                        <div class="footer-main">
                            <h2>Ready for<br>the experience?</h2>
                            <p>Limited memberships available. Join Limassol's most exclusive night club and experience luxury redefined.</p>
                            
                            <a href="./contact" class="membership-btn">
                                APPLY FOR MEMBERSHIP
                                <i class="fas fa-arrow-right"></i>
                            </a>
                            
                            <div class="social-section">
                                <div class="social-title">FOLLOW US</div>
                                <div class="social-icons">
                                    <a href="https://www.instagram.com/tzarlimassol.cy/" class="social-icon">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                    <a href="https://www.tiktok.com/@tzar.cy" class="social-icon">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://www.facebook.com/tzar.limassol" class="social-icon">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="#" class="social-icon">
                                        <i class="fab fa-youtube"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quick-links">
                            <h3>QUICK LINKS</h3>
                            <ul class="quick-links-list">
                                <li><a href="#">Book a Private Tour</a></li>
                                <li><a href="#">Membership Inquiry</a></li>
                                <li><a href="#">Private Events</a></li>
                                <li><a href="#">VIP Services</a></li>
                                <li><a href="#">Contact Management</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    
                    <div class="footer-bottom">
                        <div class="club-info">
                            <div class="club-tagline">An exclusive members-only establishment</div>
                            <div><i class="fas fa-map-marker-alt"></i>Kolonakiou 29, Limassol 4103</div>
                            <div><i class="fas fa-envelope"></i>info@tzarnightclub.com</div>
                        </div>
                        <div class="contact-info">
                            <div><i class="fas fa-phone"></i> + 357-25260020</div>
                            <div><i class="fas fa-clock"></i>Open Wed-Sat: 5 PM - 10 PM</div>
                            <div><i class="fas fa-user-tie"></i>VIP Reservations: +357-98-765-432</div>
                        </div>
                    </div>
                    
                    
                    <div class="footer-copyright">
                        <div class="copyright-text">© 2024 TZAR NIGHT CLUB. ALL RIGHTS RESERVED.</div>
                    </div>
                </div>
            </div>
        </footer>
    </main>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    
    <script>
        // ===========================================
        // MENU INITIALIZATION FUNCTION
        // ===========================================
        function initializeMenus() {
            if (window.innerWidth >= 993) {
                initializeDesktopMenu();
            } else {
                initializeMobileMenu();
            }
        }

// ===========================================
        // MOBILE MENU FUNCTIONALITY
        // ===========================================
        function initializeMobileMenu() {
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const mobileGlobalMenu = document.getElementById('mobileGlobalMenu');
            const mobileCloseMenu = document.getElementById('mobileCloseMenu');
            const whatsappButton = document.getElementById('whatsappButton');
            
            // Mobile menu toggle functionality
            if (mobileMenuToggle) {
                mobileMenuToggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    this.classList.toggle('active');
                    
                    if (mobileGlobalMenu) {
                        mobileGlobalMenu.classList.toggle('active');
                        
                        if (mobileGlobalMenu.classList.contains('active')) {
                            document.body.style.overflow = 'hidden';
                        } else {
                            document.body.style.overflow = 'auto';
                        }
                    }
                });
            }
            
            // Close mobile global menu
            if (mobileCloseMenu) {
                mobileCloseMenu.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    if (mobileGlobalMenu) mobileGlobalMenu.classList.remove('active');
                    if (mobileMenuToggle) mobileMenuToggle.classList.remove('active');
                    
                    document.body.style.overflow = 'auto';
                });
            }
            
            // WhatsApp button hover effect
            if (whatsappButton) {
                whatsappButton.addEventListener('mouseenter', function() {
                    this.classList.add('expanded');
                });
                
                whatsappButton.addEventListener('mouseleave', function() {
                    this.classList.remove('expanded');
                });
            }
            
            // Close global menu when clicking outside on mobile
            document.addEventListener('click', function(e) {
                if (mobileGlobalMenu && mobileGlobalMenu.classList.contains('active')) {
                    const isClickInsideMenu = mobileGlobalMenu.contains(e.target);
                    const isClickOnToggle = mobileMenuToggle && mobileMenuToggle.contains(e.target);
                    
                    if (!isClickInsideMenu && !isClickOnToggle) {
                        mobileGlobalMenu.classList.remove('active');
                        if (mobileMenuToggle) mobileMenuToggle.classList.remove('active');
                        document.body.style.overflow = 'auto';
                    }
                }
            });
            
            // Smooth scroll for mobile global menu
            document.querySelectorAll('.mobile-global-nav-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    // e.preventDefault();
                    if (mobileGlobalMenu) mobileGlobalMenu.classList.remove('active');
                    if (mobileMenuToggle) mobileMenuToggle.classList.remove('active');
                    
                    document.body.style.overflow = 'auto';
                });
            });
        }

// ===========================================
        // DESKTOP MENU FUNCTIONALITY
        // ===========================================
        function initializeDesktopMenu() {
            const body = document.body;
            const topMenuBtn = document.getElementById('menuBtn');
            const mainWrapper = document.querySelector('.main-wrapper');
            const sidebarContainer = document.querySelector('.sidebar-container');

function toggleMenu() {
                body.classList.toggle('menu-open');
            }

if (topMenuBtn) {
                topMenuBtn.addEventListener('click', toggleMenu);
            }

body.addEventListener('click', function() {
                if (body.classList.contains('menu-open') && topMenuBtn) {
                    topMenuBtn.innerText = 'Close';
                    topMenuBtn.style.background = '#000';
                    topMenuBtn.style.color = '#e8b962ff';
                } else if (topMenuBtn) {
                    topMenuBtn.innerText = 'Menu';
                    topMenuBtn.style.background = '';
                    topMenuBtn.style.color = '';
                }
            });

if (mainWrapper) {
                mainWrapper.addEventListener('click', () => {
                    if (body.classList.contains('menu-open')) {
                        toggleMenu();
                    }
                });
            }

// Global menu click handlers
            document.querySelectorAll('.global-menu .nav-link-item').forEach(link => {
                link.addEventListener('click', function(e) {
                    if (this.getAttribute('href').startsWith('/')) {
                        // e.preventDefault();
                        toggleMenu();
                        // Navigate to the page
                        setTimeout(() => {
                            window.location.href = this.getAttribute('href');
                        }, 300);
                    }
                });
            });
            
            // Show sidebar on scroll
            function handleScroll() {
                if (window.innerWidth >= 993) {
                    const scrollPosition = window.pageYOffset;
                    if (scrollPosition > 100 && !body.classList.contains('menu-open')) {
                        sidebarContainer.classList.add('context-visible');
                    } else {
                        sidebarContainer.classList.remove('context-visible');
                    }
                }
            }
            
            window.addEventListener('scroll', handleScroll);
            handleScroll(); // Initial check
        }

// ===========================================
        // MODERN EVENTS PAGE FUNCTIONALITY - SIMPLIFIED
        // ===========================================
        // Event Data
        const eventsData = [
            {
                id: 1,
                title: "Neon Night - DJ NOVA",
                date: "2024-06-28",
                time: "20:00",
                location: "TZAR Club",
                price: 90.00,
                image: "https://tzar-cy.com/wp-content/uploads/2025/05/Neon-Party-Preview.jpeg",
                description: "Experience the brightest night of the year with pulsating beats and neon vibes. Special visual effects and guest performances.",
                link: "https://tzar-cy.com/product/neon-night-party-dj-nova/",
                status: "featured",
                tickets: 15,
                category: "party"
            },
            {
                id: 2,
                title: "Techno Fest - DJ Bill",
                date: "2024-06-30",
                time: "16:30",
                location: "TZAR Club",
                price: 90.00,
                image: "https://tzar-cy.com/wp-content/uploads/2025/05/Club-dj-party-flyer-publicacion-en-redes-sociales-y-plantilla-de-banner-web.jpeg",
                description: "Deep bass and techno beats. Prepare for an immersive audio journey through underground sounds.",
                link: "https://tzar-cy.com/product/tchno-fest-party-dj-bill/",
                status: "upcoming",
                tickets: 42,
                category: "techno"
            },
            {
                id: 3,
                title: "Exclusive Summer Gala",
                date: "2024-07-10",
                time: "22:00",
                location: "TZAR Club",
                price: 680.00,
                image: "https://tzar-cy.com/wp-content/uploads/2025/05/PARTY-POSTER.jpeg",
                description: "A premium black-tie event with special guest performances. Limited VIP tables available.",
                link: "https://tzar-cy.com/product/new-event/",
                status: "featured",
                tickets: 8,
                category: "vip"
            },
            {
                id: 4,
                title: "Jazz & Wine Evening",
                date: "2024-07-15",
                time: "19:00",
                location: "TZAR VIP Lounge",
                price: 120.00,
                image: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                description: "An evening of smooth jazz and premium wine selections. Live band performance.",
                link: "#",
                status: "upcoming",
                tickets: 25,
                category: "jazz"
            },
            {
                id: 5,
                title: "Bass Revolution",
                date: "2024-07-22",
                time: "23:00",
                location: "TZAR Main Floor",
                price: 75.00,
                image: "https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                description: "Hard-hitting basslines with special guest DJs. Expect heavy drops and energetic crowds.",
                link: "#",
                status: "upcoming",
                tickets: 50,
                category: "bass"
            },
            {
                id: 6,
                title: "House Classics",
                date: "2024-06-25",
                time: "21:00",
                location: "TZAR Club",
                price: 65.00,
                image: "https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                description: "Classic house music all night long. Journey through the best house tracks of all time.",
                link: "#",
                status: "soldout",
                tickets: 0,
                category: "house"
            }
        ];

// State Management for Modern Events
        let modernCurrentView = 'grid';
        let modernCurrentPage = 1;
        const modernEventsPerPage = 6;
        let modernFilteredEvents = [...eventsData];

// Formatting Functions
        function modernFormatDate(dateString) {
            const date = new Date(dateString);
            const day = date.getDate();
            const month = date.toLocaleString('default', { month: 'short' }).toUpperCase();
            return { day, month, full: date };
        }

function modernFormatPrice(price) {
            return `€${price.toFixed(2)}`;
        }

function getCategoryLabel(category) {
            const categories = {
                'party': 'Party',
                'techno': 'Techno',
                'vip': 'VIP Exclusive',
                'jazz': 'Jazz',
                'bass': 'Bass',
                'house': 'House'
            };
            return categories[category] || category;
        }

// Render Functions for Modern Design - SIMPLIFIED
        function renderModernEvents(events, page = 1) {
            const eventsContainer = document.getElementById('modernEventsContainer');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const noResults = document.getElementById('noResults');
            
            // Show loading
            loadingSpinner.style.display = 'flex';
            eventsContainer.innerHTML = '';
            
            // Update results count
            document.getElementById('modernResultsCount').textContent = events.length;
            document.getElementById('totalEvents').textContent = events.length;
            
            setTimeout(() => {
                loadingSpinner.style.display = 'none';
                
                const startIndex = (page - 1) * modernEventsPerPage;
                const endIndex = startIndex + modernEventsPerPage;
                const paginatedEvents = events.slice(startIndex, endIndex);
                
                if (paginatedEvents.length === 0) {
                    noResults.style.display = 'block';
                    eventsContainer.style.display = 'none';
                    return;
                }
                
                noResults.style.display = 'none';
                eventsContainer.style.display = 'grid';
                
                paginatedEvents.forEach((event, index) => {
                    const date = modernFormatDate(event.date);
                    const isSoldOut = event.tickets === 0;
                    
                    const eventCard = `
                        <div class="modern-event-card" style="animation-delay: ${index * 0.1}s">
                            <div class="card-header">
                                <img src="${event.image}" alt="${event.title}" class="card-image"
                                     onerror="this.src='https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'">
                                <div class="card-overlay">
                                    <div class="event-date">
                                        <div class="date-day">${date.day}</div>
                                        <div class="date-month">${date.month}</div>
                                    </div>
                                    ${getModernStatusBadge(event.status, event.tickets)}
                                </div>
                            </div>
                            
                            <div class="card-content">
                                <div class="event-category">${getCategoryLabel(event.category)}</div>
                                <h3 class="event-title">${event.title}</h3>
                                <p class="event-description">${event.description}</p>
                                
                                <div class="card-footer">
                                    <div class="event-price">
                                        ${modernFormatPrice(event.price)}
                                        <span>per person</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    eventsContainer.innerHTML += eventCard;
                });
                
                renderModernPagination(events.length);
                updateModernView();
            }, 500); // Simulated loading delay
        }

function updateModernView() {
            const eventsGrid = document.getElementById('modernEventsGrid');
            eventsGrid.classList.remove('list-view');
            
            if (modernCurrentView === 'list') {
                eventsGrid.classList.add('list-view');
            }
        }

// Modern Filter Functions
        function modernFilterEvents() {
            const searchTerm = document.getElementById('modernSearchInput').value.toLowerCase();
            const typeFilter = document.getElementById('modernFilterType').value;
            const dateFilter = document.getElementById('modernFilterDate').value;
            const priceFilter = document.getElementById('modernFilterPrice').value;
            const sortFilter = document.getElementById('modernFilterSort').value;
            
            modernFilteredEvents = eventsData.filter(event => {
                // Search filter
                const matchesSearch = !searchTerm || 
                    event.title.toLowerCase().includes(searchTerm) ||
                    event.description.toLowerCase().includes(searchTerm) ||
                    event.category.toLowerCase().includes(searchTerm);
                
                // Type filter
                const matchesType = typeFilter === 'all' || 
                    (typeFilter === 'soldout' && event.tickets === 0) ||
                    event.status === typeFilter ||
                    event.category === typeFilter;
                
                // Date filter
                const eventDate = new Date(event.date);
                const today = new Date();
                const matchesDate = dateFilter === 'all' || (
                    (dateFilter === 'this-week' && eventDate <= new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000)) ||
                    (dateFilter === 'this-month' && eventDate.getMonth() === today.getMonth() && eventDate.getFullYear() === today.getFullYear()) ||
                    (dateFilter === 'next-month' && eventDate.getMonth() === today.getMonth() + 1 && eventDate.getFullYear() === today.getFullYear())
                );
                
                // Price filter
                const matchesPrice = priceFilter === 'all' || (
                    (priceFilter === '0-50' && event.price <= 50) ||
                    (priceFilter === '50-100' && event.price > 50 && event.price <= 100) ||
                    (priceFilter === '100+' && event.price > 100)
                );
                
                return matchesSearch && matchesType && matchesDate && matchesPrice;
            });
            
            // Sort events
            modernFilteredEvents.sort((a, b) => {
                switch (sortFilter) {
                    case 'date-asc':
                        return new Date(a.date) - new Date(b.date);
                    case 'date-desc':
                        return new Date(b.date) - new Date(a.date);
                    case 'price-asc':
                        return a.price - b.price;
                    case 'price-desc':
                        return b.price - a.price;
                    case 'popular':
                        return b.tickets - a.tickets;
                    default:
                        return 0;
                }
            });
            
            modernCurrentPage = 1;
            renderModernEvents(modernFilteredEvents, modernCurrentPage);
        }

// ===========================================
        // INITIALIZE MODERN EVENTS ON LOAD
        // ===========================================
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize menus
            initializeMenus();
            
            // Initial modern events render
            renderModernEvents(eventsData);
            
            // Search input with debounce
            let searchTimeout;
            document.getElementById('modernSearchInput').addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(modernFilterEvents, 300);
            });
            
            // Filter changes
            document.getElementById('modernFilterType').addEventListener('change', modernFilterEvents);
            document.getElementById('modernFilterDate').addEventListener('change', modernFilterEvents);
            document.getElementById('modernFilterPrice').addEventListener('change', modernFilterEvents);
            document.getElementById('modernFilterSort').addEventListener('change', modernFilterEvents);
            
            // View toggle
            document.getElementById('modernGridView').addEventListener('click', function() {
                modernCurrentView = 'grid';
                this.classList.add('active');
                document.getElementById('modernListView').classList.remove('active');
                updateModernView();
            });
            
            document.getElementById('modernListView').addEventListener('click', function() {
                modernCurrentView = 'list';
                this.classList.add('active');
                document.getElementById('modernGridView').classList.remove('active');
                updateModernView();
            });
            
            // Pagination
            document.getElementById('modernPagination').addEventListener('click', function(e) {
                if (e.target.tagName === 'BUTTON' && e.target.dataset.page) {
                    e.preventDefault();
                    const page = parseInt(e.target.dataset.page);
                    if (page >= 1 && page <= Math.ceil(modernFilteredEvents.length / modernEventsPerPage)) {
                        modernCurrentPage = page;
                        renderModernEvents(modernFilteredEvents, modernCurrentPage);
                        window.scrollTo({ top: 600, behavior: 'smooth' });
                    }
                }
            });
            
            // Reset filters button
            document.getElementById('resetFilters').addEventListener('click', function() {
                document.getElementById('modernSearchInput').value = '';
                document.getElementById('modernFilterType').value = 'all';
                document.getElementById('modernFilterDate').value = 'all';
                document.getElementById('modernFilterPrice').value = 'all';
                document.getElementById('modernFilterSort').value = 'date-asc';
                modernFilterEvents();
            });
            
            // Footer animations
            const membershipBtn = document.querySelector('.membership-btn');
            if (membershipBtn) {
                membershipBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const ripple = document.createElement('span');
                    const rect = this.getBoundingClientRect();
                    const size = Math.max(rect.width, rect.height);
                    const x = e.clientX - rect.left - size / 2;
                    const y = e.clientY - rect.top - size / 2;
                    
                    ripple.style.cssText = `
                        position: absolute;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.3);
                        transform: scale(0);
                        animation: ripple 0.6s linear;
                        width: ${size}px;
                        height: ${size}px;
                        top: ${y}px;
                        left: ${x}px;
                        pointer-events: none;
                    `;
                    
                    this.appendChild(ripple);
                    
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                    
                    setTimeout(() => {
                        alert('Membership application form would open here');
                    }, 300);
                });
            }
            
            // Add ripple animation style
            const style = document.createElement('style');
            style.textContent = `
                @keyframes ripple {
                    to {
                        transform: scale(4);
                        opacity: 0;
                    }
                }
            `;
            document.head.appendChild(style);
            
            // Footer link hover effects
            const links = document.querySelectorAll('.quick-links-list a');
            links.forEach(link => {
                link.addEventListener('mouseenter', function() {
                    this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                });
            });
            
            const socialIcons = document.querySelectorAll('.social-icon');
            socialIcons.forEach(icon => {
                icon.addEventListener('mouseenter', function() {
                    this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                });
            });
        });

// ===========================================
        // WINDOW RESIZE HANDLER
        // ===========================================
        window.addEventListener('resize', () => {
            initializeMenus();
        });
    </script>

</body>
</html>