{{-- #9: gentle "choose your city" hint near the header city selector. Appears after
     a delay, once, and remembers dismissal. --}}
<div x-data="{ show: false }"
     x-init="if (!localStorage.getItem('teeu_city_hint')) setTimeout(() => show = true, 25000)"
     x-show="show" x-cloak x-transition
     class="fixed left-4 top-[76px] z-40 max-w-[270px] rounded-[var(--radius-md)] bg-[var(--color-ink)] px-4 py-3 text-white shadow-[var(--shadow-frame)]">
    <div class="flex items-start gap-2">
        <i data-lucide="map-pin" class="mt-0.5 h-4 w-4 shrink-0 text-[#59A0FF]"></i>
        <div class="min-w-0">
            <div class="text-sm font-bold">Выберите город</div>
            <div class="mt-0.5 text-xs text-white/70">Укажите город — покажем точные сроки доставки.</div>
            <button type="button" @click="$store.cityModal.show(); show = false; localStorage.setItem('teeu_city_hint', '1')"
                    class="mt-2 text-xs font-bold text-[#59A0FF]">Выбрать город</button>
        </div>
        <button type="button" @click="show = false; localStorage.setItem('teeu_city_hint', '1')"
                class="ml-auto shrink-0 text-white/50 hover:text-white" aria-label="Закрыть"><i data-lucide="x" class="h-4 w-4"></i></button>
    </div>
</div>