/* Spagalaxy_InterestModal v1.0.0 (2026-10-18). Префикс sgim-. */

/* корзинный qty скрываем только когда включён hideCart (класс ставит JS) */
body.sgim-hide-cart .box-tocart .field.qty{display:none!important}

body.sgim-open{overflow:hidden}

/* ---------- модалка ---------- */
.sgim-overlay{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);font-family:inherit;color:inherit}
.sgim-overlay.sgim-on{display:flex}
/* лист не скроллится сам: прокручиваются .sgim-main / .sgim-thanks, крестик всегда на месте */
.sgim-dialog{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;max-width:440px;max-height:92vh;overflow:hidden;padding:0;background:#fff;color:#333;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.28);animation:sgim-pop .16s ease-out;outline:0;text-align:left;font-size:16px;line-height:1.4}
@supports (height:1dvh){.sgim-dialog{max-height:92dvh}}
.sgim-dialog *{box-sizing:border-box}
.sgim-dialog [hidden]{display:none!important}
.sgim-main,.sgim-thanks{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:24px}
.sgim-close{position:absolute;z-index:5;top:8px;right:8px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sgim-close:hover{background:#f0f0f0}
.sgim-close svg{width:20px;height:20px}
.sgim-title{margin:0 40px 8px 0;font-size:22px;line-height:1.25;font-weight:700;color:#222;text-transform:none;letter-spacing:normal}
.sgim-sub{margin:0 0 16px;color:#555;font-size:15px}
.sgim-topic{margin:-8px 0 16px;font-size:14px;color:#07879a;font-weight:600}

.sgim-product{display:flex;gap:12px;align-items:center;margin:0 0 16px;padding:10px;border:1px solid #eee;border-radius:8px;background:#fafafa}
.sgim-product img{flex:0 0 72px;width:72px;height:72px;object-fit:cover;border-radius:8px;background:#eee}
.sgim-pname{font-size:15px;line-height:1.3;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sgim-price{margin-top:4px;font-weight:700;font-size:16px;color:#222}
.sgim-price:empty{display:none}

.sgim-form{margin:0}
.sgim-row{margin:0 0 14px}
.sgim-label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:#333}
.sgim-label small{font-weight:400;color:#777;margin-left:4px;font-size:13px}
.sgim-field{position:relative}
.sgim-input{display:block;width:100%;height:48px;margin:0;padding:0 44px 0 14px;font:inherit;font-size:16px;color:#222;background:#fff;border:1px solid #d9d9d9;border-radius:8px;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none}
/* защита от стилей темы для полей внутри окна */
.sgim-dialog input.sgim-input,.sgim-dialog input.sgim-input:focus{box-shadow:none!important;height:48px!important;font-size:16px!important}
.sgim-input::placeholder{color:#9a9a9a}
.sgim-input:focus{border:2px solid #07879a;padding-left:13px}
.sgim-input[aria-invalid="true"]{border-color:#c62828}
.sgim-input[aria-invalid="true"]:focus{border:2px solid #c62828}
.sgim-clear{position:absolute;z-index:3;top:8px;right:6px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sgim-clear:hover{background:#f0f0f0;color:#333}
.sgim-clear svg{width:16px;height:16px}
.sgim-error{margin:6px 0 0;font-size:14px;color:#c62828}
.sgim-formerr{margin:10px 0 0;font-size:14px;line-height:1.4;color:#c62828}
.sgim-fallback{margin:12px 0 0}

/* honeypot: вне экрана, не display:none (боты такие поля заполняют) */
.sgim-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* intl-tel-input: подгоняем под наши поля (специфичность выше, чем у .iti input[type=tel]) */
.sgim-field .iti{display:block;width:100%}
.sgim-field .iti .sgim-input{padding-right:44px;height:48px;font-size:16px;border-radius:8px}
.sgim-field .iti__selected-flag{border-radius:8px 0 0 8px}
.sgim-field .iti__selected-dial-code{font-size:16px;color:#222}
.sgim-dialog .iti__country-list{max-width:min(320px,calc(100vw - 48px));overflow-x:hidden;color:#222;font-size:14px;line-height:1.3;text-align:left;text-transform:none;letter-spacing:normal;z-index:6}
.sgim-dialog .iti__country-name,.sgim-dialog .iti__dial-code{font-size:14px}
/* список стран на телефоне открывается в body — должен быть над подложкой модалки */
.iti--container{z-index:1200}

/* выбор мессенджера */
.sgim-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
.sgim-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sgim-ch{display:flex;gap:8px}
.sgim-chbtn{position:relative;display:block;flex:1 1 0;min-width:0;margin:0;cursor:pointer}
.sgim-chface{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;border:2px solid #dcdcdc;border-radius:8px;background:#fff;color:#333;font-size:13px;font-weight:600;line-height:1.2;transition:background-color .16s,border-color .16s}
.sgim-chbtn:hover .sgim-chface{background:#f7f7f7}
.sgim-chbtn.sgim-on .sgim-chface,.sgim-chinput:checked + .sgim-chface{border-color:#333;background:#f3f3f3}
.sgim-chinput:focus-visible + .sgim-chface{outline:2px solid #07879a;outline-offset:2px}
.sgim-chico{display:inline-flex;width:22px;height:22px;color:#333}
.sgim-chico svg{width:22px;height:22px}
.sgim-chname{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgim-chck{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;background:#333;color:#fff;display:none;align-items:center;justify-content:center}
.sgim-chck svg{width:10px;height:10px}
.sgim-chbtn.sgim-on .sgim-chck,.sgim-chinput:checked + .sgim-chface .sgim-chck{display:flex}

/* город по IP */
.sgim-city{margin:0 0 14px}
.sgim-city-line{margin:0;font-size:13px;color:#555;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.sgim-city-hint{font-size:12px;color:#888}
.sgim-link{display:inline;margin:0;padding:6px 2px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:#07879a;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sgim-link:hover{color:#055d6b}
.sgim-city-edit .sgim-label{margin-bottom:6px}

.sgim-submit,.sgim-btn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin:0;padding:0 16px;border:0;border-radius:8px;background:#333;color:#fff;font:inherit;font-size:16px;font-weight:700;text-decoration:none;text-transform:none;letter-spacing:normal;cursor:pointer;transition:background-color .16s}
.sgim-submit:hover,.sgim-btn:hover,.sgim-submit:focus-visible,.sgim-btn:focus-visible{background:#4a4a4a;color:#fff}
.sgim-submit[disabled],.sgim-submit[disabled]:hover{background:#333;color:#fff;opacity:.6;cursor:default}
.sgim-note{margin:10px 0 0;text-align:center;font-size:13px;color:#666}

/* ---------- экран «дякуємо» ---------- */
.sgim-thanks{display:none;text-align:left}
.sgim-thanks h2{outline:0;margin:0 0 4px;text-align:center;font-size:21px}
.sgim-ok{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:#e6f4f6;color:#07879a;display:flex;align-items:center;justify-content:center}
.sgim-ok svg{width:26px;height:26px}
.sgim-dialog.sgim-state-thanks .sgim-main{display:none}
.sgim-dialog.sgim-state-thanks .sgim-thanks{display:block}

.sgim-block{margin:0;padding:14px 0;border-top:1px solid #eee}
.sgim-block:first-of-type{border-top:0}
.sgim-bt{margin:0 0 6px;font-size:14px;line-height:1.3;font-weight:700;color:#222;text-transform:none;letter-spacing:normal}
.sgim-bp{margin:0 0 10px;font-size:14px;line-height:1.4;color:#444}
.sgim-bp-lead{font-size:14px;font-weight:600;color:#222}
.sgim-small{margin:8px 0 0;font-size:12px;color:#666;text-align:center}
.sgim-steps{margin:0;padding:0;list-style:none;counter-reset:sgim-s}
.sgim-steps li{position:relative;margin:0 0 4px;padding-left:22px;font-size:14px;line-height:1.4;color:#444;counter-increment:sgim-s}
.sgim-steps li:before{content:counter(sgim-s) ".";position:absolute;left:0;top:0;font-weight:700;color:#222}

.sgim-cbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin:0;padding:0 12px;border:1px solid #333;border-radius:8px;background:#333;color:#fff;font:inherit;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;text-transform:none;letter-spacing:normal;cursor:pointer;transition:background-color .16s}
.sgim-cbtn:hover,.sgim-cbtn:focus-visible{background:#4a4a4a;border-color:#4a4a4a;color:#fff}
.sgim-cbtn-alt{background:#fff;color:#333;border-color:#bbb}
.sgim-cbtn-alt:hover,.sgim-cbtn-alt:focus-visible{background:#f4f4f4;border-color:#999;color:#333}
.sgim-cbtn-main{background:#333;color:#fff}
.sgim-cbtn .sgim-chico,.sgim-cbtn .sgim-chico svg{width:20px;height:20px;color:inherit}
.sgim-cbtn.sgim-disabled,.sgim-cbtn.sgim-disabled:hover{background:#333;border-color:#333;color:#fff;opacity:.4;cursor:not-allowed}

.sgim-contacts{display:flex;gap:8px}
.sgim-contacts .sgim-cbtn{flex:1 1 0;min-width:0;padding:0 6px;gap:6px}
.sgim-contacts .sgim-cbtn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sgim-trust{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding:12px 0;border-top:1px solid #eee;font-size:14px;color:#333}
.sgim-star{display:inline-flex;width:18px;height:18px;color:#f5a623}
.sgim-star svg{width:18px;height:18px}
.sgim-trust-text{font-weight:600}
.sgim-trust .sgim-link{margin-left:auto}

.sgim-visit{border-top:1px solid #eee;padding-bottom:0}
.sgim-btnrow{display:flex;gap:8px}
.sgim-btnrow .sgim-cbtn{flex:1 1 0;min-width:0}
.sgim-book{margin-top:12px}
.sgim-fs{margin:0 0 10px;padding:0;border:0;min-width:0}
.sgim-chips{display:flex;flex-wrap:wrap;gap:8px}
.sgim-chip{display:block;margin:0;cursor:pointer}
.sgim-chipface{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:2px solid #dcdcdc;border-radius:20px;background:#fff;color:#333;font-size:14px;font-weight:600;transition:background-color .16s,border-color .16s}
.sgim-chip:hover .sgim-chipface{background:#f7f7f7}
.sgim-vh:checked + .sgim-chipface{border-color:#333;background:#f3f3f3}
.sgim-vh:focus-visible + .sgim-chipface{outline:2px solid #07879a;outline-offset:2px}
.sgim-book .sgim-confirm{margin-top:4px}

/* ---------- мобильная панель ---------- */
.sgim-bar{display:none}
@media (max-width:767px){
  .sgim-bar{display:flex;gap:10px;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:1000;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.14);transform:translateY(100%);visibility:hidden;transition:transform .16s ease-out,visibility 0s linear .16s}
  .sgim-bar.sgim-bar-show{transform:none;visibility:visible;transition:transform .16s ease-out}
  .sgim-bar-main{flex:1 1 auto;height:48px;padding:0 16px;border:0;border-radius:8px;background:#333;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
  .sgim-bar-main:hover,.sgim-bar-main:focus-visible{background:#4a4a4a}
  .sgim-bar-call{flex:0 0 48px;width:48px;height:48px;border:1px solid #bbb;border-radius:50%;background:#fff;color:#333;display:flex;align-items:center;justify-content:center;text-decoration:none}
  .sgim-bar-call svg{width:22px;height:22px}
  body.sgim-has-bar{padding-bottom:calc(68px + env(safe-area-inset-bottom))}

  .sgim-overlay{align-items:flex-end;padding:0}
  .sgim-dialog{max-width:none;border-radius:16px 16px 0 0;animation:sgim-sheet .16s ease-out}
  .sgim-main,.sgim-thanks{padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
  .sgim-block{padding:12px 0}
  .sgim-cbtn{min-height:44px}
  .sgim-ch{gap:6px}
}

/* анимации только через transform (без opacity) */
@keyframes sgim-pop{from{transform:translateY(8px)}to{transform:none}}
@keyframes sgim-sheet{from{transform:translateY(24px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .sgim-overlay.sgim-on,.sgim-dialog{animation:none!important}
  .sgim-bar,.sgim-bar.sgim-bar-show,.sgim-submit,.sgim-btn,.sgim-cbtn,.sgim-chface,.sgim-chipface{transition:none!important}
}

/* --- плавающие виджеты сайта: прячем при открытой модалке, поднимаем над мобильной панелью --- */
body.sgim-open .spg-video-widget,
body.sgim-open #sg-context-chat { display: none !important; }
@media (max-width: 767px) {
  body.sgim-bar-visible .spg-video-widget { --spgvw-bottom: 84px !important; }
  body.sgim-bar-visible #sg-context-chat { bottom: 84px !important; }
}

/* телефон: три кнопки мессенджеров в ряд без обрезки подписи */
@media (max-width:420px){.sgim-contacts .sgim-cbtn,.sgim-contacts .sgim-cbtn:first-child{flex:1 1 auto;width:auto;min-width:0;font-size:13px;padding:0 8px;gap:6px}.sgim-contacts .sgim-cbtn svg{display:none}}

/* кнопки мессенджеров в фирменных цветах (hover только светлее) */
.sgim-cbtn-brand,.sgim-cbtn-brand:hover,.sgim-cbtn-brand:focus-visible{color:#fff}
.sgim-ch-telegram{background:#2AABEE;border-color:#2AABEE}.sgim-ch-telegram:hover,.sgim-ch-telegram:focus-visible{background:#4dbbf2;border-color:#4dbbf2}
.sgim-ch-viber{background:#7360F2;border-color:#7360F2}.sgim-ch-viber:hover,.sgim-ch-viber:focus-visible{background:#8a7af5;border-color:#8a7af5}
.sgim-ch-whatsapp{background:#25D366;border-color:#25D366}.sgim-ch-whatsapp:hover,.sgim-ch-whatsapp:focus-visible{background:#44db7c;border-color:#44db7c}

/* banner-mode: блок выгоды «Підбірка з акції» (вид как у .sgim-product) */
.sgim-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px;padding:10px;border:1px solid #eee;border-radius:8px;background:#fafafa}
.sgim-offer div{font-size:12px;line-height:1.3;color:#555}
.sgim-offer b{display:block;margin:0 0 2px;font-size:18px;line-height:1.2;font-weight:700;color:#222}