/*
 * LIVEROK — barre « vous êtes où ? » affichée aux visiteurs sans compte.
 *
 * Elle doit se voir immédiatement sans ressembler à une publicité : un encadré large, une seule question, un seul
 * champ. La promesse « pas besoin de compte pour regarder » est en gras parce que c'est elle qui lève l'hésitation,
 * pas le titre.
 */

.lr-welcome {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, .22);
  background: linear-gradient(180deg, rgba(37, 99, 235, .10), rgba(37, 99, 235, .04));
}

.lr-welcome h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  line-height: 1.25;
}

.lr-welcome p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  opacity: .92;
}

/* État replié : une seule ligne, une fois la ville connue. Voir le commentaire de `template()` dans welcome.js —
   reposer en grand une question déjà répondue, au-dessus du contenu, est ce qui fait défiler sans lire. */
.lr-welcome.is-compact {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
}

.lr-welcome-here { margin: 0; font-size: .95rem; }
.lr-welcome-here strong { font-size: 1.02rem; }
.lr-welcome-here span { opacity: .75; }
.lr-welcome.is-compact button[data-lr-welcome-expand] { min-height: 40px; padding: 8px 14px; }
.lr-welcome.is-compact .lr-welcome-form,
.lr-welcome.is-compact .lr-welcome-results,
.lr-welcome.is-compact .lr-welcome-feedback { grid-column: 1 / -1; }

.lr-welcome-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lr-welcome-form input {
  flex: 1 1 14em;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .18);
  background: #fff;
  font-size: 1rem;
}

.lr-welcome-form button {
  flex: 0 0 auto;
  padding: 11px 18px;
}

.lr-welcome-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lr-welcome-results button {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .18);
  background: #fff;
  font-size: .86rem;
  cursor: pointer;
}

/* Un message vide ne doit pas réserver de place : sinon la barre « saute » au premier caractère saisi. */
.lr-welcome-feedback:empty { display: none; }
.lr-welcome-feedback { margin: 0; font-size: .85rem; font-weight: 600; }

@media (max-width: 560px) {
  .lr-welcome { padding: 16px; }
  .lr-welcome-form button { flex: 1 1 100%; }
}