/*
 * Формата за запитване — полета, етикети, отметка за съгласие, грешки.
 *
 * Създаден на 15.08.2026, но правилата не са нови: стояха в index.css от
 * самото начало.
 *
 * ЗАЩО СЕ ОТДЕЛИХА
 *
 * Формата се показва на ПЕТ страници, а живееше в стила на ЕДНА от тях.
 * Три от петте не зареждат index.css:
 *
 *     index.php               index.css   ✓ формата беше със стил
 *     kontakti.php            index.css   ✓ формата беше със стил
 *     detski-rozhden-den.php  landing.css ✗ формата беше гола
 *     detski-kat.php          landing.css ✗ формата беше гола
 *     povodi.php              landing.css ✗ формата беше гола
 *
 * Премерено на живо на 390px преди отделянето: полетата излизаха 187×26
 * пиксела с етикета залепен отстрани на същия ред. Минимумът за пипане с
 * пръст е 44px. Тоест единственият път към запитване на трите страници, за
 * които се плаща реклама, беше неизползваем от телефон.
 *
 * ⚠️ ВСЯКА НОВА СТРАНИЦА С ФОРМАТА ТРЯБВА ДА ЗАРЕДИ И ТОЗИ ФАЙЛ.
 * Формата идва от sections/contact-form.php — включи ли се той някъде,
 * `form.css` влиза в $pageCss на същата страница. Иначе се повтаря същото.
 *
 * ⚠️ `.inquiry-button` НАРОЧНО ОСТАВА В index.css. Той пребоядисва бутона в
 * оранжево. На лендинг страниците бутонът е златен (`.main-button` от
 * style.css) и това е външен вид, не грешка — премести ли се тук, трите
 * лендинга сменят цвета на бутона си, без някой да го е поискал.
 *
 * Зарежда се СЛЕД style.css — така иска подредбата в partials/head.php.
 */

.contact-inquiry-form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
}

.contact-form-status {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--semiBold);
}

.contact-form-status.success {
  color: #1f6b43;
  background-color: #edf8f1;
  border: solid 1px #9bd6b2;
}

.contact-form-status.error {
  color: #8b2635;
  background-color: #fff1f3;
  border: solid 1px #f2a8b3;
}

.contact-form-field {
  width: 100%;

  /*
   * min-height, а не фиксирана височина. С 16px в полето (точка О25)
   * съдържанието стана 58px и при твърди 56px изтичаше извън рамката.
   */
  min-height: 60px;
  background-color: var(--white);
  padding: 8px 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex-direction: column;
  border: solid 1px #cdcbcc;
  border-radius: 12px;
}

/*
 * Точка О6: досега единственият знак за фокус беше рамката от сиво на зелено.
 * Зеленото върху бяло дава 1.47:1 — тоест беше ПО-НЕЗАБЕЛЕЖИМО от сивото и на
 * клавиатура не се виждаше къде си. Сега рамката потъмнява и се добавя пръстен
 * около полето, както е направено при дните в графика.
 */
.contact-form-field:focus-within {
  border-color: var(--text-01);
  box-shadow: 0 0 0 3px rgba(49, 47, 48, 0.18);
}

.contact-form-label {
  font-size: 12px;
  color: var(--neutral-14);
}

.contact-form-input {
  width: 100%;
  border: none;

  /*
   * Точка О11: `outline: none` е допустимо САМО защото обвивката
   * .contact-form-field:focus-within вече рисува видим знак за фокус. Ако
   * някога онова правило отпадне, това трябва да отпадне заедно с него.
   */
  outline: none;

  background-color: transparent;

  /*
   * Точка О25: 16px, а не 14px. Safari на iPhone увеличава сама страницата,
   * когато човек щракне в поле под 16px — формата скача, уголемява се и оттам
   * нататък сайтът стои изместен настрани.
   *
   * Редът остава изричен и след О22, когато базовият размер на сайта също
   * стана 16px. Не се разчита на наследяване: падне ли някога базовият размер,
   * тук пак трябва да е 16px, иначе зумът на iPhone се връща.
   */
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--medium);
  color: var(--text-01);
}

.contact-form-input:focus {
  font-weight: var(--semiBold);
}

.contact-form-row {
  width: 100%;
  display: flex;
  justify-content: center;

  /* flex-start, а не center: когато едното поле носи грешка отдолу, другото
     не бива да се измества надолу заедно с него (точка О23). */
  align-items: flex-start;
  gap: 16px;
}

/* Обвивка около поле + неговото съобщение за грешка (точка О23). */
.contact-form-col {
  flex: 1 1 0;
  min-width: 0;
}

/* --- Грешка по конкретно поле (точка О23) ------------------------------
   Досега всички грешки се сливаха в едно изречение над формата и полетата
   не бяха маркирани — човек четеше "Моля, въведете име. Телефонният номер
   изглежда непълен." и после търсеше кое поле е кое. */

.contact-form-field.has-error {
  border-color: #b3261e;
}

.contact-form-field.has-error:focus-within {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}

.contact-field-error {
  width: 100%;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  color: #8b2635; /* 7.88:1 върху бяло */
}

.contact-field-error::before {
  content: "⚠ ";
}

.contact-form-field.message {
  /* +4px спрямо старите 120px — толкова добавя по-едрият шрифт от О25. */
  height: 124px;
  justify-content: flex-start;
}

.contact-form-textarea {
  height: 100%;
}

.contact-consent {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.contact-consent-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid #cdcbcc;
  border-radius: 4px;
  background-color: var(--white);
  flex-shrink: 0;
  position: relative;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}

.contact-consent-checkbox:checked {
  background-color: var(--accent-orange);
  border-color: var(--accent-orange);
}

.contact-consent-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--text-01);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

.contact-consent-checkbox:focus-visible {
  box-shadow: 0 0 0 3px rgba(76, 186, 229, 0.18);
}

.contact-consent-text {
  font-size: 14px;
  line-height: 22px;
}

/* Точка О5: светлото синьо върху бяло дава 2.22:1. По-тъмният вариант от
   същия оттенък е 6.50:1. Линкът стои до отметката за съгласие — точно този
   трябва да се чете. */
.contact-consent-link {
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--semiBold);
  text-decoration: underline;
  color: var(--accent-blue-text);
}


/* --- телефон с готов префикс +359 (25.08.2026) --- */

/*
 * Полето и префиксът стоят на един ред ВЪТРЕ в кутията на полето.
 * `.contact-form-field` вече е колона (етикет отгоре, съдържание отдолу),
 * затова редът е свой елемент, а не самата кутия.
 */
.contact-tel-red {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.contact-tel-prefiks {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--medium);

  /*
   * По-блед от написаното: това е подсказка, а не нещо, което човек е въвел.
   * Контрастът остава над 4.5:1 върху бяло — проверено, не предположено.
   */
  color: var(--neutral-14);
}

.contact-tel-vhod {
  flex: 1 1 auto;
  min-width: 0;
}