/*
 * Реальный CSS виджета ХрамВиджет, извлечённый из src/ui/styles.ts
 * (репо /Users/peresvets/apps/hramWidget — runtime-виджет).
 *
 * Используется в hero лендинга чтобы статичный демо-виджет выглядел
 * пиксель-в-пиксель как реальный продукт. Все правила scoped через .hw-root,
 * на остальной лендинг не влияют.
 *
 * Удалены из оригинала:
 *   - @font-face (DM Sans / Source Serif 4 уже подключаются Google Fonts на лендинге)
 *   - .hw-trigger* (launcher-кнопка — на лендинге не нужна)
 *   - .hw-overlay (модалка раскрывается анимацией; на лендинге показываем сразу)
 *   - .hw-toast* (тосты — runtime-only)
 *   - launcher-position .hw-trigger-pos-*
 *
 * Также добавлен один override (#widget-real-host) — снимаем фиксированные
 * width/height/maxHeight у .hw-modal, чтобы инлайн-разместить в hero.
 */

/* ============================================================
   RESET: scoped на .hw-root *, !important чтобы пробить host CSS
   ============================================================ */
.hw-root,
.hw-root * {
  box-sizing: border-box !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none;
}
.hw-root button {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none;
}
.hw-root input,
.hw-root select,
.hw-root textarea {
  font: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  text-transform: none !important;
}
.hw-root iframe {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.hw-root a {
  color: inherit;
  text-decoration: none;
}
.hw-root img {
  max-width: none;
  height: auto;
  border: none !important;
  display: inline-block;
}
.hw-root div,
.hw-root span,
.hw-root p,
.hw-root h1,
.hw-root h2,
.hw-root h3 {
  background: transparent;
  color: inherit;
  text-transform: none;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
}

/* ============================================================
   ROOT VARIABLES
   ============================================================ */
.hw-root {
  --hw-primary: #1a1a2e;
  --hw-accent: #c9973b;
  --hw-bg: #faf9f7;
  --hw-text: #1a1a2e;
  --hw-muted: #8b8b9e;
  --hw-light: #b8b8c8;
  --hw-card-bg: #fff;
  --hw-card-border: #f0e8d9;
  --hw-field-border: #e8e6e1;
  --hw-radius: 14px;
  position: relative;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--hw-text);
}

/* ============================================================
   MODAL — статичный inline-вариант для hero
   ============================================================ */
.hw-root .hw-modal {
  width: 440px !important;
  max-width: 94vw !important;
  height: 660px !important;
  max-height: 90vh !important;
  background: var(--hw-bg) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(26, 26, 46, .18), 0 0 0 1px rgba(0, 0, 0, .04) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

/* HEADER */
.hw-root .hw-sticky {
  flex-shrink: 0 !important;
  background: var(--hw-bg) !important;
  z-index: 2;
  padding: 14px 18px 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.hw-root .hw-header-row {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  min-height: 36px !important;
}
.hw-root .hw-back {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--hw-muted) !important;
  font-size: 18px !important;
  position: absolute !important;
  left: 0 !important;
  text-align: center !important;
}
.hw-root .hw-title-center {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--hw-text) !important;
}
.hw-root .hw-title-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--hw-accent) !important;
  display: inline-block !important;
}
.hw-root .hw-close-abs {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--hw-muted) !important;
  font-size: 16px !important;
  position: absolute !important;
  right: 0 !important;
  text-align: center !important;
}
.hw-root .hw-temple-bar {
  font-size: 12px !important;
  color: var(--hw-muted) !important;
  text-align: center !important;
  padding: 8px 0 6px !important;
}

/* BODY */
.hw-root .hw-body {
  flex: 1 !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 18px 24px !important;
  min-height: 0 !important;
}
.hw-root .hw-body::-webkit-scrollbar {
  width: 4px;
}
.hw-root .hw-body::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}
.hw-root .hw-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--hw-muted) !important;
  margin: 0 0 8px 0 !important;
}

/* FOOTER */
.hw-root .hw-footer {
  flex-shrink: 0 !important;
  background: var(--hw-bg) !important;
  padding: 8px 18px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
.hw-root .hw-footer-line {
  font-size: 11px !important;
  color: var(--hw-light) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.hw-root .hw-footer-line a {
  color: var(--hw-muted) !important;
}
.hw-root .hw-help-btn {
  font-size: 11px !important;
  color: var(--hw-light) !important;
  text-decoration: underline !important;
  text-align: center !important;
}

/* CARDS */
.hw-root .hw-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.hw-root .hw-card {
  padding: 14px 16px !important;
  background: var(--hw-card-bg) !important;
  border-radius: 12px !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}
.hw-root .hw-c-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--hw-text) !important;
  display: block !important;
}
.hw-root .hw-c-sub {
  font-size: 12px !important;
  color: var(--hw-muted) !important;
  margin-top: 2px !important;
  display: block !important;
}
.hw-root .hw-action-card {
  padding: 18px !important;
  background: var(--hw-card-bg) !important;
  border-radius: 14px !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  text-align: left !important;
}
.hw-root .hw-action-card .hw-c-title {
  font-size: 15px !important;
}
.hw-root .hw-action-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

/* INPUTS / SELECTS */
.hw-root .hw-input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--hw-text) !important;
  background: #fff !important;
  border: 1.5px solid var(--hw-field-border) !important;
  border-radius: 10px !important;
  outline: none !important;
  margin: 0 !important;
}
.hw-root .hw-input::placeholder {
  color: var(--hw-light) !important;
}
.hw-root .hw-sel-trigger {
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--hw-text) !important;
  background: #fff !important;
  border: 1.5px solid var(--hw-field-border) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}
.hw-root .hw-sel-trigger .hw-arr {
  color: var(--hw-muted) !important;
  font-size: 12px !important;
}

.hw-root .hw-note-header {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid #eee !important;
}

/* AMOUNTS / TOGGLE / BUTTON */
.hw-root .hw-amounts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.hw-root .hw-amt {
  padding: 11px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  color: var(--hw-text) !important;
  background: #fff !important;
  border-radius: 10px !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
}
.hw-root .hw-amt.hw-sel {
  border-color: var(--hw-accent) !important;
  background: #fdf6ea !important;
  color: #8b6914 !important;
  font-weight: 600 !important;
}
.hw-root .hw-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  border-top: 1px solid #eee !important;
  margin-top: 14px !important;
}
.hw-root .hw-toggle-label {
  font-size: 13px !important;
  color: var(--hw-text) !important;
}
.hw-root .hw-toggle-sub {
  font-size: 11px !important;
  color: var(--hw-muted) !important;
  margin-top: 1px !important;
}
.hw-root .hw-toggle {
  width: 42px !important;
  height: 22px !important;
  background: #ddd !important;
  border-radius: 11px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.hw-root .hw-toggle.hw-on {
  background: var(--hw-accent) !important;
}
.hw-root .hw-toggle::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15) !important;
}
.hw-root .hw-toggle.hw-on::after {
  transform: translateX(20px);
}
.hw-root .hw-soon-tag {
  font-size: 10px !important;
  color: var(--hw-muted) !important;
  background: #f0f0ec !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  margin-left: 6px !important;
  display: inline-block !important;
}
.hw-root .hw-btn {
  width: 100% !important;
  padding: 13px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: #fff !important;
  background: var(--hw-primary) !important;
  border-radius: 12px !important;
  margin-top: 10px !important;
}

/* NAMES */
.hw-root .hw-name-row-input {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  align-items: stretch !important;
}
.hw-root .hw-name-row-input .hw-input {
  flex: 1 !important;
  min-width: 0 !important;
}
.hw-root .hw-prefix-btn {
  padding: 0 10px !important;
  height: 40px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--hw-text) !important;
  background: #fff !important;
  border: 1.5px solid var(--hw-field-border) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap;
  min-width: 56px !important;
  justify-content: center !important;
  text-align: center !important;
}
.hw-root .hw-add-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--hw-accent) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}
.hw-root .hw-names-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
}
.hw-root .hw-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.hw-root .hw-name-tag {
  flex: 1 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--hw-text) !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-root .hw-name-prefix {
  font-weight: 600 !important;
  color: #8b6914 !important;
  margin-right: 4px !important;
}
.hw-root .hw-name-del {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: var(--hw-light) !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}

/* PRICE */
.hw-root .hw-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-top: 1px solid #eee !important;
  margin-top: 6px !important;
}
.hw-root .hw-price-lbl {
  font-size: 12px !important;
  color: var(--hw-muted) !important;
}
.hw-root .hw-price-val {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--hw-text) !important;
}

/* ADDONS (свечи & требы) */
.hw-root .hw-addon-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0ec !important;
}
.hw-root .hw-addon-row:last-child {
  border-bottom: none !important;
}
.hw-root .hw-addon-ico {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.hw-root .hw-qty {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.hw-root .hw-qty-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: #f0efec !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--hw-text) !important;
  text-align: center !important;
}
.hw-root .hw-qty-num {
  font-size: 14px !important;
  font-weight: 600 !important;
  min-width: 18px !important;
  text-align: center !important;
}

/* PAY ICONS */
.hw-root .hw-pay-icons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  flex-wrap: wrap;
}
.hw-root .hw-pay-icon {
  padding: 4px 10px !important;
  background: #fff !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--hw-muted) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.hw-root .hw-secure {
  font-size: 11px !important;
  color: var(--hw-muted) !important;
  text-align: center !important;
  margin-bottom: 4px !important;
  margin-top: 8px !important;
}

/* ============================================================
   HERO-INLINE OVERRIDE
   .widget-card обёртка лендинга задаёт абс. позиционирование
   и размер. Внутри неё .hw-modal должен заполнить контейнер
   и не рисовать собственный фон/тень/радиус (их уже даёт
   .widget-card). Высоту виджета зажимаем под hero-media.
   ============================================================ */
.widget-card.hw-root {
  /* .hw-root в реальном виджете position:relative — забивает absolute из styles.css.
     Восстанавливаем абсолютное позиционирование внутри .hero-media. */
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 24px !important;
  top: auto !important;
  background: var(--hw-bg) !important;
  border: none !important;
}

/* ============================================================
   VIDEO-SHOWCASE OVERRIDE (.vs-widget popup в WhatItDoes-секции)
   .vs-widget — анимированный popup поверх browser-chrome.
   Внутрь кладём реальную checkout-разметку (.hw-sticky/.hw-body/.hw-footer).
   Снимаем у обёртки её собственный padding/font-size — теперь это даёт .hw-* контент.
   ============================================================ */
.vs-widget.hw-root {
  /* .hw-root { position: relative } перебивает .vs-widget { position: absolute }
     из styles.css — восстанавливаем абс. позиционирование внутри .vs-stage. */
  position: absolute !important;
  left: 50% !important;
  bottom: 6% !important;
  width: min(380px, 92%) !important;
  /* Резервируем сверху ~80px под caption «Это ваш сайт» (top: 18 + ~30 высота
     pill + воздух 30) + 30px снизу. Содержимое внутри скроллится при нехватке. */
  max-height: calc(100% - 110px) !important;
  padding: 0 !important;
  background: var(--hw-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-size: 14px !important;
}
.vs-widget.hw-root .hw-body {
  overflow-y: auto !important;
  padding-top: 10px !important;
  padding-bottom: 18px !important;
}
/* На мобильной версии виджет чуть выше — showcase тут portrait и caption
   оставляет больше свободного пространства снизу. */
@media (max-width: 720px) {
  .vs-widget.hw-root { bottom: 12% !important; }
}
/* Чуть просторнее action-карточки в showcase, чтобы виджет смотрелся
   значимее в портретном browser-chrome. */
.vs-widget.hw-root .hw-action-card {
  padding: 22px !important;
  gap: 16px !important;
}
.vs-widget.hw-root .hw-action-icon {
  width: 48px !important;
  height: 48px !important;
}
.vs-widget.hw-root .hw-cards {
  gap: 12px !important;
}
.widget-card.hw-root .hw-modal {
  width: 100% !important;
  max-width: 100% !important;
  height: 540px !important;
  max-height: 540px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   Mobile responsive — widget shrinks to fit shorter hero-media
   ========================================================= */
@media (max-width: 720px) {
  .widget-card.hw-root .hw-modal {
    height: 460px !important;
    max-height: 460px !important;
  }
}
@media (max-width: 480px) {
  .widget-card.hw-root .hw-modal {
    height: 440px !important;
    max-height: 440px !important;
  }
}