/* ======================================================================
   DentalCard / PROJECT THEME API (client UI)
   Новый общий слой для клиентского интерфейса (client-only)
   ====================================================================== */

/* Токены :root подключаются из themes/theme.css */

/* 2) База макета (минимум для client UI) */
html, body { height: 100%; background: var(--bg); color: var(--neutral-800); }
body {
  max-width: none;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Шапка (если используется вне формы) */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 16px 0;
}
.site-header .brand { display: inline-flex; align-items: center; gap: 8px; }
.site-header .brand img { display: block; width: 36px; height: 36px; border-radius: 8px; }
.site-header .title { font-size: 18px; font-weight: 700; color: var(--neutral-800); }

/* Карточка формы (слегка сероватая поверхность, поля — белые) */
.form-card {
  background: color-mix(in srgb, var(--neutral-100) 92%, var(--brand-primary) 8%);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* Шапка внутри формы (лого и т.п.) */
.form-head { 
  display:flex; 
  align-items:center; 
  gap:10px; 
  margin-bottom:16px; 
}

/* Грид полей */
.grid { display: grid; grid-template-columns: 1fr; column-gap: 12px; row-gap: 12px; }
@media (min-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Поля */
.field { position: relative; display: flex; flex-direction: column; }

.field input {
  padding: 12px 14px;
  border: 2px solid color-mix(in srgb, var(--neutral-200) 82%, var(--brand-primary) 18%); /* фирменный оттенок */
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.25;
  background: #fff; /* поля белые */
  outline: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.field input::placeholder { color: var(--neutral-600); opacity: .78; }
.field input:focus, .field input:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

/* Ошибки внутри поля (инлайном, без смещения сетки) */
.infield-hint {
  position: absolute;
  left: 14px;
  bottom: 6px;
  font-size: 12px;
  line-height: 1;
  color: #b32020;
  pointer-events: none;
  display: none;
}
.field.has-infield-hint input { padding-bottom: 28px; }
.field.has-infield-hint .infield-hint { display: block; }

/* Состояние ошибки для инпута (рамка/фон/плейсхолдер) — с фирменным оттенком */
.field input.invalid {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--brand-primary) 30%);
  background: color-mix(in srgb, var(--danger) 5%, #fff);
}
.field input.invalid::placeholder {
  color: color-mix(in srgb, var(--danger) 55%, var(--brand-primary) 45%);
  opacity: .6; /* бледнее, как обычный плейсхолдер */
}

/* Сообщения вверху/низу формы (серверные флеши) — с лёгким фирменным акцентом */
.error {
  background: color-mix(in srgb, var(--danger) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--danger) 60%, var(--brand-primary) 40%);
  color: color-mix(in srgb, var(--danger) 80%, #000);
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.error a { color: var(--brand-primary); text-decoration: none; }
.error a:hover { color: var(--brand-primary-600); }

.notice {
  background: color-mix(in srgb, var(--success) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--success) 25%, #fff);
  color: color-mix(in srgb, var(--success) 80%, #000);
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.hint { font-size: 12px; color: var(--neutral-600); margin-top: 4px; }

/* Дублирующийся телефон — маленькая подсказка */
.phone-error { color: color-mix(in srgb, var(--danger) 80%, #000); font-size: 12px; margin-top: 4px; display: none; }

/* Кнопки */
.btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  font-weight: 700;
  font-size: 16px;
  transition: transform .04s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.btn.btn-primary {
  background: color-mix(in srgb, var(--brand-primary) 90%, black);
  color: var(--brand-primary-contrast);
  width: 100%; /* на регистрации на всю ширину */
}
.btn.btn-primary:hover { 
  background: var(--brand-primary-600);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-primary) 12%, transparent); /* мягкая «подсветка» */
}
.btn.btn-primary:active { 
  background: var(--brand-primary-700);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.btn.btn-secondary {
  background: var(--brand-secondary);
  color: var(--brand-primary-contrast);
}
.btn.btn-secondary:hover { filter: brightness(0.96); }
.btn.btn-secondary:active { filter: brightness(0.92); }

/* Ссылки (общие) — без подчёркивания */
a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-600); }
a:active { color: var(--brand-primary-700); }

/* Блок кнопки отправки */
.form-actions { margin-top: 12px; }

/* Календарная иконка для Flatpickr */
.calendar-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--neutral-100);
  cursor: pointer; user-select: none;
  color: var(--neutral-600); /* фиксируем цвет иконки, чтобы iOS не красил синим */
}
.calendar-btn:focus { outline: none; }
.calendar-btn:active { background: #eee; }
.calendar-btn:hover, .calendar-btn:focus-visible { 
  color: var(--brand-primary);
  border-color: color-mix(in srgb, var(--brand-primary) 60%, var(--border));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.calendar-btn svg { width: 16px; height: 16px; }

/* Чтобы справа под иконку был зазор у altInput и чтобы поля не «уезжали» */
.field .flatpickr-alt-input,
.field input {
  box-sizing: border-box;
}
.field input { padding: 12px 14px; }
.field input:not(#birth_date) { padding-right: 48px; } /* добавляем запас справа, как у даты */

/* intl-tel-input — фокус на флажок/селектор страны */
.iti__selected-flag:focus-visible {
  outline: none;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  border-radius: 10px;
}

/* Register: всегда один столбец и фиксированная «мобильная» ширина */
.register-page .grid { grid-template-columns: 1fr !important; }
@media (min-width: 900px) {
  .register-page .grid { grid-template-columns: 1fr !important; }
}
.register-page .form-card,
.register-page .form-actions {
  max-width: 480px;
  margin: 12px auto;
}
.register-page .grid { grid-template-columns: 1fr !important; }

/* На всякий случай — без горизонтального скролла в сетке */
.grid { overflow-x: hidden; }

#promoConfirm .btn {
  flex: 1 1 200px;   /* обе кнопки занимают равную ширину, минимум 200px */
  text-align: center;
}
#promoConfirm form {
  flex: 1 1 200px;   /* кнопка в форме тянется как и вторая */
}