/* Доповнення до перенесеного CSS crmium.eu (consult.css) для теми crmium.com.
   Основа — assets/ua-extra.css проєкту crmium-industry-ua (там пояснено кожне значення);
   тут лише те, що є на цій сторінці, плюс стани форми. Усе під .euland. */

/* ============ ШРИФТ ТЕМИ ============
   На проді TT Commons підключає тема — ці @font-face потрібні лише прев'ю,
   build.py вирізає їх із WP-версії. */
.euland,
.euland button,
.euland input,
.euland textarea { font-family: 'TT Commons', 'Inter', Arial, sans-serif; }
.euland { font-size: 20px; line-height: 1.3; }

/* Шапка теми fixed, рівно 72px; решту відступу дає .hero--ind (34px) — як на EU.
   ⛔ Не 130px із bento-шаблонів. */
.euland { padding-top: 72px; }

/* ============ ТИПОГРАФІКА ПІД САЙТ ============ */
.euland .ihero h1 { font-weight: 700; letter-spacing: 0; }
.euland .ihero__lead { font-size: 20px; line-height: 1.4; }
.euland .ihero__bullets li { font-size: 20px; line-height: 1.35; }
.euland .ihero__form-h { font-size: 26px; font-weight: 700; }
.euland .sec-title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; font-weight: 700; letter-spacing: 0; }
.euland .sec-sub { font-size: 20px; line-height: 1.3; }
.euland .step h4 { font-size: 21px; line-height: 1.25; letter-spacing: .02em; }
.euland .step p { font-size: 18px; line-height: 1.4; }
.euland .form input,
.euland .form textarea { font-size: 18px; }

/* ============ КНОПКА ============
   Як кнопка теми: висота 50+, радіус 200, звичайний регістр, без переносу. */
.euland .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 34px;
  border-radius: 200px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
}
/* тема crmium.com ставить кнопкам max-width: 260px — у формі кнопка на всю ширину, як на EU */
.euland .form .btn { width: 100%; max-width: none; }
.euland .form .btn:disabled { opacity: .7; cursor: progress; transform: none; }
@media (max-width: 420px) {
  .euland .btn { white-space: normal; padding: 12px 24px; }
  /* у вузькій формі текст кнопки тримаємо в один рядок */
  .euland .form .btn { padding: 12px 14px; font-size: 17px; }
}

/* «48 відгуків» на значку Clutch: в оригіналі 11px — задрібно для телефона */
.euland .badge-clutch__cnt { font-size: 13px; }

/* ============ СТАНИ ФОРМИ ============ */
.euland .form input.is-bad,
.euland .form textarea.is-bad { box-shadow: 0 0 0 2px #E5484D; }
.euland .cs-err {
  margin: -6px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: #C5303A;
}
/* після відправки поля зникають, лишається подяка — на тій самій сторінці */
.euland .form__ok { display: none; }
.euland form.sent > :not(.form__ok) { display: none !important; }
.euland form.sent .form__ok {
  display: grid;
  gap: 8px;
  padding: 28px 8px 12px;
  text-align: center;
  color: var(--dark-text, #15171C);
  font-weight: 400;
}
.euland form.sent .form__ok b { font-size: 24px; line-height: 1.2; color: var(--orange, #EF652F); }
.euland form.sent .form__ok span { font-size: 18px; line-height: 1.4; color: #4B5563; text-wrap: balance; }

/* ============ ПЕРШИЙ ЕКРАН = ФОРМА (Олександр, 06.10.2026) ============
   🔴 Форма видна ЦІЛКОМ у першому екрані на будь-якому екрані.
   Розмітка: .cs-first = заголовок + форма; опис і переваги — окремими елементами після неї.
   Десктоп: дві колонки (ліворуч заголовок, опис, переваги; праворуч форма); hero займає рівно
   перший екран мінус шапку теми 72px, розміри всередині — від висоти вікна (vh); усе інше з другого.
   Планшет: заголовок → форма → опис → переваги.
   Телефон: заголовок і форма на ВЕСЬ перший екран, поля з нормальними відступами
   («дуже близько поля одне до одного»), тексти нижче з нормальним міжрядковим інтервалом. */
.euland .cs-grid { align-items: start; }
@media (min-width: 1025px) {
  .euland .hero--ind {
    min-height: calc(100vh - 72px);
    min-height: calc(100svh - 72px);
    display: flex;
    align-items: center;
    padding-top: clamp(12px, 2.4vh, 34px);
    padding-bottom: clamp(12px, 2.4vh, 34px);
  }
  .euland .hero--ind > .container { width: 100%; }
  .euland .ihero { padding: clamp(22px, 4.4vh, 56px) clamp(32px, 3.6vw, 56px); }
  .euland .cs-first { display: contents; }
  /* останній ряд 1fr: висока форма (span 3) розтягує саме його, тож між заголовком,
     описом і переліком не зʼявляється дірка */
  .euland .cs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); grid-template-rows: auto auto 1fr; column-gap: 30px; row-gap: 0; }
  .euland .cs-grid .ihero__body { grid-column: 1; grid-row: 1; }
  .euland .cs-grid .ihero__lead { grid-column: 1; grid-row: 2; margin-top: clamp(10px, 1.8vh, 18px); font-size: clamp(16px, 2.3vh, 20px); }
  .euland .cs-grid .ihero__bullets { grid-column: 1; grid-row: 3; margin-top: 0; padding-top: clamp(14px, 3vh, 30px); gap: clamp(6px, 1.3vh, 12px); }
  .euland .cs-grid .ihero__form { grid-column: 2; grid-row: 1 / 4; }
  .euland .ihero h1 { font-size: clamp(32px, min(4.2vw, 6.4vh), 58px); }
  .euland .ihero__bullets li { font-size: clamp(16px, 2.3vh, 20px); }
  .euland .ihero__form { padding: clamp(18px, 3.3vh, 32px) 28px; }
  .euland .ihero__form-h { font-size: clamp(20px, 3vh, 26px); }
  .euland .ihero__form .form { margin-top: clamp(10px, 2vh, 20px); gap: clamp(8px, 1.6vh, 18px); }
  .euland .ihero__form .form input,
  .euland .ihero__form .form textarea { padding-top: clamp(10px, 1.8vh, 18px); padding-bottom: clamp(10px, 1.8vh, 18px); }
  .euland .ihero__form .form textarea { min-height: clamp(44px, 6.6vh, 64px); }
  .euland .ihero__form .form .btn { min-height: clamp(44px, 6.2vh, 54px); }
}
@media (max-width: 1024px) {
  .euland .cs-grid { display: block; }
  .euland .cs-first .ihero__form { margin-top: 20px; }
  .euland .cs-grid .ihero__lead { margin-top: 28px; max-width: none; font-size: 18px; line-height: 1.6; }
  .euland .cs-grid .ihero__bullets { margin-top: 22px; padding-top: 0; gap: 14px; }
  .euland .cs-grid .ihero__bullets li { align-items: flex-start; font-size: 18px; line-height: 1.5; white-space: normal; }
  .euland .cs-grid .ihero__bullets .gdot { flex: none; margin-top: .5em; }
}
@media (max-width: 640px) {
  .euland { --cs-top: 12px; --cs-pad: 16px; }
  .euland .hero--ind { padding-top: var(--cs-top); }
  .euland .ihero { padding: var(--cs-pad) 14px 28px; border-radius: 20px; }
  /* заголовок + форма = весь перший екран: вікно мінус шапка теми, відступ секції, верх картки
     і 12px повітря внизу; опис і переваги починаються вже за межами першого екрана */
  .euland .cs-first {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px - var(--cs-top) - var(--cs-pad) - 12px);
    min-height: calc(100svh - 72px - var(--cs-top) - var(--cs-pad) - 12px);
  }
  .euland .ihero h1 { font-size: 30px; line-height: 1.15; letter-spacing: 0; }
  .euland .cs-first .ihero__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 14px;
    padding: clamp(16px, 3.4vh, 28px) 16px;
    border-radius: 20px;
  }
  /* заголовок форми дублює H1, який стоїть просто над нею */
  .euland .ihero__form-h { display: none; }
  .euland .ihero__form .form { margin-top: 0; gap: clamp(14px, 2.6vh, 22px); }
  /* ≥16px, інакше iPhone збільшує сторінку при натисканні на поле */
  .euland .ihero__form .form input,
  .euland .ihero__form .form textarea { padding: clamp(13px, 2.1vh, 18px) 22px; font-size: 17px; }
  .euland .ihero__form .form textarea { min-height: clamp(50px, 8vh, 76px); }
  .euland .ihero__form .form .btn { min-height: clamp(52px, 7.6vh, 60px); font-size: 17px; }
  .euland .cs-grid .ihero__lead { font-size: 17px; line-height: 1.6; }
  .euland .cs-grid .ihero__bullets li { font-size: 17px; line-height: 1.5; }
}
/* телефон: вільну висоту картки забирає поле «Що хочете вирішити?», а не порожнеча над і під полями */
@media (max-width: 640px) {
  .euland .cs-first .ihero__form { justify-content: flex-start; }
  .euland .cs-first .ihero__form .form { flex: 1; display: flex; flex-direction: column; }
  .euland .cs-first .ihero__form .form textarea { flex: 1 1 auto; }
  .euland .cs-first .ihero__form .form.sent { justify-content: center; }
}
/* низькі телефони (iPhone SE у Safari ≈ 548px): той самий екран-форма, трохи щільніше */
@media (max-width: 640px) and (max-height: 600px) {
  .euland .ihero h1 { font-size: 27px; }
  .euland .cs-first .ihero__form { margin-top: 12px; padding: 14px; }
  .euland .ihero__form .form { gap: 12px; }
  .euland .ihero__form .form input,
  .euland .ihero__form .form textarea { padding-top: 12px; padding-bottom: 12px; }
  .euland .ihero__form .form textarea { min-height: 46px; }
  .euland .ihero__form .form .btn { min-height: 50px; }
  .euland .ihero__form .form textarea { min-height: 42px; }
}

/* одна колонка (планшет, телефон): заголовок над формою — по центру */
@media (max-width: 1024px) {
  .euland .cs-first .ihero__body { text-align: center; }
  .euland .cs-first .ihero__body h1 { text-wrap: balance; }
}

/* ============ ВЛАСНИЙ ФУТЕР (як на /uk/quiz-erp/) ============
   Футер теми схований; тут довіра + контакти. Значення — з шаблону квізу (erp-quiz-uk.php). */
body.page-template-consult-ua #footer { display: none !important; }
.euland .cs-trust { position: relative; background: #111317; border-top: 1px solid rgba(255, 255, 255, .08); color: #F1F3F5; padding: 56px 16px 26px; }
@media (min-width: 768px) { .euland .cs-trust { padding: 88px 24px 34px; } }
.euland .cs-trust__in { max-width: 1080px; margin: 0 auto; }
.euland .cs-trust__h { font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
@media (min-width: 768px) { .euland .cs-trust__h { font-size: 36px; } }
.euland .cs-trust__sub { margin-top: 8px; font-size: 16px; line-height: 1.5; color: #9AA1AD; max-width: 60ch; }
.euland .cs-badges { margin-top: 28px; display: grid; gap: 12px; }
@media (min-width: 640px) { .euland .cs-badges { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.euland .cs-badge { height: 118px; border-radius: 18px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 18px; transition: transform .2s ease, box-shadow .2s ease; }
.euland .cs-badge:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -14px rgba(239, 101, 47, .55); }
.euland .cs-badge img { display: block; width: auto; height: auto; max-width: 100%; max-height: 82px; }
.euland .cs-badge--odoo img { max-height: 40px; filter: brightness(0); opacity: .88; }
.euland .cs-badge--clutch img { max-height: 92px; }
.euland .cs-badge__cap { font-size: 14px; font-weight: 800; color: #15171C; letter-spacing: .01em; }
.euland .cs-stats { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
@media (min-width: 768px) { .euland .cs-stats { grid-template-columns: repeat(4, 1fr); margin-top: 44px; } }
.euland .cs-stat__n { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: #fff; }
.euland .cs-stat__n em { font-style: normal; color: var(--orange, #EF652F); }
@media (min-width: 768px) { .euland .cs-stat__n { font-size: 42px; } }
.euland .cs-stat__l { margin-top: 6px; font-size: 15px; line-height: 1.35; color: #9AA1AD; }
.euland .cs-clutch { margin-top: 30px; min-height: 45px; }
.euland .cs-foot { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 22px; }
@media (min-width: 768px) { .euland .cs-foot { grid-template-columns: 1fr auto; align-items: center; } }
.euland .cs-contacts { display: grid; gap: 6px; }
.euland .cs-contacts a { font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: #fff; width: max-content; text-decoration: none; }
.euland .cs-contacts a + a { font-size: 17px; font-weight: 700; color: #D3D8DF; }
/* тема ховає .phoneLink на телефоні — у нашому футері номер має бути видно завжди */
.euland .cs-contacts .phoneLink { display: block !important; }
.euland .cs-contacts a:hover { color: var(--orange, #EF652F); }
.euland .cs-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.euland .cs-links a { font-size: 15px; font-weight: 700; color: #D3D8DF; text-decoration: none; }
.euland .cs-links a:hover { color: var(--orange, #EF652F); }
.euland .cs-socials { display: flex; gap: 10px; }
.euland .cs-socials a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #F1F3F5; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.euland .cs-socials a:hover { background: var(--orange, #EF652F); border-color: var(--orange, #EF652F); color: #fff; }
.euland .cs-socials svg { width: 20px; height: 20px; }
.euland .cs-legal { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: #6B7280; }
.euland .cs-legal a { color: #9AA1AD; text-decoration: none; }
.euland .cs-legal a:hover { color: #D3D8DF; }