/* opt-privod.ru — стили cookie-уведомления (модальное окно + панель внизу слева).
   Единая схема с zvezda.c-pm.ru и shkiv.c-pm.ru, редакция от 16.09.2026.
   Все классы с префиксом op- — чтобы не пересекаться с текущими стилями
   сайта (в том числе с оформлением старой плашки #cookie_notification).
   Палитра задана локально: сайт опирается на Bootstrap, собственных
   CSS-переменных у него нет, поэтому цвета прописаны явно. */

:root {
  --op-panel: #ffffff;
  --op-ink: #1f2a37;
  --op-muted: #5b6673;
  --op-line: #dde3ea;
  --op-accent: #e8762c;      /* фирменный оранжевый ЦПМ */
  --op-accent-dark: #c05f1c;
}

/* ---- Модальное окно при первом визите ---- */
.op-cookie-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(24, 32, 42, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.op-cookie-modal {
  max-width: 520px; width: 100%;
  background: var(--op-panel); color: var(--op-ink);
  border: 1px solid var(--op-line); border-top: 4px solid var(--op-accent);
  border-radius: 10px;
  padding: 26px 28px;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.op-cookie-modal h2 { font-size: 20px; margin: 0 0 10px; color: var(--op-ink); }
.op-cookie-modal p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--op-muted); }
.op-cookie-modal a { color: var(--op-accent-dark); }
.op-cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
/* Блокировка прокрутки страницы под окном */
body.op-modal-open { overflow: hidden; }

/* ---- Кнопки ---- */
.op-btn {
  border: 1px solid transparent; border-radius: 6px;
  padding: 10px 22px; font-size: 14px; cursor: pointer;
}
.op-btn-accent {
  background: var(--op-accent); color: #ffffff;
}
.op-btn-accent:hover { background: var(--op-accent-dark); }
.op-btn-plain {
  background: transparent; color: var(--op-ink);
  border-color: var(--op-line);
}
.op-btn-plain:hover { border-color: var(--op-muted); }

/* ---- Компактная панель внизу слева ---- */
.op-cookie-bar-mini {
  position: fixed; left: 16px; bottom: 16px; z-index: 90000;
  max-width: 460px;
  background: var(--op-panel); color: var(--op-ink);
  border: 1px solid var(--op-line); border-left: 4px solid var(--op-accent);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  display: flex; gap: 14px; align-items: center;
  font-size: 13px;
}
.op-cookie-bar-mini p { margin: 0; color: var(--op-muted); line-height: 1.45; }
.op-cookie-bar-mini a { color: var(--op-accent-dark); }
.op-cookie-bar-mini .op-btn { white-space: nowrap; padding: 9px 16px; font-size: 13px; flex: none; }
.op-bar-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--op-muted); padding: 2px 4px; flex: none;
}
.op-bar-close:hover { color: var(--op-ink); }

/* ---- Мобильные ---- */
@media (max-width: 720px) {
  .op-cookie-bar-mini { left: 12px; right: 12px; max-width: none; flex-wrap: wrap; }
  .op-cookie-bar-mini .op-btn { margin-left: auto; }
  .op-cookie-actions { flex-direction: column; }
  .op-cookie-modal { padding: 22px 20px; }
}