/* ============================================================
   БАЗОВІ КОМПОНЕНТИ: кнопки, поля, чипи, бейджі, рейтинг, пін.
   Усе — на токенах із tokens.css (white-label, NFR-052).
   ============================================================ */

/* ---- Пін: сигнатура напряму «Маршрут» ----
   Малюється через <use href="#pin">, а CSS-селектори не дістають усередину
   клона (shadow DOM). Тому колір задаємо успадкованою властивістю fill на
   самому <svg>, а «вічко» піна — інлайновим стилем у символі (header.php). */
.pin{width:16px;height:20px;flex:0 0 auto;display:inline-block;fill:var(--accent)}

/* ---- Кнопки ---- */
.btn{font:inherit;font-weight:600;border:0;cursor:pointer;border-radius:var(--r-sm);
     padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
     transition:.18s ease;line-height:1;text-decoration:none}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);filter:brightness(.97)}
.btn--secondary{background:transparent;color:var(--text);border:1.5px solid var(--brand)}
.btn--secondary:hover{background:var(--brand-soft)}
.btn--ghost{background:transparent;color:var(--link);padding:10px 12px}
.btn--ghost:hover{background:var(--lake-soft)}
.btn--sm{padding:8px 14px;font-size:.9rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ---- Поля ---- */
.field{height:48px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
       background:var(--surface);color:var(--text);font:inherit;min-width:0;width:100%}
.field:focus-visible{border-color:var(--link);outline:none;box-shadow:0 0 0 3px var(--lake-soft)}
.field--sm{height:40px;padding:0 12px;font-size:.92rem}

/* ---- Чипи ---- */
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--r-pill);
      padding:8px 14px;font-size:.9rem;font-weight:500;cursor:pointer;transition:.15s;display:inline-flex;
      align-items:center;gap:6px;white-space:nowrap;font-family:inherit}
.chip:hover{border-color:var(--brand)}
.chip--on,.chip[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip--on .chip__count{color:rgba(255,255,255,.75)}
.chip__count{color:var(--muted);font-size:.82rem}
.chip--remove::after{content:"✕";font-size:.78rem;opacity:.8}

/* ---- Бейджі ---- */
.badge{font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:var(--r-pill);display:inline-flex;
       align-items:center;gap:5px;letter-spacing:.01em}
.badge--type{background:var(--brand);color:#fff}
.badge--free{background:var(--success);color:#fff}
.badge--kids{background:var(--accent-soft);color:var(--accent-ink)}
:root[data-theme="dark"] .badge--kids{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge--kids{color:var(--accent)}}

/* ---- Рейтинг ---- */
.rating{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.rating__star{color:var(--accent)}
.rating__count{color:var(--muted);font-weight:400;font-size:.85rem}

/* ---- Дрібне ---- */
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--muted);
         display:inline-flex;align-items:center;gap:8px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
[hidden]{display:none!important}