/* =====================================================================
   MV TAXI — ТЕМА ОФОРМЛЕНИЯ
   Подключается ПОСЛЕ styles.css и переопределяет фирменные цвета.
   Стиль: жёлтый акцент + графитовый чёрный, крупные скругления,
   плотная геометричная типографика, много воздуха.
   ===================================================================== */

:root {
  /* Основная палитра */
  --mv-yellow: #ffdb4d;
  --mv-yellow-deep: #fbc700;
  --mv-yellow-soft: #fff4cc;

  --mv-ink: #101318;   /* основной текст / тёмные плашки */
  --mv-ink-2: #21262e;
  --mv-gray: #6b7280;
  --mv-line: #e7e9ee;
  --mv-surface: #f5f6f8;
  --mv-white: #ffffff;

  --mv-radius-sm: 12px;
  --mv-radius: 20px;
  --mv-radius-lg: 28px;
  --mv-shadow: 0 6px 24px rgba(16, 19, 24, 0.08);
}

/* ===== ТИПОГРАФИКА ===== */
body {
  color: var(--mv-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}

h1, .h1, h2, .h2, h3 {
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* ===== ШАПКА ===== */
.header {
  background: var(--mv-white);
  border-bottom: 1px solid var(--mv-line);
}

.header__phone {
  color: var(--mv-ink);
  font-weight: 600;
}

.header__action-btn {
  border-radius: 999px;
  font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.header__action-btn--light {
  background: var(--mv-surface);
  color: var(--mv-ink);
  border: 1px solid transparent;
}

.header__action-btn--light:hover {
  background: #eceef2;
}

.header__action-btn--light.is-active {
  background: var(--mv-ink);
  color: var(--mv-white);
}

/* Главная кнопка «Вызвать такси» — жёлтая с тёмным текстом */
.header__action-btn--purple {
  background: var(--mv-yellow) !important;
  color: var(--mv-ink) !important;
  font-weight: 700;
}

.header__action-btn--purple:hover {
  background: var(--mv-yellow-deep) !important;
}

/* ===== ЛОГОТИП ===== */
.logo__icon,
.footer__brand-logo {
  width: auto;
  height: 3.6rem;
  object-fit: contain;
}

/* ===== КНОПКИ ===== */
.btn {
  background: var(--mv-yellow);
  color: var(--mv-ink);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

.btn:hover {
  background: var(--mv-yellow-deep);
}

.btn:active {
  transform: translateY(1px);
}

/* ===== COOKIE-БАННЕР ===== */
.cookie-banner__content {
  background: var(--mv-white);
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  box-shadow: var(--mv-shadow);
}

.cookie-banner__btn {
  background: var(--mv-yellow);
  color: var(--mv-ink);
  border-radius: 999px;
  font-weight: 700;
}

.cookie-banner__btn:hover {
  background: var(--mv-yellow-deep);
  opacity: 1;
}

/* ===== ГЛАВНЫЙ ЭКРАН ===== */
.drivers-hero-heading--purple {
  color: var(--mv-ink);
}

/* Жёлтое подчёркивание акцентного слова в заголовке */
.mv-accent {
  background: linear-gradient(180deg, transparent 55%, var(--mv-yellow) 55%, var(--mv-yellow) 94%, transparent 94%);
  padding: 0 0.08em;
}

/* ===== БЕЙДЖИ МАГАЗИНОВ ПРИЛОЖЕНИЙ ===== */
.store-badge {
  border: 1px solid var(--mv-ink);
  border-radius: 999px;
  background: var(--mv-white);
  color: var(--mv-ink);
  font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.store-badge:hover {
  background: var(--mv-ink);
  color: var(--mv-white);
}

/* ===== КАРТОЧКИ ПРЕИМУЩЕСТВ ===== */
.drivers-benefit {
  border-radius: var(--mv-radius-lg);
}

.drivers-benefit--purple {
  background: var(--mv-yellow);
  color: var(--mv-ink);
}

.drivers-benefit--purple .drivers-benefit__title,
.drivers-benefit--purple .drivers-benefit__text {
  color: var(--mv-ink);
}

.drivers-benefit--dark {
  background: var(--mv-ink);
}

.drivers-benefit--yellow {
  background: var(--mv-surface);
  color: var(--mv-ink);
}

.drivers-benefit--yellow .drivers-benefit__title,
.drivers-benefit--yellow .drivers-benefit__text {
  color: var(--mv-ink);
}

/* ===== БЛОК ПРИЛОЖЕНИЯ ===== */
.drivers-conditions--home .requirements-container {
  background: var(--mv-ink) !important;
  border-radius: var(--mv-radius-lg);
}

/* Декоративный круг внутри тёмного блока */
.drivers-conditions--home .requirements-container::before,
.drivers-conditions--home .requirements-container .circle {
  background: var(--mv-ink-2);
}

.requirements-container {
  background: var(--mv-yellow);
  border-radius: var(--mv-radius-lg);
}

.drivers-conditions--drivers .driver-btn {
  background: var(--mv-yellow);
  color: var(--mv-ink);
  border-radius: 999px;
  font-weight: 700;
}

/* Стрелки-указатели */
.arrow {
  color: var(--mv-yellow-deep);
}

.drivers-conditions--home .arrow,
.requirements-container .arrow {
  color: var(--mv-yellow);
}

/* ===== ТАРИФЫ ===== */
.drivers-step {
  border-radius: var(--mv-radius-lg);
  background: var(--mv-surface);
  border: 1px solid transparent;
}

.drivers-step--accent {
  background: var(--mv-yellow-soft);
  border-color: var(--mv-yellow);
}

.home-tariff-price {
  color: var(--mv-ink);
  font-weight: 700;
}

/* ===== ФОРМЫ ===== */
.drivers-form__input {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius-sm);
  background: var(--mv-white);
  font-family: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.drivers-form__input:focus {
  outline: none;
  border-color: var(--mv-yellow-deep);
  box-shadow: 0 0 0 3px rgba(251, 199, 0, 0.25);
}

.drivers-form__input::placeholder {
  color: #9aa1ad;
}

.drivers-contacts__card {
  border-radius: var(--mv-radius-lg);
  background: var(--mv-surface);
}

/* ===== ПОДВАЛ ===== */
.footer {
  background: var(--mv-ink);
  color: var(--mv-white);
}

.footer__col-title {
  color: var(--mv-yellow);
}

.footer__link {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.16s ease;
}

.footer__link:hover {
  color: var(--mv-yellow);
}

.footer__question {
  color: var(--mv-white);
}

.footer__divider {
  background: rgba(255, 255, 255, 0.12);
}

.rights {
  color: rgba(255, 255, 255, 0.55);
}

/* ===== МОБИЛЬНОЕ МЕНЮ ===== */
.sidebar {
  border-radius: var(--mv-radius-lg) 0 0 var(--mv-radius-lg);
}

.sidebar .cta {
  background: var(--mv-yellow);
  color: var(--mv-ink);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
}

.menu a {
  color: var(--mv-ink);
  font-weight: 600;
}

.menu a:hover {
  color: var(--mv-yellow-deep);
}

/* ===== ФОКУС ДЛЯ ДОСТУПНОСТИ ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mv-yellow-deep);
  outline-offset: 2px;
  border-radius: 4px;
}