:root { --primary: #4e54c8; --dark: #2c3e50; --light: #f4f7f6; --vote: #ff4757; }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        body { background: var(--light); color: var(--dark); padding-bottom: 60px; }
        html { scroll-behavior: smooth; }

        /* --- HERO HEADER --- */
        .event-header {
            position: relative;
            height: <?php echo $show_voting_interface ? '25vh' : '30vh'; ?>;
            overflow: hidden;
            transition: height 0.3s ease;
        }
        .header-bg {
            width: 100%; height: 100%;
            filter: brightness(0.4) blur(3px);
            transform: scale(1.1);
             object-fit: cover;
        }
        .header-content {
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 100%;
            padding: 30px 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
            color: white;
            z-index: 2;
        }
        .event-title { font-size: clamp(1.5rem, 5vw, <?php echo $show_voting_interface ? '3rem' : '3rem'; ?>); margin: 0 0 10px; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        .event-meta { display: flex; gap: 15px; align-items: center; font-size: 0.9rem; opacity: 0.9; }
        
        .status-badge { 
            padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 0.75rem; text-transform: uppercase;
        }
        .st-live { background: #00b894; color: white; }
        .st-pending { background: #fdcb6e; color: #2d3436; }
        .st-closed { background: #d63031; color: white; }

        .back-btn {
            position: absolute; top: 20px; left: 20px; z-index: 10;
            background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);
            color: white; text-decoration: none; width: 40px; height: 40px;
            border-radius: 50%; display: flex; justify-content: center; align-items: center;
            font-size: 1.2rem; transition: 0.2s;
        }
        .back-btn:hover { background: rgba(255,255,255,0.4); }

        /* --- INFO CONTAINER --- */
        .info-container { padding: 20px; max-width: 1200px; margin: 0 auto; }
        
        /* State 1: Details Box */
        .desc-box { 
            background: white; padding: 30px; border-radius: 15px; 
            box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 30px; 
            font-size: 1rem; line-height: 1.8; color: #555;
        }
        .location-row { display: flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }

        /* Big Category Buttons (State 1) */
        .cat-grid-select {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px;
        }
        .cat-big-btn {
            background: white; border: 1px solid #e0e0e0; padding: 20px;
            border-radius: 12px; text-align: left; text-decoration: none;
            color: var(--dark); font-weight: 600; transition: 0.2s;
            display: flex; justify-content: space-between; align-items: center;
        }
        .cat-big-btn:hover { border-color: var(--primary); box-shadow: 0 5px 15px rgba(78, 84, 200, 0.1); transform: translateY(-2px); color: var(--primary); }

        /* --- VOTING INTERFACE (State 2) --- */
        
        /* Search Bar */
        .search-box {
            position: relative; background: white; padding: 8px; 
            border-radius: 50px; display: flex; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            margin-bottom: 5px; border: 2px solid #fde;
        }
        .search-box input { flex: 1; border: none; padding: 10px 20px; outline: none; border-radius: 50px; font-size:1rem; }
        
        /* Sticky Nav */
        .cat-nav-wrapper {
            position: sticky; top: 0; z-index: 100; background: var(--light);
            padding: 10px 0; margin: 0 -20px 20px -20px; /* Bleed to edges */
            box-shadow: 0 4px 10px -5px rgba(0,0,0,0.05);
        }
        .cat-nav {
            display: flex; gap: 10px; overflow-x: auto; padding: 0 5px;
            -ms-overflow-style: none; scrollbar-width: none;
        }
        .cat-nav::-webkit-scrollbar { display: none; }
        
        .cat-btn {
            white-space: nowrap; padding: 8px 20px; border-radius: 30px;
            border: 1px solid #ddd; background: white; color: #666;
            font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s;
        }
        .cat-btn.active {
            background: var(--primary); color: white; border-color: var(--primary);
            box-shadow: 0 4px 10px rgba(78, 84, 200, 0.3);
        }

        /* Grid */
        .grid { 
            display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
            gap: 15px; 
        }
        
        .card { 
            background: white; border-radius: 12px; overflow: hidden; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.2s;
            display: flex; flex-direction: column;
        }
        .card:hover { transform: translateY(-5px); }
        
        .card-img { width: 100%; height: 180px; object-fit: cover; background: #eee; }
        .card-info { padding: 12px; flex: 1; display: flex; flex-direction: column; }
        
        .c-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; line-height: 1.2; color: var(--dark); }
        .c-cat { font-size: 0.75rem; color: var(--primary); text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
        .c-id { font-size: 0.8rem; color: #888; background: #f8f9fa; padding: 2px 6px; border-radius: 4px; align-self: flex-start; }
        .vote-count { margin-top: 10px; font-weight: 700; color: var(--dark); font-size: 0.9rem; }

        .btn-vote {
            display: block; width: 100%; padding: 10px; margin-top: auto;
            background: #27ae60; color: white; text-align: center; text-decoration: none;
            border-radius: 8px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer;
        }
        .btn-vote:hover { background: #219150; }
        .btn-disabled { background: #ccc; pointer-events: none; color: #777; }

        @media (min-width: 768px) {
            .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 25px; }
            .card-img { height: 220px; }
        }
              footer { text-align: center; color: #888; font-size: 0.9rem; margin-top: 30px; }
      
     /* --- NO RESULTS STATE --- */
.no-results-container {
    grid-column: 1 / -1;
    display: none; /* Hidden by default, shown via JS or PHP */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: white;
    border-radius: 20px;
    border: 2px dashed #e2e8f0;
    text-align: center;
}

.no-results-icon {
    font-size: 50px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.no-results-text h3 {
    color: var(--dark);
    margin-bottom: 5px;
}

.no-results-text p {
    color: #94a3b8;
    font-size: 0.9rem;
}