/* ═══════════════════════════════════════
   CoinMalinSearch — Overlay partagé
   Responsive · Ghost text · Récents
═══════════════════════════════════════ */

.cms {
  position: fixed; inset: 0; background: #fff; z-index: 9000;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none; visibility: hidden;
}
.cms.is-open { display: flex; }
.cms.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; visibility: visible; }
.cms:not(.is-open) { display: none; }

/* ── Header ── */
.cms__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff; flex-shrink: 0;
  position: sticky; top: 0; z-index: 1;
}
.cms__back {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #5f6368; background: none; border: none; cursor: pointer;
  transition: background 0.15s;
}
.cms__back:hover { background: #f1f3f4; color: #202124; }

/* ── Search bar ── */
.cms__bar {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: #f1f3f4; border-radius: 24px;
  padding: 0 16px 0 14px; height: 48px;
  border: 1.5px solid transparent;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.cms__bar:focus-within {
  background: #fff;
  border-color: #1A6B46;
  box-shadow: 0 2px 8px rgba(26,107,70,0.12);
}
.cms__bar > svg { color: #9aa0a6; flex-shrink: 0; }

.cms__input-wrap { flex: 1; position: relative; min-width: 0; }
.cms__input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 16px; font-weight: 500; color: #202124;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 2px 0; position: relative; z-index: 1;
}
.cms__input::placeholder { color: #9aa0a6; font-weight: 400; }

/* ── Ghost text ── */
.cms__ghost {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 0; font-size: 16px; font-weight: 500;
  line-height: 1; white-space: nowrap; overflow: hidden;
  width: 100%; font-family: 'Plus Jakarta Sans', sans-serif;
}
#cms-ghost-t { color: transparent; }
#cms-ghost-c { color: #c0c4cb; }

.cms__clear {
  color: #9aa0a6; display: flex; align-items: center;
  background: none; border: none; padding: 4px; cursor: pointer;
  border-radius: 50%; flex-shrink: 0; transition: background 0.12s;
}
.cms__clear:hover { background: rgba(0,0,0,0.07); color: #202124; }

.cms__submit {
  flex-shrink: 0; background: #1A6B46; color: #fff;
  border: none; border-radius: 20px; padding: 10px 20px;
  font-size: 13px; font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s, transform 0.18s;
}
.cms__submit:hover { background: #0D3D2B; transform: scale(1.02); }

/* ── Body ── */
.cms__body { flex: 1; overflow-y: auto; padding: 6px 0 40px; -webkit-overflow-scrolling: touch; }
.cms__inner { max-width: 680px; width: 100%; margin: 0 auto; }

/* ── Section header ── */
.cms__hd {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #9aa0a6;
  padding: 14px 24px 5px;
}
.cms__hd--flex { display: flex; align-items: center; justify-content: space-between; }
.cms__hd-clear {
  font-size: 12px; font-weight: 600; color: #1A6B46;
  background: none; border: none; cursor: pointer;
  padding: 2px 8px; border-radius: 4px; transition: background 0.12s;
  text-transform: none; letter-spacing: 0;
}
.cms__hd-clear:hover { background: #EAF5EE; }
.cms__sep { height: 1px; background: #f1f3f4; margin: 4px 0; }

/* ── Row (base) ── */
.cms__row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 24px; cursor: pointer; background: none;
  border: none; width: 100%; text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background 0.12s;
}
.cms__row:hover, .cms__row.active { background: #f8f9fa; }

/* ── Icon circles ── */
.cms__ico {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cms__ico--clock  { background: #f1f3f4; color: #9aa0a6; }
.cms__ico--trend  { background: #fef3e2; color: #b95e0a; }
.cms__ico--search { background: #f1f3f4; color: #5f6368; }
.cms__ico--budget {
  background: #FEF8E7; color: #9A7A20;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
}

/* ── Text ── */
.cms__txt {
  flex: 1; font-size: 14.5px; font-weight: 500; color: #202124;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cms__stxt { flex: 1; font-size: 14.5px; color: #3c4043; }
.cms__stxt strong { color: #202124; font-weight: 600; }
.cms__arr { color: #bdc1c6; display: flex; align-items: center; }
.cms__key {
  font-size: 10px; font-weight: 600; color: #9aa0a6;
  border: 1px solid #e0e0e0; border-radius: 4px;
  padding: 2px 6px; letter-spacing: 0.04em; white-space: nowrap;
}

/* ── Delete button (recent) ── */
.cms__del {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #bdc1c6; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cms__del:hover { background: rgba(0,0,0,0.07); color: #5f6368; }

/* ── Budget pill ── */
.cms__pill {
  background: rgba(200,168,85,0.14); color: #9A7A20;
  font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 6px; white-space: nowrap;
}
.cms__desc { font-size: 14px; color: #3c4043; font-weight: 500; }

/* ── Badge (catalog item) ── */
.cms__badge {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.03em;
}
.cms__badge--lieu    { background: #E8F0FE; color: #2A5CCC; }
.cms__badge--plat    { background: #FEF3E2; color: #B95E0A; }
.cms__badge--boisson { background: #E8F5EE; color: #1A6B46; }
.cms__info { flex: 1; min-width: 0; }
.cms__name { font-size: 14.5px; font-weight: 500; color: #202124; display: block; }
.cms__name mark { background: none; color: #1A6B46; font-weight: 700; }
.cms__sub  { font-size: 12px; color: #5f6368; display: block; margin-top: 1px; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 640px) {
  .cms__head { padding: 10px 12px; gap: 8px; }
  .cms__submit { display: none; }
  .cms__bar { height: 44px; border-radius: 22px; padding: 0 12px 0 12px; }
  /* JAMAIS sous 16px sur mobile : iOS zoome au focus → curseur déplacé,
     saisie interrompue et page qui « danse » */
  .cms__input { font-size: 16px; }
  .cms__ghost { font-size: 16px; }
  .cms__row { padding: 12px 16px; gap: 12px; }
  .cms__hd  { padding: 12px 16px 4px; }
  .cms__ico { width: 34px; height: 34px; }
  .cms__badge { width: 34px; height: 34px; }
  .cms__txt, .cms__stxt, .cms__name { font-size: 14px; }
}

/* Même règle anti-zoom pour TOUTES les barres de recherche des pages
   qui chargent cet overlay (accueil, explorer, catégories, dashboard) */
@media (max-width: 768px) {
  input[type="search"],
  .cms-trigger,
  .ep-search-pill input,
  .quick-search__input,
  .search-bar__input { font-size: 16px !important; }
}

@media (max-width: 380px) {
  .cms__head { padding: 8px 8px; gap: 6px; }
  .cms__bar { height: 40px; gap: 6px; }
  .cms__back { width: 34px; height: 34px; }
  .cms__input { font-size: 14px; }
  .cms__ghost { font-size: 14px; }
  .cms__row { padding: 10px 12px; gap: 10px; }
  .cms__hd  { padding: 10px 12px 4px; }
  .cms__ico { width: 30px; height: 30px; }
  .cms__badge { width: 30px; height: 30px; font-size: 9px; }
  .cms__txt, .cms__stxt, .cms__name { font-size: 13px; }
  .cms__sub { font-size: 11px; }
}