/* IT-заявки — публічна форма. Адаптовано з mockups/mock.css (05a/05b/05c) під префікс .itreq-,
   щоб не конфліктувати з CSS теми (STAGE2-CONTRACT.md). */
.itreq-wrap{
  --itreq-navy:#060b2e;
  --itreq-blue:#005aff;
  --itreq-blue-dark:#013ba6;
  --itreq-ink:#2a2a2a;
  --itreq-muted:#465064;
  --itreq-line:#e1e1e1;
  --itreq-bg-soft:#f5f7fb;
  --itreq-alert:#e52b2b;
  --itreq-ok:#0aa66b;
  font-family:inherit;
  color:var(--itreq-ink);
  max-width:720px;
  margin:0 auto;
}
.itreq-wrap *{box-sizing:border-box;}
.itreq-form{background:#fff;border:1px solid var(--itreq-line);border-radius:10px;padding:24px;}
.itreq-field{margin-bottom:18px;}
.itreq-field label,.itreq-field legend,.itreq-field__group-label{display:block;font-weight:600;margin-bottom:6px;color:var(--itreq-navy);}
.itreq-field input[type=text],.itreq-field input[type=tel],.itreq-field input[type=email],
.itreq-field select,.itreq-field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--itreq-line);border-radius:6px;font-size:16px;font-family:inherit;color:var(--itreq-ink);
}
.itreq-field input:focus,.itreq-field select:focus,.itreq-field textarea:focus{outline:2px solid var(--itreq-blue);outline-offset:1px;}
.itreq-hint{font-size:13px;color:var(--itreq-muted);margin:6px 0 0;}
.itreq-error{font-size:13px;color:var(--itreq-alert);margin:6px 0 0;min-height:1px;}
.itreq-error:empty{display:none;}
[aria-invalid="true"]{border-color:var(--itreq-alert) !important;}

.itreq-type-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
/* Специфічність: ".itreq-field label{display:block}" вище (0,1,1, бо fieldset має клас
   itreq-field) за звичайне ".itreq-type-tile{display:flex}" (0,1,0) і мовчки перетворювала
   плитку на block-елемент — підпис і назва текли в один рядок замість підпису під назвою.
   Тут навмисно скопуємо селектор батьківським контейнером, щоб специфічність (0,2,0)
   точно переважила. */
.itreq-type-tiles .itreq-type-tile{position:relative;display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--itreq-line);border-radius:8px;padding:12px 14px 12px 14px;cursor:pointer;background:#fff;}
.itreq-type-tiles .itreq-type-tile input{position:absolute;top:10px;right:10px;}
.itreq-type-tiles .itreq-type-tile__label{font-weight:600;font-size:14px;padding-right:22px;display:block;}
.itreq-type-tiles .itreq-type-tile__note{font-size:12px;color:var(--itreq-muted);display:block;margin-top:2px;}
.itreq-type-tiles .itreq-type-tile.is-selected{border-color:var(--itreq-blue);box-shadow:0 0 0 1px var(--itreq-blue) inset;}
.itreq-type-tiles .itreq-type-tile--alert.is-selected{border-color:var(--itreq-alert);box-shadow:0 0 0 1px var(--itreq-alert) inset;}
.itreq-type-tiles .itreq-type-tile:focus-within{outline:2px solid var(--itreq-blue);outline-offset:2px;}
@media (max-width:560px){.itreq-type-tiles{grid-template-columns:1fr;}}
.itreq-type-tiles--single{grid-template-columns:1fr;max-width:420px;}

/* Термінова: сітка згорнута до єдиної обраної плитки (3) — інші лишаються в DOM
   (вимкнені, не tab-доступні), щоб "Змінити тип заявки" могла їх миттєво повернути
   без перезавантаження сторінки. */
.itreq-type-tiles--collapsed{grid-template-columns:1fr;max-width:420px;}
.itreq-type-tiles--collapsed .itreq-type-tile:not(.is-selected){display:none;}
.itreq-change-type-link{margin:8px 0 0;font-size:13px;}
.itreq-change-type-link[hidden]{display:none;}
.itreq-change-type-link a{color:var(--itreq-blue-dark);text-decoration:underline;}

.itreq-radio-row{display:flex;flex-wrap:wrap;gap:10px;}
/* Та сама проблема специфічності, що й у плиток вище — скопуємо батьківським .itreq-radio-row. */
.itreq-radio-row .itreq-radio-opt{display:flex;align-items:center;gap:6px;border:1px solid var(--itreq-line);border-radius:20px;padding:8px 14px;cursor:pointer;font-weight:400;}
.itreq-radio-row .itreq-radio-opt:has(input:checked){border-color:var(--itreq-blue);color:var(--itreq-blue-dark);font-weight:600;}

.itreq-scale-row{display:flex;gap:14px;flex-wrap:wrap;}
.itreq-scale-row label{font-weight:400;font-size:14px;display:flex;flex-direction:column;gap:4px;}
.itreq-scale-row input{width:84px;padding:8px;border:1px solid var(--itreq-line);border-radius:6px;}

.itreq-field--consent .itreq-checkbox{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.5;}
/* Тема глобально скидає checkbox/radio на appearance:none без власної заміни
   (border/background), тож без явного override прапорець "Я погоджуюсь" був
   повністю невидимий — людина не могла бачити, чи дала згоду (перевірено живим
   рендером). appearance:auto повертає нативний чекбокс, accent-color — колір теми. */
.itreq-field--consent .itreq-checkbox input{
  margin-top:3px;width:18px;height:18px;min-width:18px;min-height:18px;
  appearance:auto;-webkit-appearance:auto;accent-color:var(--itreq-blue);
  border:1.5px solid var(--itreq-line);border-radius:4px;background:#fff;
}

.itreq-honeypot{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

.itreq-summary{background:#fdeceb;border:1px solid var(--itreq-alert);border-radius:8px;padding:14px 16px;margin-bottom:18px;}
.itreq-summary ul{margin:8px 0 0;padding-left:18px;}
.itreq-summary a{color:var(--itreq-blue-dark);text-decoration:underline;}
.itreq-summary-top{color:var(--itreq-alert);font-weight:600;margin-bottom:12px;}

.itreq-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--itreq-blue);color:#fff;font-weight:700;border:none;border-radius:8px;
  padding:14px 28px;font-size:16px;cursor:pointer;min-height:44px;width:100%;
}
.itreq-submit:disabled{opacity:.6;cursor:default;}
.itreq-submit:hover:not(:disabled){background:var(--itreq-blue-dark);}
.itreq-fineprint{font-size:12px;color:var(--itreq-muted);margin-top:12px;}
.itreq-note-remont{background:var(--itreq-bg-soft);border-radius:6px;padding:10px 14px;font-size:13px;color:var(--itreq-muted);margin-bottom:18px;}
.itreq-note-remont a{color:var(--itreq-blue-dark);font-weight:600;}

.itreq-urgent-banner{background:#fdeceb;border:1.5px solid var(--itreq-alert);border-radius:8px;padding:16px 18px;margin-bottom:18px;}
.itreq-urgent-banner p{margin:0 0 8px;}
.itreq-urgent-banner a{color:var(--itreq-alert);}
.itreq-urgent-banner__row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.itreq-urgent-banner__row>div{flex:1;min-width:220px;}
.itreq-urgent-banner__call{display:inline-block;background:#fff;color:var(--itreq-alert) !important;font-weight:700;border-radius:8px;padding:12px 22px;white-space:nowrap;min-height:44px;line-height:20px;}

[data-itreq-hide-urgent]{display:none;}
.itreq-wrap:not(.itreq-wrap--urgent) [data-itreq-hide-urgent]{display:block;}
.itreq-wrap:not(.itreq-wrap--urgent) [data-itreq-hide-urgent].itreq-field--scale{display:block;}

/* Термінова форма: ховаємо непотрібні поля (JS теж приховує/дизейблить, це - запасний CSS-шар). */
.itreq-wrap--urgent [data-itreq-hide-urgent]{display:none;}

/* --- Подяка --- */
/* Власні токени тут теж потрібні: .itreq-thanks не вкладена в .itreq-wrap
   (форма й подяка — різні сторінки), тож var(--itreq-*) інакше не визначені
   і правила з ними (фон кнопок дзвінка тощо) мовчки стають недійсними. */
.itreq-thanks{
  --itreq-navy:#060b2e;
  --itreq-blue:#005aff;
  --itreq-blue-dark:#013ba6;
  --itreq-ink:#2a2a2a;
  --itreq-muted:#465064;
  --itreq-line:#e1e1e1;
  --itreq-bg-soft:#f5f7fb;
  --itreq-alert:#e52b2b;
  --itreq-ok:#0aa66b;
  max-width:640px;margin:0 auto;color:var(--itreq-ink);
}
.itreq-thanks h1{color:var(--itreq-navy);}
.itreq-thanks--urgent{border-left:4px solid var(--itreq-alert);padding-left:18px;}
.itreq-thanks__phones{display:flex;gap:12px;flex-wrap:wrap;}
.itreq-thanks__call{background:var(--itreq-alert);color:#fff;font-weight:700;border-radius:8px;padding:12px 22px;display:inline-block;min-height:44px;}
.itreq-thanks__small{font-size:13px;color:var(--itreq-muted);}
.itreq-thanks__btn{display:inline-block;background:var(--itreq-blue);color:#fff;font-weight:700;border-radius:8px;padding:12px 24px;margin-top:10px;}
.itreq-thanks__verify{font-size:12px;color:var(--itreq-muted);margin-top:24px;border-top:1px solid var(--itreq-line);padding-top:12px;}

@media (max-width:480px){
  .itreq-form{padding:16px;}
}

/* --- Компактна форма (4) --- */
.itreq-wrap--compact{max-width:640px;}
.itreq-compact-card{background:#fff;border:1px solid var(--itreq-line);border-radius:10px;padding:24px;}
.itreq-compact-eyebrow{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--itreq-blue);margin-bottom:6px;}
.itreq-compact-title{margin:0 0 18px;font-size:19px;color:var(--itreq-navy);}
.itreq-form--compact{border:none;padding:0;}
.itreq-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){.itreq-field-row{grid-template-columns:1fr;}}