/* ============================================
   КАРТА СОКРОВИЩ ПЕНЗЫ — ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ TILDA
   Добавить в: Настройки сайта → CSS → Global CSS
   ============================================ */

/* ---------- ПЕРЕМЕННЫЕ ЦВЕТОВ ---------- */
:root {
  /* База */
  --bg-site: #FFF9F0;
  --text-primary: #2D2D34;
  --text-secondary: #7A7A7A;
  
  /* Основные цвета */
  --pink: #FF4D8C;
  --pink-hover: #E53E7A;
  --mint: #4CD964;
  --blue: #3B9EFF;
  --yellow: #FFB800;
  
  /* Тени */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ---------- ГЛОБАЛЬНЫЙ ФОН ---------- */
body {
  background-color: var(--bg-site);
}

/* ---------- ЗАГОЛОВКИ ---------- */
h1, .t-title, .t-descr h1, [data-field="title"] {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2, .t-heading, [data-field="subtitle"] {
  color: var(--text-primary);
  font-weight: 600;
}

h3, .t-name {
  color: var(--text-primary);
}

/* ---------- ТЕКСТ ---------- */
p, .t-descr, .t-text, [data-field="descr"] {
  color: var(--text-secondary);
}

/* ---------- ССЫЛКИ ---------- */
a:not(.t-btn):not(.t704__link) {
  color: var(--pink);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:not(.t-btn):not(.t704__link):hover {
  color: var(--pink-hover);
  text-decoration: underline;
}

/* ---------- КНОПКИ (ГЛАВНЫЕ) ---------- */
.t-btn,
.t794__btn,
.t-submit {
  background-color: var(--pink) !important;
  color: white !important;
  border: none !important;
  border-radius: 40px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(255, 77, 140, 0.3) !important;
}

.t-btn:hover,
.t794__btn:hover,
.t-submit:hover {
  background-color: var(--pink-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(255, 77, 140, 0.4) !important;
}

.t-btn:active {
  transform: translateY(0) !important;
}

/* ---------- КНОПКИ ВТОРОСТЕПЕННЫЕ (обводка) ---------- */
/* Для кнопок с классом .btn-outline или если нужно вручную */
.btn-outline,
.t-btn[data-style="outline"] {
  background-color: transparent !important;
  border: 2px solid var(--blue) !important;
  color: var(--blue) !important;
  box-shadow: none !important;
}

.btn-outline:hover,
.t-btn[data-style="outline"]:hover {
  background-color: var(--blue) !important;
  color: white !important;
}

/* ---------- КАРТОЧКИ ---------- */
.t-card,
.t794__card,
.t702__card {
  background-color: white;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.t-card:hover,
.t794__card:hover,
.t702__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---------- БЕЙДЖИ / ТЕГИ ---------- */
.badge,
.tag,
.t-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pink {
  background-color: var(--pink);
  color: white;
}

.badge-mint {
  background-color: var(--mint);
  color: #1A2A32;
}

.badge-blue {
  background-color: var(--blue);
  color: white;
}

.badge-yellow {
  background-color: var(--yellow);
  color: #1A1A1A;
}

/* ---------- ИКОНКИ СОКРОВИЩ ---------- */
.treasure-icon {
  color: var(--yellow);
}

/* ---------- QR-КОДЫ ---------- */
.qr-placeholder {
  background-color: white;
  border-radius: 16px;
  padding: 16px;
  display: inline-block;
  box-shadow: var(--shadow-sm);
}

/* ---------- ПРОГРЕСС / ПРОЙДЕННЫЕ МАРШРУТЫ ---------- */
.progress-checked {
  color: var(--mint);
}

/* ---------- ФУТЕР ---------- */
.t-footer {
  background-color: #2D2D34;
  color: white;
}

.t-footer a {
  color: #ccc;
}

.t-footer a:hover {
  color: var(--pink);
}