/* Панель согласия на cookies (templates/_cookiebar.php).
   Внизу слева, поверх всего, но не перекрывает WhatsApp-кнопку справа.
   Палитра проекта: --brand #A9633A, --ink #101828, --line #E4E7EC. */

.nwck {
  position: fixed; left: 20px; bottom: 20px; z-index: 9990;
  width: min(420px, calc(100vw - 40px));
  font-family: Inter, -apple-system, sans-serif;
}
.nwck[hidden] { display: none; }

.nwck-box {
  background: #fff; border: 1px solid #E4E7EC; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);
  padding: 20px 20px 16px; overflow: hidden;
  animation: nwck-in .28s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes nwck-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .nwck-box { animation: none; } }

.nwck-view[hidden] { display: none; }

.nwck-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nwck-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: #FBF4EC; color: #A9633A;
}
.nwck-t { margin: 0; font: 800 17px/1.3 Inter, sans-serif; letter-spacing: -.02em; color: #101828; }

.nwck-back {
  width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #E4E7EC; border-radius: 9px; background: #fff; color: #475467; cursor: pointer;
}
.nwck-back:hover { border-color: #A9633A; color: #A9633A; }

.nwck-p { margin: 0 0 15px; font: 400 13.5px/1.6 Inter, sans-serif; color: #475467; text-wrap: pretty; }

.nwck-acts { display: flex; gap: 9px; }
.nwck-btn {
  flex: 1; padding: 12px 14px; border-radius: 10px; cursor: pointer;
  font: 700 14px/1.2 Inter, sans-serif; border: 1.5px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nwck-btn--yes { background: #A9633A; color: #fff; }
.nwck-btn--yes:hover { background: #8A4E28; }
.nwck-btn--no { background: #fff; color: #344054; border-color: #E4E7EC; }
.nwck-btn--no:hover { border-color: #101828; color: #101828; }

.nwck-link {
  display: block; width: 100%; margin: 11px 0 0; padding: 0; border: 0; background: none;
  font: 600 13px/1.2 Inter, sans-serif; color: #667085; cursor: pointer; text-align: center;
}
.nwck-link:hover { color: #A9633A; text-decoration: underline; }

.nwck-fine { margin: 12px 0 0; font: 400 11.5px/1.55 Inter, sans-serif; color: #98A2B3; }
.nwck-fine a { color: #667085; text-decoration: underline; text-underline-offset: 2px; }
.nwck-fine a:hover { color: #A9633A; }

/* --- категории --- */
.nwck-cats { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px;
             max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.nwck-cat {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid #F2F4F7; cursor: pointer;
}
.nwck-cat:last-child { border-bottom: 0; }
.nwck-cat.is-locked { cursor: default; }
.nwck-cat-b { flex: 1; min-width: 0; }
.nwck-cat-n { display: block; font: 700 13.5px/1.35 Inter, sans-serif; color: #101828; }
.nwck-cat-d { display: block; margin-top: 3px; font: 400 12px/1.5 Inter, sans-serif; color: #667085; }

.nwck-sw {
  position: relative; flex: none; width: 40px; height: 23px; margin-top: 2px;
  border-radius: 99px; background: #D0D5DD; transition: background .18s ease;
}
.nwck-sw i {
  position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.nwck-sw.is-on { background: #A9633A; }
.nwck-sw.is-on i { transform: translateX(17px); }
.nwck-sw.is-locked { background: #12805C; opacity: .55; }

/* --- мобильные --- */
@media (max-width: 640px) {
  .nwck { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .nwck-box { padding: 17px 16px 14px; border-radius: 14px; }
  .nwck-acts { flex-direction: column; }
  .nwck-cats { max-height: 40vh; }
}
/* на мобильных снизу висит таббар — панель поднимаем над ним */
@media (max-width: 900px) {
  .nwck { bottom: calc(10px + env(safe-area-inset-bottom, 0px) + 62px); }
}