/* Notification Toast Styles */
.notification-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: white;
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transition: transform 0.3s ease;
    max-width: 90%;
    min-width: 250px;
}

.notification-toast.show {
    transform: translateX(-50%) translateY(0);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-icon {
    font-size: 20px;
}

.notification-message {
    color: #2d3748;
    font-size: 14px;
    font-weight: 500;
}

.notification-toast.notification-success {
    border-left: 4px solid #48bb78;
}

.notification-toast.notification-error {
    border-left: 4px solid #f56565;
}

.notification-toast.notification-warning {
    border-left: 4px solid #f6ad55;
}

.notification-toast.notification-info {
    border-left: 4px solid #4299e1;
}

:root {
    --primary-start:#667eea;
    --primary-end:#764ba2;
    --card-bg:white;
    --text-dark:#2d3748;
    --text-light:#718096;
    --border-color:#e2e8f0;
    --shadow-light:0 2px 10px rgba(0,0,0,0.08);
    --shadow-medium:0 4px 20px rgba(0,0,0,0.12);
    --highlight-color:#fef3c7;
    --highlight-border:#f59e0b;
    --mobile-padding:16px;
    --mobile-padding-sm:12px;
    --mobile-padding-xs:8px;
    --header-height:calc(var(--mobile-padding-sm) * 2 + 44px + env(safe-area-inset-top,0));
    --date-picker-height:60px;
    --tab-bar-height:56px;
    --safe-area-bottom:env(safe-area-inset-bottom,0);
    --z-map:1;
    --z-cards:1;
    --z-header:100;
    --z-date-picker:90;
    --z-tab-bar:100;
    --z-loading:200;
    --z-bottom-sheet:300
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent
}

body {
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
    margin:0;
    padding:0;
    background:#f0f0f0
}

.app-container {
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%)
}

.app-header {
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    padding:var(--mobile-padding-sm) var(--mobile-padding);
    padding-top:calc(var(--mobile-padding-sm) + env(safe-area-inset-top,0));
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:var(--z-header);
    box-shadow:0 2px 10px rgba(0,0,0,0.1)
}

.app-header h1 {
    font-size:1.25rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px
}

.app-header .subtitle {
    font-size:0.75rem;
    opacity:0.9;
    margin-top:2px
}

.date-picker-mobile {
    background:white;
    padding:var(--mobile-padding-xs) var(--mobile-padding);
    position:fixed;
    top:var(--header-height);
    left:0;
    right:0;
    z-index:var(--z-date-picker);
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    display:flex;
    gap:var(--mobile-padding-xs);
    align-items:center;
    transition:transform 0.3s ease
}

.map-view-active .date-picker-mobile {
    transform:translateY(-100%);
    pointer-events:none
}

.date-picker-mobile input[type="date"] {
    flex:1;
    padding:10px 12px;
    border:2px solid var(--border-color);
    border-radius:8px;
    font-size:16px;
    background:white;
    color:var(--text-dark)
}

.date-picker-mobile input[type="date"]:focus {
    outline:none;
    border-color:var(--primary-start)
}

.search-btn-mobile {
    position:relative;
    padding:10px 20px;
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    border:none;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    transition:opacity 0.2s;
    min-width:80px;
    width:auto;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-sizing:border-box;
    line-height:1
}

.search-btn-mobile:active {
    transform:scale(0.95);
    opacity:0.8
}

.search-btn-mobile:disabled {
    opacity:0.5
}

.search-btn-mobile,.card-action-btn,.retry-btn {
    position:relative;
    overflow:hidden;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1)
}

.search-btn-mobile::after,.card-action-btn::after,.retry-btn::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:rgba(255,255,255,0.3);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width 0.4s ease,height 0.4s ease
}

.search-btn-mobile:active::after,.card-action-btn:active::after,.retry-btn:active::after {
    width:200px;
    height:200px
}

.search-btn-mobile:hover,.card-action-btn:hover,.retry-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(102,126,234,0.3)
}

.is-loading {
    color:transparent !important;
    pointer-events:none
}

.is-loading::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:18px;
    height:18px;
    margin:-10px 0 0 -10px;
    border:2px solid rgba(255,255,255,0.3);
    border-top-color:white;
    border-radius:50%;
    animation:button-spinner 0.8s linear infinite
}

@keyframes button-spinner {
    to {
    transform:rotate(360deg)
}

}

.content-area {
    flex:1;
    position:relative;
    margin-top:calc(var(--header-height) + var(--date-picker-height));
    margin-bottom:var(--tab-bar-height);
    overflow:hidden;
    transition:margin-top 0.3s ease
}

.map-view-active .content-area {
    margin-top:var(--header-height)
}

.view-container {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease;
    scroll-behavior:smooth;
    scroll-snap-type:y proximity
}

.view-container.active {
    display:block;
    animation:viewSlideIn 0.3s cubic-bezier(0.4,0,0.2,1)
}

@keyframes viewSlideIn {
    from {
    transform:translateX(20px);
    opacity:0
}

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

}

.event-card {
    scroll-snap-align:start
}

.view-container::-webkit-scrollbar {
    width:4px
}

.view-container::-webkit-scrollbar-track {
    background:transparent
}

.view-container::-webkit-scrollbar-thumb {
    background:rgba(102,126,234,0.3);
    border-radius:2px
}

.view-container::-webkit-scrollbar-thumb:hover {
    background:rgba(102,126,234,0.5)
}

.list-view {
    background:transparent;
    padding:var(--mobile-padding);
    padding-bottom:calc(var(--mobile-padding) + var(--safe-area-bottom));
    min-height:100%
}

.map-view {
    height:100%;
    position:relative;
    overflow:hidden
}

#mapMobile {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}

.map-overlay {
    position:absolute;
    z-index:var(--z-date-picker);
    pointer-events:auto
}

.map-date-picker {
    top:var(--mobile-padding);
    left:var(--mobile-padding);
    right:var(--mobile-padding);
    background:white;
    border-radius:12px;
    padding:var(--mobile-padding-xs);
    box-shadow:var(--shadow-medium);
    display:flex;
    gap:var(--mobile-padding-xs);
    align-items:center;
    border:1px solid rgba(255,255,255,0.1)
}

.map-date-picker input[type="date"] {
    flex:1;
    padding:8px 10px;
    border:1px solid var(--border-color);
    border-radius:6px;
    font-size:14px;
    background:white
}

.map-date-picker .search-btn-map {
    position:relative;
    padding:8px 16px;
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    border:none;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    min-width:60px;
    width:auto;
    transition:opacity 0.2s
}

.event-count-badge {
    top:calc(var(--mobile-padding) + var(--date-picker-height) + 8px);
    right:var(--mobile-padding);
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    border-radius:20px;
    padding:8px 12px;
    font-size:12px;
    font-weight:600;
    box-shadow:var(--shadow-medium);
    min-width:60px;
    text-align:center
}

.view-container:not(.active) .map-overlay {
    display:none
}

.bottom-sheet {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:white;
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 20px rgba(0,0,0,0.15);
    z-index:var(--z-bottom-sheet);
    transform:translateY(100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
    max-height:70vh;
    display:flex;
    flex-direction:column
}

.bottom-sheet.active {
    transform:translateY(0)
}

.bottom-sheet-handle {
    width:36px;
    height:4px;
    background:#d1d5db;
    border-radius:2px;
    margin:12px auto 8px;
    cursor:pointer;
    flex-shrink:0
}

.bottom-sheet-content {
    padding:0 var(--mobile-padding) calc(var(--mobile-padding) + var(--safe-area-bottom));
    overflow-y:auto;
    flex:1
}

.bottom-sheet-event-card {
    background:none;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;
    margin-bottom:var(--mobile-padding)
}

.bottom-sheet-event-title {
    font-size:1.125rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:var(--mobile-padding-sm);
    line-height:1.4
}

.bottom-sheet-event-detail {
    display:flex;
    align-items:flex-start;
    margin-bottom:var(--mobile-padding-xs);
    color:var(--text-light);
    font-size:0.875rem
}

.bottom-sheet-event-detail-icon {
    width:20px;
    margin-right:var(--mobile-padding-xs);
    flex-shrink:0;
    margin-top:2px
}

.bottom-sheet-actions {
    display:flex;
    gap:var(--mobile-padding-xs);
    margin-top:var(--mobile-padding);
    padding-top:var(--mobile-padding);
    border-top:1px solid var(--border-color)
}

.bottom-sheet-btn {
    flex:1;
    padding:12px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
    text-align:center;
    transition:all 0.2s
}

.bottom-sheet-btn-primary {
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white
}

.bottom-sheet-btn-secondary {
    background:#f7fafc;
    color:var(--text-dark);
    border:1px solid var(--border-color)
}

.bottom-sheet-btn:active {
    transform:scale(0.98)
}

.bottom-sheet-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.3);
    z-index:calc(var(--z-bottom-sheet) - 1);
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease
}

.bottom-sheet-overlay.active {
    opacity:1;
    visibility:visible
}

.tab-bar {
    background:white;
    border-top:1px solid var(--border-color);
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:var(--z-tab-bar);
    padding-bottom:var(--safe-area-bottom);
    box-shadow:0 -2px 10px rgba(0,0,0,0.05)
}

.tab-item {
    flex:1;
    padding:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    color:var(--text-light);
    transition:color 0.2s;
    cursor:pointer;
    outline:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    position:relative
}

.tab-item:focus,.tab-item:active {
    outline:none;
    -webkit-tap-highlight-color:transparent;
    background:none
}

.tab-item::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:rgba(102,126,234,0.1);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width 0.4s ease,height 0.4s ease
}

.tab-item:active::after {
    width:200px;
    height:200px
}

.tab-item:active {
    transform:scale(0.95)
}

.tab-item.active {
    color:var(--primary-start);
    transform:translateY(-2px)
}

.tab-item.active .tab-icon {
    animation:tabIconBounce 0.4s cubic-bezier(0.68,-0.55,0.265,1.55)
}

@keyframes tabIconBounce {
    0% {
    transform:scale(1)
}

50% {
    transform:scale(1.2)
}

100% {
    transform:scale(1)
}

}

.tab-item.active::before {
    content:'';
    position:absolute;
    top:0;
    left:20%;
    right:20%;
    height:2px;
    background:linear-gradient(90deg,var(--primary-start),var(--primary-end));
    animation:tabIndicatorSlide 0.4s cubic-bezier(0.4,0,0.2,1)
}

@keyframes tabIndicatorSlide {
    from {
    transform:scaleX(0);
    opacity:0
}

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

}

.tab-icon {
    font-size:20px
}

.tab-label {
    font-size:12px;
    font-weight:500
}

.stats-card-mobile {
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    border-radius:12px;
    padding:var(--mobile-padding-sm) var(--mobile-padding);
    margin-bottom:var(--mobile-padding);
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:var(--shadow-light);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden
}

.stats-card-mobile::before {
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);
    transform:rotate(45deg);
    animation:shimmer 3s ease-in-out infinite
}

@keyframes shimmer {
    0% {
    transform:translateX(-100%) translateY(-100%) rotate(45deg)
}

100% {
    transform:translateX(100%) translateY(100%) rotate(45deg)
}

}

.stats-card-mobile .count {
    font-size:1.5rem;
    font-weight:700;
    animation:countUp 0.6s cubic-bezier(0.4,0,0.2,1)
}

@keyframes countUp {
    from {
    transform:scale(0.5);
    opacity:0
}

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

}

.stats-card-mobile .label {
    font-size:0.875rem;
    opacity:0.95
}

.events-container {
    display:flex;
    flex-direction:column;
    gap:var(--mobile-padding-sm)
}

.event-card {
    background:var(--card-bg);
    border-radius:12px;
    padding:var(--mobile-padding);
    box-shadow:var(--shadow-light);
    transition:all 0.3s ease;
    position:relative;
    cursor:pointer;
    overflow:hidden
}

.event-card:active {
    transform:scale(0.98)
}

.event-card.expanded {
    box-shadow:var(--shadow-medium);
    transform:scale(1.02)
}

.event-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg,var(--primary-start),var(--primary-end));
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:0
}

.event-card:hover::before {
    opacity:0.02
}

.event-card > * {
    position:relative;
    z-index:1
}

.event-card:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(102,126,234,0.15)
}

.event-card.expanding {
    animation:cardExpand 0.4s cubic-bezier(0.4,0,0.2,1)
}

@keyframes cardExpand {
    0% {
    transform:scale(1)
}

50% {
    transform:scale(1.03)
}

100% {
    transform:scale(1.02)
}

}

.event-card.collapsing {
    animation:cardCollapse 0.3s cubic-bezier(0.4,0,0.2,1)
}

@keyframes cardCollapse {
    0% {
    transform:scale(1.02)
}

100% {
    transform:scale(1)
}

}

.event-card-header {
    margin-bottom:var(--mobile-padding-sm)
}

.event-card-basic {
    transition:opacity 0.3s ease
}

.event-card-expanded {
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease
}

.event-card.expanded .event-card-expanded {
    max-height:300px;
    opacity:1;
    margin-top:var(--mobile-padding-sm)
}

.event-card-actions {
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease 0.1s
}

.event-card.expanded .event-card-actions {
    max-height:100px;
    opacity:1;
    margin-top:var(--mobile-padding);
    padding-top:var(--mobile-padding);
    border-top:1px solid var(--border-color)
}

.expand-indicator {
    position:absolute;
    bottom:var(--mobile-padding-xs);
    right:var(--mobile-padding-xs);
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(102,126,234,0.1);
    border-radius:50%;
    font-size:12px;
    color:var(--primary-start);
    transition:transform 0.3s ease
}

.event-card.expanded .expand-indicator {
    transform:rotate(180deg)
}

.card-action-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:8px;
    font-size:0.875rem;
    font-weight:600;
    text-decoration:none;
    transition:all 0.2s;
    margin-right:var(--mobile-padding-xs)
}

.card-action-btn-primary {
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white
}

.card-action-btn-secondary {
    background:#f7fafc;
    color:var(--text-dark);
    border:1px solid var(--border-color)
}

.card-action-btn:active {
    transform:scale(0.95)
}

.loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:48px var(--mobile-padding);
    min-height:200px
}

.loading-spinner {
    width:40px;
    height:40px;
    border:3px solid var(--border-color);
    border-top-color:var(--primary-start);
    border-radius:50%;
    animation:spin 1s linear infinite
}

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

}

.loading-text {
    margin-top:var(--mobile-padding);
    color:var(--text-light);
    font-size:0.875rem
}

.no-events {
    background:white;
    border-radius:12px;
    padding:48px var(--mobile-padding);
    text-align:center;
    color:var(--text-light);
    margin:var(--mobile-padding);
    box-shadow:var(--shadow-light)
}

.no-events-icon {
    font-size:48px;
    margin-bottom:var(--mobile-padding);
    opacity:0.5
}

.error-message {
    background:#fff5f5;
    border:1px solid #feb2b2;
    color:#c53030;
    padding:var(--mobile-padding);
    border-radius:12px;
    margin:var(--mobile-padding);
    text-align:center
}

.offline-banner {
    position:fixed;
    top:calc(var(--header-height) + env(safe-area-inset-top,0));
    left:var(--mobile-padding);
    right:var(--mobile-padding);
    background:#fef3c7;
    border:1px solid #f59e0b;
    color:#92400e;
    padding:var(--mobile-padding-sm);
    border-radius:8px;
    text-align:center;
    font-size:0.875rem;
    font-weight:500;
    z-index:var(--z-loading);
    transform:translateY(-100%);
    opacity:0;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 4px 12px rgba(0,0,0,0.15)
}

.offline-banner.show {
    transform:translateY(0);
    opacity:1
}

@media (min-width:768px) {
    body {
    position:static;
    overflow:auto;
    height:100vh;
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%)
}

.app-container {
    display:none
}

.desktop-wrapper {
    display:flex;
    height:100vh
}

.desktop-events-column {
    width:45%;
    padding:20px;
    overflow-y:auto;
    height:100%
}

.desktop-map-column {
    width:55%;
    height:100vh
}

#mapDesktop {
    width:100%;
    height:100%;
    background-color:#f0f0f0
}

.desktop-container {
    max-width:600px;
    margin:0 auto
}

.desktop-header {
    text-align:center;
    color:white;
    margin-bottom:30px
}

.desktop-header h1 {
    font-size:2rem;
    margin-bottom:10px
}

.desktop-header p {
    opacity:0.9;
    font-size:0.95rem
}

.desktop-date-picker-card {
    background:var(--card-bg);
    border-radius:12px;
    padding:20px;
    box-shadow:var(--shadow-light);
    margin-bottom:20px
}

.desktop-date-input-group {
    display:flex;
    gap:10px;
    align-items:center
}

.desktop-date-input-group input[type="date"] {
    flex:1;
    padding:12px;
    border:2px solid var(--border-color);
    border-radius:8px;
    font-size:16px;
    transition:border-color 0.3s
}

.desktop-date-input-group input[type="date"]:focus {
    outline:none;
    border-color:var(--primary-start)
}

.desktop-search-btn {
    padding:12px 24px;
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    border:none;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:transform 0.2s,box-shadow 0.2s
}

.desktop-search-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 5px 20px rgba(102,126,234,0.4)
}

.desktop-search-btn:disabled {
    opacity:0.6;
    cursor:not-allowed;
    transform:none
}

.desktop-stats-card {
    background:var(--card-bg);
    border-radius:12px;
    padding:15px 20px;
    margin-bottom:20px;
    text-align:center;
    box-shadow:var(--shadow-light)
}

.desktop-stats-card .count {
    font-size:1.5rem;
    font-weight:700;
    color:var(--primary-start)
}

.desktop-stats-card .label {
    color:var(--text-light);
    font-size:0.9rem;
    margin-top:4px
}

.desktop-events-container {
    display:grid;
    gap:15px
}

.desktop-event-card {
    background:var(--card-bg);
    border-radius:12px;
    padding:20px;
    box-shadow:var(--shadow-light);
    transition:all 0.3s ease;
    animation:slideIn 0.4s ease-out;
    position:relative;
    border:2px solid transparent;
    cursor:pointer
}

.desktop-event-card.highlighted {
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 12px 40px rgba(102,126,234,0.25);
    border-color:var(--highlight-border);
    background:linear-gradient(to right,var(--highlight-color) 0%,var(--card-bg) 10%)
}

.desktop-event-card:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 25px rgba(102,126,234,0.15)
}

.desktop-event-card .event-detail {
    display:flex;
    align-items:flex-start;
    margin-bottom:10px;
    color:var(--text-light);
    font-size:0.95rem
}

.desktop-event-card .event-detail-icon {
    width:20px;
    margin-right:10px;
    color:#a0aec0;
    flex-shrink:0;
    margin-top:2px
}

.desktop-event-card .event-detail-text {
    line-height:1.4
}

.desktop-event-card .event-venue {
    font-weight:600;
    color:#4a5568;
    margin-bottom:4px
}

.desktop-event-card .event-address {
    color:var(--text-light);
    font-size:0.9rem
}

.desktop-event-card .event-bottom-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:12px;
    gap:12px
}

.desktop-event-card .event-bottom-left {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px
}

.desktop-event-card .event-genres {
    display:flex;
    flex-wrap:wrap;
    gap:6px
}

.desktop-event-card .genre-tag {
    background:#f7fafc;
    color:#4a5568;
    padding:4px 10px;
    border-radius:12px;
    font-size:0.85rem;
    border:1px solid var(--border-color)
}

.desktop-event-card .event-link {
    color:var(--primary-start);
    text-decoration:none;
    font-size:0.9rem;
    font-weight:500;
    white-space:nowrap;
    align-self:flex-end;
    margin-bottom:2px
}

.desktop-event-card .event-link:hover {
    text-decoration:underline
}

.desktop-wrapper .loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    min-height:200px;
    color:white
}

.desktop-wrapper .no-events {
    background:var(--card-bg);
    border-radius:12px;
    padding:40px;
    text-align:center;
    color:var(--text-light)
}

.desktop-wrapper .error-message {
    background:#fff5f5;
    border:1px solid #feb2b2;
    color:#c53030;
    padding:15px;
    border-radius:8px;
    margin-top:20px
}

}

@media (max-width:767px) {
    .desktop-wrapper {
    display:none !important
}

}

.event-number {
    position:absolute;
    top:10px;
    right:10px;
    background:#f7fafc;
    color:#718096;
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.75rem;
    font-weight:600;
    z-index:2;
    pointer-events:none
}

.event-title {
    font-size:1rem;
    font-weight:600;
    color:var(--text-dark);
    margin-bottom:8px;
    padding-right:30px
}

.event-detail {
    display:flex;
    align-items:flex-start;
    margin-bottom:8px;
    color:var(--text-light);
    font-size:0.875rem
}

.event-venue {
    font-weight:500;
    color:#4a5568
}

.event-address {
    color:var(--text-light);
    font-size:0.8rem
}

.event-price {
    display:inline-block;
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    padding:4px 10px;
    border-radius:16px;
    font-weight:600;
    font-size:0.8rem
}

.desktop-event-card .event-price {
    padding:4px 8px;
    font-size:0.8rem;
    align-self:flex-start
}

.event-expanded-detail {
    display:flex;
    align-items:flex-start;
    margin-bottom:var(--mobile-padding-xs);
    color:var(--text-light);
    font-size:0.875rem
}

.event-expanded-detail-icon {
    width:20px;
    margin-right:var(--mobile-padding-xs);
    flex-shrink:0;
    margin-top:2px
}

.event-full-address {
    color:var(--text-light);
    font-size:0.875rem;
    line-height:1.4
}

.event-genres-expanded {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:4px
}

.genre-tag-expanded {
    background:linear-gradient(135deg,var(--primary-start) 0%,var(--primary-end) 100%);
    color:white;
    padding:4px 8px;
    border-radius:12px;
    font-size:0.75rem;
    font-weight:500
}