/* ═══════════════════════════════════════════════════════════════════════
   ENERGARD — нижня липка панель «Замовити дзвінок» (inc/welcome-popup.php).

   Раніше це був попап по центру. Власник 2026-09-28: зробити смугою внизу
   сайту через 30 с після заходу — вона нічого не закриває, тому не підпадає
   під «intrusive interstitials» Google і не потребує затримки після
   прокрутки на телефоні.

   Щоб панель не ховала кінець сторінки, поки відкрита, скрипт міряє її
   висоту в --eg-welbar-h і ставить html.eg-wel-on → body отримує
   padding-bottom, а кнопка чату й месенджери піднімаються над нею.

   Кольори беремо зі змінних теми (--nav-bg, --border, --gold …), тому
   світла тема підхоплюється сама з theme-light.css.
   ═══════════════════════════════════════════════════════════════════════ */

.eg-welbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99975;
  background: var(--nav-bg, rgba(9,9,13,.88));
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 -18px 50px rgba(0,0,0,.35);
  color: var(--text, #F4F4F6);
  font-family: var(--font, 'DM Sans'), system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(105%); opacity: 0;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.eg-welbar[hidden]{ display: none; }
.eg-welbar [hidden]{ display: none !important; }
.eg-welbar.is-open{ transform: translateY(var(--drag, 0px)); opacity: 1; }
.eg-welbar.is-dragging{ transition: none; }
html[data-theme="light"] .eg-welbar{ box-shadow: 0 -18px 50px rgba(15,23,42,.14); }

.eg-welbar__in{
  max-width: 1180px; margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; gap: 20px;
}
.eg-welbar__pic{
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 16px; object-fit: cover; display: block;
}
.eg-welbar__txt{ flex: 1 1 auto; min-width: 0; }
.eg-welbar__eyebrow{
  display: block; font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #ffbf2f);
}
.eg-welbar__h{
  margin: 5px 0 0; font-size: 17px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.015em; color: var(--text, #F4F4F6);
}
.eg-welbar__p{
  margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted, rgba(244,244,246,.62));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── форма ── */
.eg-welbar__form{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.eg-welbar__field{ display: block; }
.eg-welbar__field input{
  width: 194px; height: 46px; padding: 0 16px; border-radius: 13px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: var(--surface2, rgba(255,255,255,.06)); color: var(--text, #F4F4F6);
  font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
  transition: border-color .2s, box-shadow .2s;
}
.eg-welbar__field input::placeholder{ color: var(--muted, rgba(244,244,246,.55)); }
.eg-welbar__field input:focus{
  outline: none; border-color: var(--gold, #ffbf2f);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold, #ffbf2f) 20%, transparent);
}
.eg-welbar__field input[aria-invalid="true"]{ border-color: #FF453A; }
.eg-welbar__btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px !important; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--gold, #ffbf2f); color: #09090D;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: filter .2s, transform .2s, opacity .2s;
}
html[data-theme="light"] .eg-welbar__btn{ color: #fff; }
.eg-welbar__btn:hover{ filter: brightness(1.08); background: var(--gold, #ffbf2f); color: #09090D; }
html[data-theme="light"] .eg-welbar__btn:hover{ color: #fff; }
.eg-welbar__btn:active{ transform: scale(.97); }
.eg-welbar__btn.is-busy{ opacity: .6; pointer-events: none; }
.eg-welbar__err{
  position: absolute; left: 24px; bottom: calc(100% + 8px); margin: 0;
  max-width: calc(100% - 48px); padding: 8px 12px; border-radius: 10px;
  background: var(--surface, #13131F); border: 1px solid #FF453A;
  font-size: 13px; line-height: 1.35; color: #FF453A;
}
html[data-theme="light"] .eg-welbar__err{ color: #D70015; border-color: #D70015; }
.eg-welbar__hp{ position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eg-welbar__sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── подяка ── */
.eg-welbar__done{ flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.eg-welbar__done p{ margin: 0; font-size: 16px; font-weight: 600; color: var(--text, #F4F4F6); }
.eg-welbar__check{
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: #30D158; color: #fff;
  animation: egWelPop .5s cubic-bezier(.16,1,.3,1);
}
.eg-welbar__check svg{ width: 18px; height: 18px; }
@keyframes egWelPop{ from{ transform: scale(.4); opacity: 0; } to{ transform: none; opacity: 1; } }

/* ── телефон поруч і закриття ── */
.eg-welbar__tel{
  flex: 0 0 auto; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--text, #F4F4F6); white-space: nowrap;
}
.eg-welbar__tel:hover{ color: var(--gold, #ffbf2f); }
.eg-welbar__x{
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0 !important;
  border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--muted, rgba(244,244,246,.62));
  transition: color .2s, border-color .2s, transform .2s;
}
.eg-welbar__x svg{ width: 13px; height: 13px; }
.eg-welbar__x:hover{ color: var(--text, #F4F4F6); border-color: var(--gold, #ffbf2f); transform: scale(1.06); }
.eg-welbar__btn:focus-visible, .eg-welbar__x:focus-visible, .eg-welbar__tel:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--gold, #ffbf2f) 55%, transparent); outline-offset: 3px;
}

/* ── місце під панель: кінець сторінки лишається доступним ── */
html.eg-wel-on body{ padding-bottom: var(--eg-welbar-h, 0px) !important; }
/* кнопка чату, месенджери й панель чату піднімаються над смугою */
html.eg-wel-on .eg-chat__fab{ bottom: calc(24px + var(--eg-welbar-h, 0px)); }
html.eg-wel-on .eg-chat__dock{ bottom: calc(96px + var(--eg-welbar-h, 0px)); }
html.eg-wel-on .eg-chat__panel{ bottom: calc(24px + var(--eg-welbar-h, 0px)); height: min(600px, calc(100vh - 110px - var(--eg-welbar-h, 0px))); }

/* ── вузькі екрани ── */
@media (max-width: 1100px){
  .eg-welbar__p{ display: none; }
  .eg-welbar__tel{ display: none; }
}
/* на телефоні під панеллю вже стоїть липка смуга чату (.eg-mbar, 72px) —
   стаємо над нею окремою карткою з відступами */
@media (max-width: 900px){
  .eg-welbar{
    left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0; border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
    transform: translateY(calc(100% + 80px));
  }
  html[data-theme="light"] .eg-welbar{ box-shadow: 0 16px 40px rgba(15,23,42,.18); }
  html.eg-wel-on body{
    padding-bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px) + var(--eg-welbar-h, 0px)) !important;
  }
  .eg-welbar__in{ padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
  .eg-welbar__pic{ width: 44px; height: 44px; border-radius: 13px; }
  .eg-welbar__txt{ flex: 1 1 60%; padding-right: 30px; }
  .eg-welbar__h{ margin-top: 3px; font-size: 15px; line-height: 1.3; }
  .eg-welbar__form{ flex: 1 1 100%; }
  .eg-welbar__field{ flex: 1 1 auto; }
  .eg-welbar__field input{ width: 100%; height: 48px; }
  .eg-welbar__done{ flex: 1 1 100%; }
  .eg-welbar__x{
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0;
    background: var(--hover-bg, rgba(255,255,255,.06));
  }
  .eg-welbar__err{ left: 14px; max-width: calc(100% - 28px); }
}
@media (max-width: 400px){
  .eg-welbar__pic{ display: none; }
  .eg-welbar__btn{ flex: 1 1 100%; }
  .eg-welbar__form{ flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce){
  .eg-welbar{ transition: none; }
  .eg-welbar__check{ animation: none; }
}