/* ============================================================
   cookie-consent-popup.css — cookie-баннер these-guys.ru.
   С 26.09.2026 компактная карточка по эталону alexanderilyin.ru
   (alexander-ilyin-site/src/styles/cookie.css): свёрнута — текст, ссылка
   на политику, «Понятно», «Настроить», «Отказаться», крестик; развёрнута —
   полный текст, отказ, расширенный сбор. Модального окна нет.

   Привязка к сайту — ТОЛЬКО блок .cookie-consent ниже (монохром ВЭР,
   Inter/Manrope). Тёмной темы у сайта нет. Mobile-first: база < 640px.
   Слой 1010 — как у прежнего баннера (выше шапки, ниже fancybox/попапов).
   ============================================================ */

.cookie-consent{
  --cc-bg:#FFFFFF;
  --cc-text:#1C1F24;
  --cc-heading:#0A0A0A;
  --cc-muted:#5B6068;          /* 6.3:1 на белом */
  --cc-border:#E3E5E8;
  --cc-soft:#F4F5F6;
  --cc-hover:#EFF0F2;
  --cc-line:#0A0A0A;
  --cc-btn-bg:#0A0A0A;
  --cc-btn-fg:#FFFFFF;
  --cc-btn-bg-hover:#2B2E33;
  --cc-btn-fg-hover:#FFFFFF;
  --cc-shadow:0 10px 32px rgba(10,10,10,.14), 0 2px 6px rgba(10,10,10,.06);
  --cc-radius:14px;
  --cc-radius-btn:10px;
  --cc-font:'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cc-font-ui:'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cc-font-heading:'Manrope', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --cc-inset:16px;
  --cc-inset-desktop:24px;
  --cc-width:400px;
  --cc-z:1010;
}

.cookie-consent, .cookie-consent *, .cookie-consent *::before, .cookie-consent *::after{ box-sizing:border-box; }
.cookie-consent[hidden], .cookie-banner[hidden], .cookie-details[hidden]{ display:none !important; }

/* ---------- карточка ---------- */
.cookie-banner{
  position:fixed; z-index:var(--cc-z);
  left:var(--cc-inset); right:var(--cc-inset); bottom:calc(var(--cc-inset) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; max-height:60vh; max-height:60dvh;
  margin:0; background:var(--cc-bg); color:var(--cc-text); border:1px solid var(--cc-border);
  border-radius:var(--cc-radius); box-shadow:var(--cc-shadow);
  padding:11px 14px 12px; font-family:var(--cc-font); text-align:left;
  opacity:0; transform:translateY(12px); transition:opacity .2s ease-out, transform .2s ease-out;
}
.cookie-banner.is-visible{ opacity:1; transform:none; }

.cookie-banner__text{
  margin:0; flex:none;
  font-family:var(--cc-font); font-size:13px; font-weight:400; line-height:1.38; color:var(--cc-heading);
}
/* место под крестик только в первой строке */
.cookie-banner__text::before{ content:''; float:right; width:26px; height:1em; }

.cookie-consent .cookie-banner__policy,
.cookie-consent .cookie-banner__policy:visited{
  color:var(--cc-muted); text-decoration:underline; text-decoration-color:var(--cc-border);
  text-underline-offset:3px; white-space:nowrap;
}
.cookie-consent .cookie-banner__policy:hover{ color:var(--cc-heading); text-decoration:underline; text-decoration-color:var(--cc-heading); }

.cookie-link{
  display:inline-flex; align-items:center; min-height:40px; padding:0 2px; margin:0 -2px; flex:none;
  background:none; border:0; border-radius:0; cursor:pointer; color:var(--cc-muted);
  font-family:var(--cc-font-ui); font-size:13.5px; font-weight:400; line-height:1.3;
  text-decoration:underline; text-decoration-color:var(--cc-border); text-underline-offset:3px;
  -webkit-appearance:none; appearance:none;
}
.cookie-link:hover{ color:var(--cc-heading); text-decoration-color:var(--cc-heading); }

/* ---------- кнопки ---------- */
.cookie-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin:0; padding:9px 16px;
  border-radius:var(--cc-radius-btn); border:1px solid transparent; cursor:pointer;
  font-family:var(--cc-font-ui); font-size:14px; font-weight:700; line-height:1.25; text-align:center;
  letter-spacing:0; text-transform:none; white-space:normal; box-shadow:none;
  -webkit-appearance:none; appearance:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.cookie-btn:active:not(:disabled){ transform:translateY(1px); }
.cookie-btn:disabled{ opacity:.45; cursor:not-allowed; }
.cookie-btn--primary{ background:var(--cc-btn-bg); color:var(--cc-btn-fg); }
.cookie-btn--primary:hover{ background:var(--cc-btn-bg-hover); color:var(--cc-btn-fg-hover); }
.cookie-btn--secondary{ background:transparent; color:var(--cc-heading); border-color:var(--cc-line); }
.cookie-btn--secondary:hover:not(:disabled){ background:var(--cc-hover); }
.cookie-btn[aria-pressed="true"]{ background:var(--cc-hover); }
.cookie-banner__actions{ display:flex; align-items:center; gap:14px; margin-top:8px; flex:none; }
.cookie-banner__ok{ flex:1 1 auto; }

.cookie-close{
  position:absolute; top:4px; right:4px; width:40px; height:40px; margin:0; padding:0;
  background:transparent; border:none; border-radius:var(--cc-radius-btn); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
  -webkit-appearance:none; appearance:none;
}
.cookie-close:hover{ background:var(--cc-hover); }
.cookie-close::before, .cookie-close::after{
  content:''; position:absolute; width:14px; height:1.5px; background:var(--cc-muted); border-radius:2px;
}
.cookie-close:hover::before, .cookie-close:hover::after{ background:var(--cc-heading); }
.cookie-close::before{ transform:rotate(45deg); }
.cookie-close::after{ transform:rotate(-45deg); }

.cookie-consent a:focus-visible, .cookie-link:focus-visible, .cookie-btn:focus-visible,
.cookie-close:focus-visible{ outline:2px solid var(--cc-line); outline-offset:2px; border-radius:var(--cc-radius-btn); }
.cookie-consent a:focus:not(:focus-visible), .cookie-consent button:focus:not(:focus-visible){ outline:none; }

/* ---------- развёрнутое состояние ---------- */
.cookie-details{
  min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  margin:10px -14px 0; padding:10px 14px 2px; border-top:1px solid var(--cc-border);
  font-size:13.5px; line-height:1.55; color:var(--cc-text);
}
.cookie-details:focus{ outline:none; }
.cookie-details:focus-visible{ outline:2px solid var(--cc-line); outline-offset:-2px; }
.cookie-details p{ font-family:var(--cc-font); font-size:13.5px; line-height:1.55; color:var(--cc-text); }
.cookie-details__intro p{ margin:0 0 8px; }
.cookie-details__status{
  margin:4px 0 0; padding:8px 10px; border-radius:var(--cc-radius-btn); background:var(--cc-soft);
  font-family:var(--cc-font-ui); font-size:12.5px !important; font-weight:600; line-height:1.45 !important; color:var(--cc-heading) !important;
}
.cookie-details__block{ padding:12px 0 4px; }
.cookie-details__block + .cookie-details__block{ border-top:1px solid var(--cc-border); margin-top:8px; }
.cookie-details__title{
  margin:0 0 4px; padding:0; font-family:var(--cc-font-heading); font-size:15px; font-weight:800;
  line-height:1.3; letter-spacing:-0.01em; text-transform:none; color:var(--cc-heading);
}
.cookie-details__text{ margin:0 0 10px; }
.cookie-details__block .cookie-btn{ width:100%; font-size:13.5px; }
.cookie-details__actions{ display:grid; gap:8px; }
.cookie-details__note{ margin:8px 0 0; font-size:12.5px !important; line-height:1.45 !important; color:var(--cc-muted) !important; }

/* ---------- ≥640: карточка в левом нижнем углу ---------- */
@media (min-width:640px){
  .cookie-banner{
    right:auto; left:var(--cc-inset-desktop); bottom:calc(24px + env(safe-area-inset-bottom));
    width:min(var(--cc-width), calc(100vw - 2 * var(--cc-inset))); max-height:min(70vh, 560px); max-height:min(70dvh, 560px);
    padding:16px 18px;
  }
  .cookie-banner__text{ font-size:14px; line-height:1.5; }
  .cookie-banner__actions{ margin-top:12px; gap:18px; }
  .cookie-banner__ok{ min-height:42px; }
  .cookie-link{ font-size:14px; }
  .cookie-details{ margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; }
}

@media (prefers-reduced-motion:reduce){
  .cookie-banner, .cookie-btn{ transition:none; }
  .cookie-banner{ transform:none; }
}

@media print{ .cookie-consent{ display:none !important; } }