/* =========================================================================
   GLOBAL HEADER SEARCH LOCATOR
   Moved out of the home hero into the site header (base.html nav). Compact
   pill sized to sit between the logo and the account actions. Behaviour:
   /static/js/locator.js. Data: eventservice.context_processors.search_locator.
   ========================================================================= */

.locator-form { position:relative; flex:1 1 auto; max-width:760px; min-width:0; margin:0 18px; }

.search-bar {
  display:flex; align-items:stretch; background:#fff;
  border:1px solid #dddddd; border-radius:999px; padding:0.3rem;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.08);
}
.search-bar .locator-field {
  display:flex; flex-direction:column; justify-content:center; gap:0.1rem;
  flex:1 1 0; min-width:0; padding:0.35rem 0.9rem; border-radius:999px;
  cursor:pointer; transition:background .2s, box-shadow .2s;
}
.search-bar .locator-field:hover { background:#f7f7f7; }
.search-bar .locator-field:focus-within { background:#f7f7f7; box-shadow:inset 0 0 0 1.5px rgba(255,56,92,.30); }
.search-bar .locator-field-grow { flex:1.3 1 0; }

.locator-label {
  display:inline-flex; align-items:center; gap:0.3rem; color:var(--hof);
  font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
}
.locator-label svg { color:var(--accent); opacity:.9; width:12px; height:12px; }

.search-bar select,
.search-bar input[type="text"] {
  width:100%; background:transparent; border:none; padding:0; color:var(--hof);
  font-family:inherit; font-size:0.82rem; font-weight:600; outline:none;
  cursor:pointer; text-overflow:ellipsis;
}
.search-bar select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FF385C' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:8px; padding-right:0.9rem;
}
.search-bar select option { background:#fff; color:var(--hof); font-size:0.9rem; }
.search-bar input[type="text"]::placeholder { color:var(--foggy-light); }

.search-divider { flex:0 0 auto; align-self:center; width:1px; height:28px; background:#ebebeb; }

.locator-input-group { display:flex; align-items:center; }
.locator-input-group > select,
.locator-input-group > input[type="text"] { flex:1; min-width:0; }

.locator-submit {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  flex:0 0 auto; margin-left:0.3rem; padding:0 1.05rem; min-height:44px;
  font-family:inherit; font-size:0.82rem; font-weight:700;
  background:var(--accent); color:#fff; border:none; border-radius:999px;
  cursor:pointer; white-space:nowrap; transition:background .2s, transform .15s;
}
.locator-submit:hover { background:var(--accent-dark); transform:translateY(-1px); }
.locator-submit span { display:none; }                 /* icon-only when tight */
@media (min-width:1180px) { .locator-submit span { display:inline; } }

.search-bar .locator-geo-btn { flex:0 0 auto; margin-left:0.25rem; }
.locator-geo-btn {
  display:inline-flex; align-items:center; gap:0.35rem; background:#FFF0F2;
  color:var(--accent-dark); border:1.5px solid #FFD4DB; border-radius:999px;
  padding:0 0.85rem; min-height:44px; font-family:inherit; font-size:0.78rem;
  font-weight:700; cursor:pointer; white-space:nowrap; transition:background .2s, transform .15s;
}
.locator-geo-btn:hover { background:#FFE0E5; transform:translateY(-1px); }
.locator-geo-btn.is-loading { opacity:.7; cursor:wait; }
.locator-geo-btn span { display:none; }
@media (min-width:1320px) { .locator-geo-btn span { display:inline; } }

/* Status floats below the bar so it never changes the header height. */
.locator-status {
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:1001; margin:0;
  padding:0.6rem 0.9rem; border-radius:12px; font-size:0.8rem;
  background:#E8F7EE; color:#1F7A3D; border:1px solid rgba(40,167,69,.25);
  display:flex; align-items:flex-start; gap:0.4rem; box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.locator-status[hidden] { display:none; }
.locator-status.is-error { background:#FDECEE; color:#B22232; border-color:rgba(178,34,50,.25); }
.locator-status::before { content:'✓'; font-weight:800; flex-shrink:0; }
.locator-status.is-error::before { content:'!'; }

/* ── Pre-permission modal (global) ─────────────────────────────────────── */
.geo-modal { position:fixed; inset:0; background:rgba(34,34,34,.55); z-index:2000; display:flex; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(4px); }
.geo-modal[hidden] { display:none; }
.geo-modal-card { background:#fff; border:1px solid #ebebeb; border-radius:20px; padding:2rem 1.75rem; max-width:420px; width:100%; text-align:center; color:var(--hof); box-shadow:0 25px 60px rgba(0,0,0,.30); animation:geoModalIn .25s ease; }
@keyframes geoModalIn { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
.geo-modal-icon { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#FFD4DB,#FFB0BC); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 1rem; }
.geo-modal-card h3 { font-size:1.4rem; font-weight:700; color:var(--hof); margin-bottom:.5rem; }
.geo-modal-card p { color:var(--foggy); font-size:.92rem; line-height:1.55; margin-bottom:1.5rem; }
.geo-modal-actions { display:flex; gap:.65rem; justify-content:center; flex-wrap:wrap; }
.btn-outline-light { padding:.7rem 1.3rem; border-radius:10px; background:#fff; border:1.5px solid #ddd; color:var(--hof); font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s; }
.btn-outline-light:hover { background:var(--snow); border-color:var(--hof); }
.geo-modal .btn-gold { background:var(--accent); color:#fff; padding:.7rem 1.3rem; border-radius:10px; border:none; font-family:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }
.geo-modal .btn-gold:hover { background:var(--accent-dark); }

/* Tablet (769–1024px): the search stays inline in the top row; it just gets
   the space freed up by the hidden "List your business" label / wordmark. */
@media (max-width:1024px) { .locator-form { max-width:560px; margin:0 12px; } }

/* Mobile (≤768px): the search drops to its own full-width row beneath the
   logo (it wraps because .nav-top is flex-wrap:wrap and the form takes 100%).
   The bar itself wraps into two tidy rows — the three fields, then the two
   buttons — so nothing overflows on a ~360px screen. Labels are hidden; the
   select values ("All categories", "Bihar", …) carry the meaning. */
@media (max-width:768px) {
  .locator-form { width:100%; max-width:none; margin:4px 0 0; min-width:0; }   /* grid-area:search set in base.html */
  /* CSS grid with minmax(0,1fr) tracks → columns always shrink to fit, so the
     three selects can never overflow a narrow screen. Row 1: the 3 fields.
     Row 2: Find Vendors (2 cols) + Near me (1 col). */
  .search-bar { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; padding:0.3rem; border-radius:18px; box-shadow:0 1px 6px rgba(0,0,0,.08); }
  .locator-label { display:none; }
  .search-divider { display:none; }
  .search-bar .locator-field { min-width:0; background:#f7f7f7; border-radius:12px; padding:0.5rem 0.5rem; }
  .search-bar select, .search-bar input[type="text"] { min-width:0; }
  .locator-input-group { min-width:0; }
  .locator-submit { grid-column:1 / 3; margin-left:0; min-height:46px; border-radius:12px; }
  .locator-submit span { display:inline; }
  .search-bar .locator-geo-btn { grid-column:3 / 4; margin-left:0; min-height:46px; border-radius:12px; justify-content:center; padding:0; }
  .locator-geo-btn span { display:none; }       /* icon-only — it's a narrow cell */
  .locator-status { font-size:0.78rem; }
}