/* Popups & Promo Bars — фронтовые стили.
   Всё под префиксом .cpop-, никаких глобальных селекторов: плагин обязан
   вести себя одинаково в любой теме и ничего в ней не ломать. */

.cpop-root { position: static; }

.cpop-item[hidden] { display: none !important; }

.cpop-item {
  --cpop-radius: 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}

/* ── Модальное окно ─────────────────────────────────────────────── */
.cpop-t-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cpop-t-modal .cpop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 35, .55);
  backdrop-filter: blur(2px);
}
.cpop-t-modal .cpop-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  border-radius: var(--cpop-radius);
  padding: 34px 32px 28px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  animation: cpop-pop .22s ease-out;
}
.cpop-t-modal.cpop-size-s .cpop-box { max-width: 380px; }
.cpop-t-modal.cpop-size-l .cpop-box { max-width: 620px; }

/* ── Полосы сверху и снизу ──────────────────────────────────────── */
.cpop-t-bar_top,
.cpop-t-bar_bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99990;
}
.cpop-t-bar_top { top: 0; animation: cpop-slide-down .24s ease-out; }
.cpop-t-bar_bottom { bottom: 0; animation: cpop-slide-up .24s ease-out; }
.cpop-t-bar_top .cpop-box,
.cpop-t-bar_bottom .cpop-box {
  position: relative;
  padding: 14px 56px 14px 24px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .16);
}
.cpop-t-bar_top .cpop-body,
.cpop-t-bar_bottom .cpop-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.cpop-t-bar_top .cpop-text,
.cpop-t-bar_bottom .cpop-text { margin: 0; }
.cpop-t-bar_top .cpop-actions,
.cpop-t-bar_bottom .cpop-actions { margin: 0; }
.cpop-t-bar_top .cpop-media,
.cpop-t-bar_bottom .cpop-media { display: none; }

/* ── Slide-in в углу ────────────────────────────────────────────── */
.cpop-t-slide_in {
  position: fixed;
  bottom: 22px;
  z-index: 99995;
  max-width: 360px;
  width: calc(100% - 32px);
  animation: cpop-slide-up .26s ease-out;
}
.cpop-t-slide_in.cpop-pos-right { right: 22px; }
.cpop-t-slide_in.cpop-pos-left { left: 22px; }
.cpop-t-slide_in .cpop-box {
  position: relative;
  border-radius: var(--cpop-radius);
  padding: 24px 22px 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}

/* ── Cookie-баннер ──────────────────────────────────────────────── */
.cpop-t-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  padding: 16px;
  animation: cpop-slide-up .24s ease-out;
}
.cpop-t-cookie .cpop-box {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--cpop-radius);
  padding: 22px 26px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}

/* ── Общие элементы ─────────────────────────────────────────────── */
.cpop-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(127, 127, 127, .14);
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.cpop-close:hover { background: rgba(127, 127, 127, .26); }

.cpop-media { margin: -34px -32px 20px; }
.cpop-media img { display: block; width: 100%; height: auto; border-radius: var(--cpop-radius) var(--cpop-radius) 0 0; }

.cpop-heading { font-size: 21px; font-weight: 700; margin-bottom: 8px; line-height: 1.25; }
.cpop-t-bar_top .cpop-heading,
.cpop-t-bar_bottom .cpop-heading { font-size: 16px; margin-bottom: 0; }
.cpop-text { margin: 0 0 16px; opacity: .85; }

.cpop-form { margin: 0 0 14px; }

/* flex-direction/width заданы явно: на сайте могут жить чужие плагины,
   чей CSS грузится позже и объявляет только часть свойств. */
.cpop-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}

.cpop-btn {
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  background: #6d5cff;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.cpop-btn:hover { filter: brightness(1.07); color: #fff; }
.cpop-btn--ghost {
  background: transparent !important;
  color: inherit;
  border: 1px solid currentColor;
  opacity: .75;
  font-weight: 500;
}
.cpop-btn--ghost:hover { opacity: 1; color: inherit; }

.cpop-cats { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; }
.cpop-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.cpop-cat--locked { opacity: .6; cursor: default; }

.cpop-note { margin: 12px 0 0; font-size: 13px; opacity: .7; }
.cpop-note a { color: inherit; text-decoration: underline; }

@keyframes cpop-pop {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes cpop-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes cpop-slide-down {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cpop-t-modal .cpop-box,
  .cpop-t-bar_top,
  .cpop-t-bar_bottom,
  .cpop-t-slide_in,
  .cpop-t-cookie { animation: none; }
}

@media (max-width: 620px) {
  .cpop-t-modal .cpop-box { padding: 28px 20px 22px; }
  .cpop-media { margin: -28px -20px 16px; }
  .cpop-t-slide_in { left: 16px; right: 16px; width: auto; max-width: none; }
  .cpop-actions { flex-direction: column; align-items: stretch; }
  .cpop-btn { text-align: center; }
}