/* ============================================================
   Kengooru — глобальні правки поверх макета
   (підключається на кожній сторінці через includes/head.php)
   ============================================================ */

/* --- Правка 2/3: центрування тексту в кнопках «Войти» / «Отписаться» ---
   У макеті це були <button> (текст центрується сам), у нас — <a>,
   тому задаємо flex-центрування явно. */
.btn--ghost,
.btn--footer,
.mobile-menu__actions .btn,
.header__actions .btn,
.footer__actions .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
}

/* --- Правка 1: іконки в блоці «О компании» --- */
.trust-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Правка 5: підсвітка незаповнених полів анкети --- */
.form-field__input.is-invalid,
.form_row input.is-invalid,
.lk-field input.is-invalid,
input.is-invalid,
textarea.is-invalid {
  outline: 3px solid #e53935 !important;
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(229, 57, 53, .25) !important;
  background-color: #fff5f5 !important;
}
.agree.is-invalid .agree__box {
  outline: 3px solid #e53935;
  box-shadow: 0 0 0 4px rgba(229, 57, 53, .25);
}
.field-error {
  display: block;
  margin: 6px 2px 0;
  color: #ffd2d0;
  font-size: 13px;
  font-weight: 600;
}
.form-alert {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(229, 57, 53, .15);
  border: 2px solid #e53935;
  color: #fff;
  font-weight: 600;
  text-align: center;
  display: none;
}
.form-alert.is-visible { display: block; }

/* --- Правка 6/8: блок Google reCAPTCHA --- */
.captcha-box { display: flex; justify-content: center; margin: 16px 0 4px; }
.captcha-box .g-recaptcha { transform-origin: center; }
@media (max-width: 400px) { .captcha-box .g-recaptcha { transform: scale(.86); } }

/* ============================================================
   Поля анкети (/form.php) — власні стилі, mobile-first.
   Раніше тут помилково використовувались класи калькулятора
   (.field__row = flex-рядок, .field__value = стиль цифри),
   через що на мобільному текст вилазив за межі поля.
   ============================================================ */
.section--form .form { display: block; }

.form-field {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.form-field__input,
.form-field__input[type="text"],
.form-field__input[type="email"],
.form-field__input[type="tel"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 14px 18px;
  background: #fff;
  color: #0f3031;
  border: 2px solid #aad7d9;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;            /* 16px — щоб iOS не зумив сторінку при фокусі */
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-field__input::placeholder {
  color: #7a9698;
  font-weight: 500;
  font-size: inherit;         /* той самий розмір, що й текст поля */
  line-height: inherit;
  opacity: 1;
  text-overflow: ellipsis;    /* довгий плейсхолдер не ламає верстку */
}
.form-field__input:focus {
  border-color: #469598;
  box-shadow: 0 0 0 4px rgba(70, 149, 152, .18);
}

@media (min-width: 768px) {
  .form-field { margin-bottom: 20px; }
  .form-field__input { min-height: 72px; padding: 18px 26px; font-size: 22px; border-radius: 16px; }
}

/* згода + кнопка під полями */
.section--form .agree { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 22px; cursor: pointer; }
.section--form .agree__text { font-size: 14px; line-height: 1.45; font-weight: 500; }
.section--form .btn--primary { width: 100%; min-height: 60px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
@media (min-width: 768px) {
  .section--form .agree__text { font-size: 16px; }
  .section--form .btn--primary { min-height: 72px; font-size: 22px; }
}

/* підпис помилки під полем — на білому тлі анкети має бути червоним */
.section--form .field-error { color: #c62828; }
.section--form .form-alert { color: #c62828; background: rgba(229,57,53,.08); }

/* ============================================================
   Правки 18.09
   ============================================================ */

/* --- Пілюлі параметрів заявки (СУММА / СРОК / ИТОГО) на мобільному ---
   У макеті стилі були десктопні (gap 48px, font 23px, padding 32/46)
   і застосовувались також на телефоні, через що блок не вміщався. */
@media (max-width: 767px) {
  /* У макеті wrapper без padding — на десктопі це компенсувала height:540px,
     а на мобільному вміст притискався до країв плашки і нижній рядок вивалювався. */
  .section--order .wrapper {
    padding: 14px 10px;
    gap: 6px;
    align-items: stretch;      /* колонки однакової висоти */
    border-radius: 16px;
  }
  .section--order .order-pill_item {
    gap: 8px;
    font-size: 12px;
    max-width: none;
    justify-content: flex-start;
  }
  .section--order .order-pill_item__title {
    font-size: 10px;
    letter-spacing: .02em;
    line-height: 1.2;
    min-height: 1.2em;
  }
  .section--order .order-pill_item__content {
    padding: 11px 4px;
    font-size: 14px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .section--order .order-pill_item__button {
    margin-top: auto;          /* нижній рядок притиснутий до низу, в одну лінію в усіх колонках */
    font-size: 10px;
    line-height: 1.2;
    min-height: 1.2em;
    display: block;
  }
  .section--order .order-pill_item__button[href] { text-decoration: underline; }
}

/* планшет: трохи просторіше, але ще не десктопні 540px */
@media (min-width: 768px) and (max-width: 999px) {
  .section--order .wrapper { padding: 24px 16px; gap: 16px; align-items: stretch; }
  .section--order .order-pill_item { gap: 14px; }
  .section--order .order-pill_item__content { padding: 18px 14px; font-size: 20px; }
  .section--order .order-pill_item__button { margin-top: auto; }
}

/* --- Чекбокс згоди в анкеті ---
   У макеті .agree__box — біла плитка без рамки; на білому тлі анкети
   вона була невидима, а «галочка» — коричнева. Робимо помітною. */
.section--form .agree {
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #f6fafa;
  border: 2px solid #dbe9ea;
  border-radius: 14px;
  transition: border-color .2s, background .2s;
}
.section--form .agree:hover { border-color: #aad7d9; }
.section--form .agree__box {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: #fff;
  border: 2px solid #469598;
  border-radius: 5px;
  transition: background .15s, border-color .15s;
}
.section--form .agree input:checked + .agree__box {
  background: #469598;
  border-color: #469598;
}
.section--form .agree input:checked + .agree__box::after {
  content: "";
  position: absolute;
  inset: auto;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  border-radius: 1px;
  background: none;
  transform: rotate(45deg);
}
.section--form .agree input:focus-visible + .agree__box {
  box-shadow: 0 0 0 4px rgba(70, 149, 152, .25);
}
.section--form .agree__text { color: #173132; }
.section--form .agree__text a { color: #1e5d60; text-decoration: underline; }
/* стан помилки (не прийнято оферту) */
.section--form .agree.is-invalid { border-color: #e53935; background: #fff5f5; }
.section--form .agree.is-invalid .agree__box { border-color: #e53935; }

/* --- Відступ під кнопкою «Зарегистрироваться» --- */
.section--form .btn--primary { margin-top: 4px; margin-bottom: 32px; }
@media (min-width: 768px) { .section--form .btn--primary { margin-bottom: 48px; } }
.section--form .form-alert { margin-bottom: 24px; }

/* ============================================================
   Анкета: власні стилі форми.
   Клас .form з макета навмисно НЕ використовується — він задає
   .form input::placeholder{color:#fff;font-size:40px} і
   .form input[type=text]{background:#469598;padding:48px 42px;font-size:40px}
   БЕЗ медіа-запиту, тобто ламав мобільну верстку.
   ============================================================ */
.order-form { font-weight: 500; }

/* кнопка «Зарегистрироваться» (раніше стиль давав .form .btn--primary) */
.order-form .btn--primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 16px 24px;
  background-color: #ddbeab;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  margin-bottom: 32px;
  transition: background-color .2s, transform .1s;
}
.order-form .btn--primary:hover { background-color: #d0ab93; }
.order-form .btn--primary:active { transform: translateY(1px); }
.order-form .btn--primary[disabled] { opacity: .6; cursor: not-allowed; }

@media (min-width: 768px) {
  .order-form .btn--primary { min-height: 72px; font-size: 22px; margin-bottom: 48px; }
}

/* ============================================================
   Відступи секцій анкети.
   У макеті .section--form має лише padding-top (і лише на десктопі),
   а padding-bottom немає зовсім → margin-bottom кнопки «схлопувався»
   (margin collapsing) і білий блок обривався одразу під кнопкою.
   ============================================================ */
.section--order { padding-bottom: 28px; }
.section--form  { padding-top: 40px; padding-bottom: 44px; }

@media (min-width: 768px) {
  .section--order { padding-bottom: 48px; }
  .section--form  { padding-bottom: 80px; }   /* padding-top на десктопі дає макет (6rem) */
}

/* reCAPTCHA (score-based): плаваючий бейдж Google. Лишаємо видимим — цього
   достатньо для виконання вимог Google щодо атрибуції. */
.grecaptcha-badge { z-index: 20; }
@media (max-width: 767px) { .grecaptcha-badge { transform: scale(.85); transform-origin: bottom right; } }
.captcha-note { margin: 10px 0 0; font-size: 12px; line-height: 1.4; opacity: .8; text-align: center; }
.captcha-note a { color: inherit; text-decoration: underline; }

/* ============================================================
   ПАК ПРАВОК від 18.09
   ============================================================ */

/* --- 1. Поле коду з SMS: одне поле замість 4 клітинок.
       Чотири окремі input'и ламали iOS OTP AutoFill (код не пропонувався
       над клавіатурою), тому лишаємо одне поле з autocomplete="one-time-code",
       а вигляд «клітинок» імітуємо великим letter-spacing. --- */
.code-single {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 8px auto 4px;
  height: 72px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #173132;
  font-size: 34px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .38em;
  text-indent: .38em;          /* компенсує зайвий трекінг праворуч */
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.code-single::-webkit-outer-spin-button,
.code-single::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.code-single::placeholder { color: #a9c3c4; font-weight: 600; letter-spacing: .2em; }
.code-single:focus { box-shadow: 0 0 0 4px rgba(170, 215, 217, .6); }

/* --- 2. Прелоадер: галочки та стрибок кенгуру ---
       Було: .process_item без ширини на мобільному → ::before (right:0)
       прилипав до правого краю ТЕКСТУ і накладався на нього, а ::after
       (галочка) малювався завжди, навіть на невиконаних кроках. --- */
.section--process .process { width: 100%; }
.section--process .process_item {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding-right: 44px;         /* місце під квадратик */
  min-height: 28px;
  display: flex;
  align-items: center;
  text-align: left;
}
.section--process .process_item::before {
  top: 50%;
  transform: translateY(-50%);
  transition: background-color .25s, border-color .25s;
}
.section--process .process_item::after {
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;                  /* галочка — лише на виконаному кроці */
  transition: opacity .25s;
}
.section--process .process_item.done::after { opacity: 1; }
.section--process .process_item.done::before { background: #fff; border-color: #fff; }
/* галочка на білому квадраті має бути темною, інакше зливається */
.section--process .process_item.done::after { filter: brightness(0) saturate(100%) invert(14%) sepia(12%) saturate(1200%) hue-rotate(130deg); }

@media (min-width: 768px) {
  .section--process .process_item { max-width: 580px; padding-right: 60px; }
}

/* кенгуру стрибає, поки заявка обробляється */
@keyframes kengoo-jump {
  0%, 62%, 100% { transform: translateY(0)    scaleY(1);    }
  66%           { transform: translateY(0)    scaleY(.92);  }  /* присідання */
  78%           { transform: translateY(-22px) scaleY(1.06); }  /* стрибок */
  90%           { transform: translateY(0)    scaleY(.96);  }
}
.section--process .character {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform-origin: 50% 100%;
  animation: kengoo-jump 1.9s ease-in-out infinite;
  will-change: transform;
}
.section--process.is-done .character { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .section--process .character { animation: none; }
}

/* --- 4. Блоки «О компании» не мають розтягуватись на весь екран ---
       Причина: .trust-card__icon не має висоти, а img мав height:100%.
       У Safari така відсоткова висота всередині flex-елемента з невизначеною
       висотою «розпухає» і тягне всю картку. Ставимо height:auto + стелю. --- */
.trust-card__icon {
  flex: 0 0 auto;
  align-self: center;
  width: 40px;
  height: auto;
}
.trust-card__icon img {
  width: 100%;
  height: auto;
  max-height: 46px;
  object-fit: contain;
}
.trust-card {
  align-items: center;
  overflow: hidden;
}
@media (max-width: 767px) {
  .trust-card { min-height: 0; padding: 18px 16px; }
  .trust-card__icon img { max-height: 44px; }
}
@media (min-width: 768px) {
  .trust-card__icon { width: 70px; }
  .trust-card__icon img { max-height: 80px; }
}
@media (min-width: 1000px) {
  .trust-card__icon { width: 100px; }
  .trust-card__icon img { max-height: 110px; }
}

/* --- 5. ЛК: поля калькулятора виїжджали за межі картки ---
       .lk-field — грід-елемент із min-width:auto, тому input[type=date]
       і select на iOS розпирали колонку своєю «природною» шириною. --- */
.lk-form, .lk-row { min-width: 0; }
.lk-form > *, .lk-row > * { min-width: 0; }
.lk-field { min-width: 0; }
.lk-field input,
.lk-field select,
.lk-field textarea {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.lk-field input[type="date"],
.lk-field select {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
/* стрілка для select, бо appearance:none її прибирає */
.lk-field select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23173132' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
/* iOS центрує текст у date-полях і додає свої відступи */
.lk-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.lk-field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }
.lk-card { overflow: hidden; }

/* --- 7. Профіль: підпис під полями «тільки перегляд» --- */
.lk-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; opacity: .75; }

/* ============================================================
   ПАК ПРАВОК від 19.09
   ============================================================ */

/* --- Прелоадер: прибрати білі листя з фону ---
       .section--process .container::before/::after малювали дві великі білі
       гілки (leaf-100.svg), на яких губився текст етапів. Фон лишаємо чистим. */
.section--process .container::before,
.section--process .container::after {
  content: none !important;
  display: none !important;
}

/* текст етапів і так тепер ні з чим не конкурує — трохи піднімаємо контраст */
.section--process .process_item { color: #fff; }