/* ============================================================
   Event Hub — CSS variables
   ============================================================ */
.find-events-page {
    --event-hub-accent: #0f766e;
    --event-hub-accent-soft: #ecfeff;
    --event-hub-accent-strong: #0f5f76;
    --event-hub-panel-border: rgba(15, 118, 110, 0.14);
}

/* ============================================================
   Personal event panes (injected via _MyEventsSection partial)
   ============================================================ */
.find-events-page .my-events-pane {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
    padding: 1.5rem;
}

.find-events-page .my-events-pane-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.find-events-page .my-events-pane-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.find-events-page .my-events-pane-description {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 0;
    max-width: 42rem;
}

.find-events-page .personal-events-empty {
    background: linear-gradient(180deg, #fbfffe 0%, #f8fafc 100%);
    border: 1px dashed rgba(15, 118, 110, 0.24);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767.98px) {
    .find-events-page .my-events-pane {
        padding: 1rem;
    }

    .event-hub-search-card {
        border-radius: 1.25rem;
        padding: 1rem;
    }

    .event-hub-filter-panel {
        padding: 1rem;
    }

    .event-hub-filter-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .event-hub-search-primary .search-location-filters:not(.d-none) {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
        min-width: 100%;
        width: 100%;
    }

    .event-hub-search-primary .search-location-filters .search-input-group {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .event-hub-filter-column {
        flex-basis: 100%;
        min-width: 100%;
    }
}

/* ============================================================
   Event Hub search panel
   ============================================================ */
.event-hub-search-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1.5rem;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
    padding: 1.25rem;
}

.event-hub-search-primary {
    margin-bottom: 1rem;
}

.event-hub-search-primary .find-events-container {
    margin-bottom: 0 !important;
}

.event-hub-search-primary .search-bar-inner {
    max-width: 100%;
}

.event-hub-search-primary .search-location-filters:not(.d-none) {
    align-items: center;
    display: flex;
    flex: 0 1 420px;
    min-width: 320px;
}

.event-hub-search-primary .search-location-filters .search-input-group {
    flex: 1 1 220px;
    min-width: 0;
}

.event-hub-filter-panel {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.94) 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.25rem;
    padding: 1rem;
}

.event-hub-filter-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.event-hub-filter-copy {
    color: #64748b;
    font-size: 0.92rem;
    max-width: 34rem;
}

.event-hub-clear-all {
    color: var(--event-hub-accent);
    font-weight: 700;
    padding: 0;
}

.event-hub-clear-all:hover,
.event-hub-clear-all:focus-visible {
    color: var(--event-hub-accent-strong);
}

.event-hub-clear-all #activeFilterCount {
    font-weight: 600;
}

.event-hub-filter-toolbar {
    margin-bottom: 0.75rem;
}

.event-hub-filter-toolbar-btn {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.42);
    border-radius: 0.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
}

.event-hub-filter-grid {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.event-hub-filter-column {
    flex: 1 1 var(--event-hub-filter-min-width, 15rem);
    min-width: var(--event-hub-filter-min-width, 15rem);
}

.event-hub-filter-column--when {
    --event-hub-filter-min-width: 24rem;
}

.event-hub-filter-column--price {
    --event-hub-filter-min-width: 12rem;
}

.event-hub-filter-column--format {
    --event-hub-filter-min-width: 14rem;
}

.event-hub-filter-group {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    margin: 0;
    min-height: 100%;
    padding: 0.85rem;
}

.event-hub-filter-label {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 0;
}

.event-hub-segmented-control {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.3rem;
}

.find-events-page.modern-friendly .event-hub-segmented-control .filter-chip {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.8rem !important;
    box-shadow: none;
    color: #2563eb;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 700;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.5rem 0.78rem;
}

.find-events-page.modern-friendly .event-hub-segmented-control .filter-chip:hover,
.find-events-page.modern-friendly .event-hub-segmented-control .filter-chip:focus-visible {
    background: rgba(15, 118, 110, 0.08);
    box-shadow: none;
    color: var(--event-hub-accent-strong);
    transform: none;
}

.find-events-page.modern-friendly .event-hub-segmented-control .filter-chip.active {
    background: linear-gradient(135deg, var(--event-hub-accent) 0%, var(--event-hub-accent-strong) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 20px rgba(15, 118, 110, 0.2);
    color: #fff !important;
}

.find-events-page.modern-friendly .event-hub-segmented-control .filter-chip.active:hover {
    background: linear-gradient(135deg, var(--event-hub-accent-strong) 0%, #114e59 100%) !important;
    border-color: transparent !important;
}

.event-hub-filter-clear {
    align-self: flex-start;
    color: var(--event-hub-accent);
    font-size: 0.83rem;
    font-weight: 600;
}

.event-hub-filter-panel #categorySectionWrapper {
    margin-bottom: 0.75rem !important;
}

.event-hub-filter-panel .category-selector-shell {
    border-radius: 1rem;
    padding: 1rem;
}

.event-hub-filter-panel .category-selector-badge {
    font-size: 0.82rem;
    padding: 0.55rem 0.85rem;
}

.event-hub-filter-panel .category-tile-grid {
    gap: 0.6rem;
}

.event-hub-filter-panel .category-tile {
    gap: 0.4rem;
    padding: 0.8rem 0.45rem 0.75rem;
    border-radius: 0.9rem;
}

.event-hub-filter-panel .category-tile-icon {
    font-size: 1.1rem;
    height: 2.75rem;
    width: 2.75rem;
}

.event-hub-filter-panel .category-tile-label {
    font-size: 0.72rem;
}

.event-hub-filter-panel .category-hierarchy-divider {
    font-size: 0.72rem;
    gap: 0.6rem;
}

.event-hub-filter-panel .subcategory-toggle {
    border-radius: 1rem;
    padding: 0.85rem 1rem;
}

.event-hub-filter-panel .subcategory-panel {
    border-radius: 1rem;
    padding: 0.9rem;
}

.event-hub-filter-clear:hover,
.event-hub-filter-clear:focus-visible {
    color: var(--event-hub-accent-strong);
}

.find-events-page.modern-friendly .search-bar-inner:focus-within {
    border-color: var(--event-hub-accent);
    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.14);
}

/* ============================================================
   Active filter summary strip
   ============================================================ */
.active-filters-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}