/* ══════════════════════════════════════════════════════════════
   LitoTV — оформлення попапа входу/реєстрації (Xootix)

   ПРАВИЛО ЦЬОГО ФАЙЛУ: тільки колір, рамка, шрифт, заокруглення.
   Жодних display, position, overflow, max-height, backdrop-filter
   на обгортках вікна — саме вони в попередній версії ламали показ
   попапа. Верстку плагіна не чіпаємо, лише перефарбовуємо.

   Усе прив'язане до .xoo-el-form-container — єдиного класу, який
   підтверджений документацією Xootix. Вгаданих селекторів більше
   немає, тому зламати поведінку вікна цей файл не може.

   Кольори приходять із PHP (litotv_popup_colors) як CSS-змінні.
   Палітру правити в litotv-popup-style.php, не тут.
   ══════════════════════════════════════════════════════════════ */

/* ── Шрифт: тільки всередині форми ─────────────────────────── */
.xoo-el-form-container,
.xoo-el-form-container input,
.xoo-el-form-container button,
.xoo-el-form-container select,
.xoo-el-form-container textarea,
.xoo-el-form-container label,
.xoo-el-form-container a,
.xoo-el-form-container li{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
}

/* ── Тло вікна ──────────────────────────────────────────────
   Суцільний колір, без скла: backdrop-filter створює контекст
   накладання і на деяких обгортках ламає анімацію появи. */
.xoo-el-form-container{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  color:var(--ltv-sub) !important;
}

/* ── Вкладки «Вхід / Реєстрація» ───────────────────────────── */
.xoo-el-form-container ul{
  background:transparent !important;
  border-bottom:1px solid var(--ltv-border) !important;
}
.xoo-el-form-container ul li{
  background:transparent !important;
  color:var(--ltv-dim) !important;
  font-weight:700 !important;
  transition:color .15s;
}
.xoo-el-form-container ul li.xoo-el-active,
.xoo-el-form-container ul li.active{
  color:var(--ltv-orange) !important;
  border-bottom-color:var(--ltv-orange) !important;
  background:transparent !important;
}

/* ── Заголовки й текст ─────────────────────────────────────── */
.xoo-el-form-container h1,
.xoo-el-form-container h2,
.xoo-el-form-container h3{
  color:var(--ltv-text) !important;
  font-weight:900 !important;
  letter-spacing:-.02em;
}
.xoo-el-form-container p,
.xoo-el-form-container span,
.xoo-el-form-container label{
  color:var(--ltv-sub) !important;
}
.xoo-el-form-container label{
  font-weight:700 !important;
}

/* ── Поля вводу ────────────────────────────────────────────── */
.xoo-el-form-container input[type="text"],
.xoo-el-form-container input[type="email"],
.xoo-el-form-container input[type="password"],
.xoo-el-form-container input[type="tel"],
.xoo-el-form-container select,
.xoo-el-form-container textarea{
  background:var(--ltv-bg) !important;
  border:1px solid var(--ltv-border) !important;
  border-radius:11px !important;
  color:var(--ltv-text) !important;
  box-shadow:none !important;
  transition:border-color .15s;
}
.xoo-el-form-container input:focus,
.xoo-el-form-container select:focus,
.xoo-el-form-container textarea:focus{
  border-color:var(--ltv-orange) !important;
  outline:none !important;
  box-shadow:none !important;
}
.xoo-el-form-container input::placeholder{
  color:var(--ltv-dim) !important;
}

/* Чекбокси видно на темному тлі */
.xoo-el-form-container input[type="checkbox"],
.xoo-el-form-container input[type="radio"]{
  accent-color:var(--ltv-orange);
}

/* ── Головна кнопка ────────────────────────────────────────── */
.xoo-el-form-container button,
.xoo-el-form-container input[type="submit"]{
  background:linear-gradient(135deg,var(--ltv-orange),var(--ltv-orange-2)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:50px !important;
  font-weight:700 !important;
  text-shadow:none !important;
  box-shadow:0 6px 22px var(--ltv-orange-glow) !important;
}

/* ── Посилання: «Забули пароль?», «Зареєструватись» ───────── */
.xoo-el-form-container a{
  color:var(--ltv-orange) !important;
  font-weight:600;
}

/* ── Повідомлення й помилки ────────────────────────────────── */
.xoo-el-form-container .xoo-el-notice,
.xoo-el-form-container .woocommerce-error,
.xoo-el-form-container .woocommerce-message{
  background:var(--ltv-bg) !important;
  border:1px solid var(--ltv-border) !important;
  border-left:3px solid var(--ltv-orange) !important;
  border-radius:12px !important;
  color:var(--ltv-sub) !important;
}

/* ══════════════════════════════════════════════════════════════
   ІКОНКИ ПОЛІВ
   Плагін малює їх у світлому квадраті — на темному тлі це виглядало
   як недомальований інтерфейс. Робимо їх продовженням самого поля.

   Поля будує окремий модуль плагіна (xoo-form-fields-fw) із власним
   префіксом класів xoo-aff. Точну назву обгортки іконки він не
   документує, тому селектор ловить кілька варіантів одразу.
   Правила тільки кольорові — навіть якщо жоден не влучить,
   зламати нічого не може.
   ══════════════════════════════════════════════════════════════ */
.xoo-el-form-container [class*="aff-icon"],
.xoo-el-form-container [class*="aff-input-icon"],
.xoo-el-form-container [class*="xoo-aff-group"] > span:first-child{
  background:var(--ltv-bg) !important;
  border:1px solid var(--ltv-border) !important;
  border-right:none !important;
  color:var(--ltv-orange) !important;
}
.xoo-el-form-container [class*="aff-icon"] i,
.xoo-el-form-container [class*="aff-input-icon"] i,
.xoo-el-form-container [class*="xoo-aff-group"] > span:first-child i{
  color:var(--ltv-orange) !important;
}

/* Поле поруч з іконкою не має дублювати ліву рамку */
.xoo-el-form-container [class*="xoo-aff-group"] input{
  border-radius:0 11px 11px 0 !important;
}

/* Око «показати пароль» */
.xoo-el-form-container [class*="password-toggle"],
.xoo-el-form-container [class*="pass-toggle"]{
  color:var(--ltv-dim) !important;
}

/* ── Заголовок вікна ────────────────────────────────────────
   За замовчуванням надто крупний — забирає пів екрана
   на телефоні ще до того, як видно поля. */
.xoo-el-form-container h1,
.xoo-el-form-container h2,
.xoo-el-form-container h3{
  font-size:20px !important;
  line-height:1.3 !important;
}

/* Чекбокс «Запамʼятати мене» */
.xoo-el-form-container input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  accent-color:var(--ltv-orange);
}