/* Превью рекламных мест (#1152): макеты телефонов и блоков для публичной
   страницы /reklama. Правила перенесены из manager/assets/advertising-places.css,
   где ими пользуется витрина кабинета — вид размещения должен совпадать.
   ⚠️ При правке превью в кабинете обновить и здесь. */


.row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }

.col { flex: 0 0 auto; }

.cap { text-align: center; margin-top: 10px; }

.cap b { display: block; font-size: 13.5px; color: #0f172a; }

.cap span { color: #64748b; font-size: 12px; }

/* телефон */
.phone { width: 300px; background: #0b1626; border-radius: 28px; padding: 9px 9px 14px; box-shadow: 0 20px 46px -22px rgba(10,25,60,.5); }

.phone .scr { height: 540px; border-radius: 20px; overflow: hidden; background: #0b1626; }

.stat { display: flex; justify-content: space-between; color: #8fa4c4; font-size: 10px; padding: 8px 15px 2px; }

.hdr { display: flex; align-items: center; gap: 10px; padding: 11px 13px; color: #fff; font-weight: 800; font-size: 15px; }

.hdr .bk { color: #5ea2ff; font-size: 17px; }

.hdr .bot { color: #5d7396; font-size: 10.5px; font-weight: 500; margin-left: auto; }

.pad { padding: 0 11px 14px; }

.search { background: #132033; border: 1px solid rgba(120,160,220,.16); color: #7d92b5; border-radius: 12px; padding: 9px 13px; font-size: 12.5px; margin-bottom: 9px; }

.cat { background: #132033; border: 1px solid rgba(120,160,220,.16); border-radius: 13px; margin-bottom: 7px; padding: 11px 13px; display: flex; align-items: center; gap: 9px; color: #e7eefb; font-size: 13px; font-weight: 600; }

.cat .dot { width: 22px; height: 22px; border-radius: 7px; }

.cat .ch { margin-left: auto; color: #7d92b5; }

.ad { position: relative; margin-top: 9px; background: linear-gradient(135deg,#132844,#0f2036); border: 1px solid rgba(120,160,220,.22); border-radius: 13px; padding: 36px 13px 13px; overflow: hidden; }

.ad .waves { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; overflow: hidden; pointer-events: none; }

.ad .waves svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }

.ad .w1 { fill: rgba(0,157,224,.22); animation: advWL 7s linear infinite; }

.ad .w2 { fill: rgba(94,162,255,.14); height: 78%; animation: advWR 11s linear infinite; }

.ad .sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 48%,transparent 58%); transform: translateX(-130%); animation: advSh 6.5s ease-in-out infinite; }

.ad .tag { position: absolute; top: 9px; right: 11px; z-index: 3; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a9bcda; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); padding: 2px 8px; border-radius: 20px; }

.ad .lg { position: relative; z-index: 2; background: #fff; border-radius: 10px; height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: #0f2a4d; animation: advFl 4.2s ease-in-out infinite; }

.ad .lg span { color: #2563eb; padding: 0 4px; }

.ad .t { position: relative; z-index: 2; color: #fff; font-size: 13.5px; font-weight: 800; margin-top: 9px; line-height: 1.3; }

.ad .s { position: relative; z-index: 2; color: #adbdd6; font-size: 11.5px; margin-top: 5px; line-height: 1.45; }

.ad .b { position: relative; z-index: 2; margin-top: 10px; background: #5ea2ff; color: #10202f; border-radius: 10px; text-align: center; font-weight: 700; font-size: 12.5px; padding: 9px; animation: advPu 2.4s ease-in-out infinite; }

.photoad { position: relative; margin-top: 9px; border-radius: 13px; overflow: hidden; }

.photoad img { display: block; width: 100%; }

.photoad .tag { position: absolute; top: 9px; right: 11px; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.3); padding: 2px 8px; border-radius: 20px; }

.photoad .cta { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(255,255,255,.94); border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.photoad .cta b { font-size: 12.5px; color: #0f172a; }

.photoad .cta i { font-style: normal; background: #2563eb; color: #fff; border-radius: 8px; font-size: 11.5px; font-weight: 700; padding: 7px 12px; }

.res { background: #132033; border: 1px solid rgba(120,160,220,.16); border-radius: 15px; padding: 16px; text-align: center; }

.res .sc { font-size: 36px; font-weight: 800; color: #ff7d6b; }

.res .t { color: #e7eefb; font-size: 14px; font-weight: 700; margin-top: 3px; }

.res .s { color: #8fa4c4; font-size: 11.5px; margin-top: 4px; line-height: 1.45; }

.bar { height: 6px; border-radius: 6px; background: #1d3049; margin-top: 10px; overflow: hidden; }

.bar i { display: block; height: 100%; width: 64%; background: linear-gradient(90deg,#ff7d6b,#ffb36b); }

.sec { background: #132033; border: 1px solid rgba(120,160,220,.16); border-radius: 13px; padding: 12px 13px; margin-bottom: 7px; color: #e7eefb; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; }

.sec .ok { color: #39c26d; font-size: 11.5px; }
 .sec .warn { color: #ffb36b; font-size: 11.5px; }

.cvban2 { position: relative; overflow: hidden; display: flex; align-items: center; background: linear-gradient(135deg,#132844 0%,#0b1626 72%); border: 1px solid rgba(90,130,200,.18); border-radius: 16px; padding: 26px 14px 12px; min-height: 84px; margin-top: 9px; }

.cvban2 .lf { position: relative; z-index: 2; width: 64%; padding-right: 10px; box-sizing: border-box; }

.cvban2 .tt { font-size: 11.5px; font-weight: 800; color: #fff; line-height: 1.25; }

.cvban2 .ss { font-size: 11px; color: #aab6cd; margin-top: 5px; line-height: 1.4; }

.cvban2 .pl2 { display: inline-flex; margin-top: 9px; background: #5ea2ff; color: #10202f; font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 22px; }

.cvban2 .tg2 { position: absolute; top: 8px; left: 12px; z-index: 3; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a9bcda; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); padding: 1px 7px; border-radius: 20px; line-height: 1.35; }

.cvban2 .rg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32%; z-index: 1; }

.cvban2 .chip { width: 100%; box-sizing: border-box; background: #fff; border-radius: 12px; padding: 11px 2px; text-align: center; font-weight: 900; font-size: 7.5px; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; color: #0f2a4d; box-shadow: 0 10px 22px -8px rgba(0,0,0,.5); }

.cvban2 .chip span { color: #2563eb; padding: 0 2px; }

.dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }

.dots i { width: 6px; height: 6px; border-radius: 50%; background: #2a3c57; }

.dots i.on { background: #5ea2ff; }
/* превью мессенджеров и экрана результата — дополнение к перенесённым правилам */

.tgwrap { background: #17212b; border-radius: 13px; padding: 11px; }

.tgm { background: #232f3d; border-radius: 12px 12px 12px 4px; padding: 11px 13px; color: #e7eefb; font-size: 12.5px; line-height: 1.5; }

.tgm b { color: #fff; }

.tgad { margin-top: 9px; border-top: 1px solid rgba(255,255,255,.09); padding-top: 9px; }

.tgtag { font-size: 9.5px; color: #8fa4c4; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

.tgbtn { margin-top: 8px; background: #5ea2ff; color: #10202f; border-radius: 9px; text-align: center; font-weight: 700; font-size: 12px; padding: 8px; }

.tgbtn.gh { background: #232f3d; color: #8fa4c4; border: 1px solid rgba(255,255,255,.12); }

/* ── Окно «Посмотреть пример» ────────────────────────────────────────────
   Модалка одна на все примеры: один телефон, три телефона рядом (.trio)
   или живая страница сайта во фрейме (.wide).
   ⚠️ .demoWrap[hidden] обязан идти ДО .demoWrap: display:flex перебивает
   атрибут hidden, и невидимое окно перехватывает клики по всей странице. */
.demoWrap[hidden] { display: none; }

.demoWrap {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(9,17,32,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.demoBox {
  position: relative;
  background: var(--bg, #fff); color: var(--text, #0b0f19);
  border-radius: 20px; padding: 22px;
  width: 100%; max-width: min(94vw, 560px);
  max-height: 92vh; overflow: auto;
}

.demoBox.wide { max-width: min(96vw, 1180px); }
.demoBox.trio { max-width: min(96vw, 1060px); }

.demoClose {
  position: absolute; top: 12px; right: 14px;
  border: 0; background: transparent; color: inherit;
  font-size: 28px; line-height: 1; cursor: pointer; opacity: .5;
}
.demoClose:hover { opacity: 1; }

.demoTitle { font-weight: 800; font-size: 18px; margin: 0 0 14px; padding-right: 30px; }

.demoBody { display: flex; justify-content: center; flex-wrap: wrap; }

.demoBody iframe { width: 100%; height: 60vh; border: 1px solid var(--border, #e6e8ee); border-radius: 14px; background: #fff; }
.demoBox.wide .demoBody iframe { height: 72vh; }

.demoBody .trioRow { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; width: 100%; }
.demoBody .trioCol { width: 300px; }
.demoBody .trioCol .cap { margin-top: 10px; text-align: center; }
.demoBody .trioNote { width: 100%; margin-top: 14px; font-size: 12.5px; opacity: .7; text-align: center; }

/* тёмная тема: подписи под телефонами были рассчитаны на светлый кабинет */
html[data-theme="dark"] .cap b { color: #e8edf5; }
html[data-theme="dark"] .cap span { color: #8a94a8; }