html, body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
}

.centers-map {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
}

.map-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.map-marker-user {
    background: #2563eb;
    width: 16px;
    height: 16px;
}

.map-marker-partner {
    background: #1B6B45;
    width: 18px;
    height: 18px;
    border: 3px solid #F4E9C0;
    box-shadow: 0 0 0 2px #1B6B45, 0 2px 6px rgba(0, 0, 0, 0.35);
}

.map-marker-external {
    background: #64748b;
}

.results-panel {
    min-height: 420px;
}

.partner-grid-row {
    background-color: #fffbeb !important;
}

.partner-grid-row:hover {
    background-color: #fef3c7 !important;
}

.map-panel,
.grid-panel {
    height: 100%;
    min-height: 480px;
}

.map-legend-partner {
    color: #1B6B45;
    font-weight: 600;
}

.map-legend-external {
    color: #64748b;
}

.search-by-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.search-by-name-field {
    flex: 1 1 auto;
    min-width: 0;
}

.search-name-icon-btn {
    flex: 0 0 auto;
}

.search-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 960px) {
    .search-panels {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

@media (max-width: 599px) {
    .search-location-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .search-location-actions .mud-button-root {
        width: 100%;
    }
}

@media (max-width: 960px) {
    .centers-map {
        min-height: 360px;
    }

    .map-panel,
    .grid-panel {
        min-height: auto;
    }
}

/* ---------- SEEK-style hero search ---------- */
.hero {
    background: linear-gradient(160deg, #A8D5B5 0%, #D9ECE0 100%);
    padding: 3.75rem 0 2.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.seekinx-dark .hero {
    background: linear-gradient(135deg, #0F3325 0%, #06120D 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Vertically centers an auth card in the space below the app bar.
   Uses min-height + auto margins so taller forms (e.g. partner sign-up)
   simply scroll instead of being clipped at the top. */
.auth-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
    padding: 1.5rem 0;
}

/* Column flex + auto margins centre the card vertically when it fits, but
   collapse to the top (with the padding above) when the form is taller than
   the viewport, so the card's top edge stays visible and scrolls normally. */
.auth-page > .mud-container {
    margin: auto;
}

/* Long forms (e.g. partner sign-up) are taller than the viewport, so vertical
   centring hides the top behind the app bar. Pin them to the top instead. */
.auth-page.auth-page--top {
    justify-content: flex-start;
    padding-top: 5rem;
}

.auth-page.auth-page--top > .mud-container {
    margin-top: 0;
    margin-bottom: auto;
}

/* Clear fixed app bar (64px) so page titles are not hidden underneath. */
.main-content-area {
    padding-top: 4.5rem;
}

/* Legal / contact pages only need bottom breathing room once main-content-area is set. */
.legal-page {
    padding-bottom: 2rem;
}

.hero-title {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: #14502F;
}

/* The router's FocusOnNavigate sets focus on the first <h1> after every
   navigation (including a culture switch), which makes the browser draw a
   focus outline around the hero title. The heading is not interactive, so
   suppress that visible outline. */
.hero-title:focus,
.hero-title:focus-visible {
    outline: none;
}

.hero-subtitle {
    margin: 0 auto 1.75rem;
    font-size: 1.05rem;
    color: #2E4A3B;
    max-width: 640px;
}

body.seekinx-dark .hero-title {
    color: #ffffff;
}

body.seekinx-dark .hero-subtitle {
    color: #F4E9C0;
}

.hero-search {
    max-width: 940px;
    margin: 0 auto;
    padding: 0.35rem 0.4rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    text-align: left;
}

.hero-search-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 60px;
}

.hero-search-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0.75rem;
}

.hero-search-icon {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.hero-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary);
    padding: 0.9rem 0;
}

.hero-input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.9;
}

.hero-search-sep {
    width: 1px;
    align-self: stretch;
    margin: 0.6rem 0;
    background: var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.hero-search-btn {
    flex: 0 0 auto;
    border-radius: 10px;
    height: 48px;
    padding-inline: 1.75rem;
}

.hero-search-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem 0.4rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 0.15rem;
}

.hero-search-radius {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.hero-select {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    cursor: pointer;
}

.hero-radius-field {
    width: 5rem;
    flex-shrink: 0;
}

.hero-radius-field .mud-input-root {
    font-size: 0.875rem;
}

.hero-radius-field .mud-input-slot input {
    text-align: center;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.hero-radius-presets {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.25rem;
}

.hero-radius-preset {
    border: none;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hero-radius-preset:hover,
.hero-radius-preset-active {
    background: rgba(27, 107, 69, 0.12);
    text-decoration: none;
    font-weight: 600;
}

body.seekinx-dark .hero-radius-preset:hover,
body.seekinx-dark .hero-radius-preset-active {
    background: rgba(244, 233, 192, 0.15);
}

.specialization-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.specialization-tag.mud-chip {
    font-size: 0.75rem;
}

.specialization-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.specialization-picker-chip.mud-chip {
    cursor: pointer;
}

.specialization-picker-chip-active.mud-chip {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-color: var(--mud-palette-primary) !important;
}

.enrollment-upload {
    position: relative;
    display: inline-block;
    margin-top: 0.35rem;
}

.enrollment-upload-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.enrollment-upload-label {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.enrollment-upload-label:hover {
    background: rgba(27, 107, 69, 0.08);
}

.enrollment-upload-label.disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.hero-chip.mud-chip {
    color: #14502F !important;
    border-color: rgba(20, 80, 47, 0.45) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.hero-chip.hero-chip-active.mud-chip {
    background: #1B6B45 !important;
    color: #ffffff !important;
    border-color: #1B6B45 !important;
    font-weight: 600;
}

body.seekinx-dark .hero-chip.mud-chip {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.seekinx-dark .hero-chip.hero-chip-active.mud-chip {
    background: #F4E9C0 !important;
    color: #1B6B45 !important;
    border-color: #F4E9C0 !important;
}

@media (max-width: 599px) {
    .hero-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-search-sep {
        display: none;
    }

    .hero-search-field {
        padding: 0.1rem 0.75rem;
    }

    .hero-search-btn {
        width: 100%;
    }
}

/* Logo variants that swap with the active theme */
.brand-logo-dark {
    display: none;
}

body.seekinx-dark .brand-logo-light {
    display: none;
}

body.seekinx-dark .brand-logo-dark {
    display: inline-block;
}

/* ---------- SEEK-style result cards ---------- */
.results-header {
    margin-bottom: 0.75rem;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 1280px) {
    .results-list {
        max-height: 70vh;
        overflow-y: auto;
        padding-right: 0.25rem;
    }
}

.result-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.result-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.result-card-partner {
    border-left: 4px solid var(--mud-palette-primary);
    background: rgba(168, 213, 181, 0.10);
}

.result-card-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.result-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.result-card-titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.result-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.result-card-badge {
    height: 22px;
}

.result-card-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.result-card-dot {
    margin: 0 0.15rem;
}

.result-card-address {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.result-card-source {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
}

.result-card-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.result-card-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    text-align: right;
}

.result-card-rating-text {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.results-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mud-palette-text-secondary);
}

.results-placeholder-icon {
    color: var(--mud-palette-primary);
    margin-bottom: 0.5rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-form .mud-input-control {
    margin-top: 0;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.125rem;
}

.auth-form .auth-checkbox {
    margin: 0;
}

.auth-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 1rem;
}

.auth-input:focus {
    outline: 2px solid #1e40af;
    border-color: #1e40af;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    font-size: 0.875rem;
}

.notification-unread {
    background-color: rgba(27, 107, 69, 0.08);
}

.review-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 320px;
    white-space: normal;
}

/* MudBlazor renders some Typo variants as inline spans; force the message onto its
   own line and let it wrap so it is always visible. */
.notification-message {
    display: block;
    white-space: normal;
    word-break: break-word;
}

/* Make the main content fill at least the viewport height so the footer
   can be pushed to the bottom on short pages (e.g. the home search page)
   instead of floating in the middle. */
.mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

.site-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: auto;
}

/* ---- Partner media editor ---- */
.media-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.media-upload-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.6rem 1.1rem;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 8px;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.media-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

.media-thumb img,
.media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.5rem;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.media-thumb-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.85);
}

/* ---- Center details: tagline, gallery, video ---- */
.center-tagline {
    font-weight: 500;
    color: var(--mud-palette-primary);
}

.center-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.center-gallery-item {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
}

.center-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.center-gallery-item:hover img {
    transform: scale(1.04);
}

.center-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.center-video iframe,
.center-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}