/* /my-place chooser styles. Self-contained .mp-* namespace. Loaded only
   on /my-place and /contact (and PlaceHome for the SetAsMyPlaceButton +
   FeedbackForm components) via <link> in those pages' <HeadContent>.

   Layout pattern: store-finder (Home Depot / Lowe's). One mode at a time.
     - Optional "current pick" strip at top
     - Single search input
     - Inline result cards with explicit "Set as my place" buttons
*/

/* ── Page shell ──────────────────────────────────────────────────────── */

.mp {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ── Current-pick strip (shown when cookie is set) ───────────────────── */

.mp-current {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-md);
    background: var(--color-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.mp-current__icon {
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.mp-current__label {
    flex: 1 1 auto;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    min-width: 0;
}

.mp-current__label strong {
    color: var(--color-primary-dark);
}

.mp-current__cta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ── Mini buttons (used in current strip + result cards) ─────────────── */

.mp-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.mp-mini--primary {
    background: var(--color-primary);
    color: #fff;
}

.mp-mini--primary:hover {
    background: var(--color-primary-dark);
}

.mp-mini--ghost {
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.mp-mini--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.mp-mini:active {
    transform: scale(0.98);
}

/* ── Heading block ───────────────────────────────────────────────────── */

.mp-head {
    text-align: center;
    padding: var(--space-2xl) 0 var(--space-lg);
}

.mp-head__h {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.mp-head__sub {
    font-size: var(--text-base);
    margin: 0;
}

/* ── Search form ─────────────────────────────────────────────────────── */

.mp-search {
    margin: 0 auto var(--space-lg);
    max-width: 36rem;
}

.mp-search__row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}

/* Positioning context for the icon - the icon sits inside the input
   visually via padding-left + absolute positioning. Wrapping in this
   field div instead of the row keeps the icon attached to the input
   even when the row goes flex-direction: column on mobile. */
.mp-search__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.mp-search__icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.mp-search__input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.5rem;
    font-size: var(--text-base);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    box-shadow: var(--shadow-sm);
}

.mp-search__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.mp-search__submit {
    padding: 0 1.5rem;
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 120ms ease;
    white-space: nowrap;
}

.mp-search__submit:hover {
    background: var(--color-primary-dark);
}

.mp-search__alts {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.mp-search__alt {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: border-color 120ms ease, color 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mp-search__alt:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Empty state ─────────────────────────────────────────────────────── */

.mp-empty {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--color-text-secondary);
}

.mp-empty__h {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
}

/* ── Results list ────────────────────────────────────────────────────── */

.mp-results__h {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--space-lg) 0 var(--space-md);
}

.mp-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mp-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mp-result:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.mp-result--current {
    background: var(--color-accent-light);
    border-color: #a7f3d0;
}

.mp-result__head {
    flex: 1 1 auto;
    min-width: 0;
}

.mp-result__h {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mp-result__tag {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #d1fae5;
    color: #065f46;
    padding: 1px 8px;
    border-radius: 4px;
}

/* Variant for "Not indexed yet" pill on Census-only fallback cards. Neutral
   grey so it reads as informational, not a positive signal like the green
   "currently set" tag. */
.mp-result__tag--unindexed {
    background: var(--color-bg-muted, #f3f4f6);
    color: var(--color-text-muted, #6b7280);
    border: 1px solid var(--color-border, #e5e7eb);
}

.mp-result__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.mp-result__cta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.mp-result__cta form { margin: 0; display: inline-flex; }

/* ── "Set as my place" button (PlaceHome header CTA) ──────────────────── */

.set-as-my-place-form {
    margin: 0;
    display: inline-flex;
    /* The place-header title row is `align-items: baseline`. A <form> flex
       item baseline-synthesizes from its bottom edge while the bare
       --current <span> / SaveButton's <a> align by text baseline, so the
       two CTAs never lined up (off by ~2px+, worse in the current/saved
       combo). Pin every control variant to center so alignment no longer
       depends on box type. Keep in lockstep with .save-button-form /
       .save-button--anon. */
    align-self: center;
}

.set-as-my-place {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md);
    line-height: 1.2;
    white-space: nowrap;
}

.set-as-my-place--btn {
    background: var(--color-bg-card);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}

.set-as-my-place--btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.set-as-my-place--btn:active { transform: scale(0.98); }

.set-as-my-place--current {
    background: var(--color-accent-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
    cursor: default;
    /* Bare <span> flex item - center it like the form variants (see
       .set-as-my-place-form note) so "Your place" lines up with "Saved". */
    align-self: center;
}

/* ── Feedback form (Contact page + inline embeds) ─────────────────────── */

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.feedback-form__intro { margin: 0; line-height: var(--leading-relaxed); }

.feedback-form__label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.feedback-form__caption {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.feedback-form__input,
.feedback-form__textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: var(--text-base);
    font-family: var(--font-sans);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.feedback-form__textarea {
    resize: vertical;
    min-height: 6rem;
    line-height: var(--leading-normal);
}

.feedback-form__input:focus,
.feedback-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.feedback-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.feedback-form__submit {
    padding: 0.6rem 1.25rem;
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.feedback-form__submit:hover { background: var(--color-primary-dark); }

.feedback-form__assure { font-size: var(--text-xs); }

/* ── /contact page shell ──────────────────────────────────────────────── */

.contact-shell {
    max-width: 36rem;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.contact-hero {
    text-align: center;
    padding: var(--space-2xl) 0 var(--space-xl);
}

.contact-hero__h {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    letter-spacing: -0.02em;
}

.contact-hero__sub {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.contact-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.contact-back {
    text-align: center;
    margin-top: var(--space-xl);
    font-size: var(--text-sm);
}

/* ── Mobile tweaks ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .mp-search__row { flex-direction: column; }
    .mp-search__submit { padding: 0.85rem 1rem; }
    .mp-result { flex-direction: column; align-items: stretch; }
    .mp-result__cta { justify-content: stretch; }
    .mp-result__cta .mp-mini { flex: 1 1 auto; justify-content: center; }
    .mp-current { flex-direction: column; align-items: stretch; text-align: center; }
    .mp-current__cta { justify-content: center; }
}