/* Панель «Магазину сайтів» і модальні вікна. Свої кольори, незалежні від теми сайту-прикладу. */
.nb{position:fixed;left:0;right:0;bottom:0;z-index:80;font:14px/1.4 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#f1eaff}
.nb-row{display:flex;align-items:center;gap:10px;padding:10px max(12px,env(safe-area-inset-left));padding-bottom:max(10px,env(safe-area-inset-bottom));
  background:rgba(14,9,26,.94);backdrop-filter:blur(14px);border-top:1px solid rgba(196,132,255,.28);box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.nb a{color:inherit;text-decoration:none}
.nb-back{font-size:22px;line-height:1;padding:6px 8px;border-radius:10px;opacity:.85;white-space:nowrap}
.nb-back span{font-size:13px}
.nb-tiers{display:flex;background:rgba(255,255,255,.07);border-radius:999px;padding:3px}
.nb-tiers a{padding:7px 12px;border-radius:999px;font-weight:600;white-space:nowrap;opacity:.75}
.nb-tiers a.on{background:linear-gradient(120deg,#ff3df2,#b23cff 55%,#6a2bff);opacity:1}
.nb-price{font-weight:800;font-size:16px;white-space:nowrap;margin-left:auto}
.nb-inc{background:none;border:1px solid rgba(196,132,255,.4);color:inherit;border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.nb-inc i{font-style:normal;display:inline-block;transition:transform .2s}
.nb-inc[aria-expanded=true] i{transform:rotate(180deg)}
.nb-btn{background:linear-gradient(120deg,#ff3df2,#b23cff 55%,#6a2bff);color:#fff;border:0;border-radius:999px;padding:10px 18px;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.nb-btn:disabled{opacity:.6}
.nb-panel{background:rgba(14,9,26,.97);border-top:1px solid rgba(196,132,255,.28);padding:18px max(16px,env(safe-area-inset-left)) 14px;max-height:60vh;overflow:auto}
.nb-panel ul{margin:0 0 14px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 22px}
.nb-panel li{padding-left:22px;position:relative}
.nb-panel li::before{content:"✓";position:absolute;left:0;color:#ff3df2;font-weight:800}
.nb-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nb-link{background:none;border:0;color:#d6b8ff;text-decoration:underline;font:inherit;cursor:pointer;padding:8px 0;text-align:left}
@media (max-width:820px){
  .nb-back span,.nb-order{display:none}
  .nb-row{flex-wrap:wrap;gap:8px}
  .nb-tiers{order:1;flex:1 1 100%;justify-content:space-between}
  .nb-tiers a{flex:1;text-align:center;padding:7px 6px}
  .nb-price{margin-left:0}
  .nb-inc{margin-left:auto}
}
/* модальні вікна — і на прикладах, і на сторінках вітрини */
.nb-modal{position:fixed;inset:0;z-index:90;background:rgba(5,2,12,.72);display:grid;place-items:center;padding:16px;
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#f1eaff}
.nb-card{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#170e2b;border:1px solid rgba(196,132,255,.3);
  border-radius:18px;padding:24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.nb-card h3{margin:0 0 8px;font:700 24px/1.2 "Bahnschrift","Segoe UI",system-ui,sans-serif}
.nb-x{position:absolute;top:10px;right:12px;background:none;border:0;color:#a698c2;font-size:28px;line-height:1;cursor:pointer}
.nb-muted{color:#a698c2;margin:0 0 10px}
.nb-hours{margin:0 0 16px;color:#cfc3ea}
.nb-hours .nb-on{color:#5ee3a1;font-weight:700}
.nb-links{display:grid;gap:10px}
.nb-links a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(196,132,255,.22);
  color:#fff;text-decoration:none;font-weight:700}
.nb-links a::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c,#ff3df2);flex:none}
.nb-call{--c:#5ee3a1}.nb-ig{--c:#ff3d8b}.nb-wa{--c:#25d366}.nb-vb{--c:#7360f2}.nb-tg{--c:#2aabee}
.nb-form{display:grid;gap:12px;margin-top:8px}
.nb-form label{display:grid;gap:5px;font-weight:600;font-size:14px}
.nb-form input,.nb-form select,.nb-form textarea{font:inherit;color:#f1eaff;background:#0f0920;border:1px solid rgba(196,132,255,.3);border-radius:10px;padding:11px 12px;width:100%}
.nb-form textarea{min-height:80px;resize:vertical}
.nb-via{display:grid;grid-template-columns:130px 1fr;gap:8px}
.nb-hp{position:absolute;left:-9999px;width:1px;height:1px}
.nb-res{margin:4px 0 0;color:#ffb3c7}
.nb-res.ok{color:#5ee3a1;font-weight:700;font-size:17px}
body:has(.nb){padding-bottom:84px}
@media (max-width:820px){body:has(.nb){padding-bottom:118px}}

/* Стара ціна в нижній панелі прикладу. */
.nb-price s{opacity:.55;font-weight:600;text-decoration-thickness:1px;margin-right:3px}

/* Значок акції в нижній панелі. Місця там мало, тож без слова — лише відсоток. */
.nb-promo{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;font:700 10px/1.3 system-ui,sans-serif;background:linear-gradient(90deg,#ff5f6d,#c644fc);color:#fff}

/* 11.10.2026: німецька форма — чекбокс згоди (Wertersatz) і рядок про AGB/Widerruf біля кнопки */
.nb-form .nb-chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13px;line-height:1.45}.nb-form .nb-chk input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;padding:0;accent-color:#c13cff}.nb-legal{font-size:12.5px;line-height:1.45;color:#bfb3d9;margin:0}.nb-legal a{color:#f1eaff;text-decoration:underline}
/* 15.10.2026: додаткові послуги у формі замовлення */
.nb-ad{border:1px solid rgba(196,132,255,.3);border-radius:10px;padding:10px 12px}
.nb-ad summary{cursor:pointer;font-weight:700;font-size:14px}
.nb-adl{display:grid;gap:8px;margin-top:10px;max-height:260px;overflow:auto}
.nb-adl i{font-style:normal;color:#d9a8ff;white-space:nowrap}
/* 19.10.2026: поле «інший номер WhatsApp» ховається атрибутом hidden — label{display:grid} його перебивав */
.nb-form [hidden]{display:none!important}