/* Find Pyros Near Me: discovery page (/community/find-pyros) + opt-in settings form.
   Namespaced with .np- to avoid collisions; loaded globally via App.razor.

   Mirrors the .ps- admin-statistics system: calm hairline-bordered surfaces, a soft
   layered shadow, a subtle hover lift, color reserved for meaning, and figures set in
   tabular-nums. Uses MudBlazor palette variables so light and dark both work. Each
   color-mix() is preceded by a plain fallback for older engines. */

/* ---- Shared surface ---- */
.np-surface {
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

/* ---- Search / command bar ---- */
.np-search {
    padding: 16px 18px;
}

/* The ZIP field and the Search button share the first grid row. The ZIP item is taller than
   the button (MudBlazor gives a dense outlined field with a label an 8px top margin, and the
   helper text sits below the input), so centering the row put the button off the input box.
   Align the row to the top and give the button the same 8px offset as the field's label
   margin so the two 40px boxes line up (Monday 12952045239). */
.np-search .mud-grid {
    align-items: flex-start;
}

.np-radius {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.np-radius__label {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.np-radius-toggle {
    flex: 1 1 auto;
    min-width: 0;
}

.np-radius-toggle .mud-toggle-item {
    min-height: 40px;
}

.np-search__btn {
    min-height: 40px;
    /* Matches .mud-input-control-margin-dense.mud-input-outlined-with-label { margin-top: 8px }. */
    margin-top: 8px;
}

/* ---- Results header ---- */
.np-results-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 2px 2px 12px;
}

.np-results-head__count {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.np-results-head__label {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.np-results-subnote {
    margin: -6px 2px 12px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- Result card ---- */
.np-card {
    box-sizing: border-box;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    scroll-margin-top: 96px;
}

.np-card:hover {
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: 0 3px 10px rgba(16, 24, 40, 0.07);
}

.np-card--active {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-surface); /* fallback */
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    box-shadow: 0 0 0 1px var(--mud-palette-primary), 0 6px 18px rgba(16, 24, 40, 0.12);
}

.np-card__body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.np-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.np-card__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.np-card__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.np-card__name:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.np-card__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

.np-card__meta-icon {
    font-size: 1.05rem;
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.np-card__meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.np-card__bio {
    margin-top: 6px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Featured distance block: the headline signal of a "near me" page. */
.np-card__distance {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 10px;
    border-radius: 12px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback */
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
}

.np-card__distance-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.np-card__distance-unit {
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.np-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Professional badge pill. */
.np-badge-pro {
    display: inline-flex;
    align-items: center;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    color: #9a5b00;
    background: rgba(212, 129, 11, 0.16);
}

html.elevate-theme-dark .np-badge-pro {
    color: #f5b759;
    background: rgba(245, 183, 89, 0.16);
}

/* Company/store badge pill. */
.np-badge-company {
    display: inline-flex;
    align-items: center;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    color: #1f6b46;
    background: rgba(46, 125, 82, 0.16);
}

html.elevate-theme-dark .np-badge-company {
    color: #6fcf97;
    background: rgba(111, 207, 151, 0.16);
}

/* ---- Map panel ---- */
.np-map-sticky {
    position: sticky;
    top: 80px;
}

.np-map {
    overflow: hidden;
    padding: 0;
}

.np-map__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.np-map__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.np-map__legend {
    display: flex;
    align-items: center;
    gap: 14px;
}

.np-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.np-pin {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff; /* matches the white ring on the Leaflet markers in both themes */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex: 0 0 auto;
}

.np-pin--pro { background: #d4810b; }
.np-pin--reg { background: #1d6fb8; }
.np-pin--company { background: #2e7d52; }

.np-map__canvas {
    position: relative;
    width: 100%;
    height: min(64vh, 540px);
    min-height: 360px;
}

.np-map__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: var(--mud-palette-surface);
}

/* ---- Initial / empty / error state ---- */
.np-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
}

.np-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 16px;
    color: var(--mud-palette-tertiary);
    background: var(--mud-palette-action-default-hover); /* fallback */
    background: color-mix(in srgb, var(--mud-palette-tertiary) 12%, transparent);
}

.np-empty__icon--error {
    color: var(--mud-palette-error);
    background: var(--mud-palette-action-default-hover); /* fallback */
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.np-empty__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.np-empty__text {
    margin-top: 6px;
    max-width: 360px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.np-empty__action {
    margin-top: 16px;
}

/* ---- Opt-in settings form ---- */
.np-settings {
    padding: 24px;
}

.np-settings__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.np-settings__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--mud-palette-secondary);
    background: var(--mud-palette-action-default-hover); /* fallback */
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
}

.np-settings__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.np-settings__sub {
    max-width: 580px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.np-settings__confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.8rem;
}

.np-settings__confirm--ok { color: var(--mud-palette-success); }
.np-settings__confirm--error { color: var(--mud-palette-error); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .np-search { padding: 14px; }

    /* The map is sticky on desktop, but in the single-column mobile layout it would pin to the top
       and eat half the viewport while the list scrolls under it, so let it scroll normally. */
    .np-map-sticky { position: static; }

    .np-map__canvas { height: min(46vh, 380px); min-height: 300px; }
    .np-map__legend { gap: 10px; }
    .np-card__distance { min-width: 50px; padding: 6px 8px; }
    .np-card__distance-value { font-size: 1.2rem; }
    .np-settings { padding: 18px; }

    /* Comfortable touch targets (>=44px) for the radius toggle and the locate adornment. */
    .np-radius-toggle .mud-toggle-item { min-height: 44px; }
    .np-search .mud-input-adornment button { min-width: 44px; min-height: 44px; }
}