/* ============================================================
   Делайка.рф — дизайн-система поверх Bootstrap
   Палитра: тёплый фон, зелёный бренд, янтарный акцент.
   Принципы: крупно, контрастно, дружелюбно — от 14 лет до бабушек.
   ============================================================ */

/* --- Шрифт Rubik (локально, кириллица + латиница) --- */
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/rubik-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/rubik-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/rubik-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/rubik-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/rubik-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/rubik-latin-700-normal.woff2") format("woff2");
}

/* --- Токены --- */
:root {
  --d-green: #4f46e5;          /* бренд: индиго */
  --d-green-dark: #3f38c9;
  --d-green-soft: #eef0ff;
  --d-amber: #db2777;          /* акцент: маджента */
  --d-amber-soft: #fdeaf3;
  --d-ink: #1e2235;
  --d-muted: #676e85;
  --d-bg: #f5f5fb;
  --d-surface: #ffffff;
  --d-line: #e6e6f0;
  --d-radius: 18px;
  --d-radius-sm: 12px;
  --d-shadow: 0 1px 2px rgba(34, 48, 60, .05), 0 6px 20px rgba(34, 48, 60, .06);
  --d-shadow-hover: 0 4px 10px rgba(34, 48, 60, .08), 0 14px 34px rgba(34, 48, 60, .10);
}

/* --- База --- */
body {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.02rem;
  color: var(--d-ink);
  background:
    radial-gradient(1100px 480px at 90% -120px, rgba(79, 70, 229, .07), transparent 60%),
    radial-gradient(800px 400px at -10% 30%, rgba(219, 39, 119, .05), transparent 55%),
    var(--d-bg);
}
h1, h2, h3, h4, .fw-bold, .fw-semibold { letter-spacing: -.01em; }
a { color: var(--d-green); }
a:hover { color: var(--d-green-dark); }

/* Доступность: заметный фокус для клавиатуры и слабовидящих */
:focus-visible {
  outline: 3px solid var(--d-amber) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Навбар --- */
.navbar {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--d-line) !important;
  padding-top: .7rem; padding-bottom: .7rem;
}
.navbar-brand { font-weight: 700; font-size: 1.35rem; color: var(--d-green) !important; }
.navbar-brand .brand-dot { color: var(--d-ink); }
.navbar .nav-link {
  color: var(--d-ink); font-weight: 500;
  border-radius: 10px; padding: .45rem .8rem !important;
}
.navbar .nav-link:hover { background: var(--d-green-soft); color: var(--d-green-dark); }

/* --- Кнопки: крупные, с явным действием --- */
.btn { border-radius: var(--d-radius-sm); font-weight: 500; padding: .6rem 1.15rem; }
.btn-primary {
  background: var(--d-green); border-color: var(--d-green);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--d-green-dark) !important; border-color: var(--d-green-dark) !important;
}
.btn-outline-primary { color: var(--d-green); border-color: var(--d-green); }
.btn-outline-primary:hover { background: var(--d-green); border-color: var(--d-green); }
.btn-light { background: #fff; border-color: #fff; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.1rem; }

/* --- Карточки --- */
.card {
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
}
.task-card { transition: transform .12s ease, box-shadow .12s ease; }
.task-card:hover { transform: translateY(-2px); box-shadow: var(--d-shadow-hover); }

/* Иконка категории на карточке задачи */
.cat-icon {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  background: var(--d-green-soft);
  border-radius: 14px;
}
.task-price { font-weight: 700; font-size: 1.2rem; color: var(--d-green-dark); white-space: nowrap; }

/* --- Чипы категорий (быстрые фильтры) --- */
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem 1rem;
  border-radius: 999px;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  color: var(--d-ink); font-size: .93rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: border-color .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.cat-chip:hover { border-color: #b9b7f0; color: var(--d-green); transform: translateY(-1px); box-shadow: var(--d-shadow); }
.cat-chip.active { background: var(--d-green); border-color: var(--d-green); color: #fff; }
.cat-chip.active .chip-count { color: rgba(255, 255, 255, .75); }
.cat-chip .chip-emoji { font-size: 1.15rem; line-height: 1; }
.cat-chip .chip-count { color: var(--d-muted); font-weight: 400; font-size: .85rem; }

/* Телефон: одна строка с прокруткой пальцем */
@media (max-width: 768px) {
  .cat-chips {
    flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: .4rem; margin-inline: -12px; padding-inline: 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
}

/* --- Шаги «как это работает» --- */
.step-card { text-align: center; padding: 1.4rem 1rem; height: 100%; }
.step-num {
  width: 40px; height: 40px; margin: 0 auto .6rem;
  display: grid; place-items: center;
  background: var(--d-green-soft); color: var(--d-green);
  font-weight: 700; border-radius: 12px;
}
.section-title { font-weight: 700; font-size: 1.15rem; margin-bottom: .9rem; }

/* --- Бейджи возраста: цвет = смысл --- */
.badge { font-weight: 500; }
.badge-age-14 { background: #e0f5e9; color: #157347; }   /* зелёный = «можно» */
.badge-age-16 { background: #fdf1dc; color: #8a5a00; }
.badge-age-18 { background: #e9eaf2; color: #4b5266; }
.badge-cat { background: #efeff6; color: var(--d-ink); }

/* --- Герой на главной --- */
.hero {
  background:
    radial-gradient(640px 320px at 18% 0%, rgba(150, 96, 255, .55), transparent 60%),
    radial-gradient(560px 320px at 95% 15%, rgba(56, 189, 248, .35), transparent 55%),
    radial-gradient(500px 400px at 70% 120%, rgba(236, 72, 153, .38), transparent 55%),
    linear-gradient(135deg, #4f46e5 0%, #372fa5 100%);
  color: #fff;
  border-radius: 26px;
  padding: 2.8rem 2.4rem;
  position: relative; overflow: hidden;
}
.hero h1 { font-weight: 700; }
.hero .btn-light { color: var(--d-green-dark); font-weight: 700; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(4px);
  color: #fff; font-weight: 500; font-size: .95rem;
  border-radius: 999px; padding: .35rem .9rem;
}

/* --- Формы: крупные поля, понятные подписи --- */
.form-control, .form-select {
  border-radius: var(--d-radius-sm);
  border-color: #d8d5cb;
  padding: .65rem .9rem;
  font-size: 1rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--d-green);
  box-shadow: 0 0 0 .25rem rgba(27, 127, 77, .15);
}
form p { margin-bottom: 1rem; }
form label { font-weight: 500; margin-bottom: .3rem; display: inline-block; }
.helptext { display: block; font-size: .85rem; color: var(--d-muted); margin-top: .25rem; }
form ul.errorlist { list-style: none; padding: 0; margin: .3rem 0 0; color: #b3261e; font-size: .9rem; }
.form-check-input:checked { background-color: var(--d-green); border-color: var(--d-green); }

/* --- Сообщения-уведомления --- */
.alert { border-radius: var(--d-radius-sm); border: none; box-shadow: var(--d-shadow); }
.alert-success { background: var(--d-green-soft); color: var(--d-green-dark); }
.alert-info { background: #e3eef7; color: #1e5a80; }
.alert-warning { background: #fdf1dc; color: #7a5200; }
.alert-danger { background: #fbe4e2; color: #a52a21; }

/* --- Чат --- */
.chat-bubble-mine { background: var(--d-green); color: #fff; border-radius: 16px 16px 4px 16px; }
.chat-bubble-theirs { background: #fff; border: 1px solid var(--d-line); border-radius: 16px 16px 16px 4px; }

/* --- Футер --- */
footer { background: var(--d-surface); }

/* --- Пагинация и мелочи --- */
.page-hint { color: var(--d-muted); }
img { max-width: 100%; }

/* Крупнее на телефонах: главные кнопки во всю ширину */
@media (max-width: 576px) {
  .btn-mobile-full { width: 100%; }
  .hero { padding: 1.8rem 1.4rem; }
  .hero::after { display: none; }
}

/* --- Ударение бренда: ударная «е» — коралловая и жирная --- */
.e-stress { color: var(--d-amber); font-weight: 700; font-style: normal; }
.hero-tagline {
  font-size: 1rem; font-weight: 500;
  opacity: .85; letter-spacing: .02em;
  margin-bottom: .4rem;
}

/* На тёмном герое ударная «е» — светло-розовая, иначе тонет */
.hero .e-stress { color: #f9a8d4; }

/* --- Карточки двух аудиторий на главной --- */
.aud-card { padding: 1.5rem; height: 100%; display: flex; flex-direction: column; }
.aud-icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  font-size: 1.55rem; border-radius: 14px; margin-bottom: .8rem;
}
.aud-icon-customer { background: var(--d-green-soft); }
.aud-icon-worker { background: var(--d-amber-soft); }
.aud-card .aud-points { color: var(--d-muted); font-size: .95rem; margin-bottom: 1rem; }
.aud-card .aud-points div { padding: .15rem 0; }
.aud-card .btn { margin-top: auto; }

/* --- Силуэт посёлка: связь дизайна с местом --- */
.hero { padding-bottom: 5.5rem; }
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 84px;
  background: rgba(255, 255, 255, .16);
  -webkit-mask: url("../img/village.svg") repeat-x bottom / auto 100%;
  mask: url("../img/village.svg") repeat-x bottom / auto 100%;
  pointer-events: none;
}
.village-band {
  height: 66px;
  margin-top: 2.5rem;
  background: rgba(79, 70, 229, .16);
  -webkit-mask: url("../img/village.svg") repeat-x bottom / auto 100%;
  mask: url("../img/village.svg") repeat-x bottom / auto 100%;
}
footer { border-top: none !important; }