/* ECOGEO — секция услуг (табы + карточки + модалка). Этап 3-FIX5. */
.ecg-services{--ecg-green:#1F6B3B;--ecg-green-d:#175329;--ecg-ink:#16241c;--ecg-muted:#5b6b62;--ecg-bg:#f3f7f4;--ecg-card:#ffffff;
  background:var(--ecg-bg);border-radius:24px;padding:40px clamp(16px,3vw,48px) 48px;margin:0 auto;max-width:1240px;
  font-family:"Montserrat",system-ui,Arial,sans-serif;color:var(--ecg-ink)}

/* tabs */
.ecg-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 32px}
.ecg-tab{appearance:none;border:1px solid #d4e0d9;background:#fff;color:var(--ecg-ink);
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:15px;line-height:1;
  padding:13px 22px;border-radius:999px;cursor:pointer;transition:all .2s ease;white-space:nowrap}
.ecg-tab:hover{border-color:var(--ecg-green);color:var(--ecg-green)}
.ecg-tab.is-active{background:var(--ecg-green);border-color:var(--ecg-green);color:#fff;box-shadow:0 6px 16px rgba(31,107,59,.25)}

/* panels */
.ecg-panel{display:none}
.ecg-panel.is-active{display:block;animation:ecgFade .35s ease}
@keyframes ecgFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* cards grid */
.ecg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1024px){.ecg-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ecg-cards{grid-template-columns:1fr}}

.ecg-card{display:flex;flex-direction:column;background:var(--ecg-card);border-radius:18px;overflow:hidden;
  box-shadow:0 8px 26px rgba(20,40,30,.08);border:1px solid #ecf1ee;transition:transform .25s ease,box-shadow .25s ease}
.ecg-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(20,40,30,.14)}
.ecg-card-cover{position:relative;aspect-ratio:3/2;background:#214a36;overflow:hidden}
.ecg-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ecg-card-body{padding:22px 22px 8px;flex:1}
.ecg-card-title{font-family:"Unbounded",sans-serif;font-weight:600;font-size:18px;line-height:1.3;
  margin:0 0 10px;color:var(--ecg-ink);text-transform:none}
.ecg-card-desc{font-size:14.5px;line-height:1.6;color:var(--ecg-muted);margin:0}
.ecg-card-actions{display:flex;gap:12px;padding:18px 22px 24px}

/* buttons */
.ecg-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  height:48px;padding:0 16px;border-radius:999px;font-family:"Unbounded",sans-serif;font-weight:500;font-size:14px;
  line-height:1;cursor:pointer;text-decoration:none;transition:all .2s ease;border:2px solid transparent;text-transform:none}
.ecg-btn-primary{background:var(--ecg-green);color:#fff;border-color:var(--ecg-green)}
.ecg-btn-primary:hover{background:var(--ecg-green-d);border-color:var(--ecg-green-d);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(31,107,59,.28)}
.ecg-btn-outline{background:transparent;color:var(--ecg-green);border-color:var(--ecg-green)}
.ecg-btn-outline:hover{background:var(--ecg-green);color:#fff;transform:translateY(-1px)}
/* тема навязывает белый цвет ссылкам — перебиваем scoped (только в нашей секции) */
.ecg-services a.ecg-btn-outline{color:var(--ecg-green) !important}
.ecg-services a.ecg-btn-outline:hover{color:#fff !important}

/* modal */
.ecg-modal{position:fixed;inset:0;z-index:99999;display:none}
.ecg-modal.is-open{display:block}
.ecg-modal-overlay{position:absolute;inset:0;background:rgba(10,20,15,.55);backdrop-filter:blur(2px);animation:ecgFade .25s ease}
.ecg-modal-dialog{position:relative;z-index:1;width:min(520px,92vw);max-height:90vh;overflow:auto;margin:6vh auto 0;
  background:#fff;border-radius:22px;padding:34px clamp(20px,4vw,40px) 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);animation:ecgPop .3s ease;font-family:"Montserrat",sans-serif}
@keyframes ecgPop{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.ecg-modal-x{position:absolute;top:14px;right:16px;width:38px;height:38px;border:none;background:#f0f3f1;border-radius:50%;
  font-size:22px;line-height:1;color:#16241c;cursor:pointer;transition:background .2s}
.ecg-modal-x:hover{background:#e0e7e3}
.ecg-modal-title{font-family:"Unbounded",sans-serif;font-weight:600;font-size:21px;line-height:1.3;
  margin:0 30px 6px 0;color:var(--ecg-ink);text-transform:none}
.ecg-modal-sub{font-size:13.5px;color:var(--ecg-muted);margin:0 0 20px}

/* CF7 fields inside modal */
.ecg-modal .ecg-mf{margin-bottom:14px}
.ecg-modal .ecg-ml{display:block;font-size:13px;font-weight:600;color:var(--ecg-ink);margin-bottom:6px}
.ecg-modal .ecg-ml span{color:var(--ecg-green)}
.ecg-modal .ecg-input,.ecg-modal input.ecg-input,.ecg-modal textarea.ecg-input{
  width:100%;box-sizing:border-box;height:50px;padding:0 16px;border:1px solid #d4e0d9;border-radius:12px;
  font-family:"Montserrat",sans-serif;font-size:15px;color:var(--ecg-ink);background:#fff;transition:border-color .2s}
.ecg-modal textarea.ecg-input{height:auto;padding:12px 16px;resize:vertical;min-height:74px}
.ecg-modal .ecg-input:focus{outline:none;border-color:var(--ecg-green);box-shadow:0 0 0 3px rgba(31,107,59,.12)}
.ecg-modal .ecg-service-input{background:#f3f7f4;font-weight:600;color:var(--ecg-green)}
.ecg-modal .ecg-consent{font-size:11.5px;line-height:1.5;color:#8a978f;margin:4px 0 16px}
.ecg-modal .ecg-submit{width:100%;height:52px;border:none;border-radius:999px;background:var(--ecg-green);color:#fff;
  font-family:"Unbounded",sans-serif;font-weight:500;font-size:15px;cursor:pointer;transition:all .2s;text-transform:none}
.ecg-modal .ecg-submit:hover{background:var(--ecg-green-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,107,59,.3)}
.ecg-modal .wpcf7-spinner{background-color:var(--ecg-green)}
.ecg-modal .wpcf7 form .wpcf7-response-output{border-radius:10px;font-size:13.5px;margin:14px 0 0;padding:10px 14px}
body.ecg-modal-open{overflow:hidden}

/* ============================================================
 * Этап 3-FIX6 — полировка визуала (только оформление секции услуг)
 * ============================================================ */

/* 1. СВЕТЛЫЙ ФОН СЕКЦИИ: убрать тёмный демо-фон (#1a1a1a) и line-art (::before) */
.elementor-element-164a44d{background-color:#F4F6F5 !important;}
.elementor-element-164a44d::before,
.elementor-element-11771ba::before{background-image:none !important;background:none !important;content:none !important;}
/* заголовок «Наши услуги» / «Услуги» — тёмный/зелёный на светлом фоне (был белый) */
.elementor-element-f78a9be .wdt-heading-title{color:#16241c !important;}
.elementor-element-f78a9be .wdt-heading-subtitle,
.elementor-element-f78a9be .wdt-heading-subtitle *{color:#1F6B3B !important;}
/* кнопка «Все услуги» — зелёная заливка, читается на светлом */
.elementor-element-bd958d3 a.wdt-button{background-color:#1F6B3B !important;border-color:#1F6B3B !important;color:#fff !important;}
.elementor-element-bd958d3 a.wdt-button .wdt-button-text,
.elementor-element-bd958d3 a.wdt-button .wdt-button-icon,
.elementor-element-bd958d3 a.wdt-button .wdt-button-icon *{color:#fff !important;fill:#fff !important;}

/* 2. ТАБЫ: активный = сплошной зелёный, неактивные = светлые (тема красила ВСЕ зелёным) */
.ecg-services .ecg-tab{background:#ffffff !important;color:#16241c !important;border:1px solid #cdddd4 !important;box-shadow:none !important;}
.ecg-services .ecg-tab:hover{background:#eef4f0 !important;border-color:#1F6B3B !important;color:#1F6B3B !important;}
.ecg-services .ecg-tab.is-active{background:#1F6B3B !important;color:#ffffff !important;border-color:#1F6B3B !important;box-shadow:0 6px 16px rgba(31,107,59,.28) !important;}

/* 3 + 4. КНОПКИ КАРТОЧЕК: иконка-стрелка (CSS-mask, цвет = currentColor) + строгое выравнивание */
.ecg-services .ecg-card-actions{display:flex !important;gap:12px !important;align-items:stretch !important;}
.ecg-services .ecg-btn{flex:1 1 0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:8px !important;height:50px !important;min-height:50px !important;padding:0 14px !important;border-radius:999px !important;line-height:1 !important;}
.ecg-services .ecg-btn::after{content:"" !important;width:17px;height:17px;flex:0 0 auto;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2011h12.2l-3.6-3.6L14%206l6%206-6%206-1.4-1.4%203.6-3.6H4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2011h12.2l-3.6-3.6L14%206l6%206-6%206-1.4-1.4%203.6-3.6H4z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease;}
.ecg-services .ecg-btn-primary:hover::after,
.ecg-services .ecg-btn-outline:hover::after{transform:translateX(4px);}

/* 5. ЗАГЛУШКА ИЗОБРАЖЕНИЯ: нейтральная светлая (вместо грубой зелёной «foto») */
.ecg-services .ecg-card-cover{background:#eceef0 !important;}
.ecg-services .ecg-card-cover:has(img[src*="dummyimage"]) img{display:none !important;}
.ecg-services .ecg-card-cover:has(img[src*="dummyimage"]){background:#eceef0 !important;position:relative;}
.ecg-services .ecg-card-cover:has(img[src*="dummyimage"])::after{content:"";position:absolute;inset:0;
  background-color:#b6c2bb;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21%2019V5a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2zM8.5%2013.5l2.5%203%203.5-4.5%204.5%206H5l3.5-4.5z'/%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='1.5'/%3E%3C/svg%3E") center/46px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21%2019V5a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2zM8.5%2013.5l2.5%203%203.5-4.5%204.5%206H5l3.5-4.5z'/%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='1.5'/%3E%3C/svg%3E") center/46px no-repeat;
  opacity:.7;}

/* ============================================================
 * Этап 3-FIX7 — кнопки строго на одной линии + название = ссылка
 * ============================================================ */
/* 1. Тема навешивала margin-top:10px на <button> «Заказать» → съезд вниз. Обнуляем,
 *    жёстко выравниваем обе кнопки (border-box, одна высота, растяжка по контейнеру). */
.ecg-services .ecg-card-actions{align-items:stretch !important;}
.ecg-services .ecg-btn{margin:0 !important;box-sizing:border-box !important;align-self:stretch !important;
  height:50px !important;min-height:50px !important;vertical-align:top !important;}

/* 2. Название карточки = ссылка на single услуги: тёмное как сейчас, hover — зелёный */
.ecg-services .ecg-card-title-link{color:inherit !important;text-decoration:none;transition:color .2s ease;}
.ecg-services .ecg-card-title-link:hover{color:#1F6B3B !important;text-decoration:underline;}

/* ============================================================
 * Этап 4 — ТЁМНЫЙ ФОН секции услуг (как у квиза) + контраст под него
 * Только фон секции и цвет заголовка; карточки/кнопки/табы/модалка не тронуты.
 * ============================================================ */
/* фон секции = тёмный графит + зелёные свечения + тонкая топо-фактура (идентично квизу) */
.elementor-element-164a44d{
  background-color:#13211a !important;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(46,158,91,.14), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(31,107,59,.16), transparent 46%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='640'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.035'%20stroke-width='1.4'%3E%3Cpath%20d='M0%2070%20Q160%2030%20320%2070%20T640%2070'/%3E%3Cpath%20d='M0%20150%20Q160%20110%20320%20150%20T640%20150'/%3E%3Cpath%20d='M0%20230%20Q160%20190%20320%20230%20T640%20230'/%3E%3Cpath%20d='M0%20310%20Q160%20270%20320%20310%20T640%20310'/%3E%3Cpath%20d='M0%20390%20Q160%20350%20320%20390%20T640%20390'/%3E%3Cpath%20d='M0%20470%20Q160%20430%20320%20470%20T640%20470'/%3E%3Cpath%20d='M0%20550%20Q160%20510%20320%20550%20T640%20550'/%3E%3Cpath%20d='M0%20630%20Q160%20590%20320%20630%20T640%20630'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size:cover,cover,640px 640px !important;
  background-position:center !important;
  overflow:hidden;
}
/* панель услуг — прозрачная, чтобы тёмный фон был виден, а светлые карточки «лежали» на нём (как карточка квиза) */
.ecg-services{background:transparent !important}
/* заголовок «Наши услуги» — БЕЛЫЙ на тёмном (был тёмный для светлого фона) */
.elementor-element-f78a9be .wdt-heading-title{color:#ffffff !important;}
.elementor-element-f78a9be .wdt-heading-subtitle,
.elementor-element-f78a9be .wdt-heading-subtitle *{color:#3fbf72 !important;}
/* карточки остаются светлыми — усиливаем тень для «парения» на тёмном (карточки НЕ темним) */
.ecg-services .ecg-card{box-shadow:0 18px 44px rgba(0,0,0,.30) !important;border-color:transparent !important;}
/* неактивные табы — белые пиллы уже контрастны на тёмном; добавим лёгкую тень для отрыва */
.ecg-services .ecg-tab{box-shadow:0 2px 8px rgba(0,0,0,.18) !important;}
.ecg-services .ecg-tab.is-active{box-shadow:0 6px 16px rgba(31,107,59,.45) !important;}

/* ============================================================
   Этап 18 — страница-каталог услуг (была демо-страница Lumoria).
   Сетка карточек .ecg-cards переиспользуется как есть — здесь только обвязка групп.
   ============================================================ */
.ecg-catalog{max-width:1280px;margin:0 auto;padding:0 20px 8px}
.ecg-catalog__intro{max-width:900px;margin:0 auto 40px;text-align:center;font-size:17px;line-height:1.6;color:#4A5A62}
.ecg-catalog__group{margin:0 0 56px}
.ecg-catalog__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid #E3EAE6}
.ecg-catalog__cat{margin:0;font-size:26px;line-height:1.2;color:#13211A}
.ecg-catalog__all{flex:0 0 auto;font-size:14px;font-weight:600;color:#1F6B3B;text-decoration:none;white-space:nowrap}
.ecg-catalog__all:hover{color:#8CC63F}
.ecg-catalog__cta{margin:8px 0 0;padding:36px 24px;border-radius:18px;background:#13211A;color:#fff;text-align:center}
.ecg-catalog__cta h3{margin:0 0 8px;color:#fff;font-size:24px}
.ecg-catalog__cta p{margin:0 0 20px;color:rgba(255,255,255,.82);font-size:15px}
@media (max-width:767px){
  .ecg-catalog__head{flex-direction:column;align-items:flex-start;gap:6px}
  .ecg-catalog__cat{font-size:22px}
  .ecg-catalog__intro{font-size:15px;text-align:left;margin-bottom:28px}
}

/* Этап 18 — страница «Вакансии» (заглушка вместо демо-контактов США) */
.ecg-vac{max-width:900px;margin:0 auto;padding:8px 0 16px}
.ecg-vac__lead{font-size:19px;font-weight:600;color:#13211A;margin:0 0 12px}
.ecg-vac__cv{margin:18px 0 26px;font-size:16px}
.ecg-vac__cv a{color:#1F6B3B;font-weight:600}
.ecg-vac__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 26px}
.ecg-vac__card{padding:20px;border:1px solid #E3EAE6;border-radius:14px;background:#fff}
.ecg-vac__card h4{margin:0 0 8px;font-size:15px;color:#1F6B3B}
.ecg-vac__card p{margin:0;font-size:15px;line-height:1.6;color:#4A5A62}
.ecg-vac__card a{color:#13211A;text-decoration:none;font-weight:600}
.ecg-vac__card a:hover{color:#8CC63F}

/* Этап 18: переменные цветов объявлены в скоупе .ecg-services. Новые блоки
   (.ecg-catalog, .ecg-vac) лежат ВНЕ него → var(--ecg-green) не разрешался и
   .ecg-btn-primary рендерилась прозрачной (белый текст на белом фоне).
   Объявляем ТОЛЬКО переменные — оформление .ecg-services на них не переносим. */
.ecg-catalog, .ecg-vac{
  --ecg-green:#1F6B3B; --ecg-green-d:#175329; --ecg-ink:#16241c;
  --ecg-muted:#5b6b62; --ecg-bg:#f3f7f4; --ecg-card:#ffffff;
}

/* ============================================================
   ЭТАП 21 — направлений стало 6, два названия длинные
   («Техническое обследование зданий и сооружений»,
   «Оценка недвижимости и имущества»). У .ecg-tab был
   white-space:nowrap без max-width, поэтому на мобиле пилюля
   вылезала за вьюпорт и текст обрезался с обеих сторон.
   Разрешаем перенос внутри пилюли и ограничиваем ширину.
   ============================================================ */
.ecg-tabs{max-width:100%}
.ecg-tab{max-width:100%;white-space:normal;line-height:1.25;text-align:center;overflow-wrap:break-word}
@media(max-width:600px){
  .ecg-tabs{gap:8px}
  .ecg-tab{font-size:14px;padding:11px 16px}
}

/* ============================================================
   ЭТАП 25 — архив направления услуг (taxonomy-wdt_service_category.php).
   .ecg-catalog уже задаёт max-width и горизонтальные отступы; на архиве нет
   Elementor-секции, поэтому добавляем только вертикальные и пустое состояние.
   ============================================================ */
.ecg-catalog--archive{padding-top:56px;padding-bottom:64px}
.ecg-catalog--archive .ecg-catalog__group:last-child{margin-bottom:0}
.ecg-catalog__empty{margin:40px 0 18px;text-align:center;font-size:18px;color:#4A5A62}
.ecg-catalog__empty-sub{margin:0;text-align:center}
.ecg-arch-works{margin-top:8px;padding-top:40px;border-top:2px solid #dde6e0}
.ecg-card--work .ecg-card-body{padding-bottom:8px}
@media(max-width:600px){.ecg-catalog--archive{padding-top:32px;padding-bottom:40px}}

/* ============================================================
 * ECOGEO Этап 27 — ФИКС МОДАЛКИ «Запросить расчёт» (3 бага с приёмки)
 *
 * Б1. Кнопка «Отправить заявку» была НЕВИДИМА без наведения.
 *     `.ecg-modal .ecg-submit{background:var(--ecg-green)}` выигрывала каскад
 *     у темы, НО `--ecg-green` объявлена ТОЛЬКО на `.ecg-services`, а модалку
 *     `ecogeo-services.js` (строка 25) переносит в <body> порталом → var()
 *     не резолвится → объявление «invalid at computed-value time» → background
 *     схлопывается в `transparent`. Литеральный `color:#fff` при этом выживает:
 *     белый текст на белом диалоге. На :hover наша (тоже мёртвая) переменная
 *     отваливалась, и в силу вступало правило темы
 *     `layout.css .wpcf7-form p.with-spinner input.wpcf7-submit:hover
 *      {background-color:var(--wdtLinkColor)}` = #1A1A1A → кнопка «проявлялась».
 *     Лечение: переменные объявлены на самом #ecg-modal + литеральные фоллбэки.
 *
 * Б2. Не было стрелки. Сабмит CF7 — это <input type="submit">, а это
 *     replaced element: ::before/::after у него НЕ рендерятся в принципе
 *     (computed content=none). Плюс правило стрелки `.ecg-services .ecg-btn::after`
 *     и по селектору не подходило (модалка вне .ecg-services, класса .ecg-btn нет).
 *     На сайте стрелка живёт разметкой: у `a.wdt-button` — inline <svg>,
 *     у форм темы — <i class="icon-right-arrow">. Лечение: рисуем ту же стрелку
 *     через background-image (SVG data-URI) — на input это работает.
 *
 * Б3. «×» съезжал вниз-влево и был зелёной «таблеткой».
 *     Тема (lumoria/assets/css/base.css) стилизует ЛЮБУЮ кнопку селектором
 *     `button[type="button"]` — специфичность (0,1,1), а наш `.ecg-modal-x`
 *     это (0,1,0), т.е. тема ВЫИГРЫВАЕТ: margin:10px 0 0 (сдвиг вниз на 10px
 *     → 24px вместо 14px), padding:var(--wdtPadding_Btn)=14px 28px +
 *     border:1px solid → 38×38 превращалось в 58×38, border-radius:40px,
 *     background:var(--wdtPrimaryColor). Проверено: отключение base.css в
 *     рантайме возвращает наши стили.
 *     Лечение: все селекторы модалки подняты до `#ecg-modal …` (1,x,x) +
 *     явный сброс box-модели кнопки.
 *
 * Приёмка: default-состояние = зелёная кнопка со стрелкой БЕЗ наведения,
 * :hover — лишь чуть темнее; «×» — ровный круг в правом верхнем углу.
 * ============================================================ */

/* Переменные — на самой модалке: она живёт в <body>, вне .ecg-services */
#ecg-modal{
  --ecg-green:#1F6B3B;      /* = --wdtPrimaryColor темы, цвет основных CTA */
  --ecg-green-d:#175329;    /* hover: чуть темнее */
  --ecg-ink:#16241c;
  --ecg-muted:#5b6b62;
}

/* ---------- Б3: крестик строго в правый верхний угол ---------- */
#ecg-modal .ecg-modal-x{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  box-sizing:border-box;
  width:40px;
  height:40px;
  min-width:0;
  min-height:0;
  margin:0;                 /* тема ставила margin:10px 0 0 → съезд вниз */
  padding:0;                /* тема ставила 14px 28px → «таблетка» 58×38 */
  border:0;                 /* тема ставила border:1px solid #1F6B3B */
  border-radius:50%;
  background-color:#eef2f0;
  background-image:none;
  color:var(--ecg-ink,#16241c);
  font-family:"Montserrat",system-ui,Arial,sans-serif;
  font-size:24px;
  font-weight:400;
  line-height:1;
  text-transform:none;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
#ecg-modal .ecg-modal-x:hover{
  background-color:var(--ecg-green,#1F6B3B);
  border:0;
  color:#fff;
}
/* фокус — только кольцо: заливку не трогаем, иначе крестик выглядит «нажатым»
   сразу после открытия (openModal ставит фокус на первый элемент диалога,
   а это как раз .ecg-modal-x — он первый в DOM). */
#ecg-modal .ecg-modal-x:focus-visible{outline:2px solid var(--ecg-green,#1F6B3B);outline-offset:2px}

/* заголовок не должен подлезать под крестик */
#ecg-modal .ecg-modal-title{margin-right:46px}

/* ---------- Б1 + Б2: кнопка «Отправить заявку» = основная CTA сайта ---------- */
/* обёртка: CF7 навешивает .with-spinner (display:inline-flex) → кнопка была 252px */
#ecg-modal .wpcf7-form p.with-spinner,
#ecg-modal .ecg-modal-form form > p:last-of-type{
  display:block;
  width:100%;
  position:relative;
  margin:0;
  text-align:center;
}

#ecg-modal .ecg-submit,
#ecg-modal input.wpcf7-submit{
  box-sizing:border-box;
  display:block;
  width:100%;
  height:54px;
  margin:2px 0 0;
  /* симметричный padding → подпись строго по центру, стрелка живёт в правом поле */
  padding:0 52px;
  border:2px solid var(--ecg-green,#1F6B3B);
  border-radius:999px;

  /* НОРМАЛЬНОЕ состояние — уже зелёная, видна без наведения */
  background-color:var(--ecg-green,#1F6B3B);
  /* Б2: стрелка — тот же глиф, что у кнопок «Заказать»/«Подробнее» */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Cpath%20d='M4%2011h12.2l-3.6-3.6L14%206l6%206-6%206-1.4-1.4%203.6-3.6H4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 22px center;
  background-size:18px 18px;

  color:#fff;
  font-family:"Unbounded",sans-serif;
  font-weight:500;
  font-size:15px;
  line-height:1;
  text-align:center;
  text-transform:none;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,
             background-position .2s ease,transform .2s ease;
}

/* :hover — ЛЁГКОЕ изменение (чуть темнее + стрелка вперёд), а не «проявление» */
#ecg-modal .ecg-submit:hover,
#ecg-modal input.wpcf7-submit:hover,
#ecg-modal .ecg-submit:focus-visible,
#ecg-modal input.wpcf7-submit:focus-visible{
  background-color:var(--ecg-green-d,#175329);
  border-color:var(--ecg-green-d,#175329);
  color:#fff;
  background-position:right 18px center;
  box-shadow:0 8px 20px rgba(31,107,59,.28);
  transform:translateY(-1px);
}
#ecg-modal .ecg-submit:active,
#ecg-modal input.wpcf7-submit:active{transform:translateY(0);box-shadow:none}
#ecg-modal .ecg-submit:disabled,
#ecg-modal input.wpcf7-submit:disabled{opacity:.65;cursor:default;transform:none}

/* Спиннер CF7. Тема центрует его ПОВЕРХ подписи
   (`.wpcf7-form .with-spinner .wpcf7-spinner{left:50%;top:50%;translate(-50%,-50%)}`),
   а старое правило красило его мёртвой переменной → он был прозрачным и никто
   этого не замечал. Задаём явный цвет — значит обязаны и спрятать его до сабмита,
   иначе на кнопке висит светлый кружок. */
#ecg-modal .wpcf7-spinner{
  position:absolute;
  left:auto;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  margin:0;
  background-color:rgba(255,255,255,.9);
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease;
}
#ecg-modal form.submitting .wpcf7-spinner{visibility:visible;opacity:1}

/* прочие места, где var() из .ecg-services не резолвился внутри модалки */
#ecg-modal .ecg-ml{color:var(--ecg-ink,#16241c)}
#ecg-modal .ecg-ml span{color:var(--ecg-green,#1F6B3B)}
#ecg-modal .ecg-modal-sub{color:var(--ecg-muted,#5b6b62)}
#ecg-modal .ecg-input{color:var(--ecg-ink,#16241c)}
#ecg-modal .ecg-input:focus{border-color:var(--ecg-green,#1F6B3B);box-shadow:0 0 0 3px rgba(31,107,59,.12)}
#ecg-modal .ecg-service-input{color:var(--ecg-green,#1F6B3B)}
#ecg-modal .ecg-modal-title{color:var(--ecg-ink,#16241c)}

/* мобайл: кнопка и крестик остаются на месте */
@media(max-width:600px){
  #ecg-modal .ecg-modal-x{top:12px;right:12px;width:38px;height:38px;font-size:22px}
  #ecg-modal .ecg-modal-title{margin-right:44px}
  #ecg-modal .ecg-submit,
  #ecg-modal input.wpcf7-submit{height:52px;padding:0 46px;font-size:14.5px;background-position:right 18px center}
  #ecg-modal .ecg-submit:hover,
  #ecg-modal input.wpcf7-submit:hover{background-position:right 15px center}
}
/* ==================== /Этап 27 ==================== */