.orbit-trainer-map, .orbit-trainer-map *, .orbit-trainer-map *::before, .orbit-trainer-map *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .orbit-trainer-map {
            font-size: 16px;
            --orbit-accent: var(--wp--preset--color--primary, #3b82f6);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            color: #1e293b;
            line-height: 1.6;
        }

        .orbit-container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 2em;
        }

        header {
            text-align: center;
            margin-bottom: 2em;
        }

        h1 {
            font-size: 2em;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 0.5em;
        }

        .subtitle {
            color: #64748b;
            font-size: 1em;
        }

        /* Filter Buttons */
        .filters {
            display: flex;
            justify-content: center;
            gap: 0.75em;
            /* No margin-bottom: filters are a grid child of .results-layout,
               so the grid gap handles separation from filter-chips below. */
            flex-wrap: wrap;
        }

        /* Map Container */
        .map-section {
            background: white;
            border-radius: 1em;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
            padding: 1.5em;
            /* No margin-bottom: grid gap on .results-layout spaces the map
               from the filter bar beneath it. */
        }

        .map-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1em;
            flex-wrap: wrap;
            gap: 1em;
        }

        .map-title {
            font-size: 1.125em;
            font-weight: 600;
            color: #0f172a;
        }

        .selected-county {
            display: flex;
            align-items: center;
            gap: 0.5em;
        }

        .selected-label {
            font-size: 0.875em;
            color: #64748b;
        }

        .county-badge {
            background: #dbeafe;
            color: #1d4ed8;
            padding: 0.25em 0.75em;
            border-radius: 9999px;
            font-size: 0.875em;
            font-weight: 500;
        }

        .clear-btn {
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            font-size: 1.25em;
            line-height: 1;
            padding: 0.25em;
        }

        .clear-btn:hover {
            color: #64748b;
        }

        #map {
            width: 100%;
            height: 500px;
        }

        .county {
            stroke: #fff;
            stroke-width: 1px;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        .county:hover {
            opacity: 0.8;
        }

        .county.selected {
            stroke: #f97316;
            stroke-width: 4px;
            filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.7));
        }

        /* Tooltip */
        .orbit-tooltip {
            position: fixed;
            background: #0f172a;
            color: white;
            padding: 0.5em 0.75em;
            border-radius: 0.5em;
            font-size: 0.875em;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 100;
            white-space: nowrap;
        }

        .tooltip-county {
            font-weight: 600;
        }

        .tooltip-count {
            color: #94a3b8;
        }

        /* Legend */
        .legend {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.5em;
            margin-top: 1em;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5em;
            font-size: 0.875em;
            color: #64748b;
        }

        .legend-color {
            width: 1em;
            height: 1em;
            border-radius: 0.25em;
        }

        .map-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1em;
            flex-wrap: wrap;
            gap: 1em;
        }

        .statewide-btn {
            padding: 0.625em 1.25em;
            border: 2px solid #10b981;
            background: white;
            border-radius: 9999px;
            font-size: 0.875em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #10b981;
        }

        .statewide-btn:hover {
            background: #ecfdf5;
        }

        .statewide-btn.active {
            background: #10b981;
            color: white;
        }

        /* Stats */
        .stats {
            display: flex;
            justify-content: center;
            gap: 2em;
            margin-bottom: 1.5em;
            flex-wrap: wrap;
        }

        .stat {
            text-align: center;
        }

        .stat-value {
            font-size: 1.5em;
            font-weight: 700;
            color: var(--orbit-accent, #3b82f6);
        }

        .stat-label {
            font-size: 0.875em;
            color: #64748b;
        }

        /* Trainer Grid */
        .trainers-section {
            /* No margin-top: grid gap on .results-layout handles separation
               from the filter-chips / filters row above. */
            /* Breathing room under WP admin bar / theme sticky headers
               when the map-click handler smooth-scrolls here. */
            scroll-margin-top: 80px;
        }

        .trainers-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1em;
            flex-wrap: wrap;
            gap: 0.5em;
        }

        .trainers-title {
            font-size: 1.25em;
            font-weight: 600;
            color: #0f172a;
        }

        .trainers-count {
            color: #0f172a;
            font-size: 1.25em;
        }

        .trainer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1em;
        }

        .trainer-card {
            background: white;
            border-radius: 0.75em;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            padding: 1.25em;
            transition: box-shadow 0.2s ease, transform 0.35s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s ease;
        }

        .trainer-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        .trainer-name {
            font-size: 1em;
            font-weight: 600;
            color: #0f172a;
            margin-bottom: 0.25em;
        }

        .trainer-org {
            font-size: 0.875em;
            color: #64748b;
            margin-bottom: 0.75em;
        }

        .trainer-badges {
            display: flex;
            gap: 0.5em;
            flex-wrap: wrap;
            margin-bottom: 0.75em;
        }

        .orbit-badge {
            padding: 0.25em 0.5em;
            border-radius: 0.375em;
            font-size: 0.75em;
            font-weight: 500;
        }

        .badge-program {
            background: #dcfce7;
            color: #166534;
        }

        .badge-specialty {
            background: #fef3c7;
            color: #92400e;
        }

        .badge-statewide {
            background: #f3e8ff;
            color: #7c3aed;
        }

        .badge-lead {
            background: #fde68a;
            color: #78350f;
            border: 1px solid #f59e0b;
        }

        .pill {
            display: inline-block;
            padding: 0.15em 0.5em;
            border-radius: 999px;
            font-size: 0.7em;
            font-weight: 500;
            border: 1px solid transparent;
        }

        .pill-in-person {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }

        .pill-virtual {
            background: #f0fdf4;
            color: #166534;
            border-color: #bbf7d0;
        }

        .pill-blended {
            background: #fdf4ff;
            color: #86198f;
            border-color: #f5d0fe;
        }

        .trainer-modalities {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25em;
            margin-bottom: 0.5em;
        }

        .trainer-job-title {
            font-size: 0.8em;
            color: #475569;
            margin-bottom: 0.5em;
            font-style: italic;
        }

        .trainer-website {
            font-size: 0.875em;
            color: var(--orbit-accent, #3b82f6);
            text-decoration: none;
            word-break: break-all;
        }

        .trainer-website:hover {
            text-decoration: underline;
        }

        .filter-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.5em;
            margin-bottom: 0.75em;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 0.5em;
        }

        .filter-label {
            font-size: 0.875em;
            font-weight: 600;
            color: #475569;
            white-space: nowrap;
        }

        .filter-select {
            padding: 0.4em 0.75em;
            border-radius: 0.375em;
            border: 1px solid #cbd5e1;
            background: white;
            font-size: 0.875em;
            color: #1e293b;
            cursor: pointer;
        }

        .filter-select:focus {
            outline: none;
            border-color: var(--orbit-accent, #3b82f6);
        }

        .filter-search {
            padding: 0.4em 0.75em;
            border-radius: 0.375em;
            border: 1px solid #cbd5e1;
            background: white;
            font-size: 0.875em;
            color: #1e293b;
            min-width: 240px;
        }

        .filter-search:focus {
            outline: none;
            border-color: var(--orbit-accent, #3b82f6);
        }

        .filter-reset {
            padding: 0.4em 0.9em;
            border-radius: 0.375em;
            border: 1px solid #cbd5e1;
            background: white;
            font-size: 0.875em;
            color: #475569;
            cursor: pointer;
            transition: border-color 0.15s ease, color 0.15s ease;
        }

        .filter-reset:hover {
            border-color: #ef4444;
            color: #ef4444;
        }

        /* Theme button rules frequently override generic resets. Scope high
           and use !important on the properties most likely to be clobbered
           (background, border, padding, display, width, text decoration).
           The accent color is driven by a CSS custom property so the host
           site's theme color (via Settings → Appearance) can flow through. */
        .orbit-trainer-map .trainer-email-btn,
        .orbit-trainer-map button.trainer-email-btn {
            -webkit-appearance: none !important;
            appearance: none !important;
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            color: var(--orbit-accent, #3b82f6) !important;
            cursor: pointer;
            display: inline !important;
            font: inherit !important;
            font-size: 0.875em !important;
            letter-spacing: normal !important;
            line-height: inherit !important;
            margin: 0 !important;
            padding: 0 !important;
            text-align: left !important;
            text-decoration: none !important;
            text-transform: none !important;
            width: auto !important;
        }

        .orbit-trainer-map .trainer-email-btn:hover {
            text-decoration: underline !important;
        }

        .trainer-counties {
            font-size: 0.8em;
            color: #64748b;
            margin-bottom: 0.75em;
        }

        .trainer-contact {
            display: flex;
            flex-direction: column;
            gap: 0.25em;
        }

        .trainer-email {
            font-size: 0.875em;
            color: var(--orbit-accent, #3b82f6);
            text-decoration: none;
        }

        .trainer-email:hover {
            text-decoration: underline;
        }

        .trainer-phone {
            font-size: 0.875em;
            color: #64748b;
        }

        .no-trainers {
            text-align: center;
            padding: 3em;
            color: #64748b;
            grid-column: 1 / -1;
        }

        /* Loading state */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
            color: #64748b;
        }

        @media (max-width: 768px) {
            .orbit-container {
                padding: 1em;
            }

            h1 {
                font-size: 1.5em;
            }

            #map {
                height: 350px;
            }

            .filters {
                gap: 0.5em;
            }

            .trainer-grid {
                grid-template-columns: 1fr;
            }
        }
    
        /* __RESULTS_LAYOUT_BEGIN__ */
        /* Container queries let the plugin respond to the WP theme's actual
           rendered width instead of the viewport — critical when a theme
           wraps the shortcode in a max-width container narrower than the
           window. All layout breakpoints below are @container, not @media. */
        .orbit-trainer-map {
            container-type: inline-size;
            container-name: orbit;
        }

        .results-layout {
            display: grid;
            /* Stacked layout: map full-width on top, filters, chips, and
               trainer grid below. Grid gap is the ONLY vertical spacing
               between these four children — margins on .filters,
               .filter-chips, and .trainers-section are zeroed below so
               we don't double up. */
            grid-template-columns: 1fr;
            gap: 1.25em;
        }

        .results-layout #map {
            min-height: 520px;
        }

        .orbit-trainer-map .results-layout .trainer-grid {
            /* Full-width pane — match the prototype's default 320px card
               min-width instead of the 220px tuned for the old side pane.
               !important to fight theme grid resets. */
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
            gap: 1em !important;
        }

        /* Below 640px, dial the map back so it doesn't eat the viewport
           before the user sees any trainer cards. */
        @container orbit (max-width: 639px) {
            .results-layout #map {
                min-height: 360px;
            }
        }

        .stats-prose {
            display: none;
        }

        /* Filters go full-stack when the plugin's own width (not the
           viewport) drops below 900px — dropdowns, search, and reset
           all span the row when there isn't room for them side by side. */
        @container orbit (max-width: 899px) {
            .filter-row {
                flex-direction: column;
                align-items: stretch;
                gap: 0.75em;
            }
            .filter-group {
                width: 100%;
            }
            .filter-group .filter-select,
            .filter-group .filter-search {
                flex: 1;
                min-width: 0;
                width: 100%;
            }
            .filter-reset {
                width: 100%;
            }
        }

        .filter-chips {
            display: none;
            flex-wrap: wrap;
            gap: 0.5em;
            justify-content: center;
            /* No margin: .results-layout's grid gap handles separation. */
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            padding: 0.3em 0.65em;
            border-radius: 999px;
            border: 1px solid #cbd5e1;
            background: #f8fafc;
            color: #334155;
            font-size: 0.8em;
            cursor: pointer;
            font-family: inherit;
            transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
        }

        .filter-chip:hover {
            border-color: #ef4444;
            color: #b91c1c;
            background: #fef2f2;
        }

        .filter-chip-x {
            font-size: 1em;
            line-height: 1;
            font-weight: 700;
            opacity: 0.7;
        }

        .no-trainers-reset {
            margin-top: 1em;
            padding: 0.5em 1em;
            border-radius: 0.375em;
            border: 1px solid #cbd5e1;
            background: white;
            color: #475569;
            font-size: 0.875em;
            cursor: pointer;
            font-family: inherit;
        }

        .no-trainers-reset:hover {
            border-color: var(--orbit-accent, #3b82f6);
            color: var(--orbit-accent, #3b82f6);
        }

        @media (max-width: 640px) {
            .stats {
                display: none;
            }
            .stats-prose {
                display: block;
                text-align: center;
                font-size: 1em;
                color: #475569;
                line-height: 1.6;
                margin-bottom: 1.5em;
                padding: 0 0.5em;
            }
            .stats-prose strong {
                color: var(--orbit-accent, #3b82f6);
                font-weight: 700;
            }
        }
        /* __RESULTS_LAYOUT_END__ */