/* =============================================================================
   PSTU Conference Platform — UI Components Library
   Production-ready: :hover, :focus-visible, :active, :disabled
   Импортируется после base.css
   ============================================================================= */

@import './variables.css';


/* =============================================================================
   1. КНОПКИ — .btn
   =============================================================================

   Базовый класс всегда идёт с модификатором цвета:
   <button class="btn btn-primary">Зарегистрироваться</button>
   <a href="/program" class="btn btn-secondary">Программа</a>
   <button class="btn btn-ghost">Отмена</button>
   <button class="btn btn-danger" aria-label="Удалить запись">Удалить</button>

   Размеры:
   <button class="btn btn-primary btn-sm">Малая</button>
   <button class="btn btn-primary btn-lg">Большая</button>
   <button class="btn btn-primary btn-block">Во всю ширину</button>

   Иконка:
   <button class="btn btn-icon btn-ghost" aria-label="Закрыть">
     <svg .../>
   </button>

   Загрузка (добавить disabled!):
   <button class="btn btn-primary btn-loading" disabled aria-busy="true">
     Отправка...
   </button>
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-family: var(--font-family);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast),
    box-shadow       var(--transition-fast),
    transform        var(--transition-fast),
    opacity          var(--transition-fast);
}

/* Базовый focus-visible для всех вариантов */
.btn:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ---- 1.1 btn-primary (Бордовый) ----------------------------------------- */

.btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary:focus-visible {
  outline-color: var(--color-primary-light);
  box-shadow: var(--shadow-focus);
}

/* ---- 1.2 btn-secondary (Синий outline) ----------------------------------- */

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(0);
  box-shadow: none;
}

/* ---- 1.3 btn-ghost (прозрачный) ----------------------------------------- */

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-gray-100);
  color: var(--color-text);
  border-color: var(--color-gray-200);
}

.btn-ghost:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-gray-200);
}

/* ---- 1.4 btn-danger (красный) ------------------------------------------- */

.btn-danger {
  background-color: transparent;
  color: var(--color-error);
  border-color: transparent;
}

.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: #fef2f2;
  border-color: var(--color-error);
}

.btn-danger:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: #fee2e2;
}

.btn-danger:focus-visible {
  outline-color: var(--color-error);
}

/* ---- 1.5 Размеры --------------------------------------------------------- */

.btn-sm {
  padding: 0.5rem 1.1rem;
  font-size: var(--text-tiny);
  letter-spacing: 0.03em;
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

/* ---- 1.6 btn-icon (квадратная кнопка с иконкой) ------------------------- */

.btn-icon {
  padding: 0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.btn-icon.btn-sm {
  padding: 0.4rem;
  width: 2rem;
  height: 2rem;
}

.btn-icon.btn-lg {
  padding: 0.85rem;
  width: 3rem;
  height: 3rem;
}

/* ---- 1.7 btn-block (на всю ширину) --------------------------------------- */

.btn-block {
  width: 100%;
}

/* ---- 1.8 btn-loading ----------------------------------------------------- */

.btn-loading {
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}

.btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--color-white);
  border-radius: var(--radius-full);
  animation: spin 0.65s linear infinite;
}

.btn-secondary.btn-loading::after,
.btn-ghost.btn-loading::after {
  border-color: rgba(15, 60, 115, 0.2);
  border-top-color: var(--color-primary);
}

.btn-danger.btn-loading::after {
  border-color: rgba(239, 68, 68, 0.2);
  border-top-color: var(--color-error);
}


/* =============================================================================
   2. БЕЙДЖИ — .badge
   =============================================================================

   Статус заявки:
   <span class="badge badge-new">Новая</span>
   <span class="badge badge-in-progress">В обработке</span>
   <span class="badge badge-accepted">Принята</span>
   <span class="badge badge-rejected">Отклонена</span>

   Тип участника:
   <span class="badge badge-listener">Слушатель</span>
   <span class="badge badge-speaker">Докладчик</span>
   <span class="badge badge-online">Онлайн</span>
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.25em 0.65em;
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-size: 0.7rem;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Точка-индикатор внутри бейджа (опционально) */
.badge::before {
  content: '';
  display: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.badge.badge--dot::before {
  display: block;
}

/* ---- 2.1 Статусные бейджи (заявки) --------------------------------------- */

/* new — синий информационный */
.badge-new {
  background-color: #f0f9ff;
  color: var(--color-primary);
  border-color: rgba(15, 60, 115, 0.15);
}

/* in_progress — жёлтый */
.badge-in-progress {
  background-color: #fffbeb;
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.25);
}

/* accepted — зелёный */
.badge-accepted {
  background-color: #f0fdf4;
  color: #166534;
  border-color: rgba(34, 197, 94, 0.25);
}

/* rejected — красный */
.badge-rejected {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.25);
}

/* ---- 2.2 Типовые бейджи (роль / формат) ---------------------------------- */

.badge-listener {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.badge-speaker {
  background-color: #eff6ff;
  color: var(--color-primary-light);
  border-color: rgba(26, 81, 153, 0.2);
}

.badge-online {
  background-color: #f0fdf4;
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.2);
}


/* =============================================================================
   3. КАРТОЧКИ — .card
   =============================================================================

   Базовая:
   <div class="card">
     <div class="card-header">...</div>
     <div class="card-body">...</div>
     <div class="card-footer">...</div>
   </div>

   С рамкой:
   <div class="card card-bordered">...</div>

   Тёмная:
   <div class="card card-dark">...</div>
   ============================================================================= */

.card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition:
    box-shadow  var(--transition-base),
    transform   var(--transition-base);
}

/* Интерактивные карточки — hover */
a.card,
button.card,
.card[role="button"],
.card--interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

a.card:hover,
button.card:hover,
.card[role="button"]:hover,
.card--interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

a.card:focus-visible,
button.card:focus-visible,
.card[role="button"]:focus-visible,
.card--interactive:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
}

a.card:active,
button.card:active,
.card[role="button"]:active,
.card--interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ---- 3.1 card-bordered --------------------------------------------------- */

.card-bordered {
  box-shadow: none;
  border: 1.5px solid var(--color-border);
}

.card-bordered:hover {
  border-color: var(--color-gray-400);
  box-shadow: var(--shadow-sm);
}

/* ---- 3.2 card-dark ------------------------------------------------------- */

.card-dark {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.card-dark .card-body p {
  color: rgba(255, 255, 255, 0.75);
}

/* ---- 3.3 card-header / body / footer ------------------------------------- */

.card-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-muted);
}

.card-header:first-child {
  margin-top: -0.25rem;
}

.card-body {
  /* Нет специфичных стилей, явный элемент для семантики */
}

.card-footer {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--color-border-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Карточка без padding (для изображений на полный размер) */
.card--flush {
  padding: 0;
  overflow: hidden;
}

.card--flush .card-body,
.card--flush .card-footer,
.card--flush .card-header {
  padding: 1.25rem 1.5rem;
}


/* =============================================================================
   4. SECTION TAG — .section-tag
   =============================================================================

   Надпись-метка перед заголовком секции с красной чертой слева:
   <p class="section-tag">О конференции</p>
   <h2>Цифры и факты</h2>
   ============================================================================= */

.section-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: calc(32px + var(--space-3));
  font-family: var(--font-family);
  font-size: 0.7rem;
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
  margin-bottom: var(--space-4);
}

/* Красная линия слева */
.section-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 2px;
  background-color: var(--color-secondary);
  flex-shrink: 0;
}

/* Вариант без паддинга (внутри .section__header с flex) */
.section-tag--inline {
  padding-left: 0;
}

.section-tag--inline::before {
  position: static;
  transform: none;
  display: inline-block;
}


/* =============================================================================
   5. РАЗДЕЛИТЕЛИ — .divider
   =============================================================================

   <hr class="divider">
   <hr class="divider-accent">
   ============================================================================= */

.divider {
  border: none;
  height: 1px;
  background-color: var(--color-border-muted);
  margin-block: var(--space-8);
}

/* С акцентом — бордовая / цветная линия */
.divider-accent {
  border: none;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-secondary) 0%,
    var(--color-primary) 50%,
    transparent 100%
  );
  margin-block: var(--space-8);
  border-radius: var(--radius-full);
}

/* Тонкая горизонтальная линия для карточек */
.divider--sm {
  margin-block: var(--space-4);
}


/* =============================================================================
   6. ФОРМ-КОНТРОЛЫ
   =============================================================================

   Полная форма:
   <form class="form">
     <div class="form-row">
       <div class="form-group">
         <label class="form-label form-required" for="name">Имя</label>
         <input class="form-input" id="name" type="text" placeholder="Иван">
         <span class="form-hint">Введите имя как в документе</span>
       </div>
       <div class="form-group">
         <label class="form-label form-required" for="surname">Фамилия</label>
         <input class="form-input" id="surname" type="text">
         <span class="form-error" hidden>Поле обязательно</span>
       </div>
     </div>

     <div class="form-group">
       <label class="form-label" for="section">Секция</label>
       <select class="form-select" id="section">
         <option value="">Выберите секцию...</option>
       </select>
     </div>

     <div class="form-group">
       <label class="form-label" for="message">Сообщение</label>
       <textarea class="form-textarea" id="message" rows="4"></textarea>
     </div>

     <div class="form-group">
       <label class="form-checkbox-label">
         <input class="form-checkbox" type="checkbox">
         <span>Согласен с условиями</span>
       </label>
     </div>
   </form>
   ============================================================================= */

/* ---- 6.0 form-row (парные поля) ----------------------------------------- */

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ---- 6.1 form-group ------------------------------------------------------ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 1.5rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* ---- 6.2 form-label ------------------------------------------------------ */

.form-label {
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
  cursor: pointer;
}

/* Красная звёздочка после label для обязательных полей */
.form-required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: var(--font-bold);
}

/* ---- 6.3 form-input (базовый input) -------------------------------------- */

.form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--color-text);
  line-height: 1.4;
  transition:
    border-color  var(--transition-fast),
    box-shadow    var(--transition-fast),
    background    var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder {
  color: var(--color-gray-400);
  font-weight: var(--font-light);
}

.form-input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-gray-400);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 3px rgba(15, 60, 115, 0.12),
    0 1px 3px rgba(15, 60, 115, 0.06);
  background-color: var(--color-white);
}

.form-input:disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
  border-color: var(--color-gray-200);
}

/* Состояние ошибки */
.form-input.error,
.form-input[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: #fff8f8;
}

.form-input.error:focus,
.form-input[aria-invalid="true"]:focus {
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.15),
    0 1px 3px rgba(239, 68, 68, 0.08);
}

/* Состояние успеха */
.form-input.success,
.form-input[aria-invalid="false"] {
  border-color: var(--color-success);
}

.form-input.success:focus,
.form-input[aria-invalid="false"]:focus {
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.15),
    0 1px 3px rgba(34, 197, 94, 0.08);
}

/* ---- 6.4 form-select ----------------------------------------------------- */

.form-select {
  width: 100%;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5F6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--color-text);
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.form-select:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 3px rgba(15, 60, 115, 0.12),
    0 1px 3px rgba(15, 60, 115, 0.06);
}

.form-select:disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
  border-color: var(--color-gray-200);
}

.form-select.error,
.form-select[aria-invalid="true"] {
  border-color: var(--color-error);
}

/* ---- 6.5 form-textarea --------------------------------------------------- */

.form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--color-text);
  line-height: var(--leading-normal);
  resize: vertical;
  min-height: 120px;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-textarea::placeholder {
  color: var(--color-gray-400);
  font-weight: var(--font-light);
}

.form-textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--color-gray-400);
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 3px rgba(15, 60, 115, 0.12),
    0 1px 3px rgba(15, 60, 115, 0.06);
}

.form-textarea:disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
  resize: none;
}

.form-textarea.error,
.form-textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

/* ---- 6.6 form-date ------------------------------------------------------- */

.form-date {
  /* Наследует стили .form-input */
  cursor: pointer;
  color-scheme: light;
}

.form-date::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5F6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.form-date:hover::-webkit-calendar-picker-indicator,
.form-date:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* ---- 6.7 form-checkbox --------------------------------------------------- */

/*
   <label class="form-checkbox-label">
     <input class="form-checkbox" type="checkbox" id="agree">
     <span class="form-checkbox-custom" aria-hidden="true"></span>
     <span>Согласен с обработкой персональных данных</span>
   </label>
*/

/* Скрываем нативный */
.form-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-checkbox-label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  user-select: none;
}

.form-checkbox-label:hover .form-checkbox-custom {
  border-color: var(--color-primary);
}

/* Кастомный квадрат */
.form-checkbox-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-gray-400);
  border-radius: 4px;
  background-color: var(--color-white);
  flex-shrink: 0;
  margin-top: 2px; /* выравнивание по первой строке */
  transition:
    border-color     var(--transition-fast),
    background-color var(--transition-fast);
}

/* Галочка ::after */
.form-checkbox-custom::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(-45deg) scale(0) translateY(-1px);
  transition: transform 150ms var(--ease-spring);
}

/* Checked */
.form-checkbox:checked + .form-checkbox-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox:checked + .form-checkbox-custom::after {
  transform: rotate(-45deg) scale(1) translateY(-1px);
}

/* Focus-visible */
.form-checkbox:focus-visible + .form-checkbox-custom {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Disabled */
.form-checkbox:disabled + .form-checkbox-custom {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
  cursor: not-allowed;
}

.form-checkbox:disabled ~ span {
  color: var(--color-gray-400);
}

/* ---- 6.8 form-radio ------------------------------------------------------ */

/*
   <label class="form-radio-label">
     <input class="form-radio" type="radio" name="type" value="listener">
     <span class="form-radio-custom" aria-hidden="true"></span>
     <span>Слушатель</span>
   </label>
*/

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

.form-radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  user-select: none;
}

.form-radio-label:hover .form-radio-custom {
  border-color: var(--color-primary);
}

/* Кастомный круг */
.form-radio-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-gray-400);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  flex-shrink: 0;
  transition:
    border-color     var(--transition-fast),
    background-color var(--transition-fast);
}

/* Точка ::after */
.form-radio-custom::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  transform: scale(0);
  transition: transform 150ms var(--ease-spring);
}

/* Checked */
.form-radio:checked + .form-radio-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-radio:checked + .form-radio-custom::after {
  transform: scale(1);
}

/* Focus-visible */
.form-radio:focus-visible + .form-radio-custom {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Disabled */
.form-radio:disabled + .form-radio-custom {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
  cursor: not-allowed;
}

/* ---- 6.9 form-hint / form-error ----------------------------------------- */

.form-hint {
  font-size: 0.8rem;
  font-weight: var(--font-regular);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);
}

.form-error {
  font-size: 0.8rem;
  font-weight: var(--font-medium);
  color: var(--color-error);
  line-height: var(--leading-snug);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  animation: slideDown 200ms var(--ease-out) both;
}

/* Иконка ошибки через data-uri */
.form-error::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

/* Скрытые по умолчанию (JS показывает) */
.form-error[hidden] {
  display: none;
}


/* =============================================================================
   7. АЛЕРТЫ — .alert
   =============================================================================

   <div class="alert alert-success" role="alert">
     <div class="alert-icon"><!-- SVG --></div>
     <div class="alert-content">
       <strong class="alert-title">Заявка принята</strong>
       <p class="alert-text">Письмо подтверждения отправлено на почту.</p>
     </div>
     <button class="alert-close btn btn-icon btn-ghost btn-sm"
             aria-label="Закрыть уведомление">
       <svg .../>
     </button>
   </div>
   ============================================================================= */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-small);
  animation: slideDown 200ms var(--ease-out) both;
}

.alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.alert-content {
  flex: 1;
  min-width: 0;
}

.alert-title {
  display: block;
  font-weight: var(--font-semibold);
  color: inherit;
  margin-bottom: 2px;
}

.alert-text {
  font-size: inherit;
  line-height: var(--leading-snug);
  color: inherit;
  opacity: 0.85;
  max-width: none;
  margin: 0;
}

.alert-close {
  flex-shrink: 0;
  margin-left: auto;
  margin-top: -2px;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.alert-close:hover {
  opacity: 1;
}

/* ---- 7.1 alert-success --------------------------------------------------- */

.alert-success {
  background-color: #f0fdf4;
  border-color: rgba(34, 197, 94, 0.3);
  color: #166534;
}

/* ---- 7.2 alert-error ----------------------------------------------------- */

.alert-error {
  background-color: #fef2f2;
  border-color: rgba(239, 68, 68, 0.3);
  color: #991b1b;
}

/* ---- 7.3 alert-warning --------------------------------------------------- */

.alert-warning {
  background-color: #fffbeb;
  border-color: rgba(245, 158, 11, 0.3);
  color: #92400e;
}

/* ---- 7.4 alert-info ------------------------------------------------------ */

.alert-info {
  background-color: #eff6ff;
  border-color: rgba(79, 142, 247, 0.3);
  color: #1e40af;
}