/**
 * Createrra / dshop — палитра поверх TailAdmin (Tailwind v4 theme variables).
 * Подключать сразу после style.css. Источник: shop.css (--shop-*), admin.css, Flutter app_theme.
 */
@layer theme {
  :root,
  :host {
    /* Акцент — как в магазине и админке (#ee252c) */
    --color-brand-50: #fef2f3;
    --color-brand-100: #fde4e6;
    --color-brand-300: #ef6b72;
    --color-brand-400: #f03e46;
    --color-brand-500: #ee252c;
    --color-brand-600: #cf1f26;
    --color-brand-800: #8b161b;
    --color-brand-950: #2d0a0c;

    /* Шрифт как у витрины / админ-контента */
    --font-outfit:
      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Успех — как в admin.css */
    --color-success-50: #ecfdf3;
    --color-success-300: #6ce9a6;
    --color-success-400: #4ade80;
    --color-success-500: #3c9742;
    --color-success-600: #308636;
    --color-success-700: #027a48;
    --color-success-800: #05603a;
  }

  /**
   * Тёмная тема: нейтрали как в shop.css
   * (--shop-bg #0d0d0e, --shop-card #1a1a1b, --shop-surface #252527, --shop-line #2d2d30)
   */
  body.dark,
  .dark {
    --color-gray-50: #161617;
    --color-gray-100: #181819;
    --color-gray-200: #2d2d30;
    --color-gray-300: #3d3d42;
    --color-gray-400: #8c919b;
    --color-gray-500: #9ca3af;
    --color-gray-600: #b0b4bd;
    --color-gray-700: #252527;
    --color-gray-800: #1a1a1b;
    --color-gray-900: #0d0d0e;
    --color-black: #0d0d0e;
    --color-gray-dark: #0d0d0e;
  }
}

@layer base {
  body {
    font-family:
      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
}

/* ── Чекбоксы форм админки (admin-checkbox-row) ───────────────────────────── */
/* Аккуратная кликабельная строка: чекбокс слева, ровно по верхней строке текста. */
.admin-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  margin: 4px 0;
  border: 1px solid var(--admin-border, #343842);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
  transition: border-color .12s, background .12s;
  user-select: none;
}

.admin-checkbox-row:hover {
  border-color: #50c878;
  background: rgba(80, 200, 120, 0.06);
}

.admin-checkbox-row > input[type="checkbox"],
.admin-checkbox-row > input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0 0;      /* прижимаем к верхней строке текста, а не к центру */
  accent-color: #50c878;
  cursor: pointer;
}

/* Выбранная строка — заметная зелёная рамка. */
.admin-checkbox-row:has(> input:checked) {
  border-color: #50c878;
  background: rgba(80, 200, 120, 0.10);
}

/* Старый класс inline-check (интеграции) — тот же аккуратный вид, но компактнее. */
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.inline-check > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #50c878;
  cursor: pointer;
}

/* Карточки выбора (радио-плитка) — вкладка «Доставка» в настройках и в мастере. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 1rem;
}
.choice-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 2px solid #3A3F47;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: transparent;
}
.choice-card:hover { border-color: #6b7280; }
.choice-card--active {
  border-color: #50C878;
  background: rgba(80, 200, 120, .08);
}
.choice-card input[type="radio"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #50C878;
  flex-shrink: 0;
}
.choice-card__title { font-weight: 600; display: block; margin-bottom: 2px; }
.choice-card__hint { font-size: 12px; color: #A5A9B3; display: block; }