/* === SCOPED RESET (church finder only) === */
    .church-finder-wrapper *,
    .church-finder-wrapper *::before,
    .church-finder-wrapper *::after,
    .church-finder-content-below *,
    .church-finder-content-below *::before,
    .church-finder-content-below *::after {
        box-sizing: border-box;
    }

    :root {
        /* Colors */
        --primary-blue: #0071DC;
        --primary-blue-hover: #004F9F;
        --et-red: #d12027;
        --text-primary: #1d1d1f;
        --text-secondary: #6e6e73;
        --text-tertiary: #86868b;
        --bg-primary: #ffffff;
        --bg-secondary: #f5f5f7;
        --bg-tertiary: #e8e8ed;
        --border-color: #d2d2d7;
        
        /* Shadows */
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
        
        /* Border Radius */
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-pill: 18px;
        --radius-circle: 50%;
        
        /* Spacing Scale */
        --space-xs: 4px;
        --space-sm: 8px;
        --space-md: 12px;
        --space-lg: 16px;
        --space-xl: 20px;
        --space-2xl: 24px;
        --space-3xl: 32px;
        
        /* Typography */
        --text-xs: 12px;
        --text-sm: 14px;
        --text-base: 16px;
        --text-lg: 18px;
        --text-xl: 20px;
        
        /* Transitions */
        --transition-fast: 0.15s ease;
        --transition-normal: 0.2s ease;
        --transition-slow: 0.3s ease;
    }

    .church-finder-wrapper {
        width: 100%;
        background: var(--bg-secondary);
        min-height: 100vh;
        position: relative;
        z-index: 1; /* Below site header */
    }

    .church-finder-container {
        max-width: min(1400px, 90vw);
        margin: 0 auto;
        padding: var(--space-xl);
    }

    /* Content Area Below Finder */
    .church-finder-content-below {
        width: 100%;
        background: var(--bg-primary);
        padding: var(--space-3xl) 0;
    }

    .content-container {
        max-width: min(1400px, 90vw);
        margin: 0 auto;
        padding: 0 var(--space-xl);
    }

    .content-section {
        margin-bottom: var(--space-3xl);
    }

    .content-section h2 {
        font-size: var(--text-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-lg);
    }

    .content-section p {
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: var(--space-md);
    }

    /* Banner Area (Injected via Page Code Injection) */
    #finder-banner-placeholder:not(:empty) {
        margin-bottom: var(--space-xl);
    }

    #finder-banner-placeholder img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
        border-radius: var(--radius-lg);
    }

    #finder-banner-placeholder a {
        display: block;
    }

    #finder-banner-placeholder a img {
        transition: opacity var(--transition-fast);
    }

    #finder-banner-placeholder a:hover img {
        opacity: 0.9;
    }

    /* Hide banner on mobile */
    @media (max-width: 768px) {
        /* === MOBILE: ABANDON GRID, USE FLEXBOX === */
        .finder-main {
            display: flex !important;
            flex-direction: column;
            gap: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

        /* === MOBILE TABS === */
        .mobile-view-tabs {
            display: flex !important;
            flex-shrink: 0;
            order: -1; /* Tabs first */
        }

        /* === CONTENT AREAS === */
        .churches-sidebar,
        .map-container {
            flex: 1;
            min-height: 0;
        }

        /* CSS safeguard: prevent transforms that can offset Leaflet popups */
        .map-container,
        .churches-sidebar,
        .finder-main {
            transform: none !important;
        }

        /* === VIEW SWITCHING === */
        .churches-sidebar.hidden-mobile,
        .map-container.hidden-mobile {
            display: none !important;
        }

        /* === LAYOUT === */

        #finder-banner-placeholder {
            display: none;
        }

        /* 98vw width on mobile for more space */
        .church-finder-container {
            max-width: 98vw;
            padding: 0;
        }

        /* Condense all padding on mobile */
        .finder-header {
            flex-direction: column;
            gap: var(--space-xs);
            padding: var(--space-sm);
        }

        .search-bar {
            width: 100%;
        }

        .location-btn {
            width: 100%;
            justify-content: center;
            padding: 10px;
        }

        /* Mobile filter layout */
        .quick-filters {
            padding: var(--space-sm);
            gap: var(--space-xs);
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .filter-btn {
            display: inline-flex; /* Ensure flex display for all buttons */
            align-items: center; /* Vertical center */
            justify-content: center; /* Horizontal center */
            flex-shrink: 0;
            padding: 8px 14px;
            font-size: var(--text-xs);
            white-space: nowrap;
            letter-spacing: 0;
        }

        /* Hide additional filters by default on mobile */
        .filter-more {
            display: none;
        }

        /* Show More/Less button on mobile only */
        .more-filters-btn {
            display: inline-flex;
            align-items: center;
            padding: 8px 14px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-pill);
            font-size: var(--text-xs);
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-normal);
            letter-spacing: 0;
        }

        .more-filters-btn:hover {
            background: var(--bg-secondary);
        }

        .favorites-btn {
            width: auto;
            justify-content: flex-start;
            margin-top: var(--space-xs);
        }

        /* Compact church card layout - single line */
        .church-card-summary {
            padding: var(--space-sm);
            gap: var(--space-xs);
            align-items: center;
        }

        .church-number {
            width: 24px;
            height: 24px;
            font-size: 11px;
            flex-shrink: 0;
        }

        .church-info {
            flex: 1;
            min-width: 0;
            margin-right: var(--space-xs);
        }

        .church-name {
            font-size: var(--text-sm);
            line-height: 1.3;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .church-address {
            display: none; /* Hide address on collapsed mobile cards */
        }

        /* Compact favorite and toggle buttons */
        .favorite-icon {
            width: 36px;
            height: 36px;
            padding: 0;
            flex-shrink: 0;
        }

        .favorite-icon svg {
            width: 20px;
            height: 20px;
        }

        .church-toggle {
            width: 36px;
            height: 36px;
            padding: 0;
            flex-shrink: 0;
        }

        .church-toggle svg {
            width: 18px;
            height: 18px;
        }

        /* Stack action buttons vertically on mobile */
        .action-buttons {
            flex-direction: column;
            gap: var(--space-xs);
        }

        .action-btn {
            width: 100%;
            padding: 10px;
            font-size: var(--text-sm);
            min-height: 44px; /* Touch-friendly */
        }

        /* Condensed expanded card details */
        .church-details-content {
            padding: var(--space-sm);
        }

        .detail-row {
            padding: var(--space-xs) 0;
        }

        .church-image {
            margin-bottom: var(--space-sm);
        }

        /* Condensed distance filter */
        .distance-filter {
            padding: var(--space-sm);
        }

        /* Reduce results count padding */
        .churches-header {
            padding: var(--space-sm);
        }

        /* Compact empty state */
        .empty-state {
            padding: var(--space-lg);
        }
    }

    /* Hide More button on desktop */
    @media (min-width: 769px) {
        .more-filters-btn {
            display: none;
        }
    }

    /* Ghost Content Article Styling */
    .content-article {
        max-width: 100%;
    }

    .content-article img {
        width: 100%;
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-xl);
    }

    .content-article p {
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: var(--space-lg);
    }

    .content-article h2 {
        font-size: var(--text-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-lg);
    }

    .content-article h3 {
        font-size: var(--text-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-md);
    }

    .content-article a {
        color: var(--primary-blue);
        text-decoration: underline;
    }

    .content-article a:hover {
        color: var(--primary-blue-hover);
    }

    /* Style for Ghost button/CTA cards */
    .content-article .kg-card {
        margin-bottom: var(--space-xl);
    }

    .content-article .kg-button-card {
        text-align: center;
    }

    .content-article .kg-btn {
        display: inline-block;
        padding: var(--space-lg) var(--space-3xl);
        background: var(--et-red);
        color: white;
        text-decoration: none;
        border-radius: var(--radius-md);
        font-size: var(--text-base);
        font-weight: 600;
        transition: background var(--transition-normal);
    }

    .content-article .kg-btn:hover {
        background: #b01a20;
    }

    /* Style for Ghost callout cards */
    .content-article .kg-callout-card {
        background: var(--bg-secondary);
        padding: var(--space-xl);
        border-radius: var(--radius-lg);
        border-left: 4px solid var(--primary-blue);
        margin-bottom: var(--space-xl);
    }

    .content-article .kg-callout-text {
        color: var(--text-primary);
    }

    /* Style for Ghost image cards */
    .content-article .kg-image-card {
        margin-bottom: var(--space-xl);
    }

    .content-article .kg-image {
        width: 100%;
        border-radius: var(--radius-lg);
    }

    .content-article figcaption {
        text-align: center;
        font-size: var(--text-sm);
        color: var(--text-tertiary);
        margin-top: var(--space-sm);
    }

    /* Header */
    .finder-header {
        display: flex;
        gap: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    /* Mobile View Tabs - File-tab style, attached to content pane */
    .mobile-view-tabs {
        display: none; /* Hidden on desktop */
        gap: 2px;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .mobile-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 36px; /* Fixed height - NEVER changes */
        min-height: 36px; /* Lock it down */
        max-height: 36px; /* Triple-lock it */
        padding: 0 12px; /* Horizontal only - no vertical padding that could expand */
        border: none;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: rgba(0,0,0,0.04); /* Subtle gray for inactive */
        color: var(--text-secondary);
        font-size: 14px; /* Fixed */
        font-weight: 500;
        line-height: 36px; /* Match height exactly */
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease; /* ONLY colors */
        white-space: nowrap;
        box-shadow: none;
        transform: none; /* No transforms */
    }

    .mobile-tab svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Active state - file tab attached to content */
    .mobile-tab.active {
        background: white; /* Matches content background */
        color: var(--primary-blue);
        box-shadow: 0 -2px 4px rgba(0,0,0,0.05); /* Subtle shadow above only */
    }

    /* Touch feedback - very subtle */
    .mobile-tab:not(.active):active {
        background: rgba(0,0,0,0.08);
    }

    /* Badge - fixed size */
    .list-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: var(--et-red);
        color: white;
        font-size: 11px;
        font-weight: 600;
        line-height: 18px; /* Match height */
        border-radius: 9px;
        margin-left: 4px;
    }

    .mobile-tab.active .list-count-badge {
        background: var(--primary-blue);
        color: white;
    }

    .search-bar {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-icon {
        position: absolute;
        left: var(--space-lg);
        color: var(--text-tertiary);
        pointer-events: none;
    }

    .search-bar input {
        width: 100%;
        height: 48px;
        padding: 0 48px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        font-size: var(--text-base);
        background: var(--bg-primary);
    }

    .search-bar input:focus {
        outline: none;
        border-color: var(--primary-blue);
    }

    .clear-search {
        position: absolute;
        right: var(--space-md);
        width: var(--space-2xl);
        height: var(--space-2xl);
        border: none;
        background: var(--text-tertiary);
        color: var(--bg-primary);
        border-radius: var(--radius-circle);
        font-size: var(--text-lg);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .location-btn {
        height: 48px;
        padding: 0 var(--space-xl);
        background: var(--primary-blue);
        color: var(--bg-primary);
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        white-space: nowrap;
        transition: background var(--transition-normal);
    }

    .location-btn:hover {
        background: var(--primary-blue-hover);
    }

    /* Quick Filters */
    .quick-filters {
        display: flex;
        gap: var(--space-sm);
        margin-bottom: var(--space-xl);
        flex-wrap: wrap;
    }

    .filter-btn {
        height: 36px;
        padding: 0 var(--space-lg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-pill);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-normal);
    }

    .filter-btn:hover {
        border-color: var(--primary-blue);
        color: var(--primary-blue);
    }

    .filter-btn.active {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: var(--bg-primary);
    }

    .favorites-btn {
        display: flex;
        align-items: center;
    }

    .favorites-btn svg {
        flex-shrink: 0;
    }

    .favorites-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--space-xl);
        height: var(--space-xl);
        padding: 0 var(--space-sm);
        margin-left: var(--space-sm);
        background: var(--et-red);
        color: var(--bg-primary);
        border-radius: 10px;
        font-size: var(--text-xs);
        font-weight: 600;
    }

    .favorites-btn.active .favorites-count {
        background: var(--bg-primary);
        color: var(--primary-blue);
    }

    /* Distance Filter */
    .distance-filter {
        padding: var(--space-lg) var(--space-xl);
        border-bottom: 1px solid var(--border-color);
        display: none; /* Hidden by default, shown when location active */
    }
    
    .distance-filter.active {
        display: block;
    }

    .distance-filter label {
        display: block;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: var(--space-md);
    }

    .distance-filter label svg {
        color: var(--primary-blue);
    }

    .distance-filter strong {
        color: var(--primary-blue);
        font-weight: 600;
    }

    .distance-note {
        font-size: var(--text-xs);
        color: var(--text-tertiary);
        font-weight: 400;
        margin-left: var(--space-sm);
    }

    .distance-note.hidden {
        display: none;
    }

    #distance-slider {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: linear-gradient(to right, 
            var(--primary-blue) 0%, 
            var(--primary-blue) 22.5%, 
            var(--border-color) 22.5%, 
            var(--border-color) 100%);
        outline: none;
        -webkit-appearance: none;
        margin-bottom: var(--space-sm);
        transition: opacity var(--transition-normal);
    }

    #distance-slider:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    #distance-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: var(--space-xl);
        height: var(--space-xl);
        border-radius: var(--radius-circle);
        background: var(--bg-primary);
        border: 2px solid var(--primary-blue);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }

    #distance-slider::-moz-range-thumb {
        width: var(--space-xl);
        height: var(--space-xl);
        border-radius: var(--radius-circle);
        background: var(--bg-primary);
        border: 2px solid var(--primary-blue);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }

    #distance-slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }

    #distance-slider::-moz-range-thumb:hover {
        transform: scale(1.1);
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }

    .distance-marks {
        display: flex;
        justify-content: space-between;
        font-size: var(--text-xs);
        color: var(--text-tertiary);
        padding: 0 4px;
    }

    /* Main Layout */
    .finder-main {
        display: grid;
        grid-template-columns: 500px 1fr;
        gap: var(--space-xl);
        min-height: 600px; /* Remove fixed vh height */
    }

    /* Sidebar */
    .churches-sidebar {
        background: white; /* Match active tab */
        border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* Round bottom only */
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sidebar-header {
        padding: var(--space-xl);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar-header h2 {
        font-size: var(--text-xl);
        font-weight: 600;
        margin: 0;
    }

    .results-count {
        font-size: var(--text-sm);
        color: var(--text-secondary);
    }

    .churches-list {
        flex: 1;
        overflow-y: auto;
    }

    /* Church Cards */
    .church-card {
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
        transition: all var(--transition-normal);
    }

    .church-card:hover {
        background: var(--bg-secondary);
    }

    /* Mac-like highlight animation when card is focused from map */
    @keyframes highlightCard {
        0% {
            background: var(--bg-primary);
            box-shadow: none;
        }
        20% {
            background: rgba(0, 113, 220, 0.08);
            box-shadow: 0 0 0 3px rgba(0, 113, 220, 0.15);
        }
        100% {
            background: var(--bg-primary);
            box-shadow: none;
        }
    }

    .church-card.highlight-pulse {
        animation: highlightCard 1.8s ease-out;
    }

    .church-card-summary {
        padding: var(--space-lg) 20px;
        display: flex;
        align-items: start;
        gap: var(--space-md);
    }

    .church-number {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-circle);
        background: var(--et-red);
        color: var(--bg-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-sm);
        font-weight: 600;
        flex-shrink: 0;
    }

    .church-info {
        flex: 1;
        min-width: 0;
    }

    .church-name {
        font-size: var(--text-base);
        font-weight: 600;
        margin: 0 0 4px 0;
        color: var(--text-primary);
    }

    .church-address {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.4;
    }

    .church-distance {
        font-size: var(--text-sm);
        color: var(--primary-blue);
        font-weight: 600;
        white-space: nowrap;
        margin-top: 4px;
    }

    .church-toggle {
        width: 32px;
        height: 32px;
        border: none;
        background: var(--bg-secondary);
        border-radius: var(--radius-circle);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all var(--transition-slow);
    }

    .church-toggle svg {
        width: 20px;
        height: 20px;
        transition: all var(--transition-slow);
    }

    .church-card.expanded .church-toggle svg {
        transform: rotate(180deg);
    }

    .church-details {
        max-height: 0;
        overflow: hidden;
        transition: all var(--transition-slow) ease;
    }

    .church-card.expanded .church-details {
        max-height: 1000px;
    }

    .church-details-content {
        padding: 0 20px 20px 60px;
    }

    .church-image {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: var(--radius-md);
        margin-bottom: 16px;
    }

    .detail-row {
        margin-bottom: 12px;
    }

    .detail-label {
        font-size: var(--text-xs);
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        font-weight: 600;
    }

    .detail-value {
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.5;
    }

    .detail-value a {
        color: var(--primary-blue);
        text-decoration: none;
    }

    .detail-value a:hover {
        text-decoration: underline;
    }

    /* Centre Search Button */
    .centre-search-btn {
        width: 100%;
        padding: var(--space-md) 16px;
        margin-top: 16px;
        background: var(--primary-blue);
        color: var(--bg-primary);
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-normal), transform 0.1s;
    }

    .centre-search-btn:hover {
        background: var(--primary-blue-hover);
        transform: translateY(-1px);
    }

    .centre-search-btn:active {
        transform: translateY(0);
    }

    .centre-search-btn svg {
        flex-shrink: 0;
    }

    /* Clear Filter Button */
    .clear-filter-btn {
        padding: 10px 20px;
        margin-top: 12px;
        background: var(--primary-blue);
        color: var(--bg-primary);
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-normal);
    }

    .clear-filter-btn:hover {
        background: var(--primary-blue-hover);
    }

    /* Favorite Icon (in card summary) */
    .favorite-icon {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: var(--text-tertiary);
        cursor: pointer;
        flex-shrink: 0;
        transition: all var(--transition-normal);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .favorite-icon:hover {
        color: var(--et-red);
        transform: scale(1.1);
    }

    .favorite-icon.favorited {
        color: var(--et-red);
    }

    /* Phone Link with Icon */
    .phone-link {
        color: var(--primary-blue);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .phone-link:hover {
        text-decoration: underline;
    }

    /* Action Buttons Container */
    .action-buttons {
        display: flex;
        gap: var(--space-sm);
        margin-top: 16px;
    }

    .action-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        padding: 10px 16px;
        background: var(--primary-blue);
        color: var(--bg-primary);
        text-decoration: none;
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-normal), transform 0.1s;
    }

    .action-btn:hover {
        background: var(--primary-blue-hover);
        transform: translateY(-1px);
    }

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

    .action-btn svg {
        flex-shrink: 0;
    }

    /* Nearby Header */
    .nearby-header {
        padding: var(--space-md) 20px;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .nearby-header h4 {
        margin: 0;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .church-card.nearby {
        background: rgba(255, 218, 210, 0.3);
    }

    .church-card.nearby:hover {
        background: rgba(255, 218, 210, 0.5);
    }

    /* Map Container */
    .map-container {
        position: relative;
        background: white; /* Match active tab */
        border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* Round bottom only */
        box-shadow: var(--shadow-md);
        overflow: hidden;
        z-index: auto;
    }

    #church-map {
        width: 100%;
        height: 100%;
    }

    .map-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--text-secondary);
    }

    .map-loading.hidden {
        display: none;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-color);
        border-top-color: var(--primary-blue);
        border-radius: var(--radius-circle);
        animation: spin 1s linear infinite;
        margin: 0 auto 12px;
    }

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

    /* Custom Leaflet Popup - Fixed dimensions, no state-based changes */
    .leaflet-popup-content-wrapper {
        border-radius: var(--radius-lg);
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        padding: 0;
    }

    .leaflet-popup-content {
        margin: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        font-family: inherit;
        color: inherit;
    }

    /* Override Leaflet's link styles specifically within popup content */
    .leaflet-popup-content .popup-action-btn,
    .leaflet-popup-content .popup-expand-btn {
        color: inherit;
        text-decoration: none;
    }

    .popup-wrapper {
        display: flex;
        flex-direction: column;
    }

    .popup-image {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .popup-content {
        padding: var(--space-lg);
    }

    .popup-title {
        font-size: var(--text-base);
        font-weight: 600;
        margin: 0 0 var(--space-sm) 0;
        line-height: 1.3;
        color: var(--text-primary);
    }

    .popup-contact {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--space-md) 0;
    }

    .popup-actions {
        display: flex;
        gap: var(--space-sm);
        margin-bottom: var(--space-sm);
    }

    /* Popup action buttons with high specificity to override Leaflet */
    .leaflet-popup-content .popup-action-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--primary-blue);
        color: white;
        text-decoration: none;
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition-normal);
        min-height: 36px;
    }

    .leaflet-popup-content .popup-action-btn:hover {
        background: var(--primary-blue-hover);
        color: white;
    }

    .leaflet-popup-content .popup-action-btn svg {
        flex-shrink: 0;
        stroke: white;
    }

    .leaflet-popup-content .popup-action-btn span {
        color: white;
    }

    .leaflet-popup-content .popup-expand-btn {
        width: 100%;
        padding: 10px;
        background: white;
        color: var(--primary-blue);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-normal);
    }

    .leaflet-popup-content .popup-expand-btn:hover {
        background: var(--bg-secondary);
        border-color: var(--primary-blue);
        color: var(--primary-blue);
    }

    /* Mobile-specific popup styles */
    @media (max-width: 768px) {
        .leaflet-popup-content {
            width: 260px !important;
            min-width: 260px !important;
            max-width: 260px !important;
        }

        .popup-image {
            height: 120px;
        }

        .popup-content {
            padding: var(--space-md);
        }

        .popup-title {
            font-size: var(--text-sm);
        }

        .popup-contact {
            font-size: var(--text-xs);
            margin-bottom: 10px;
        }

        .popup-action-desktop {
            display: none;
        }

        .popup-action-mobile {
            display: inline;
        }

        .popup-desktop-only {
            display: none;
        }

        .popup-action-btn {
            font-size: var(--text-sm);
            padding: 10px 12px;
            min-height: 44px; /* Touch-friendly */
        }

        .popup-expand-btn {
            font-size: var(--text-sm);
            padding: var(--space-md);
            min-height: 44px; /* Touch-friendly */
        }
    }

    /* Desktop-specific popup styles */
    @media (min-width: 769px) {
        .popup-action-desktop {
            display: inline;
        }

        .popup-action-mobile {
            display: none;
        }
    }

    /* Numbered Pin Markers */
    .numbered-marker {
        background: var(--et-red);
        color: var(--bg-primary);
        border: 3px solid white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border-radius: var(--radius-circle);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: var(--text-sm);
        transition: all var(--transition-normal);
        cursor: pointer;
    }

    .numbered-marker:hover {
        transform: scale(1.2);
        box-shadow: 0 6px 16px rgba(0,0,0,0.4);
        z-index: 1000 !important;
    }

    /* Simple Marker (unnumbered, for initial load) */
    .simple-marker {
        background: var(--et-red);
        border: 3px solid white;
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
        border-radius: var(--radius-circle);
        width: 20px;
        height: 20px;
        transition: all var(--transition-normal);
        cursor: pointer;
    }

    .simple-marker:hover {
        transform: scale(1.3);
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        z-index: 1000 !important;
    }

    @media (max-width: 1024px) {
        .finder-main {
            grid-template-columns: 1fr;
            height: auto;
        }

        .map-container {
            height: 400px;
            min-height: 400px; /* Prevent collapsing */
            order: 1;
        }

        .churches-sidebar {
            order: 2;
            height: auto;
        }
    }

    /* ===== EMPTY STATE ===== */
    .empty-state {
        padding: 40px 20px;
        text-align: center;
    }

    .empty-state-icon {
        margin: 0 auto 20px;
        opacity: 0.3;
        display: block;
    }

    .empty-state-title {
        font-size: var(--text-lg);
        font-weight: 600;
        margin: 0 0 12px 0;
        color: var(--text-primary);
    }

    .empty-state-text {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        margin: 0 0 20px 0;
        line-height: 1.6;
    }

    .empty-state-hints {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        max-width: 280px;
        margin: 0 auto;
    }

    .empty-state-hint {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--text-sm);
        color: var(--text-secondary);
    }

    .empty-state-hint svg {
        flex-shrink: 0;
    }

    /* ===== NO RESULTS STATE ===== */
    .no-results-state {
        padding: 60px 20px;
        text-align: center;
    }

    .no-results-icon {
        margin: 0 auto 16px;
        opacity: 0.2;
        display: block;
    }

    .no-results-title {
        font-size: var(--text-base);
        font-weight: 600;
        margin: 0 0 8px 0;
        color: var(--text-primary);
    }

    .no-results-suggestion {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        margin-top: 8px;
    }