/* =========================================================================
   Central Property — страница «Избранное» (template-cp-favorites.php) и общие элементы подборок:
   чекбокс .cp-check, пустое состояние .cp-empty, диалог .cp-dialog, тост .cp-toast.
   Перенос из docs/preview/v2/cp-ui.css (разделы 6, 11, 14, 17) и favorites.html на токены --cp-*.
   Зависимости: style.css (цвета, радиусы, тени, движение), cards.css (--cp-s1…s5, --cp-fs-*, --cp-tap),
   sections.css (--cp-s6…s8, --cp-gutter, --cp-fs-h3/h4, .cp-section, .cp-container, .cp-grid, .cp-btn, .cp-chip, .cp-page-hero).
   Mobile-first: 375 px — одна колонка; 600 — две; 1024 — три (сетка .cp-grid--3).
   Движение — только transform/opacity, 150–240 мс; prefers-reduced-motion выключает всё.
   ========================================================================= */

:root{
  --cp-fav-art-w:160px; --cp-fav-art-h:90px;   /* силуэт города в пустом состоянии */
  --cp-check-size:22px; --cp-check-bd:2px; --cp-check-mark:12px;
  --cp-dialog-w:440px;
  --cp-toast-w:360px; --cp-toast-bd:4px;
  --cp-z-dialog:1060; --cp-z-toast:1070;        /* выше шапки (1045) и нижней панели (1030) */
}

/* Атрибут hidden сильнее display: наших блоков (flex/grid перекрывает UA-стиль) */
.cp-fav [hidden],.cp-cmp [hidden]{display:none!important}

/* ---------- 1. Шапка страницы: пилюли «Избранное (N) / Сравнение (M)» ---------- */
.cp-fav__pills{margin-top:var(--cp-s5)}
.cp-fav__pills .cp-chip{min-height:var(--cp-tap);font-weight:600}
.cp-fav__pills .cp-chip__n{min-width:1.5em;padding:0 var(--cp-s2);border-radius:var(--cp-r-pill);background:var(--cp-surface-2);color:var(--cp-text);font-size:var(--cp-fs-xs);line-height:1.6;text-align:center}
.cp-fav__pills .cp-chip[aria-current] .cp-chip__n{background:var(--cp-accent);color:var(--cp-on-accent)}
.cp-fav__intro{margin-top:var(--cp-s3);max-width:70ch;color:var(--cp-muted)}
.cp-fav__intro p:last-child{margin-bottom:0}

/* ---------- 2. Панель действий над сеткой ---------- */
.cp-fav__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cp-s3);margin-bottom:var(--cp-s3)}
.cp-fav__sum{margin:0;font-size:var(--cp-fs-sm);color:var(--cp-muted);overflow-wrap:anywhere}
.cp-fav__actions{display:flex;flex-wrap:wrap;gap:var(--cp-s2)}
.cp-fav__actions .cp-btn svg{width:18px;height:18px}
.cp-fav__hint{margin:0 0 var(--cp-s4)}
/* Тёплая кнопка подтверждения: двойной класс — sections.css подключается позже и той же специфичностью (.cp-btn, .cp-btn:hover) перекрыл бы одиночный модификатор */
.cp-btn.cp-btn--warm,.cp-btn.cp-btn--warm:hover,.cp-btn.cp-btn--warm:focus-visible{background:var(--cp-warm);border-color:var(--cp-warm);color:var(--cp-on-accent)}
.cp-btn.cp-btn--warm:hover,.cp-btn.cp-btn--warm:focus-visible{background:color-mix(in srgb,var(--cp-warm) 85%,var(--cp-night))}

/* ---------- 3. Элемент сетки: карточка + «В сравнение / Убрать» ---------- */
.cp-fav__grid{margin-bottom:var(--cp-s5)}
.cp-fav__grid:empty{margin:0}
.cp-fav__item{display:flex;flex-direction:column;gap:var(--cp-s2);min-width:0;transition:opacity var(--cp-dur-base) var(--cp-ease),transform var(--cp-dur-base) var(--cp-ease)}
.cp-fav__item > .cp-card-wrap{flex:1 1 auto;margin:0;width:auto;max-width:none;float:none}
.cp-fav__item.is-leaving{opacity:0;transform:scale(.98);pointer-events:none}
.cp-fav__tools{display:flex;align-items:center;justify-content:space-between;gap:var(--cp-s2);padding-inline:var(--cp-s1)}
.cp-fav__tools .cp-check{min-height:var(--cp-tap);padding-block:0}
.cp-fav__tools .cp-check span{font-size:var(--cp-fs-sm);color:var(--cp-muted)}
.cp-fav__tools .cp-check input:checked ~ span{color:var(--cp-accent-text);font-weight:600}
.cp-fav__rm{color:var(--cp-muted)}
.cp-fav__rm svg{width:16px;height:16px}
.cp-fav__rm:hover,.cp-fav__rm:focus-visible{background:var(--cp-warm-soft);color:var(--cp-warm)}

/* ---------- 4. Чекбокс / радио (cp-ui §6) ---------- */
.cp-check{display:flex;align-items:flex-start;gap:var(--cp-s3);min-height:var(--cp-tap);padding-block:var(--cp-s2);margin:0;cursor:pointer;font-weight:400;color:var(--cp-text)}
.cp-check input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:var(--cp-check-size);height:var(--cp-check-size);margin:2px 0 0;border:var(--cp-check-bd) solid var(--cp-line-strong);border-radius:5px;background:var(--cp-surface);cursor:pointer;transition:background var(--cp-dur-fast) var(--cp-ease),border-color var(--cp-dur-fast) var(--cp-ease)}
.cp-check input[type="radio"]{border-radius:50%}
.cp-check input::before{content:"";width:var(--cp-check-mark);height:var(--cp-check-mark);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background:var(--cp-on-accent);transform:scale(0);transition:transform var(--cp-dur-fast) var(--cp-ease)}
.cp-check input[type="radio"]::before{clip-path:none;border-radius:50%;width:10px;height:10px}
.cp-check input:checked{background:var(--cp-accent);border-color:var(--cp-accent)}
.cp-check input:checked::before{transform:scale(1)}
.cp-check input:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px}
.cp-check input:disabled{opacity:.5;cursor:not-allowed}
.cp-check span{line-height:1.4}

/* ---------- 5. Присланная подборка (?ids=…) ---------- */
.cp-fav__shared{margin-bottom:var(--cp-s6);padding:var(--cp-s5) var(--cp-s4);border-radius:var(--cp-r-lg);background:var(--cp-accent-soft)}
.cp-fav__shared h2{margin:0 0 var(--cp-s2);font-family:var(--cp-font-head);font-size:var(--cp-fs-h3);font-weight:600;line-height:1.2}
.cp-fav__shared > p{margin:0 0 var(--cp-s4);overflow-wrap:anywhere}
.cp-fav__shared .cp-fav__actions{margin-bottom:var(--cp-s4)}
.cp-fav__shared .cp-fav__grid{margin-bottom:0}
@media (min-width:768px){.cp-fav__shared{padding:var(--cp-s5)}}

/* ---------- 6. Пустое состояние (cp-ui §17): силуэт города + одна фраза + действие ---------- */
.cp-empty{padding:var(--cp-s7) var(--cp-s4);text-align:center;color:var(--cp-muted)}
.cp-empty__art{width:var(--cp-fav-art-w);height:var(--cp-fav-art-h);margin:0 auto var(--cp-s4);color:var(--cp-line-strong);background:currentColor;-webkit-mask:url(../assets/img/skyline.svg) center/contain no-repeat;mask:url(../assets/img/skyline.svg) center/contain no-repeat}
.cp-empty h2,.cp-empty h3{margin:0 0 var(--cp-s2);font-family:var(--cp-font-head);font-size:var(--cp-fs-h3);font-weight:600;color:var(--cp-text)}
.cp-empty p{max-width:52ch;margin:0 auto var(--cp-s4);font-size:var(--cp-fs-base);line-height:1.55}
.cp-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cp-s2)}
.cp-fav__suggest{margin-top:var(--cp-s5)}
.cp-fav__suggest h3{margin:0 0 var(--cp-s4);font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600;color:var(--cp-text)}

/* ---------- 7. Диалог (нативный <dialog>; подтверждение очистки, ссылка на подборку) ---------- */
.cp-dialog{position:fixed;inset:0;z-index:var(--cp-z-dialog);width:min(var(--cp-dialog-w),calc(100% - 2 * var(--cp-s4)));max-width:100%;max-height:calc(100% - 2 * var(--cp-s4));overflow:auto;margin:auto;padding:0;border:0;border-radius:var(--cp-r-lg);background:var(--cp-surface);color:var(--cp-text);box-shadow:var(--cp-shadow-3)}
.cp-dialog::backdrop{background:color-mix(in srgb,var(--cp-night) 52%,transparent)}
.cp-dialog[open]{animation:cp-dialog-pop var(--cp-dur-base) var(--cp-ease)}
.cp-dialog__box{margin:0;padding:var(--cp-s5) var(--cp-s4)}
.cp-dialog__title{margin:0 0 var(--cp-s2);font-family:var(--cp-font-head);font-size:var(--cp-fs-h4);font-weight:600;line-height:1.25}
.cp-dialog__text{margin:0 0 var(--cp-s4);font-size:var(--cp-fs-sm);line-height:1.5;color:var(--cp-muted)}
.cp-dialog__field{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--cp-s4)}
.cp-dialog__label{font-size:var(--cp-fs-sm);font-weight:500;color:var(--cp-muted)}
.cp-dialog__input{width:100%;min-height:48px;padding:0 var(--cp-s4);border:1px solid var(--cp-line-strong);border-radius:var(--cp-r-sm);background:var(--cp-surface);color:var(--cp-text);font:500 var(--cp-fs-sm)/1.2 var(--cp-font-text)}
.cp-dialog__input:focus{outline:0;border-color:var(--cp-accent);box-shadow:0 0 0 3px var(--cp-accent-soft)}
.cp-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--cp-s2)}
.cp-dialog__actions .cp-btn{flex:1 1 auto}
@media (min-width:600px){
  .cp-dialog__box{padding:var(--cp-s5)}
  .cp-dialog__actions .cp-btn{flex:0 0 auto}
}
@keyframes cp-dialog-pop{from{opacity:0;transform:translateY(var(--cp-s3))}to{opacity:1;transform:none}}

/* ---------- 8. Тост (cp-ui §14): снизу слева, над нижней панелью на телефоне ---------- */
.cp-toasts{position:fixed;z-index:var(--cp-z-toast);left:var(--cp-s4);right:var(--cp-s4);bottom:calc(var(--cp-s4) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--cp-s2);pointer-events:none}
body.cp-has-mobilebar .cp-toasts,body:has(.cp-mobilebar) .cp-toasts{bottom:calc(var(--cp-mobilebar-h) + var(--cp-s3) + env(safe-area-inset-bottom))}
.cp-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--cp-s3);margin:0;padding:var(--cp-s3) var(--cp-s4);border-left:var(--cp-toast-bd) solid var(--cp-accent);border-radius:var(--cp-r-md);background:var(--cp-night);color:var(--cp-on-night);font-size:var(--cp-fs-sm);line-height:1.4;box-shadow:var(--cp-shadow-2);animation:cp-toast-in var(--cp-dur-base) var(--cp-ease) both}
.cp-toast--success{border-left-color:var(--cp-success)}
.cp-toast--error{border-left-color:var(--cp-error)}
.cp-toast.is-leaving{animation:cp-toast-out var(--cp-dur-fast) var(--cp-ease) both}
@media (min-width:600px){.cp-toasts{right:auto;width:var(--cp-toast-w)}}
@media (min-width:1024px){.cp-toasts,body.cp-has-mobilebar .cp-toasts,body:has(.cp-mobilebar) .cp-toasts{left:var(--cp-s5);bottom:var(--cp-s6)}}
@keyframes cp-toast-in{from{opacity:0;transform:translateY(var(--cp-s3))}to{opacity:1;transform:none}}
@keyframes cp-toast-out{to{opacity:0;transform:translateY(var(--cp-s2))}}

/* ---------- 9. Без движения по просьбе системы ---------- */
@media (prefers-reduced-motion:reduce){
  .cp-fav__item,.cp-check input,.cp-check input::before{transition:none}
  .cp-fav__item.is-leaving{transform:none}
  .cp-dialog[open],.cp-toast,.cp-toast.is-leaving{animation:none}
}