/**
 * VEKO HOME — «Акції (попапи)»: Сторіс (full-screen on entry) + Панель (bottom-right).
 * Markup/config: veko-core/includes/campaigns.php. Design from the client's
 * «Осінній розпродаж» popup (27.10.2026), switched to the site font.
 * Developer: Den Polansky — http://sitedone.tech
 */
.sp, .sp *, .pp, .pp * { box-sizing: border-box; }
.sp[hidden], .pp[hidden], .sp [hidden], .pp [hidden] { display: none !important; }

/* ---------- Сторіс ---------- */
.sp { --ink: #232327; --accent: var(--vc-accent, #a8452a); position: fixed; inset: 0; z-index: 1250; display: none; align-items: center; justify-content: center; background: rgba(20,18,16,.6); font-family: var(--ff-display, Arial, sans-serif); color: var(--ink); }
.sp.is-open { display: flex; animation: vkFade .25s ease; }
@keyframes vkFade { from { opacity: 0 } to { opacity: 1 } }
.sp-card { position: relative; width: 390px; height: min(720px, calc(100vh - 32px)); height: min(720px, calc(100dvh - 32px)); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; background: var(--tint, #efe7dc); transition: background .6s ease; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.sp-bars { display: flex; gap: 4px; padding: 10px 12px 0; }
.sp-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(35,35,39,.18); overflow: hidden; }
.sp-bars i b { display: block; height: 100%; width: 0; background: var(--ink); }
.sp-bars i.done b { width: 100%; }
.sp-bars i.run b { animation: spFill 4s linear forwards; }
@keyframes spFill { to { width: 100% } }
.sp-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 0; }
.sp-ava { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--accent); flex: 0 0 auto; }
.sp-ava img { width: 26px; }
.sp-head div { font-size: 13px; font-weight: 700; line-height: 1.15; }
.sp-head small { display: block; font-weight: 500; font-size: 11px; opacity: .6; }
.sp-close { margin-left: auto; width: 34px; height: 34px; padding: 6px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.sp-close svg { width: 22px; height: 22px; display: block; }
.sp-title { margin: 18px 20px 0; font-size: 30px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sp-stage { position: relative; flex: 1; min-height: 200px; }
.sp-slide { position: absolute; inset: 0; opacity: 0; transform: scale(.97); transition: opacity .5s ease, transform .5s ease; }
.sp-slide.is-on { opacity: 1; transform: none; }
.sp-sofa { position: absolute; left: 50%; bottom: 18%; width: 92%; transform: translateX(-50%); z-index: 2; }
.sp-shadow { position: absolute; left: 12%; right: 12%; bottom: calc(18% - 12px); height: 28px; background: radial-gradient(ellipse at center, rgba(30,22,18,.34), rgba(30,22,18,0) 70%); }
.sp-sticker { position: absolute; right: 18px; top: 8%; z-index: 3; padding: 10px 16px 12px; background: #fff; border-radius: 14px; transform: rotate(-5deg); box-shadow: 0 8px 20px rgba(0,0,0,.12); text-align: center; }
.sp-sticker b { display: block; font-size: 38px; line-height: 1; font-weight: 800; color: var(--accent); letter-spacing: -.03em; }
.sp-sticker span { font-size: 12px; font-weight: 700; }
.sp-sticker.sm b { font-size: 24px; letter-spacing: -.01em; }
.vk-grp { position: absolute; left: 4%; right: 4%; bottom: 18%; height: 62%; }
.vk-grp img { position: absolute; bottom: 0; }
.vk-grp .g0 { left: 50%; width: 62%; transform: translateX(-50%); z-index: 3; }
.vk-grp .g1 { left: 0; width: 44%; bottom: 22%; z-index: 1; }
.vk-grp .g2 { right: 0; width: 44%; bottom: 22%; z-index: 2; }
.sp-tap { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 4; background: none; border: 0; cursor: pointer; }
.sp-tap.l { left: 0; } .sp-tap.r { right: 0; }
.sp-foot { padding: 0 16px 16px; }
.sp-text { margin: 0 4px 14px; font-size: 13px; line-height: 1.5; opacity: .8; }
.sp-call, .sp-tg { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 16px; }
.sp-call { background: var(--ink); color: #fff; }
.sp-call:hover { color: #fff; opacity: .92; }
.sp-tg { margin-top: 8px; background: #fff; color: var(--ink); font-size: 15px; }
.sp-tg svg { width: 18px; height: 18px; }
.sp-note { margin-top: 8px; font-size: 11px; text-align: center; opacity: .6; }
@media (max-width: 520px) { .sp-card { width: 100%; height: 100%; border-radius: 0; } }

/* ---------- Панель ---------- */
.pp { --ink: #232327; --muted: #7a746d; --accent: var(--vc-accent, #a8452a); position: fixed; right: 16px; bottom: 16px; z-index: 1150; width: 380px; display: none; font-family: var(--ff-display, Arial, sans-serif); color: var(--ink); }
.pp.is-open { display: block; animation: ppUp .45s cubic-bezier(.2,.8,.2,1); }
@keyframes ppUp { from { transform: translateY(130%) } to { transform: none } }
.pp-card { position: relative; background: #fbfaf7; border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); overflow: hidden; }
.pp-x { position: absolute; top: 6px; right: 8px; z-index: 3; width: 26px; height: 26px; padding: 5px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.pp-x svg { width: 16px; height: 16px; display: block; }
.pp-row { display: flex; align-items: center; gap: 12px; padding: 10px 38px 10px 12px; cursor: pointer; }
.pp-thumb { position: relative; flex: 0 0 96px; height: 66px; border-radius: 12px; background: linear-gradient(#efe9e0, #e2dace); overflow: hidden; }
.pp-thumb img { position: absolute; left: 6%; bottom: 8px; width: 88%; opacity: 0; transition: opacity .5s; }
.pp-thumb img.is-on { opacity: 1; }
.pp-mid { flex: 1; min-width: 0; }
.pp-eye { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pp-h { margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.2; }
.pp-sub { margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.pp-round { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.pp-round:hover { color: #fff; }
.pp-round svg { width: 20px; height: 20px; }
.pp-more { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.pp.is-big .pp-more { max-height: 640px; }
.pp.is-big .pp-row { display: none; }
.pp-in { padding: 18px 18px 16px; }
.pp-in h2 { margin: 6px 0 12px; font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.pp-hero { position: relative; height: 132px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(#efe9e0, #e2dace); overflow: hidden; }
.pp-hero .vk-grp { bottom: 10px; height: 80%; }
.pp-hero > b { position: absolute; top: 10px; left: 12px; z-index: 4; font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.pp-text { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pp-call, .pp-tg { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 15px; }
.pp-call { background: var(--ink); color: #fff; }
.pp-call:hover { color: #fff; opacity: .92; }
.pp-tg { margin-top: 8px; border: 1px solid #d9d3ca; background: #fff; color: var(--ink); }
.pp-call svg, .pp-tg svg { width: 18px; height: 18px; }
.pp-note { margin-top: 8px; font-size: 11px; color: var(--muted); text-align: center; }
.pp-less { display: flex; align-items: center; gap: 4px; margin: 10px auto 0; border: 0; background: none; color: var(--muted); font: 600 12px var(--ff-display, Arial, sans-serif); cursor: pointer; }
.pp-less svg { width: 14px; height: 14px; }
@media (max-width: 520px) { .pp { left: 8px; right: 8px; bottom: 8px; width: auto; } }

/* While the Panel is open, lift the floating buttons it would cover:
   desktop — only scroll-to-top (bottom-right); phones — the panel is full width, lift chat too. */
body.vk-pp-open .fab-top { bottom: calc(var(--vk-pp-h, 90px) + 24px); transition: bottom .3s ease; }
@media (max-width: 520px) {
  body.vk-pp-open .chat-widget { bottom: calc(var(--vk-pp-h, 90px) + 16px); transition: bottom .3s ease; }
}