/* ==========================================
   2KETEVENT - COMPLETE STYLESHEET
   Event Calendar + Ticketing Platform
   ========================================== */

/* ==========================================
   1. GLOBAL RESET & BASE STYLES
   ========================================== */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

:root {
     /* Brand Colors */
     --primary-color: #ED4D3A;
     --secondary-color: #484995;
     --accent-color: #ff6b35;
     --success-color: #28a745;
     --warning-color: #ffc107;
     --danger-color: #dc3545;

     /* Light Mode Colors */
     --bg-primary: #ffffff;
     --bg-secondary: #f8f9fa;
     --bg-tertiary: #fafafa;
     --text-primary: #2b2b2b;
     --text-secondary: #666;
     --text-tertiary: #999;
     --border-color: #e0e0e0;
     --card-bg: #ffffff;
     --modal-overlay: rgba(0, 0, 0, 0.6);

     /* Neutral Colors (Legacy) */
     --dark: #2b2b2b;
     --gray-dark: #666;
     --gray: #999;
     --gray-light: #ddd;
     --bg-light: #f8f9fa;
     --white: #ffffff;

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, #ED4D3A 0%, #f7931e 100%);
     --gradient-secondary: linear-gradient(135deg, #484995 0%, #667eea 100%);
     --gradient-sports: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --gradient-concerts: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     --gradient-health: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     --gradient-lifestyle: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
     --gradient-art: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
     --gradient-education: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
     --gradient-other: linear-gradient(135deg, #30cfd0 0%, #330867 100%);

     /* Spacing */
     --spacing-xs: 8px;
     --spacing-sm: 12px;
     --spacing-md: 20px;
     --spacing-lg: 30px;
     --spacing-xl: 40px;

     /* Border Radius */
     --radius-sm: 8px;
     --radius-md: 12px;
     --radius-lg: 20px;
     --radius-xl: 30px;

     /* Shadows */
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
     --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
     --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

     /* Transitions */
     --transition-fast: 0.2s ease;
     --transition-base: 0.3s ease;
     --transition-slow: 0.5s ease;
}

/* Dark Mode - Auto detect from browser/system */
@media (prefers-color-scheme: dark) {
     :root {
          --bg-primary: #1a1a1a;
          --bg-secondary: #2d2d2d;
          --bg-tertiary: #252525;
          --text-primary: #e0e0e0;
          --text-secondary: #b0b0b0;
          --text-tertiary: #808080;
          --border-color: #404040;
          --card-bg: #2d2d2d;
          --modal-overlay: rgba(0, 0, 0, 0.85);
     }

     body {
          background-color: var(--bg-primary);
          color: var(--text-primary);
     }


     /* Search Grid in Hero (ช่องค้นหา) */
     .search-grid {
          background: var(--bg-secondary) !important;
     }

     .search-field label {
          color: var(--text-primary) !important;
     }

     .search-field input {
          background: var(--bg-primary) !important;
          border-color: var(--border-color) !important;
          color: var(--text-primary) !important;
     }

     .category-select {
          border-color: var(--border-color) !important;
     }

     .category-selected label {
          color: var(--text-primary) !important;
     }

     .location-input-wrapper input {
          background: var(--bg-primary) !important;
          border-color: var(--border-color) !important;
          color: var(--text-primary) !important;
     }

     .search-modal-container {
          background: var(--bg-secondary) !important;
          color: var(--text-primary) !important;
     }

     .search-modal-body {
          background: var(--bg-tertiary) !important;
     }

     .search-modal-filters {
          background: var(--bg-secondary) !important;
          border-bottom: 1px solid var(--border-color) !important;
     }

     .filter-tab {
          background: var(--bg-primary) !important;
          border-color: var(--border-color) !important;
          color: var(--text-secondary) !important;
     }

     .flatpickr-current-month input.cur-year {
          background: #02020200 !important;
     }

     .filter-tab:hover {
          border-color: var(--primary-color) !important;
          color: var(--primary-color) !important;
     }

     .filter-control-group input,
     .filter-control-group select {
          background: var(--bg-primary) !important;
          border-color: var(--border-color) !important;
          color: var(--text-primary) !important;
     }

     .modal-events-grid .event-card {
          background: var(--card-bg) !important;
          border: 1px solid var(--border-color) !important;
     }

     .modal-events-grid .event-title {
          color: var(--text-primary) !important;
     }

     .modal-events-grid .event-info {
          color: var(--text-secondary) !important;
     }

     .search-modal-footer {
          background: var(--bg-secondary) !important;
          border-top: 1px solid var(--border-color) !important;
     }

     .skeleton-card::before {
          background: linear-gradient(90deg, var(--bg-secondary) 25%, #3d3d3d 50%, var(--bg-secondary) 75%) !important;
     }

     .location-dropdown {
          background: var(--bg-secondary) !important;
          border-color: var(--border-color) !important;
     }

     .location-item:hover {
          background: #3d3d3d !important;
     }

     .filter-tab-submenu {
          background: var(--bg-primary) !important;
          border-color: var(--border-color) !important;
     }

     .filter-tab-sub {
          color: var(--text-secondary) !important;
     }

     .filter-tab-sub:hover {
          background: var(--bg-secondary) !important;
     }

     .modal-no-results {
          color: var(--text-tertiary) !important;
     }

     .modal-no-results h3 {
          color: var(--text-secondary) !important;
     }

     .search-modal-header {
          background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
     }

     .search-field input,
     .search-field select,
     .category-select {
          border-color: var(--border-color) !important;
          color: var(--text-primary) !important;
     }

     .category-dropdown {
          background: var(--bg-secondary) !important;
          border-color: var(--border-color) !important;
     }

     .category-group h4 {
          color: var(--text-primary) !important;
     }

     .mobile-category-selector .category-selected {
          background: var(--bg-primary) !important;
          border-color: var(--border-color) !important;
     }

     .mobile-category-selector .category-selected label {
          color: var(--text-primary) !important;
     }

     .mobile-category-selector .category-dropdown {
          background: var(--bg-secondary) !important;
          border-color: var(--border-color) !important;
     }

     .category-group li {
          color: var(--text-secondary) !important;
     }

     .category-group li:hover {
          background: var(--bg-tertiary) !important;
          color: var(--primary-color) !important;
     }
}

body {
     font-family: 'Segoe UI', 'Kanit', Tahoma, Geneva, Verdana, sans-serif;
     color: var(--text-primary);
     background-color: var(--bg-secondary);
     line-height: 1.6;
     z-index: -1;
     transition: background-color 0.3s ease, color 0.3s ease;
}

html,
body {
     max-width: 100vw;
     overflow-x: hidden;
}

* {
     box-sizing: border-box;
}

.container,
section,
div {
     max-width: 100%;
}

body::before {
     background: url('img/BG\ img.webp');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}

[hidden] {
     display: none;
     visibility: hidden;
}

img {
     max-width: 100%;
     height: auto;
     display: block;
}

a {
     text-decoration: none;
     color: inherit;
     transition: var(--transition-base);
}

button {
     font-family: inherit;
     cursor: pointer;
     border: none;
     outline: none;
     transition: var(--transition-base);
}

/* ==========================================
   2. HEADER & NAVIGATION
   ========================================== */
.header {
     background: linear-gradient(135deg, rgba(237, 77, 58, 0.95) 0%, rgba(72, 73, 149, 0.95) 100%);
     backdrop-filter: blur(10px);
     padding: 20px 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: sticky;
     top: 0;
     z-index: 20;
     box-shadow: var(--shadow-md);
}

.logo-display img {
     height: 60px;
     width: auto;
     filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

.nav-menu {
     display: flex;
     gap: 15px;
     align-items: center;
}

.nav-link {
     color: white;
     font-weight: 600;
     padding: 10px 20px;
     border-radius: var(--radius-xl);
     transition: var(--transition-base);
}

.nav-link:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
}

.btn {
     padding: 12px 30px;
     border-radius: var(--radius-xl);
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: var(--transition-base);
     white-space: nowrap;
}

.btn-login {
     background: rgba(255, 255, 255, 0.2);
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-login:hover {
     background: rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
}

.btn-signup {
     background: white;
     color: var(--primary-color);
     box-shadow: var(--shadow-sm);
}

.btn-signup:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
}

.btn-organizer {
     background: var(--gradient-primary);
     color: white;
     box-shadow: var(--shadow-sm);
}

.btn-organizer:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
}

/* ==========================================
   3. HERO SECTION (Original)
   ========================================== */
.hero {
     background: url('img/Trail-running-101_hero.webp') center/cover no-repeat;
     color: white;
     padding: 80px 40px 100px;
     text-align: center;
     position: relative;
     overflow: visible;
}

.hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #ff6b35b5 0%, #ff8a6517 100%);
     z-index: 0;
}

.hero h1,
.hero p,
.search-container {
     position: relative;
     z-index: 1;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.hero h1 {
     color: #ffffff;
     font-weight: 900;
}

.hero p {
     color: #ffffff;
     font-weight: 600;
}

.hero::after {
     content: '';
     position: absolute;
     bottom: -50%;
     left: -10%;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     border-radius: 50%;
}

.hero h1 {
     font-size: 56px;
     font-weight: 900;
     margin-bottom: 20px;
     position: relative;
     z-index: 1;
     text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.hero p {
     font-size: 20px;
     margin-bottom: 50px;
     position: relative;
     z-index: 1;
     opacity: 0.95;
}

/* ==========================================
   4. SEARCH CONTAINER
   ========================================== */
.search-container {
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
     z-index: 2;
}

.search-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr auto;
     gap: 15px;
     background: white;
     padding: 30px;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xl);
}

.search-field,
.category-field {
     display: flex;
     flex-direction: column;
}

.search-field label {
     font-size: 14px;
     font-weight: 600;
     color: #000;
     margin-bottom: 10px;
}

.search-field input {
     padding: 15px;
     border: 2px solid var(--gray-light);
     border-radius: var(--radius-sm);
     font-size: 16px;
     transition: var(--transition-base);
}

.search-field input:focus {
     outline: none;
     border-color: var(--accent-color);
     box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}



/* Search Button */
.btn-search {
     background: var(--gradient-primary);
     color: white;
     padding: 15px 40px;
     border-radius: var(--radius-sm);
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     border: none;
     transition: var(--transition-base);
     white-space: nowrap;
     align-self: flex-end;
     box-shadow: var(--shadow-md);
}

.btn-search:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
}

/* ==========================================
   5. HERO IMAGES SECTION (NEW)
   ========================================== */
.hero-images-section {
     width: 100%;
     height: 55vh;
     min-height: 400px;
     max-height: 550px;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-swiper-container {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
}

.hero-swiper-container .swiper-slide {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}

/* Background blur layer - 100% width */
.hero-slide-bg-blur {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     filter: blur(8px);
     opacity: 0.9;
     z-index: 1;
     transform: scale(1.1);
}

/* Blur gradient mask on left and right edges */
.hero-slide-bg-blur::before,
.hero-slide-bg-blur::after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     width: 25%;
     z-index: 2;
}

.hero-slide-bg-blur::before {
     left: 0;
     background: linear-gradient(to right,
               rgba(0, 0, 0, 0.6) 0%,
               rgba(0, 0, 0, 0.3) 50%,
               transparent 100%);
}

.hero-slide-bg-blur::after {
     right: 0;
     background: linear-gradient(to left,
               rgba(0, 0, 0, 0.6) 0%,
               rgba(0, 0, 0, 0.3) 50%,
               transparent 100%);
}

/* Center card - 70-75% width with sharp image */
.hero-slide-card {
     position: relative;
     width: 72%;
     height: 100%;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
     border-radius: 0;
     overflow: hidden;
     z-index: 3;
     box-shadow: none;
     cursor: pointer;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-slide-card:hover {
     transform: scale(1.02);
}

.hero-slide-overlay {
     position: absolute;
     inset: 0;
     background: transparent;
     z-index: 1;
}

.hero-slide-overlay::before,
.hero-slide-overlay::after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     width: 14%;
     z-index: 1;
}

.hero-slide-overlay::before {
     left: 0;
     background: linear-gradient(to right,
               rgba(0, 0, 0, 0.5) 0%,
               rgba(0, 0, 0, 0.2) 50%,
               transparent 100%);
}

.hero-slide-overlay::after {
     right: 0;
     background: linear-gradient(to left,
               rgba(0, 0, 0, 0.5) 0%,
               rgba(0, 0, 0, 0.2) 50%,
               transparent 100%);
}

.hero-slide-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 40px 50px 35px;
     z-index: 2;
     color: white;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
     display: flex;
     flex-direction: column;
}

/* Text Alignment Variants */
.hero-slide-content[style*="text-align: left"] {
     align-items: flex-start;
}

.hero-slide-content[style*="text-align: center"] {
     align-items: center;
}

.hero-slide-content[style*="text-align: right"] {
     align-items: flex-end;
}

.hero-event-category {
     display: inline-block;
     background: rgba(255, 107, 53, 0.9);
     color: white;
     padding: 6px 16px;
     border-radius: 25px;
     font-size: 11px;
     font-weight: 600;
     margin-bottom: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     backdrop-filter: blur(10px);
}

.hero-event-title {
     font-size: 36px;
     margin: 0 0 12px 0;
     line-height: 1.2;
     text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.8);
     color: #ffffff;
     font-weight: 900;
}

.hero-event-info {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     margin-bottom: 18px;
     font-size: 14px;
     opacity: 0.95;
     justify-content: inherit;
}

.hero-event-info span {
     display: flex;
     align-items: center;
     gap: 8px;
}

.hero-event-description {
     font-size: 15px;
     line-height: 1.5;
     margin-bottom: 20px;
     max-width: 600px;
     opacity: 0.9;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
     background: rgba(0, 0, 0, 0.3);
     padding: 8px 12px;
     border-radius: 8px;
     width: fit-content;
     white-space: pre-wrap;
}

.hero-cta-buttons {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: inherit;
}

.hero-btn {
     padding: 12px 28px;
     border-radius: 30px;
     font-size: 14px;
     font-weight: 600;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
}

.hero-btn-primary {
     background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
     color: white;
     box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.hero-btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
}

.hero-btn-secondary {
     background: rgba(255, 255, 255, 0.2);
     color: white;
     backdrop-filter: blur(10px);
     border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-btn-secondary:hover {
     background: rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
}

.hero-nav-btn {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     color: #333;
     backdrop-filter: blur(10px);
     z-index: 10;
}

.hero-nav-btn:hover {
     background: rgba(255, 255, 255, 1);
     transform: scale(1.1);
}

.hero-nav-btn::after {
     font-size: 20px;
     font-weight: bold;
}

.hero-swiper-container .swiper-button-prev {
     left: 20px;
}

.hero-swiper-container .swiper-button-next {
     right: 20px;
}

.hero-pagination {
     position: absolute !important;
     bottom: 0 !important;
     left: 0 !important;
     right: 0 !important;
     z-index: 10;
}

.hero-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: rgba(255, 255, 255, 0.5);
     opacity: 1;
}

.hero-pagination .swiper-pagination-bullet-active {
     background: white;
     width: 40px;
     border-radius: 6px;
}

/* ==========================================
   CATEGORY DROPDOWN - FIXED SCROLL VERSION
   ========================================== */
.category-select {
     position: relative;
}

.category-selected {
     color: var(--dark);
     padding: 12px;
     border: 2px solid #ddd;
     border-radius: 12px;
     cursor: pointer;
     background: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
     appearance: menulist !important;
     background: #ff8a65 !important;
}

.category-selected:hover {
     border-color: #ff6b35;
     box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
}

.category-selected label {
     color: var(--dark);
     font-weight: 500;
     font-size: 15px;
}

.category-selected::after {
     content: '▼';
     font-size: 12px;
     color: #ff6b35;
     transition: transform 0.3s ease;
}

.category-dropdown.show .category-selected::after {
     transform: rotate(180deg);
}

.category-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
     right: 0;
     background: white;
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     display: none;
     max-height: 500px;
     overflow-y: auto;
     overflow-x: hidden;
     z-index: 100;
     border: 2px solid #ff6b35;
}

.category-dropdown.show {
     display: block;

}



.category-dropdown::-webkit-scrollbar {
     width: 8px;
}

.category-dropdown::-webkit-scrollbar-track {
     background: #f5f5f500;
     border-radius: 4px;
     margin: 8px 0;
}

.category-dropdown::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, #ff6b35 0%, #f7931e 100%);
     border-radius: 4px;
     border: 1px solid rgba(255, 255, 255, 0.3);
}

.category-dropdown::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(180deg, #f7931e 0%, #ff6b35 100%);
     box-shadow: 0 0 8px rgba(255, 107, 53, 0.5);
}

.category-group {
     margin-bottom: 20px;
     padding: 15px;
     border-bottom: 2px solid #f0f0f0;
}

.category-group:last-child {
     padding-bottom: 0;
     border-bottom: none;
}

.category-group h4 {
     color: #2b2b2b;
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 10px;
     padding: 10px 15px;
     border-radius: 8px;
     border-left: 4px solid #ff6b35;
     display: flex;
     align-items: center;
     gap: 8px;
     text-transform: uppercase;
}

.category-group ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 4px;
}

.category-group li {
     padding: 12px 15px;
     cursor: pointer;
     border-radius: 8px;
     transition: all 0.2s ease;
     font-size: 14px;
     color: #2b2b2b;
     font-weight: 500;
     background: white;
     border: 1px solid #f0f0f0;
}

.category-group li:hover {
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     color: #ff6b35;
     transform: translateX(5px);
     border-color: #ff6b35;
     box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

/* ==========================================
   LOCATION DROPDOWN - FIXED VERSION
   ========================================== */
.location-input-wrapper {
     position: relative;
}

#eventLocation {
     width: 100%;
}

.location-dropdown {
     position: absolute;
     top: 100%;
     right: 0;
     width: 120%;
     min-width: 600px;
     background: white;
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     display: none;
     z-index: 100;
     border: 2px solid #ff6b35;
     margin-top: 5px;
}

.location-dropdown.show {
     display: block;

}

.location-dropdown-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
     padding: 20px;
     max-height: 300px;
     overflow-y: auto;
     overflow-x: hidden;
}


.location-dropdown-content::-webkit-scrollbar {
     width: 8px;
}

.location-dropdown-content::-webkit-scrollbar-track {
     background: #f5f5f5;
     border-radius: 4px;
     margin: 8px 0;
}

.location-dropdown-content::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, #ff6b35 0%, #f7931e 100%);
     border-radius: 4px;
     border: 1px solid rgba(255, 255, 255, 0.3);
}

.location-dropdown-content::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(180deg, #f7931e 0%, #ff6b35 100%);
     box-shadow: 0 0 8px rgba(255, 107, 53, 0.5);
}

/* Location search input styling for desktop */
.main-location-search-wrapper,
.modal-location-search-wrapper {
     padding: 15px;
     border-bottom: 2px solid #f0f0f0;
     top: 0;
     background: white;
     z-index: 10;
}

.main-location-search-wrapper input,
.modal-location-search-wrapper input {
     width: 100%;
     padding: 12px 15px;
     border: 2px solid #e0e0e0;
     border-radius: 12px;
     font-size: 16px;
     outline: none;
     transition: all 0.3s;
}

.main-location-search-wrapper input:focus,
.modal-location-search-wrapper input:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(237, 77, 58, 0.1);
}

/* Hide close button on desktop */
.dropdown-close-btn {
     display: none;
}

/* Desktop: Ensure dropdowns have proper height */
@media (min-width: 769px) {
     .category-dropdown {
          max-height: 500px !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          position: absolute !important;
          width: auto !important;
          height: auto !important;
          border-radius: 12px !important;
     }

     .location-dropdown {
          position: absolute !important;
          width: 120% !important;
          min-width: 600px !important;
          height: auto !important;
          border-radius: 12px !important;
     }
}

.location-column {
     background: #fafafa;
     padding: 15px;
     border-radius: 10px;
     border: 2px solid #f0f0f0;
}

.location-column h4 {
     color: #2b2b2b;
     background: white;
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 12px;
     padding: 10px 12px;
     border-radius: 8px;
     border-left: 4px solid #ff6b35;
     display: flex;
     align-items: center;
     gap: 8px;
}

.location-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 4px;
}

.location-item {
     padding: 10px 12px;
     cursor: pointer;
     border-radius: 8px;
     transition: all 0.2s ease;
     font-size: 14px;
     font-weight: 500;
     color: #2b2b2b;

     background: white;
     border: 1px solid #f0f0f0;
}

.location-item:hover {
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     color: #ff6b35;
     transform: translateX(5px);
     border-color: #ff6b35;
     box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.location-item.location-popular {
     background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);

     border-color: #ff6b35;
     font-weight: 600;
     color: #ff6b35;

}

.location-item.location-popular::before {
     content: '⭐';
     font-size: 14px;
     margin-right: 5px;
}

.location-item.location-popular:hover {
     background: linear-gradient(135deg, #ffb662 0%, #ee8a66 100%);
     border-color: #ff9800;
     color: #fff;

}

/* ==========================================
   6. ADS BANNER CONTAINER (NEW)
   ========================================== */
.ads-banner-container {
     width: 100%;
     padding: 0 20px;
     max-width: 1400px;
     margin: 30px auto; /* อยู่ตรงกลาง */
     position: relative;
     min-height: 0;
     transition: all 0.3s ease;
}

.ads-banner-swiper {
     width: 100%;
     height: auto;
     overflow: visible;
     position: relative;
}

.ads-banner-swiper .swiper-slide {
     position: relative;
     height: 280px;
     background-size: cover;
     background-position: center;
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.3s ease;
}

.ads-banner-swiper .swiper-slide:hover {
     transform: scale(1.02);
}

.ads-banner-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);
     z-index: 1;
}

.ads-banner-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 30px;
     z-index: 2;
     color: white;
}

.ads-banner-tag {
     display: inline-block;
     background: rgba(255, 107, 53, 0.9);
     padding: 5px 15px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
     margin-bottom: 10px;
     text-transform: uppercase;
}

.ads-banner-title {
     font-size: 28px;
     font-weight: 800;
     margin: 0 0 10px 0;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ads-banner-subtitle {
     font-size: 16px;
     opacity: 0.9;
     margin: 0 0 15px 0;
     white-space: pre-wrap;
}

.ads-cta-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 28px;
     background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
     color: white;
     border: none;
     border-radius: 50px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-top: 10px;
     position: relative;
     overflow: hidden;
}

.ads-cta-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.5s ease;
}

.ads-cta-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
     background: linear-gradient(135deg, #ff7b45 0%, #ff9800 100%);
}

.ads-cta-btn:hover::before {
     left: 100%;
}

.ads-cta-btn:active {
     transform: translateY(0);
     box-shadow: 0 3px 10px rgba(255, 107, 53, 0.4);
}

/* Ads banner pagination */
.ads-banner-swiper .swiper-pagination {
         bottom: var(--swiper-pagination-bottom, -2px )!important;
}

.ads-banner-swiper .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
     background: rgba(255, 255, 255, 0.5);
     opacity: 1;
}

.ads-banner-swiper .swiper-pagination-bullet-active {
     background: #ffffff;
     width: 30px;
     border-radius: 5px;
}

/* ซ่อน pagination บน desktop (แสดง 3 อัน) */
@media (min-width: 1024px) {
     .ads-banner-swiper .swiper-pagination {
          display: none;
     }
}

/* ==========================================
   7. CATEGORIES BAR
   ========================================== */

.categories-h {
     text-align: center;
     margin-bottom: 40px;
}

.categories-h h1 {
     font-size: 42px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 10px;
}

.categories-h p {
     font-size: 18px;
     color: #fff;
}

.categories-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 25px;
     max-width: 1400px;
     margin: 60px auto;
     padding: 0 40px;
}

.category-item {
     background: var(--white);
     border-radius: var(--radius-lg);
     padding: 10px;
     text-align: center;
     cursor: pointer;
     transition: var(--transition-base);
     box-shadow: var(--shadow-sm);

}

.category-item:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-lg);
}

.category-icon {
     width: 60px;
     height: 60px;
     margin: 0 auto 15px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 36px;
     transition: var(--transition-base);
}

.category-item:hover .category-icon {
     transform: scale(1.1) rotate(5deg);
}

.category-name {
     font-size: 12px;
     font-weight: 700;
     color: var(--dark);
     text-transform: uppercase;
}

/* ==========================================
   8. HOT EVENTS & POPULAR SECTIONS
   ========================================== */
.upcoming-events-banner {
     max-width: 1400px;
     margin: 60px auto;
     padding: 0 40px;
}

.banner-container {
     background: linear-gradient(135deg, #ffffff69 0%, #f8f9faa8 100%);
     border-radius: var(--radius-lg);
     padding: 40px;
     box-shadow: var(--shadow-md);
}

.banner-header {
     text-align: center;
     margin-bottom: 40px;
}

.banner-header h2 {
     font-size: 36px;
     font-weight: 800;
     color: var(--dark);
     margin-bottom: 15px;
}

.banner-header p {
     font-size: 18px;
     color: var(--dark);
}

.events-slider {
     position: relative;
     overflow: hidden;
}

.slider-track {
     width: 100%;
     padding: 20px 0;
}

.featured-event-card {
     background: white;
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
     transition: var(--transition-base);
     cursor: pointer;
     max-width: 380px;
}

/* When featured-event-card is inside swiper */
.swiper-slide.featured-event-card {
     width: 380px !important;
     max-width: 380px;
     flex-shrink: 0;
}

/* Mobile: Full width card for easier viewing */
@media (max-width: 767px) {
     .swiper-slide.featured-event-card {
          width: 100% !important;
          min-width: 100% !important;
          max-width: 100% !important;
     }
}

.featured-event-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-lg);
}

.featured-event-image {
     position: relative;
     width: 100%;
     height: 260px;
     overflow: hidden;
}

.featured-event-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: var(--transition-slow);
}

.featured-event-card:hover .featured-event-image img {
     transform: scale(1.1);
}

.countdown-badge {
     position: absolute;
     top: 15px;
     right: 15px;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     padding: 12px 20px;
     border-radius: var(--radius-md);
     text-align: center;
     box-shadow: var(--shadow-md);
}

.countdown-badge.urgent {
     background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
     color: white;
     animation: pulse 2s infinite;
}

.countdown-badge.today {
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     color: white;
     animation: glow 2s infinite;
     font-weight: 700;
     padding: 15px 25px;
}

@keyframes glow {
     0%, 100% {
          box-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
     }

     50% {
          box-shadow: 0 0 20px rgba(79, 172, 254, 0.8);
     }
}

.countdown-badge.today .countdown-number {
     color: white;
}

@keyframes pulse {

     0%,
     100% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.05);
     }
}

.countdown-number {
     font-size: 32px;
     font-weight: 900;
     line-height: 1;
     color: var(--accent-color);
}

.countdown-badge.urgent .countdown-number {
     color: white;
}

.countdown-text {
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     color: var(--gray-dark);
     margin-top: 4px;
}

.countdown-badge.urgent .countdown-text {
     color: white;
}

.featured-event-content {
     padding: 25px;
}

.featured-badge {
     display: inline-block;
     padding: 6px 16px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     margin-bottom: 12px;
}

.featured-badge.hot {
     background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
     color: white;
}

.featured-badge.registration {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
}

.event-category {
     font-size: 13px;
     color: var(--accent-color);
     font-weight: 600;
     margin: 5px 0;
}

.featured-event-content h3 {
     font-size: 20px;
     font-weight: 800;
     margin-bottom: 15px;
     color: var(--dark);
     line-height: 1.3;
     min-height: 50px;
}

.featured-info {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 15px;
}

.featured-date,
.featured-location {
     font-size: 14px;
     color: var(--gray-dark);
     display: flex;
     align-items: center;
     gap: 8px;
}

.featured-stats {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 15px;
     border-top: 2px solid var(--bg-light);
     font-size: 14px;
}

.featured-price {
     font-size: 18px;
     font-weight: 800;
     color: var(--accent-color);
}

/* Slider Navigation */
.slider-dots {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 30px;
}

.swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: var(--gray-light);
     border-radius: 50%;
     cursor: pointer;
     transition: var(--transition-base);
}

.swiper-pagination-bullet-active {
     background: var(--accent-color);
     width: 30px;
     border-radius: 6px;
}

/* ==========================================
   9. CALENDAR SECTION
   ========================================== */
.calendar-section {
     max-width: 1400px;
     margin: 60px auto;
     padding: 0 40px;
}

.section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
}

.section-header h2 {
     font-size: 36px;
     font-weight: 800;
     color: #fff;
}

.view-toggle {
     display: flex;
     gap: 10px;
     background: white;
     padding: 5px;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-sm);
}

.view-btn {
     padding: 10px 20px;
     border-radius: var(--radius-md);
     font-size: 14px;
     font-weight: 600;
     color: var(--gray-dark);
     background: transparent;
     border: none;
     cursor: pointer;
     transition: var(--transition-base);
}

.view-btn.active {
     background: var(--gradient-primary);
     color: white;
}

.view-btn:hover:not(.active) {
     background: var(--bg-light);
}

.calendar {
     background: linear-gradient(135deg, #ffffff69 0%, #f8f9faa8 100%);
     border-radius: var(--radius-lg);
     padding: 30px;
     box-shadow: var(--shadow-md);
}

.calendar-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
     padding-bottom: 20px;
     border-bottom: 2px solid var(--bg-light);
     gap: 15px;
}

.calendar-months-container {
     flex: 1;
     overflow: hidden;
     position: relative;
}

.calendar-months-slider {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
     from {
          opacity: 0;
          transform: translateX(-10px);
     }

     to {
          opacity: 1;
          transform: translateX(0);
     }
}

.month-item {
     background: var(--bg-light);
     backdrop-filter: blur(10px);
     border-radius: 16px;
     padding: 5px 2px;
     margin: 10px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: 2px solid rgba(237, 77, 58, 0.1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     min-width: 0;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
     gap: 5px;
}

.month-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(237, 77, 58, 0.05) 0%, rgba(247, 147, 30, 0.05) 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 0;
}

.month-item:hover::before {
     opacity: 1;
}

.month-item:hover {
     transform: translateY(-4px) scale(1.02);
     box-shadow: 0 8px 24px rgba(237, 77, 58, 0.2);
     border-color: rgba(237, 77, 58, 0.4);
}

.month-item.active {
     background: var(--gradient-primary);
     color: white;
     border-color: var(--primary-color);
     box-shadow: 0 8px 28px rgba(237, 77, 58, 0.4);
     transform: translateY(-2px) scale(1.03);
}

.month-item.active::before {
     opacity: 0;
}

.month-item .month-name, .month-item .month-year {
     font-size: inherit;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: inherit;
     position: relative;
     z-index: 1;
     letter-spacing: 0.3px;
}

.month-item .month-name .month-short {
     display: none;
}

.month-item .month-name .month-full {
     display: inline;
}

.month-item.active .month-year {
     opacity: 0.95;
}

.month-item.active .month-name,
.month-item.active .month-year {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Keep old .calendar-month for legacy support */
.calendar-month {
     font-size: 24px;
     font-weight: 800;
     color: var(--dark);
     display: none;
     /* Hidden now, using new slider */
}

/* Update nav arrows positioning */
.calendar-nav {
     display: flex;
     gap: 10px;
}

.nav-arrow-left,
.nav-arrow-right {
     flex-shrink: 0;
}

.nav-arrow {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: var(--bg-light);
     border: 3px solid var(--primary-color);
     font-size: 28px;
     font-weight: 900;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-color);
     box-shadow: 0 6px 20px rgba(237, 77, 58, 0.2),
                 0 0 0 0 rgba(237, 77, 58, 0);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
}



.nav-arrow::after {
     content: attr(data-text);
     position: relative;
     z-index: 1;
     font-weight: 900;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     
}

.nav-arrow:hover {
     transform: scale(1.2) translateY(-2px);
     box-shadow: 0 10px 30px rgba(237, 77, 58, 0.4),
                 0 0 0 10px rgba(237, 77, 58, 0.1);
     border-color: var(--accent-color);
     
}

.nav-arrow:hover::after {
     color: white;
     text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.nav-arrow:active {
     transform: scale(1.05) translateY(0);
     box-shadow: 0 5px 15px rgba(237, 77, 58, 0.3);
}

.calendar-days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 10px;
     margin-bottom: 15px;
}

.day-name {
     text-align: center;
     font-weight: 700;
     color: var(--gray-dark);
     padding: 10px;
     font-size: 14px;
}

.calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 10px;
}

.calendar-day {
     aspect-ratio: 1;
     padding: 10px;
     border-radius: var(--radius-md);
     background: var(--bg-light);
     cursor: pointer;
     transition: var(--transition-base);
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     overflow: hidden;
}

.calendar-day:hover {
     background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
     transform: scale(1.05);
     box-shadow: var(--shadow-sm);
}

.calendar-day.today {
     background: linear-gradient(135deg, #f7921edf 0%, #f7921edf 100%) !important;
}

/* .calendar-day.today .day-number {
     color: var(--accent-color);
} */

.calendar-day.has-event {
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     border: 2px solid var(--accent-color);
}

.calendar-day-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     margin-bottom: 8px;
}

.day-number {
     font-size: 18px;
     font-weight: 700;
     color: var(--dark);
}

.event-count-badge {
     background: var(--accent-color);
     color: white;
     font-size: 11px;
     font-weight: 700;
     padding: 3px 8px;
     border-radius: 12px;
     min-width: 20px;
     text-align: center;
}

/* Hide event dots by default (show only on mobile) */
.event-dots-container {
     display: none;
}



.preview-image {
     width: 100%;
     height: 60px;
     overflow: hidden;
}

.preview-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.preview-content {
     padding: 6px 8px;
}

.preview-title {
     font-size: 11px;
     font-weight: 700;
     color: var(--dark);
     margin: 0 0 4px 0;
     line-height: 1.2;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

.preview-time {
     font-size: 10px;
     color: var(--gray-dark);
     display: flex;
     align-items: center;
     gap: 3px;
}

/* Calendar Events Carousel */
.calendar-events-carousel {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
}

.carousel-track {
     width: 100%;
     height: 100%;
     position: relative;
}

.carousel-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 0.5s ease;
     pointer-events: none;
}

.carousel-slide.active {
     opacity: 1;
     pointer-events: auto;
}

.calendar-event-preview {
     width: 100%;
}

/* Category Color Coding */
.calendar-event-preview[data-category="sports"],
.carousel-slide[data-category="sports"] .preview-content {
     border-left: 3px solid #667eea;
}

.calendar-event-preview[data-category="concerts"],
.carousel-slide[data-category="concerts"] .preview-content {
     border-left: 3px solid #f093fb;
}

.calendar-event-preview[data-category="health"],
.carousel-slide[data-category="health"] .preview-content {
     border-left: 3px solid #4facfe;
}

.calendar-event-preview[data-category="lifestyle"],
.carousel-slide[data-category="lifestyle"] .preview-content {
     border-left: 3px solid #43e97b;
}

.calendar-event-preview[data-category="arts"],
.carousel-slide[data-category="arts"] .preview-content {
     border-left: 3px solid #fa709a;
}

.calendar-event-preview[data-category="education"],
.carousel-slide[data-category="education"] .preview-content {
     border-left: 3px solid #30cfd0;

}

.calendar-event-preview[data-category="other"],
.carousel-slide[data-category="other"] .preview-content {
     border-left: 3px solid #ff6a00;
     width: 100%;
     background: white;
     border-radius: 0 0 6px 6px;
     overflow: hidden;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

/* ==========================================
   10. FEATURED EVENTS SECTION
   ========================================== */
.featured-section {
     max-width: 1400px;
     margin: 60px auto;
     padding: 0 40px;
}

.featured-section h2 {
     font-size: 36px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 40px;
     text-align: center;
}

.events-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 30px;
     margin-bottom: 40px;
}

.events-grid.list-view {
     grid-template-columns: 1fr;
}

.event-card {
     background: white;
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
     transition: var(--transition-base);
     cursor: pointer;
}

.event-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-lg);
}

.event-image {
     position: relative;
     width: 100%;
     height: 200px;
     overflow: hidden;
}

.event-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: var(--transition-slow);
     aspect-ratio: 16/9;
}

.event-card:hover .event-image img {
     transform: scale(1.1);
}

.event-badge {
     position: absolute;
     top: 15px;
     left: 15px;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow-sm);
}

.event-badge.hot {
     background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
     color: white;
}

.event-badge.new {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
}

.event-category-pill {
     position: absolute;
     top: 15px;
     right: 15px;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     padding: 6px 14px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--accent-color);
     box-shadow: var(--shadow-sm);
}

.event-info {
     padding: 25px;
}

.event-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
}

.date-badge {
     background: var(--gradient-primary);
     padding: 10px 15px;
     border-radius: var(--radius-md);
     text-align: center;
     color: white;
     min-width: 60px;
}

.date-day {
     font-size: 24px;
     font-weight: 900;
     line-height: 1;
}

.date-month {
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     margin-top: 4px;
}

.event-time {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     color: var(--gray-dark);
     font-weight: 600;
     padding: 6px 10px;
     background: rgba(0, 0, 0, 0.04);
     border-radius: 8px;
     flex: 1;
}

.event-time .time-icon {
     font-size: 16px;
     line-height: 1;
}

.event-time .time-text {
     font-size: 13px;
     font-weight: 600;
     color: #555;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-bottom: 15px;
}

.event-title {
     font-size: 20px;
     font-weight: 800;
     color: var(--dark);
     margin-bottom: 12px;
     line-height: 1.3;
}

.event-location {
     font-size: 14px;
     color: var(--gray-dark);
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     gap: 8px;
}

.event-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 15px;
     border-top: 2px solid var(--bg-light);
}

.event-price {
     font-size: 18px;
     font-weight: 800;
     color: var(--accent-color);
}

.btn-load {
     background: var(--gradient-primary);
     color: white;
     padding: 15px 50px;
     border-radius: var(--radius-xl);
     font-size: 16px;
     font-weight: 700;
     border: none;
     cursor: pointer;
     transition: var(--transition-base);
     box-shadow: var(--shadow-md);
}

.btn-load:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-lg);
}

/* ==========================================
   11. SOCIAL PROOF SECTION
   ========================================== */


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

.stat-item {
     text-align: center;
     padding: 40px;
     background: white;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-sm);
     transition: var(--transition-base);
}

.stat-item:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-lg);
}

.stat-item h3 {
     font-size: 48px;
     font-weight: 900;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 10px;
}

.stat-item p {
     font-size: 16px;
     color: var(--gray-dark);
}

.community-cta {
     background: var(--gradient-secondary);
     color: white;
     padding: 60px;
     text-align: center;
     box-shadow: var(--shadow-lg);
}

.community-cta h3 {
     font-size: 36px;
     font-weight: 800;
     margin-bottom: 15px;
}

.community-cta p {
     font-size: 18px;
     margin-bottom: 30px;
     opacity: 0.95;
}

.btn-join {
     background: white;
     color: var(--secondary-color);
     padding: 18px 50px;
     border-radius: var(--radius-xl);
     font-size: 18px;
     font-weight: 700;
     border: none;
     cursor: pointer;
     transition: var(--transition-base);
     box-shadow: var(--shadow-md);
}

.btn-join:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-lg);
}

/* ==========================================
   12. ORGANIZER BANNER
   ========================================== */
.organizer-banner {
     padding: 60px 40px;
     background: var(--gradient-primary);
     text-align: center;
     color: white;
     box-shadow: var(--shadow-lg);
}

.organizer-banner h3 {
     font-size: 36px;
     font-weight: 800;
     margin-bottom: 15px;
}

.organizer-banner p {
     font-size: 18px;
     margin-bottom: 30px;
     opacity: 0.95;
}

.btn-host {
     background: white;
     color: var(--primary-color);
     padding: 18px 50px;
     border-radius: var(--radius-xl);
     font-size: 18px;
     font-weight: 700;
     border: none;
     cursor: pointer;
     transition: var(--transition-base);
     box-shadow: var(--shadow-md);
}

.btn-host:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-lg);
}

/* ==========================================
   13. FOOTER
   ========================================== */
.footer {
     background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
     color: white;
     padding: 60px 40px 30px;

}

.footer-grid {
     max-width: 1400px;
     margin: 0 auto 40px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
}

.footer-section h4 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 20px;
     color: var(--accent-color);
}

.footer-section ul {
     list-style: none;
}

.footer-section li {
     margin-bottom: 12px;
}

.footer-section a {
     color: rgba(255, 255, 255, 0.7);
     transition: var(--transition-base);
     font-size: 14px;
}

.footer-section a:hover {
     color: white;
     padding-left: 5px;
}

.social-links {
     display: flex;
     gap: 15px;
     margin-top: 20px;
}

.social-icon {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     cursor: pointer;
     transition: var(--transition-base);
}

.social-icon:hover {
     background: var(--accent-color);
     transform: translateY(-5px);
}

.newsletter {
     display: flex;
     gap: 10px;
     margin-top: 15px;
}

.newsletter input {
     flex: 1;
     padding: 12px;
     border-radius: var(--radius-md);
     border: none;
     font-size: 14px;
}

.newsletter button {
     background: var(--gradient-primary);
     color: white;
     padding: 12px 25px;
     border-radius: var(--radius-md);
     border: none;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition-base);
}

.newsletter button:hover {
     transform: scale(1.05);
}

.footer-bottom {
     text-align: center;
     padding-top: 30px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.5);
     font-size: 14px;
     max-width: 1400px;
     margin: 0 auto;
}

/* ==========================================
   14. EVENT MODAL (Base Modal Styles)
   ========================================== */

/* Prevent body scroll when modal is open */
body.modal-open {
     overflow: hidden;
     position: fixed;
     width: 100%;
     height: 100%;
}

.modal {
     display: none;
     position: fixed;
     z-index: 10000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.75);
     backdrop-filter: blur(5px);
     overflow: hidden;
     animation: fadeIn 0.3s ease;
     align-items: center;
     justify-content: center;
     padding: 20px;
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

.modal-content {
     background: white;
     margin: 0 auto;
     border-radius: var(--radius-lg);
     max-width: 900px;
     overflow-y: auto;
     position: relative;
     animation: slideDown 0.3s ease;
     box-shadow: var(--shadow-xl);
}

@keyframes slideDown {
     from {
          transform: translateY(-50px);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

.modal-header {
     padding: 30px;
     border-bottom: 2px solid var(--bg-light);
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: linear-gradient(135deg, var(--bg-light) 0%, white 100%);
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h3 {
     font-size: 28px;
     font-weight: 800;
     color: var(--dark);
}

.close {
     font-size: 32px;
     font-weight: 700;
     color: var(--gray);
     cursor: pointer;
     transition: var(--transition-base);
     line-height: 1;
     width: 40px;
     height: 40px;
     display: flex;
     justify-content: center;
     border-radius: 50%;
}

.close:hover {
     color: var(--danger-color);
     background: var(--bg-light);
     transform: rotate(90deg);
}

.modal-body {
     padding: 30px;
     max-height: calc(100vh - 200px);
     overflow-y: auto;
}

/* Modal Event Cards */
.modal-event-card {
     display: flex;
     gap: 20px;
     padding: 20px;
     background: var(--bg-light);
     border-radius: var(--radius-md);
     margin-bottom: 15px;
     box-shadow: var(--shadow-sm);
     transition: var(--transition-base);
     cursor: pointer;
}

.modal-event-card:hover {
     transform: translateX(5px);
     box-shadow: var(--shadow-md);
     background: var(--bg-light);
}

.modal-date-badge {
     background: var(--gradient-primary);
     padding: 15px;
     border-radius: var(--radius-md);
     text-align: center;
     color: white;
     min-width: 70px;
}

.modal-date-day {
     font-size: 28px;
     font-weight: 900;
     line-height: 1;
}

.modal-date-month {
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     margin-top: 5px;
}

.modal-event-info {
     flex: 1;
}

.modal-event-info h4 {
     font-size: 20px;
     font-weight: 800;
     color: var(--dark);
     margin-bottom: 10px;
}

.modal-event-time,
.modal-event-location {
     font-size: 14px;
     color: var(--gray-dark);
     margin-bottom: 5px;
     display: flex;
     align-items: center;
     gap: 8px;
}

.modal-event-badge {
     align-self: flex-start;
     background: var(--accent-color);
     color: white;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 14px;
     font-weight: 700;
     white-space: nowrap;
}

.no-events {
     text-align: center;
     padding: 60px 20px;
     color: var(--gray);
}

.no-events-icon {
     font-size: 80px;
     margin-bottom: 20px;
     opacity: 0.3;
}

.no-events h4 {
     font-size: 24px;
     font-weight: 700;
     color: var(--gray-dark);
     margin-bottom: 10px;
}

.no-events p {
     font-size: 16px;
     color: var(--gray);
}

/* ==========================================
   15. USER EVENT MODAL (Enhanced Styles)
   ========================================== */
.modal-users-ev-style {
     max-width: 1100px;
     padding: 0;
     overflow: hidden;

}

.users-ev-card {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 0;
     background: white;
     position: relative;
}

.users-ev-card .close {
     position: absolute;
     top: 20px;
     right: 20px;
     z-index: 100;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow-md);
}

.modal-content .swiper-slide {
     margin: auto 0;
     display: flex;
     align-items: center;
     justify-items: center;
}

.users-ev-poster {
     position: relative;
     background: var(--bg-light);
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
}

.users-ev-swiper {
     width: 100%;
     height: 100%;
     min-height: 600px;
}

.users-ev-info {
     padding: 40px;
     background: var(--white);
     overflow-y: auto;
     max-height: calc(100vh - 60px);
}

.users-ev-title {
     font-size: 32px;
     font-weight: 900;
     color: var(--dark);
     margin-bottom: 30px;
     line-height: 1.2;
}

.users-ev-detail-item {
     display: flex;
     gap: 15px;
     margin-bottom: 25px;
     padding: 20px;
     background: var(--bg-light);
     border-radius: var(--radius-md);
     transition: var(--transition-base);
}

.users-ev-info h2 {
     color: var(--dark)
}


.users-ev-detail-item:hover {
     transform: translateX(5px);
     box-shadow: var(--shadow-sm);
}

.users-ev-icon {
     width: 50px;
     height: 50px;
     background: var(--gradient-primary);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     flex-shrink: 0;
}

.users-ev-detail-item strong {
     font-size: 16px;
     font-weight: 700;
     color: var(--dark);
     display: block;
     margin-bottom: 8px;
}

.users-ev-detail-item p {
     font-size: 14px;
     color: var(--gray-dark);
     line-height: 1.6;
     margin: 0;
}

/* Day Tabs - Enhanced for better visibility */
.user-event-tabs-inline {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-top: 15px;
     padding: 5px 0;
}

.user-event-tab-inline {
     background: var(--white);
     border: 3px solid #e0e0e0;
     padding: 14px 22px;
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-align: center;
     min-width: 85px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     position: relative;
     overflow: hidden;
}

.user-event-tab-inline::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(255, 140, 0, 0.05));
     opacity: 0;
     transition: opacity 0.3s ease;
}

.user-event-tab-inline:hover {
     border-color: #ff6b35;
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25);
}

.user-event-tab-inline:hover::before {
     opacity: 1;
}

.user-event-tab-inline.active {
     background: linear-gradient(135deg, #ff6b35 0%, #ff8c00 100%);
     border-color: #ff6b35;
     color: white;
     box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4);
     transform: translateY(-4px) scale(1.05);
}

.user-event-tab-inline.active::after {
     content: '✓';
     position: absolute;
     top: 3px;
     right: 5px;
     font-size: 10px;
     font-weight: bold;
     opacity: 0.8;
}

.user-event-tab-day {
     display: block;
     font-size: 28px;
     font-weight: 900;
     line-height: 1;
     position: relative;
     z-index: 1;
}

.user-event-tab-label {
     display: block;
     font-size: 13px;
     font-weight: 700;
     text-transform: uppercase;
     margin-top: 6px;
     opacity: 0.95;
     letter-spacing: 0.5px;
     position: relative;
     z-index: 1;
}

/* Tickets Section */
.users-ev-tickets-section {
     flex-direction: column;
     padding: 25px;
}

.user-event-activities-inline {
     display: flex;
     flex-direction: column;
     gap: 15px;
}

.user-event-activity-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     background: var(--bg-light);
     border: 2px solid var(--gray-light);
     border-radius: var(--radius-md);
     transition: var(--transition-base);
}

.user-event-activity-item:hover {
     border-color: var(--accent-color);
     box-shadow: var(--shadow-sm);
}

.user-event-activity-info {
     flex: 1;
}

.user-event-activity-name {
     font-size: 16px;
     font-weight: 700;
     color: var(--dark);
     margin-bottom: 8px;
}

.user-event-activity-time {
     font-size: 14px;
     color: var(--gray-dark);
     margin-bottom: 5px;
}

.user-event-activity-seats {
     font-size: 13px;
     color: var(--success-color);
     font-weight: 600;
}

.selected-ticket-qty {
     display: flex;
     align-items: center;
     gap: 15px;
     background: var(--bg-light);
     padding: 8px 15px;
     border-radius: var(--radius-lg);
}

.qty-btn-inline {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: white;
     border: 2px solid var(--gray-light);
     font-size: 20px;
     font-weight: 700;
     color: var(--accent-color);
     cursor: pointer;
     transition: var(--transition-base);
     display: flex;
     align-items: center;
     justify-content: center;
}

.qty-btn-inline:hover {
     background: var(--accent-color);
     color: white;
     border-color: var(--accent-color);
     transform: scale(1.1);
}

.qty-value-inline {
     font-size: 18px;
     font-weight: 700;
     color: var(--dark);
     min-width: 30px;
     text-align: center;
}

/* Summary Section */
.users-ev-summary {
     margin-top: 30px;
     padding: 25px;
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     border-radius: var(--radius-md);
     border-left: 5px solid var(--accent-color);
}

.users-ev-summary-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     padding-bottom: 15px;
     border-bottom: 2px solid rgba(255, 107, 53, 0.2);
}

.users-ev-summary-header h4 {
     font-size: 20px;
     font-weight: 800;
     color: #2b2b2b;
}

.btn-clear-inline {
     background: rgba(255, 255, 255, 0.8);
     color: var(--accent-color);
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 13px;
     font-weight: 600;
     border: 2px solid transparent;
     cursor: pointer;
     transition: var(--transition-base);
}

.btn-clear-inline:hover {
     background: white;
     border-color: var(--accent-color);
     transform: scale(1.05);
}

.users-ev-summary-item {
     display: flex;
     justify-content: space-between;
     padding: 12px 0;
     font-size: 14px;
     color: #2b2b2b;
     border-bottom: 1px solid rgba(255, 107, 53, 0.1);
}

.users-ev-summary-item:last-child {
     border-bottom: none;
}

/* Date Header in Summary */
.users-ev-summary-date-header {
     background: linear-gradient(135deg, rgba(255, 107, 53, 0.12), rgba(255, 140, 0, 0.08));
     padding: 10px 14px;
     border-radius: 8px;
     margin: 12px 0 8px 0;
     border-left: 4px solid #ff6b35;
     box-shadow: 0 2px 6px rgba(255, 107, 53, 0.1);
}

.users-ev-summary-date-header strong {
     font-size: 14px;
     font-weight: 700;
     color: #ff6b35;
     display: flex;
     align-items: center;
     gap: 6px;
}

.users-ev-summary-total {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 20px;
     padding-top: 20px;
     border-top: 3px solid var(--accent-color);
     font-size: 18px;
     font-weight: 800;
     color: var(--accent-color);
}

.users-ev-total-price {
     font-size: 28px;
     color: var(--accent-color);
}

/* Confirm Button */
.btn-join-event {
     width: 100%;
     background: var(--gradient-primary);
     color: white;
     padding: 18px 40px;
     border-radius: var(--radius-lg);
     font-size: 18px;
     font-weight: 700;
     border: none;
     cursor: pointer;
     transition: var(--transition-base);
     margin-top: 30px;
     box-shadow: var(--shadow-md);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
}

.btn-join-event:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-lg);
}

.btn-join-event:active {
     transform: translateY(0);
}

/* External Booking Styles */
.primary-external-btn {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {

     0%,
     100% {
          box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
     }

     50% {
          box-shadow: 0 0 40px rgba(102, 126, 234, 0.8);
     }
}

.auto-hidden-confirm {
     display: none !important;
}

/* ==========================================
16. SWIPER CUSTOMIZATION
========================================== */
.swiper-button-prev,
.swiper-button-next {
     width: 56px;
     height: 56px;
     background: rgba(255, 255, 255, 0);
     border-radius: 16px;
     color: #ffffff !important;
     border: none;
     position: relative;
     overflow: hidden;
}

.swiper-button-prev::before,
.swiper-button-next::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     opacity: 0;
     transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
     border-radius: 16px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
     background: rgba(255, 255, 255, 0);
     transform: translateY(-3px);
     color: var(--accent-color) !important;
}

.swiper-button-prev:hover::before,
.swiper-button-next:hover::before {
     opacity: 1;
}

.swiper-button-prev:active,
.swiper-button-next:active {
     transform: translateY(-1px);
     transition: all 0.15s ease;
}

.swiper-button-prev::after,
.swiper-button-next::after {
     font-size: 20px;
     font-weight: 700;
     position: relative;
     z-index: 1;
     text-shadow: none;
     display: flex;
     align-items: center;
     justify-content: center;
}

/* Subtle hover effect for arrow */
.swiper-button-prev:hover::after {
     animation: slideLeft 0.6s ease infinite;
}

.swiper-button-next:hover::after {
     animation: slideRight 0.6s ease infinite;
}

@keyframes slideLeft {
     0%, 100% { transform: translateX(0); }
     50% { transform: translateX(-3px); }
}

@keyframes slideRight {
     0%, 100% { transform: translateX(0); }
     50% { transform: translateX(3px); }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
     .swiper-button-prev,
     .swiper-button-next {
          width: 45px;
          height: 45px;
     }

     .swiper-button-prev::after,
     .swiper-button-next::after {
          font-size: 18px;
     }

     .swiper-button-prev:hover,
     .swiper-button-next:hover {
          transform: scale(1.1);
     }
}

@media (max-width: 480px) {
     .swiper-button-prev,
     .swiper-button-next {
          width: 40px;
          height: 40px;
     }

     .swiper-button-prev::after,
     .swiper-button-next::after {
          font-size: 16px;
     }
}

/* ==========================================
17. RESPONSIVE DESIGN
========================================== */
@media (max-width: 1200px) {
     .search-grid {
          grid-template-columns: 1fr 1fr;
     }

     .btn-search {
          grid-column: span 2;
     }

     .events-grid {
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     }
}

@media (max-width: 992px) {
     .header {
          padding: 15px 20px;
     }

     .btn-login,
     .btn-signup {
          padding: 8px 16px;
          font-size: 13px;
     }

     .nav-menu {
          gap: 10px;
     }

     .btn {
          padding: 10px 20px;
          font-size: 13px;
     }

     .hero h1 {
          font-size: 42px;
     }

     .hero p {
          font-size: 18px;
     }

     .hero-event-title {
          font-size: 36px;
     }

     .categories-grid {
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     }

     /* Keep modal same as PC for tablet landscape */

     .location-dropdown-content {
          grid-template-columns: 1fr;
     }
}

@media (max-width: 900px) {
     .month-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
     }
}

@media (max-width: 768px) {
     .header {
          flex-direction: column;
          gap: 15px;
     }


     .nav-menu {
          flex-wrap: nowrap;
          justify-content: center;
     }

     .hero-event-info {
          gap: 5px;
          margin: 0;
     }

     .hero-event-title {
          margin: 0;
     }

     .search-grid {
          grid-template-columns: 1fr;
     }

     .btn-search {
          grid-column: 1;
     }

     .hero {
          padding: 60px 20px 80px;
     }

     .hero h1 {
          font-size: 32px;
     }

     .hero p {
          font-size: 16px;
     }

     .hero-images-section {
          height: 50vh;
          min-height: 400px;
          margin: 0;
     }

     /* Mobile: Full screen hero without blur edges */
     .hero-slide-bg-blur {
          display: none;
     }

     .hero-slide-card {
          width: 100%;
          height: 100%;
          border-radius: 0;
     }

     .hero-slide-content {
          padding: 30px 20px 25px;
     }

     .hero-pagination {
          margin-top: 12px !important;
     }

     .hero-pagination .swiper-pagination-bullet {
          width: 10px;
          height: 10px;
     }

     .hero-pagination .swiper-pagination-bullet-active {
          width: 30px;
     }

     .hero-event-category {
          font-size: 10px;
          padding: 5px 12px;
     }

     .hero-event-title {
          font-size: 24px;
          margin-bottom: 10px;
     }

     .hero-event-info {
          font-size: 12px;
          gap: 10px;
          margin-bottom: 12px;
     }

     .hero-event-description {
          font-size: 13px;
          padding: 8px 12px;
          margin-bottom: 15px;
     }

     .hero-cta-buttons {
          flex-direction: column;
     }

     .hero-btn {
          width: 100%;
          justify-content: center;
          padding: 12px 24px;
          font-size: 13px;
     }



     .banner-header h2,
     .section-header h2,
     .featured-section h2 {
          font-size: 28px;
     }

     .categories-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 15px;
     }

     .category-icon {
          width: 60px;
          height: 60px;
          font-size: 28px;
     }

     .events-grid {
          grid-template-columns: 1fr;
     }

     .calendar-grid {
          gap: 5px;
     }

     .calendar-day {
          padding: 5px;
     }

     .day-number {
          font-size: 14px;
     }

     .preview-image {
          height: 40px;
     }

     .preview-title {
          font-size: 9px;
     }

     .preview-time {
          font-size: 8px;
     }

     .footer-grid {
          grid-template-columns: 1fr;
          gap: 30px;
     }

     .modal-content {
          margin: 20px;
          max-width: calc(100% - 40px);
     }

     .modal-body {
          padding: 20px;
     }

     /* User Event Modal - Tablet/Mobile */
     .modal-users-ev-style {
          max-height: 95%;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
     }

     .users-ev-card {
          grid-template-columns: 1fr;
          display: block;
     }

     .users-ev-poster {
          height: auto;
          position: relative;
          padding: 0;
          background: #000;
     }

     .users-ev-swiper {
          height: auto !important;
          min-height: auto !important;
          max-height: none !important;
     }

     .users-ev-swiper .swiper-slide {
          height: auto !important;
     }

     .users-ev-swiper .swiper-slide img {
          width: 100% !important;
          height: auto !important;
          object-fit: contain !important;
          display: block;
     }

     .users-ev-info {
          padding: 25px;
          overflow-y: visible;
          max-height: none;
     }

     .users-ev-title {
          font-size: 24px;
     }

     .modal-event-card {
          flex-direction: column;
     }

     .stats-grid {
          grid-template-columns: 1fr;
     }

     .community-cta,
     .organizer-banner {
          padding: 40px 20px;
     }

     .community-cta h3,
     .organizer-banner h3 {
          font-size: 28px;
     }

     /* Full screen dropdown for mobile */
     .category-dropdown,
     .location-dropdown {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100vw !important;
          min-width: 0 !important;
          height: 100vh !important;
          max-height: 100vh !important;
          border-radius: 0 !important;
          z-index: 9999 !important;
          animation: slideUpFade 0.3s ease-out;
          padding-top: 60px !important;
          box-sizing: border-box !important;
     }

     /* Close button for mobile dropdown */
     .dropdown-close-btn {
          display: block !important;
          position: fixed;
          top: 10px;
          right: 15px;
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.95);
          border: none;
          border-radius: 50%;
          font-size: 24px;
          color: #ff6b35;
          cursor: pointer;
          z-index: 10002;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
          transition: all 0.2s ease;
     }

     .dropdown-close-btn:active {
          transform: scale(0.95);
          background: rgba(255, 255, 255, 1);
     }

     /* Add header bar for mobile dropdown */
     .category-dropdown::before,
     .location-dropdown::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 60px;
          background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
          z-index: 10000;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }

     .category-dropdown::after {
          content: '📂 เลือกหมวดหมู่';
          position: fixed;
          top: 0;
          left: 0;
          right: 50px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: white;
          z-index: 10001;
     }

     .location-dropdown::after {
          content: '📍 เลือกสถานที่';
          position: fixed;
          top: 0;
          left: 0;
          right: 50px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: white;
          z-index: 10001;
     }

     /* Reset overflow for mobile - content area handles scrolling */
     .category-dropdown,
     .location-dropdown {
          overflow-y: auto !important;
          overflow-x: hidden !important;
     }

     .category-dropdown-content,
     .location-dropdown-content {
          padding: 20px;
          padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
          max-height: none;
          height: auto;
          overflow: visible;
     }

     .location-dropdown-content {
          grid-template-columns: 1fr;
          gap: 20px;
     }

     /* Category groups for mobile */
     .category-group {
          margin-bottom: 20px !important;
          padding: 15px !important;
          border-bottom: 2px solid #f0f0f0 !important;
     }

     /* Better touch targets for mobile */
     .category-group li,
     .location-item {
          padding: 16px 15px !important;
          font-size: 15px !important;
          min-height: 48px;
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-bottom: 8px !important;
     }

     /* Ensure location items have proper spacing */
     .location-list .location-item {
          margin-bottom: 8px !important;
     }

     .location-list .location-item:last-child {
          margin-bottom: 0 !important;
     }

     .category-group h4,
     .location-column h4 {
          font-size: 14px !important;
          padding: 12px 15px !important;
          position: static !important;
          margin: 0 0 10px 0;
     }

     .location-column {
          padding: 15px !important;
          margin-bottom: 15px !important;
     }

     .location-column:last-child {
          margin-bottom: 50px !important;
     }

     /* Better spacing for location list on mobile */
     .location-list {
          gap: 8px !important;
     }

     .location-list .location-item:last-child {
          margin-bottom: 20px !important;
     }
}

@media (max-width: 480px) {

     /* Container & Body */
     body {
          overflow-x: hidden;
          max-width: 100vw;
     }

     /* Hero Section */
     .hero {
          padding: 40px 15px 60px;
     }

     .hero h1 {
          font-size: 24px;
          padding: 0 10px;
     }

     .hero p {
          font-size: 14px;
          padding: 0 10px;
     }

     /* Hero Images Section - Full screen for small mobile */
     .hero-images-section {
          margin: 0;
          height: 45vh;
          min-height: 350px;
     }

     .hero-slide-bg-blur {
          display: none;
     }

     .hero-slide-card {
          width: 100%;
          height: 100%;
          border-radius: 0;
     }

     .hero-slide-content {
          padding: 25px 15px 20px;
     }

     .hero-pagination {
          margin-top: 10px !important;
     }

     .hero-pagination .swiper-pagination-bullet {
          width: 8px;
          height: 8px;
     }

     .hero-pagination .swiper-pagination-bullet-active {
          width: 24px;
     }

     .hero-event-category {
          font-size: 9px;
          padding: 4px 10px;
          margin-bottom: 8px;
     }

     .hero-event-title {
          font-size: 20px;
          margin-bottom: 8px;
     }

     .hero-event-info {
          flex-direction: column;
          gap: 6px;
          font-size: 11px;
          margin-bottom: 10px;
     }

     .hero-event-description {
          font-size: 12px;
          padding: 6px 10px;
          margin-bottom: 12px;
     }

     .hero-btn {
          padding: 11px 20px;
          font-size: 13px;
          width: 100%;
     }

     /* Search Container */
     .search-container {
          padding: 0 10px;
     }

     .search-grid {
          padding: 20px 15px;
          gap: 12px;
     }

     .search-field input,
     .category-selected {
          padding: 12px;
          font-size: 14px;
     }

     .btn-search {
          padding: 12px 25px;
          font-size: 14px;
     }

     /* Ads Banner */

     .ads-banner-swiper .swiper-slide {
          height: 200px;
     }

     .ads-banner-content {
          padding: 20px 15px;
     }

     .ads-banner-title {
          font-size: 20px;
     }

     .ads-banner-subtitle {
          font-size: 14px;
     }

     .ads-cta-btn {
          padding: 10px 20px;
          font-size: 12px;
          gap: 6px;
     }

     /* Categories */
     .categories-bar,
     .upcoming-events-banner,
     .calendar-section,
     .featured-section,
     .organizer-banner {
          margin-left: 0;
          margin-right: 0;
          max-width: 100%;
     }

     .categories-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
     }

     .category-item {
          padding: 20px;
     }

     .category-icon {
          width: 60px;
          height: 60px;
          font-size: 28px;
     }


     /* Banner Container */
     .banner-container {
          padding: 25px 15px;
          border-radius: 12px;
     }

     .banner-header h2 {
          font-size: 22px;
     }

     .banner-header p {
          font-size: 14px;
     }

     /* Featured Event Cards */
     .featured-event-card {
          max-width: 100%;
          margin: 0 auto;
     }

     .featured-event-content {
          padding: 20px 15px;
     }

     .featured-event-content h3 {
          font-size: 16px;
          min-height: auto;
     }

     .featured-info {
          font-size: 13px;
     }

     /* Events Grid */
     .events-grid {
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 0 5px;
     }



     .event-info {
          padding: 20px 15px;
     }

     .event-title {
          font-size: 16px;
          min-height: auto;
     }

     /* Calendar */
     .calendar {
          padding: 5px;
          border-radius: 12px;
     }

     .calendar-header {
          gap: 3px;
     }

     .nav-arrow {
          width: 42px;
          height: 42px;
          font-size: 24px;
          border-width: 2.5px;
     }

     .nav-arrow:hover {
          transform: scale(1.15);
     }

     .calendar-months-slider {
          grid-template-columns: repeat(4, 1fr);
     }

     .month-item {
          padding: 2px;
          border-radius: 12px;
          gap: 0;
     }

     .month-item .month-name {
          font-size: 15px;
     }

     .month-item .month-name .month-full {
          display: none;
     }

     .month-item .month-name .month-short {
          display: inline;
     }

     .month-item .month-year {
          font-size: 11px;
     }

     .nav-arrow {
          width: 38px;
          height: 38px;
          font-size: 17px;
     }

     .month-item:hover {
          transform: translateY(-2px) scale(1.01);
     }

     .month-item.active {
          transform: translateY(-1px) scale(1.02);
     }

     .calendar-month {
          font-size: 20px;
     }

     .calendar-grid {
          gap: 5px;
     }

     .calendar-day {
          font-size: 12px;
          padding: 0;
     }

     .day-number {
          font-size: 14px;
     }

     .preview-image {
          height: 40px;
     }

     .preview-title {
          font-size: 9px;
     }

     .preview-time {
          font-size: 8px;
     }

     /* Modal */
     .modal-content {
          margin: 10px;
          max-width: calc(100vw - 20px);
          border-radius: 12px;
     }

     .modal-header {
          padding: 20px 15px;
     }

     .modal-header h3 {
          font-size: 20px;
     }

     .modal-body {
          padding: 15px;
     }

     .modal-event-card {
          flex-direction: column;
          padding: 15px;
     }

     /* User Event Modal */
     .modal-users-ev-style {
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
     }

     .users-ev-card {
          grid-template-columns: 1fr;
          display: block;
     }

     .users-ev-poster {
          height: auto;
          position: relative;
          padding: 0;
          background: #000;
     }

     .users-ev-swiper {
          height: auto !important;
          min-height: auto !important;
          max-height: none !important;
     }

     .users-ev-swiper .swiper-slide {
          height: auto !important;
     }

     .users-ev-swiper .swiper-slide img {
          width: 100% !important;
          height: auto !important;
          object-fit: contain !important;
          display: block;
     }

     .users-ev-info {
          padding: 20px 15px;
          overflow-y: visible;
          max-height: none;
     }

     .users-ev-title {
          font-size: 22px;
     }

     .users-ev-detail-item {
          padding: 15px;
          flex-direction: column;
          gap: 12px;
     }

     .users-ev-icon {
          width: 45px;
          height: 45px;
          font-size: 20px;
     }

     /* Tabs */
     .user-event-tabs-inline {
          justify-content: flex-start;
          gap: 10px;
          flex-wrap: wrap;
     }

     .user-event-tab-inline {
          min-width: 70px;
          padding: 12px 16px;
          flex: 0 0 auto;
          border-width: 2.5px;
     }

     .user-event-tab-day {
          font-size: 22px;
     }

     .user-event-tab-label {
          font-size: 11px;
     }

     /* Date headers in summary - mobile */
     .users-ev-summary-date-header {
          padding: 8px 12px;
          margin: 10px 0 6px 0;
     }

     .users-ev-summary-date-header strong {
          font-size: 13px;
     }

     /* Ticket Items */
     .user-event-activity-item {
          flex-direction: column;
          gap: 15px;
          padding: 15px;
          align-items: flex-start;
     }

     .selected-ticket-qty {
          width: 100%;
          justify-content: center;
     }

     /* Summary */
     .users-ev-summary {
          padding: 20px 15px;
     }

     .users-ev-summary-header {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
     }

     .btn-clear-inline {
          width: 100%;
     }

     .btn-join-event {
          padding: 15px 30px;
          font-size: 16px;
     }

     /* Footer */
     .footer {
          padding: 40px 15px 20px;
     }

     .footer-grid {
          grid-template-columns: 1fr;
          gap: 25px;
     }

     .newsletter {
          flex-direction: column;
     }

     /* Stats & Community */
     .stats-grid {
          grid-template-columns: 1fr;
          gap: 20px;
     }

     .stat-item {
          padding: 30px 20px;
     }

     .community-cta,
     .organizer-banner {
          padding: 30px 15px;
     }

     .community-cta h3,
     .organizer-banner h3 {
          font-size: 24px;
     }

     .community-cta p,
     .organizer-banner p {
          font-size: 14px;
     }

     /* Buttons */
     .btn-join,
     .btn-host {
          padding: 15px 35px;
          font-size: 16px;
          width: 100%;
          max-width: 300px;
     }

     /* Location Dropdown */
     .location-dropdown-content {
          padding: 15px;
     }

     .location-column h4 {
          font-size: 14px;
     }

     .location-item {
          padding: 8px 12px;
          font-size: 13px;
     }

     /* Category Dropdown */
     .category-dropdown-content {
          padding: 15px;
     }

     .category-group h4 {
          font-size: 14px;
     }

     .category-group li {
          padding: 8px 12px;
          font-size: 13px;
     }

     .category-selected {
          padding: 12px 15px;
     }

     .category-selected label {
          font-size: 14px;
     }

     .category-dropdown-content {
          padding: 12px;
          max-height: 350px;
     }

     .location-dropdown-content {
          padding: 12px;
          max-height: 350px;
     }

     .category-group {
          margin-bottom: 20px;
          padding-bottom: 15px;
     }

     .category-group h4,
     .location-column h4 {
          font-size: 12px;
          padding: 6px 10px;
     }

     .category-group li,
     .location-item {
          padding: 8px 10px;
          font-size: 12px;
     }

     .location-column {
          padding: 12px;
     }
}



/* ==========================================
19. ANIMATIONS & EFFECTS
========================================== */
@keyframes slideUpFade {
     from {
          transform: translateY(100%);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

@keyframes slideInUp {
     from {
          transform: translateY(30px);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

@keyframes slideInLeft {
     from {
          transform: translateX(-30px);
          opacity: 0;
     }

     to {
          transform: translateX(0);
          opacity: 1;
     }
}

@keyframes slideInRight {
     from {
          transform: translateX(30px);
          opacity: 0;
     }

     to {
          transform: translateX(0);
          opacity: 1;
     }
}

@keyframes zoomIn {
     from {
          transform: scale(0.9);
          opacity: 0;
     }

     to {
          transform: scale(1);
          opacity: 1;
     }
}

.animate-slide-up {
     animation: slideInUp 0.6s ease forwards;
}

.animate-slide-left {
     animation: slideInLeft 0.6s ease forwards;
}

.animate-slide-right {
     animation: slideInRight 0.6s ease forwards;
}

.animate-zoom {
     animation: zoomIn 0.6s ease forwards;
}

/* Scroll reveal */
.reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s ease;
}

.reveal.active {
     opacity: 1;
     transform: translateY(0);
}

/* ==========================================
20. LOADING STATES
========================================== */
.loading-spinner {
     width: 50px;
     height: 50px;
     border: 5px solid var(--gray-light);
     border-top-color: var(--accent-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 40px auto;
}

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

.skeleton {
     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: loading 1.5s infinite;
     border-radius: var(--radius-md);
}

@keyframes loading {
     0% {
          background-position: 200% 0;
     }

     100% {
          background-position: -200% 0;
     }
}

/* ==========================================
21. PRINT STYLES
========================================== */
@media print {

     .header,
     .search-container,
     .categories-bar,
     .social-proof,
     .organizer-banner,
     .footer,
     .modal,
     .btn,
     button {
          display: none !important;
     }

     body {
          background: white;
     }

     .event-card,
     .featured-event-card {
          break-inside: avoid;
          box-shadow: none;
          border: 1px solid var(--gray-light);
     }
}

/* ==========================================
22. ACCESSIBILITY IMPROVEMENTS
========================================== */
.sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
}

*:focus-visible {
     outline: 3px solid var(--accent-color);
     outline-offset: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
     outline: 3px solid var(--accent-color);
     outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
     :root {
          --primary-color: #c41e3a;
          --dark: #000;
          --gray-light: #666;
     }

     .event-card,
     .featured-event-card,
     .modal-content {
          border: 2px solid var(--dark);
     }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
     }
}

/* ==========================================
23. DARK MODE SUPPORT (OPTIONAL)
========================================== */

@media (prefers-color-scheme: dark) {
     :root {
          --dark: #ffffff;
          --gray-dark: #cccccc;
          --gray: #999999;
          --gray-light: #444444;
          --bg-light: #2b2b2b;
          --white: #1a1a1a;
     }

     body {
          background-color: #1a1a1a;
          color: #ffffff;
     }

     .calendar,
     .event-card,
     .featured-event-card,
     .modal-content,
     .banner-container {
          background: #00000094;
          color: #ffffff;
     }

     .search-field input,
     .category-selected {
          background: #333;
          color: var(--dark);
          border-color: #555;
     }

     .calendar-day {
          background: #333;
     }

     .calendar-day.has-event {
          background: linear-gradient(135deg, #3a3a00 0%, #5a5a00 100%);
     }

     .preview-title,
     .modal-event-info h4 {
          color: var(--dark);
     }

     .category-dropdown,
     .location-dropdown {
          background: #2b2b2b;
          border-color: #ff6b35;
          overflow: hidden;
     }

     .category-selected {
          background: #333;
          color: var(--dark);
          border-color: #555;
     }

     .category-selected:hover {
          border-color: #ff6b35;
          background: #3a3a3a;
     }

     .category-dropdown-content,
     .location-dropdown-content {
          background: #2b2b2b;
     }

     /* Dark mode for location search inputs */
     .main-location-search-wrapper,
     .modal-location-search-wrapper {
          background: #2b2b2b !important;
          border-bottom-color: #444 !important;
     }

     .main-location-search-wrapper input,
     .modal-location-search-wrapper input {
          background: #333 !important;
          border-color: #555 !important;
          color: white !important;
     }

     .main-location-search-wrapper input::placeholder,
     .modal-location-search-wrapper input::placeholder {
          color: #999 !important;
     }

     .main-location-search-wrapper input:focus,
     .modal-location-search-wrapper input:focus {
          border-color: var(--primary-color) !important;
          box-shadow: 0 0 0 3px rgba(237, 77, 58, 0.2) !important;
     }

     .category-dropdown-content::-webkit-scrollbar-track,
     .location-dropdown-content::-webkit-scrollbar-track {
          background: #1a1a1a;
     }

     .category-dropdown-content::-webkit-scrollbar-thumb,
     .location-dropdown-content::-webkit-scrollbar-thumb {
          background: linear-gradient(180deg, #ff6b35 0%, #f7931e 100%);
          border-color: #2b2b2b;
     }

     .category-group h4 {
          background: linear-gradient(135deg, rgba(255, 107, 53, 0.3) 0%, rgba(247, 147, 30, 0.2) 100%);
          color: #ffa500;
          border-left-color: #ff6b35;
     }

     .category-group li,
     .location-item {
          background: #333;
          color: #ddd;

          border-color: #444;
     }

     .category-group li:hover,
     .location-item:hover {
          background: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(247, 147, 30, 0.3) 100%);
          color: #ffcc80;

          border-color: #ff6b35;
     }

     .location-column {
          background: #333;
          border-color: #444;
     }

     .location-column h4 {
          background: #3a3a3a;
          color: #ffa500;
     }

     .location-item.location-popular {
          background: linear-gradient(135deg, rgb(255 127 7 / 63%) 0%, rgb(124 195 255 / 35%) 100%);
          border-color: #ff6b35;
          color: #ff6b35;

     }

     .location-item.location-popular:hover {
          background: linear-gradient(135deg, #ff4e0de0 0%, #cf820f 100%);
          color: #fffdec;

     }

}

/* =================================== */

/* ==========================================
   AUTHENTICATION & TICKET PURCHASE SYSTEM
   ========================================== */

/* Auth Modal Base */
.auth-modal {
     display: none;
     position: fixed;
     z-index: 10000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     overflow: hidden;
}

.auth-modal-content {
     background: var(--white);
     padding: 40px;
     border-radius: 16px;
     max-width: 450px;
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     position: relative;
     animation: modalSlideIn 0.3s ease-out;
     margin: 250px auto;
}

@keyframes modalSlideIn {
     from {
          opacity: 0;
          transform: translateY(-30px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.auth-close {
     position: absolute;
     top: 15px;
     right: 20px;
     font-size: 32px;
     font-weight: bold;
     color: var(--gray);
     cursor: pointer;
     transition: color 0.3s;
     line-height: 1;
}

.auth-close:hover {
     color: var(--dark);
}

.auth-modal h2 {
     margin: 0 0 30px 0;
     text-align: center;
     color: var(--dark);
     font-size: 28px;
}

/* Social Login Buttons */
.social-login {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 20px;
}

.social-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 12px 20px;
     border: none;
     border-radius: 8px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s;
     font-family: inherit;
}

.facebook-btn {
     background: #1877f2;
     color: white;
}

.facebook-btn:hover {
     background: #166fe5;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

.google-btn {
     background: var(--white);
     color: var(--dark);
     border: 2px solid var(--gray-light);
}

.google-btn:hover {
     background: var(--bg-light);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Divider */
.divider {
     text-align: center;
     margin: 25px 0;
     position: relative;
     color: var(--gray);
     font-size: 14px;
}

.divider::before,
.divider::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 40%;
     height: 1px;
     background: var(--gray-light);
}

.divider::before {
     left: 0;
}

.divider::after {
     right: 0;
}

/* Form Elements (ตรวจสอบไม่ให้ซ้ำกับที่มีอยู่) */
.auth-modal .form-group {
     margin-bottom: 20px;
}

.auth-modal .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
     color: var(--dark);
     font-size: 14px;
}

.auth-modal .form-group input,
.auth-modal .form-group select {
     width: 100%;
     padding: 12px 15px;
     border: 2px solid #e0e0e0;
     border-radius: 8px;
     font-size: 15px;
     transition: border-color 0.3s;
     font-family: inherit;
}

.auth-modal .form-group input:focus,
.auth-modal .form-group select:focus {
     outline: none;
     border-color: var(--accent-color);
}

.auth-modal .form-group input::placeholder {
     color: var(--gray);
}

.btn-block {
     width: 100%;
     padding: 14px;
     font-size: 16px;
     margin-top: 10px;
}

/* Auth Switch Text */
.auth-switch {
     text-align: center;
     margin: 20px 0 0 0;
     color: var(--gray-dark);
     font-size: 14px;
}

.auth-switch a {
     color: var(--accent-color);
     font-weight: 600;
     text-decoration: none;
}

.auth-switch a:hover {
     text-decoration: underline;
}

/* User Menu */
.user-menu {
     position: relative;
     display: inline-flex;
     align-items: center;
}

.btn-user-profile {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     background: var(--bg-light);
     border: 2px solid #e0e0e0;
     border-radius: 25px;
     cursor: pointer;
     transition: all 0.3s;
     font-family: inherit;
     font-size: 14px;
     font-weight: 600;
     color: var(--dark);
}

.btn-user-profile:hover {
     background: #e9ecef;
     border-color: var(--accent-color);
}

.user-dropdown {
     display: none;
     position: absolute;
     top: 100%;
     right: 0;
     margin-top: 10px;
     background: var(--white);
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     min-width: 200px;
     overflow: hidden;
     z-index: 1000;
}

.user-dropdown a {
     display: block;
     padding: 12px 20px;
     color: var(--dark);
     text-decoration: none;
     transition: background 0.3s;
     font-size: 14px;
}

.user-dropdown a:hover {
     background: var(--bg-light);
}

/* Responsive Design for Auth Modals */
@media (max-width: 768px) {
     .auth-modal-content {
          padding: 30px 20px;
          max-width: 95%;
     }

     .auth-modal h2 {
          font-size: 24px;
     }

     .social-btn {
          font-size: 14px;
          padding: 10px 16px;
     }

     .btn-block {
          padding: 12px;
          font-size: 15px;
     }

     .hero-event-description, .hero-event-category {
          margin-bottom: 7px;
     }

     .hero-event-title {
          font-size: 24px;
     }

     .month-item {
          margin: 5px;
     }

     .calendar-day-header {
          margin: 0;
     }
}

@media (max-width: 480px) {
     .auth-modal-content {
          padding: 25px 15px;
          border-radius: 12px;
     }

     .auth-close {
          font-size: 28px;
          top: 10px;
          right: 15px;
     }

     .auth-modal h2 {
          font-size: 22px;
          margin-bottom: 20px;
     }

     .social-btn {
          font-size: 13px;
          padding: 10px 12px;
     }

     .divider {
          margin: 20px 0;
          font-size: 13px;
     }

     .auth-modal .form-group input,
     .auth-modal .form-group select {
          padding: 10px 12px;
          font-size: 14px;
     }

     .btn-user-profile {
          padding: 6px 12px;
          font-size: 13px;
     }

     .user-dropdown {
          min-width: 180px;
     }

     .user-dropdown a {
          padding: 10px 15px;
          font-size: 13px;
     }

     .hero-event-category {
          margin-bottom: 3px;

     }

     .hero-event-title {
          font-size: 18px;
     }

     .hero-event-info {
          gap: 5px;
     }

     .hero-event-description {
          margin-bottom: 3px;
     }

     /* Calendar - Hide images on mobile */
     .calendar-day .preview-image {
          display: none;
     }

     .calendar-day .preview-content {
          padding: 0;
          display: none;

     }


     .preview-title {
          font-size: 10px !important;
          line-height: 1.2;
          margin-bottom: 0 !important;
     }

     .preview-time {
          font-size: 9px !important;
     }

     /* Hide event count badge number on mobile */
     .event-count-badge {
          display: none !important;
     }

     /* Show event dots instead */
     .event-dots-container {
          display: flex !important;
          gap: 4px;
          justify-content: center;
          flex-wrap: wrap;
     }

     .event-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--accent-color);
          display: inline-block;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     }

     .calendar-day.has-event .day-number {
          font-size: 16px;
     }

     .calendar-day.today.has-event .event-dot {
          background: #953e1f;
     }

     .calendar-day-header {
          margin-bottom: 0;
     }

}

/* ==========================================
   SEARCH RESULTS MODAL
   ========================================== */

/* Modal Overlay */
.search-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     opacity: 0;
     transition: opacity 0.3s ease;
     overflow: hidden;
}

.search-modal.active {
     display: flex;
     align-items: center;
     justify-content: center;
     animation: fadeIn 0.3s ease forwards;
}

.search-modal-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(4px);
     animation: fadeIn 0.3s ease;
}


/* Modal Container */
.search-modal-container {
     position: relative;
     width: 95%;
     max-width: 1400px;
     height: 90vh;
     background: white;
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     z-index: 10000;
}

/* Modal Header */
.search-modal-header {
     padding: 25px 30px;
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
     color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-modal-title h2 {
     margin: 0;
     font-size: 28px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 10px;
}

.search-modal-title p {
     margin: 5px 0 0 0;
     opacity: 0.9;
     font-size: 14px;
}

#modalResultCount {
     font-weight: 700;
     color: #ffe082;
}

.search-modal-close {
     background: rgba(255, 255, 255, 0.2);
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
     color: white;
}

.search-modal-close:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: rotate(90deg);
}

/* Filter Tabs */
.search-modal-filters {
     padding: 20px 30px;
     background: var(--white);
     border-bottom: 1px solid #e0e0e0;
     overflow: visible;
     position: relative;
     z-index: 10;
}

.filter-tabs {
     display: flex;
     gap: 10px;
     margin-bottom: 15px;
     padding: 10px;
     scrollbar-width: thin;
     scrollbar-color: #ccc transparent;
}

.filter-tabs::-webkit-scrollbar {
     height: 6px;
}

.filter-tabs::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 3px;
}

.filter-tab {
     padding: 10px 20px;
     background: white;
     border: 2px solid #e0e0e0;
     border-radius: 25px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     white-space: nowrap;
     color: #666;
}

.filter-tab:hover {
     border-color: var(--primary-color);
     color: var(--primary-color);
     transform: translateY(-2px);
}

.filter-tab.active {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
     color: white;
     box-shadow: 0 4px 12px rgba(237, 77, 58, 0.3);
}

/* Filter Controls */
.filter-controls {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 15px;
     align-items: end;
     position: relative;
     z-index: 1;
}

.filter-control-group {
     display: flex;
     flex-direction: column;
     gap: 5px;
     position: relative;
}

.filter-control-group label {
     font-size: 13px;
     font-weight: 600;
     color: #666;
}

.filter-control-group input,
.filter-control-group select {
     padding: 10px 15px;
     border: 2px solid #e0e0e0;
     border-radius: 10px;
     font-size: 14px;
     transition: all 0.2s ease;
     background: white;
     width: 100%;
}

.filter-control-group input:focus,
.filter-control-group select:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(237, 77, 58, 0.1);
}

/* Flatpickr calendar z-index fix and width control */
.flatpickr-calendar {
     z-index: 10000 !important;
     width: auto !important;
     max-width: 640px !important;
}

.flatpickr-calendar.open {
     z-index: 10000 !important;
}

/* Responsive flatpickr for single month view */
.flatpickr-calendar:not(.hasTime):not(.noCalendar).inline,
.flatpickr-calendar:not(.hasTime):not(.noCalendar) {
     width: auto !important;
}

/* Fix calendar width when showing 2 months */
.flatpickr-calendar.multiMonth {
     width: auto !important;
     max-width: 640px !important;
}

/* Ensure days are properly sized */
.flatpickr-day {
     max-width: 39px !important;
     height: 39px !important;
     line-height: 39px !important;
}

/* Make sure flatpickr input is clickable */
#modalEventDate {
     position: relative;
     z-index: 10;
     cursor: pointer;
     pointer-events: auto !important;
}

.btn-clear-filter {
     padding: 10px 20px;
     background: #f44336;
     color: white;
     border: none;
     border-radius: 10px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     align-self: end;
}

.btn-clear-filter:hover {
     background: #d32f2f;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* Modal Body */
.search-modal-body {
     flex: 1;
     overflow-y: auto;
     padding: 30px;
     background: #fafafa;
}

.modal-events-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 25px;
     animation: fadeInUp 0.5s ease;
}

/* Modal Event Card */
.modal-events-grid .event-card {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     cursor: pointer;
     position: relative;
}

.modal-events-grid .event-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.modal-events-grid .event-card img {
     width: 100%;
     height: 200px;
     object-fit: cover;
}

.modal-events-grid .event-details {
     padding: 20px;
}

.modal-events-grid .event-title {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
     color: #2b2b2b;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.modal-events-grid .event-info {
     font-size: 14px;
     color: #666;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0;
}

.modal-events-grid .event-price {
     font-size: 20px;
     font-weight: 700;
     color: var(--primary-color);
     margin-top: 10px;
}

/* Loading Skeleton */
.modal-loading-skeleton {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 25px;
}

.skeleton-card {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-card::before {
     content: '';
     display: block;
     width: 100%;
     height: 200px;
     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
}

/* No Results */
.modal-no-results {
     text-align: center;
     padding: 60px 20px;
     color: #999;
}

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

.modal-no-results h3 {
     font-size: 24px;
     color: #666;
     margin-bottom: 10px;
}

.modal-no-results p {
     font-size: 16px;
     margin-bottom: 25px;
}

/* Modal Footer */
.search-modal-footer {
     padding: 20px 30px;
     background: white;
     border-top: 1px solid #e0e0e0;
     text-align: center;
}

.btn-load-more {
     padding: 12px 40px;
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
     color: white;
     border: none;
     border-radius: 25px;
     font-weight: 600;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
}

.btn-load-more:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(237, 77, 58, 0.4);
}

.btn-load-more:disabled {
     background: #ccc;
     cursor: not-allowed;
     transform: none;
}

/* Animations */
@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

@keyframes slideUp {
     from {
          transform: translateY(50px);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

@keyframes fadeInUp {
     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes pulse {
     0%, 100% {
          opacity: 1;
     }

     50% {
          opacity: 0.7;
     }
}

@keyframes shimmer {
     0% {
          background-position: -200% 0;
     }

     100% {
          background-position: 200% 0;
     }
}

/* Mobile Filter Header (ซ่อนบน Desktop) */
.mobile-filter-header {
     display: none;
}

/* Mobile Filter Bar (แสดงเมื่อ filters ถูกซ่อน) */
.mobile-filter-bar {
     display: none;
     width: 100%;
     padding: 12px 15px;
     border-bottom: 1px solid #e0e0e0;
     gap: 10px;
     justify-content: center;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mobile-filter-bar.hidden {
     display: none;
}

.mobile-filter-toggle-btn {
     padding: 12px 24px;
     background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     border-radius: 10px;
     color: white;
     font-weight: 600;
     font-size: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     box-shadow: 0 3px 10px rgba(255, 107, 53, 0.25);
     min-width: 180px;
}

.mobile-filter-toggle-btn svg {
     width: 20px;
     height: 20px;
     stroke: white;
     stroke-width: 2.5;
}

.mobile-filter-toggle-btn:hover {
     background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
     box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
     transform: translateY(-1px);
}

.mobile-filter-toggle-btn:active {
     transform: scale(0.97);
     box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

.mobile-clear-btn {
     padding: 12px 20px;
     background: var(--gray-light);
     border: 2px solid #e0e0e0;
     cursor: pointer;
     transition: all 0.3s ease;
     border-radius: 8px;
     color: var(--dark);
     font-weight: 600;
     font-size: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
}

.mobile-clear-btn svg {
     width: 18px;
     height: 18px;
     stroke: var(--dark);
     stroke-width: 2;
}

.mobile-clear-btn:hover {
     background: #ff6b35;
     border-color: #ff6b35;
     color: white;
     box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.mobile-clear-btn:hover svg {
     stroke: white;
}

.mobile-clear-btn:active {
     transform: scale(0.98);
}


/* Mobile Responsive */
@media (max-width: 768px) {
     .search-modal-container {
          width: 100%;
          height: 100vh;
          border-radius: 0;
     }

     .search-modal-header {
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
     }

     .search-modal-title {
          flex: 1;
     }

     .search-modal-title h2 {
          font-size: 20px;
     }

     /* Mobile Filter Header with Hide Button */
     .mobile-filter-header {
          display: flex;
          justify-content: flex-end;
          margin-bottom: 10px;
     }

     .mobile-hide-filter-btn {
          padding: 8px 12px;
          background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 2px 6px rgba(255, 107, 53, 0.25);
     }

     .mobile-hide-filter-btn svg {
          width: 20px;
          height: 20px;
          stroke: white;
          stroke-width: 2.5;
          display: block;
     }

     .mobile-hide-filter-btn:hover {
          background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
          box-shadow: 0 3px 8px rgba(255, 107, 53, 0.35);
          transform: translateY(-1px);
     }

     .mobile-hide-filter-btn:active {
          transform: scale(0.95);
     }

     /* Show filter bar on mobile */
     .mobile-filter-bar {
          display: flex;
     }

     .mobile-filter-bar.hidden {
          display: none !important;
     }

     .search-modal-filters {
          padding: 15px;
          max-height: 500px;
          overflow: visible;
          transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
          opacity: 1;
     }

     /* Mobile flatpickr calendar - single month full width */
     .flatpickr-calendar {
          max-width: 100% !important;
     }

     .flatpickr-day {
          max-width: 14.28% !important;
          flex: 0 0 14.28% !important;
     }

     .search-modal-filters.hidden {
          max-height: 0;
          overflow: hidden;
          padding: 0 15px;
          opacity: 0;
          overflow: hidden;
     }

     .filter-controls {
          grid-template-columns: 1fr;
     }

     /* Fix flatpickr input width on mobile */
     .filter-control-group input[type="text"],
     .filter-control-group .flatpickr-input,
     .filter-control-group .flatpickr-mobile,
     .filter-control-group .location-input-wrapper {
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
     }

     /* Ensure flatpickr input matches location-input-wrapper exactly */
     .filter-control-group .flatpickr-mobile,
     .filter-control-group .location-input-wrapper input {
          padding: 12px 15px !important;
          font-size: 14px !important;
     }

     /* Location search input styling for both main and modal */
     .modal-location-search-wrapper #modalLocationSearchInput:focus,
     .main-location-search-wrapper #mainLocationSearchInput:focus {
          border-color: var(--primary-color) !important;
          box-shadow: 0 0 0 3px rgba(237, 77, 58, 0.1) !important;
     }

     .search-modal-body {
          padding: 15px;
     }

     .modal-events-grid {
          grid-template-columns: 1fr;
          gap: 15px;
     }

     /* ซ่อน Desktop Tabs บน Mobile */
     .filter-tabs-container {
          display: none;
     }

     /* แสดง Mobile Category Selector */
     .mobile-category-selector {
          display: block;
          margin-bottom: 15px;
     }

     .mobile-category-selector .category-selected {
          padding: 12px 20px;
          background: white;
          border: 2px solid var(--gray-light);
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.2s ease;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          color: #2b2b2b;
     }

     .mobile-category-selector .category-selected:hover {
          border-color: #ff6b35;
          box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
     }

     .mobile-category-selector .category-selected label {
          font-size: 16px;
          font-weight: 600;
          color: #2b2b2b;
          cursor: pointer;
     }

     .mobile-category-selector .category-dropdown {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 100vh !important;
          max-height: 100vh !important;
          transform: none !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          -webkit-overflow-scrolling: touch !important;
          z-index: 9999 !important;
          border: 2px solid #ff6b35 !important;
          border-radius: 0 !important;
          padding: 80px 20px 20px 20px !important;
          box-sizing: border-box !important;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
          animation: slideUpFade 0.3s ease-out;
     }

     .header

     /* Category groups styling for mobile - เหมือน desktop */
     .mobile-category-selector .category-group {
          margin-bottom: 20px !important;
          padding: 15px !important;
          border-bottom: 2px solid #f0f0f0 !important;
     }

     .mobile-category-selector .category-group:last-child {
          padding-bottom: 0 !important;
          border-bottom: none !important;
     }

     .mobile-category-selector .category-group h4 {
          font-size: 14px !important;
          font-weight: 700 !important;
          margin-bottom: 10px !important;
          padding: 10px 15px !important;
          border-radius: 8px !important;
          border-left: 4px solid #ff6b35 !important;
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          text-transform: uppercase !important;
     }

     .mobile-category-selector .category-group ul {
          list-style: none !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 4px !important;
     }

     .mobile-category-selector .category-group li {
          padding: 12px 15px !important;
          cursor: pointer !important;
          border-radius: 8px !important;
          transition: all 0.2s ease !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          border: 1px solid #f0f0f0 !important;
     }

     .mobile-category-selector .category-group li:hover,
     .mobile-category-selector .category-group li:active {
          background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
          color: #ff6b35 !important;
          transform: translateX(5px) !important;
          border-color: #ff6b35 !important;
     }
}

/* ==========================================
   FILTER TAB SUBMENU
   ========================================== */

/* Mobile Category Selector (ซ่อนบน Desktop, แสดงบน Mobile) */
@media (min-width: 769px) {
     .mobile-category-selector {
          display: none;
     }
}

.filter-tabs-container {
     width: 100%;
     position: relative;
}

.filter-tabs {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     padding: 15px;
     margin: 0 -15px 0 -15px;
     overflow-x: auto;
     overflow-y: visible;
     scrollbar-width: thin;
     scrollbar-color: #ccc transparent;
     -webkit-overflow-scrolling: touch;
}

/* Scrollbar styling for filter-tabs */
.filter-tabs::-webkit-scrollbar {
     height: 6px;
}

.filter-tabs::-webkit-scrollbar-track {
     background: transparent;
     border-radius: 10px;
     margin-bottom: 45px;
}

.filter-tabs::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 10px;
}

.filter-tabs::-webkit-scrollbar-thumb:hover {
     background: #999;
}

.filter-tab-group {
     position: relative;
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
}

.filter-tab-main {
     position: relative;
}

.filter-tab-main::after {
     content: '▼';
     font-size: 10px;
     margin-left: 6px;
     opacity: 0.6;
     transition: transform 0.2s ease;
}

.filter-tab-group:hover .filter-tab-main::after {
     transform: rotate(180deg);
}

.filter-tab-submenu {
     display: none;
     position: fixed;
     top: auto;
     left: auto;
     background: white;
     border: 2px solid #e0e0e0;
     border-radius: 12px;
     padding: 12px;
     min-width: 200px;
     max-width: 280px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     z-index: 10001;
     animation: slideDown 0.2s ease;
     pointer-events: auto;
}

/* Animation for submenu */
@keyframes slideDown {
     from {
          opacity: 0;
          transform: translateY(-10px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.filter-tab-submenu-header {
     font-size: 11px;
     font-weight: 700;
     color: #999;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 4px 12px 8px 12px;
     margin-bottom: 4px;
     border-bottom: 1px solid #e0e0e0;
}

.dark-mode .filter-tab-submenu {
     background: #1a1a1a;
     border-color: #404040;
}

.dark-mode .filter-tab-submenu-header {
     color: #666;
     border-bottom-color: #404040;
}

.filter-tab-group:hover .filter-tab-submenu {
     display: flex;
     flex-direction: column;
     gap: 2px;
}

/* ซ่อน submenu เมื่อ scroll */
.filter-tab-group.scrolling .filter-tab-submenu {
     display: none !important;
}

.filter-tab-sub {
     padding: 8px 12px;
     background: transparent;
     border: none;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
     white-space: nowrap;
     text-align: left;
     color: #666;
}

.dark-mode .filter-tab-sub {
     color: #b0b0b0;
}

.filter-tab-sub:hover {
     background: #f0f0f0;
     color: var(--primary-color);
     transform: translateX(4px);
}

.dark-mode .filter-tab-sub:hover {
     background: #2d2d2d;
}

.filter-tab-sub.active {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
     color: white;
}

@keyframes slideDown {
     from {
          opacity: 0;
          transform: translateY(-10px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}