:root {
  --primary-color: #ffcc00;
  --secondary-color: #ff5a00;
  --background-color: #f8f8f8;
  --text-color: #555;
  --white: #fff;
  --black: #000;
  --border-radius: 5px;
  --font-family: 'Open Sans', sans-serif;
  --font-size-base: 14px;
}

/* Общие стили */
body {
  background: var(--background-color);
  min-width: 1000px;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-color);
}

@media (max-width: 720px) {
  body {
    min-width: 320px;
    overflow-x: hidden;
  }
}

a {
  text-decoration: none;
  color: var(--black);
  cursor: pointer;
}

a:hover {
  color: var(--primary-color);
}

h2 {
  font-weight: bold;
  text-align: center;
  color: var(--black);
  font-size: 34px;
  margin-bottom: 55px;
}

@media (max-width: 720px) {
  h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
}

.button {
  display: inline-block;
  border: 0;
  background: var(--primary-color);
  color: var(--black);
  font-family: var(--font-family);
  font-size: 18px;
  padding: 15px 55px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 3px 15px rgba(10, 20, 130, 0.47);
}

.button:hover {
  background: var(--black);
  color: var(--white);
}

.button:active {
  background: #0a1482;
  box-shadow: none;
}

/* Стили для контейнера */
.content {
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
  min-width: 1000px;
  box-sizing: border-box;
  padding: 0 30px;
}

@media (max-width: 720px) {
  .content {
    min-width: 320px;
    width: 100%;
    padding: 0 10px;
  }
}

/* Стили для телефона и социальных иконок */
.phone,
.social {
  display: inline-block;
  vertical-align: top;
}

.phone i {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
  top: -1px;
  background-image: url(/images/tel_icon.png);
}

.phone a {
  font-weight: bold;
  font-size: 16px;
  color: var(--black);
  margin-right: 15px;
}

.phone span {
  display: inline-block;
  font-size: var(--font-size-base);
  color: var(--black);
}

@media (max-width: 720px) {
  .phone span {
    display: none;
  }
}

.social i {
  width: 29px;
  height: 15px;
  background-image: url(/images/vk_icon.png);
  margin-right: 10px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: -2px;
}

@media (max-width: 720px) {
  .social i {
    top: -5px;
  }
}

.social a {
  color: var(--black);
  font-size: var(--font-size-base);
}

@media (max-width: 720px) {
  .social a {
    font-size: 0;
  }
}

/* Стили для логотипа */
.logo img {
  display: block;
}

        /* Стили для шапки */
        header.top {
            background-color: var(--primary-color);
            padding: 10px 0;
        }

        header.top .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        header.top .phone {
            text-align: left;
            flex: 1;
        }

        header.top .phone a {
            font-size: 16px;
            color: var(--white);
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        header.top .phone a i {
            margin-right: 8px;
        }

        header.top .phone span {
            font-size: 12px;
            color: var(--white);
            opacity: 0.8;
            margin-top: 4px;
        }

        /* Адаптация для мобильных устройств */
        @media (max-width: 720px) {
            header.top {
                padding: 8px 0;
            }

            header.top .container {
                flex-direction: column;
                align-items: flex-start;
            }

            header.top .phone {
                text-align: left;
                margin-bottom: 8px;
            }

            header.top .phone a {
                font-size: 14px;
            }

            header.top .phone span {
                font-size: 10px;
            }
        }

/* Стили для навигации */
nav.main {
  display: inline-block;
  vertical-align: top;
  float: right;
  padding-top: 10px;
}

@media (max-width: 720px) {
  nav.main {
    display: none;
  }
}

nav.main li {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  font-size: 16px;
}

/* Стили для тарифов */
.tariffs {
  padding: 70px 0;
}

@media (max-width: 720px) {
  .tariffs {
    padding: 35px 0;
  }
}

.tariffs .card {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  overflow: hidden;
}

.tariffs .card-img-top {
  height: 200px;
  background-size: cover;
  background-position: center;
}

.tariffs .card-body {
  padding: 20px;
}

.tariffs .card-title {
  font-size: 24px;
  color: var(--black);
}

.tariffs .card-text {
  font-size: 16px;
  color: var(--text-color);
}

/* Стили для футера */
footer.main {
  background-color: var(--primary-color);
  padding: 40px 0;
  color: var(--white);
}

@media (max-width: 720px) {
  footer.main {
    padding: 15px 0;
  }
}

footer.main a {
  color: var(--black);
}

footer.main a:hover {
  color: var(--white);
}

/* Медиа-запросы для адаптивности */
@media (max-width: 720px) {
  .cols-2 .col,
  .cols-3 .col,
  .cols-4 .col,
  .cols-5 .col,
  .cols-6 .col,
  .cols-7 .col,
  .cols-8 .col,
  .cols-9 .col {
    width: 100%;
  }
}

/* Дополнительные стили */
.index-app ul li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -3px;
  background-color: var(--secondary-color);
  border-radius: 50%;
}
/* === Добавления 2026-10-15: мобильная панель заказа, чек-листы, карточки === */
.sticky-order {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  z-index: 1040;
}
.sticky-order .btn-call,
.sticky-order .btn-wa,
.sticky-order .btn-tg,
.sticky-order .btn-max {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 6px; border-radius: 10px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  text-align: center;
}
.sticky-order .btn-call i,
.sticky-order .btn-tg i,
.sticky-order .btn-max i { margin: 0; font-size: 1.15em; }
.sticky-order .btn-call { background: #ffc107; color: #000; }
.sticky-order .btn-wa { background: #25d366; color: #fff; }
@media (min-width: 992px) {
  .sticky-order { display: none; }
}
@media (max-width: 991.98px) {
  body { padding-bottom: 72px; }
}
.checklist { padding-left: 0; list-style: none; }
.checklist li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #198754; font-weight: 700; }
.district-link { background: #fff; transition: background .15s ease; }
.district-link:hover { background: #fff3cd; }
.price-badge { font-weight: 700; }
.district-card h3, .district-card h2 { font-size: 1.1rem; }
@media (max-width: 991.98px) {
  .cookie-notification.fixed-bottom { bottom: 80px; margin-bottom: 0; }
}

/* === Обновление 18:20: компактная шапка на мобильных === */
@media (max-width: 767.98px) {
  header.main { padding: 4px 0; }
  header.main .logo .fs-3 { font-size: 1.2rem; }
}

/* === Обновление 18:27: Telegram, FAQ, юзабилити === */
/* Telegram: фирменный синий #229ED9, белый текст, «мессенджерский» радиус */
.btn-tg { background: #229ED9; border-color: #229ED9; color: #fff; border-radius: 10px; border: 0; }
.btn-tg:hover, .btn-tg:focus { background: #1b8ac2; border-color: #1b8ac2; color: #fff; }
.btn-tg i { color: #fff; }
/* Max: официальный градиент брендбука Max — «Синий гигант» #471AFF → «Пурпурная туманность» #9500FF */
.btn-max, .sticky-order .btn-max {
  background: linear-gradient(135deg, #471AFF 0%, #9500FF 100%);
  border: 0; color: #fff; border-radius: 10px;
}
.btn-max:hover, .btn-max:focus {
  background: linear-gradient(135deg, #3a14d9 0%, #7d00d9 100%); color: #fff;
}
.btn-max i { color: #fff; }
.sticky-order .btn-tg { background: #229ED9; color: #fff; border-radius: 10px; }
.sticky-order .btn-tg:hover { background: #1b8ac2; }
.faq-item { background: #fff; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.faq-item h3 { color: #000; }
#mobileNav .menu-grid a { font-size: 15px; }
#mobileNav .menu-grid a:active { background: #fff3cd; }
html { scroll-behavior: smooth; }

/* === Единый стиль сайта (18:39) === */
:root {
  --taxi-yellow: #ffc107;
  --taxi-dark: #212529;
  --taxi-footer: #383634;      /* тёмно-серый футер (тёплый оттенок) */
  --warm-white: #faf6ee;       /* тёплый белый — заголовки футера */
  --warm-light: #e8e2d6;       /* тёплый светлый — ссылки футера */
  --warm-muted: #b9b1a3;       /* приглушённый тёплый — копирайт/адрес */
}
/* Тёмно-серый футер: тёплые светлые буквы */
footer.main { background: var(--taxi-footer); color: var(--warm-light); }
footer.main h4 { color: var(--warm-white); font-weight: 700; }
footer.main a { color: var(--warm-light); text-decoration: none; }
footer.main a:hover { color: var(--taxi-yellow); }
footer.main .footer-tel { color: var(--warm-white); font-size: 1.05rem; font-weight: 700; }
footer.main .footer-tel:hover { color: var(--taxi-yellow); }
footer.main .footer-copy { color: var(--warm-muted); }
footer.main address { color: var(--warm-muted); margin-bottom: 0; }
footer.main li.small { color: var(--warm-muted); }
/* Карточка контентной страницы */
.page-card { background: #fff; border-radius: 12px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
@media (max-width: 767.98px) { .page-card { padding: 15px; } }
/* Кнопка меню: крупная, удобный тач-таргет */
.toggle-mobile-menu { min-width: 48px; min-height: 48px; align-items: center; justify-content: center; display: inline-flex; }
.toggle-mobile-menu i { font-size: 2.1rem; line-height: 1; }
/* Аккордеон FAQ в фирменном стиле */
.accordion-button:not(.collapsed) { background: var(--taxi-yellow); color: #000; }
.accordion-button { font-size: 1rem; }
.accordion-button:focus { box-shadow: none; border-color: rgba(0,0,0,.125); }
/* Hero: читаемость текста на фото */
section.order h1, section.order p, section.order .h2 { text-shadow: 0 1px 5px rgba(0,0,0,.85); }
section.order { position: relative; }
section.order::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.35); }
section.order .container { position: relative; z-index: 1; }
/* Sticky-панель: три кнопки помещаются на узких экранах */
.sticky-order a { font-size: 15px; }
@media (max-width: 380px) {
  .sticky-order { gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .sticky-order a { font-size: 13.5px; padding: 10px 4px; gap: 5px; }
}

/* Кнопки заказа в мобильном меню: подписи по центру, равные отступы иконка/текст */
#mobileNav .d-grid .btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 10px;
}
#mobileNav .d-grid .btn i { margin: 0; font-size: 1.15em; }
/* Кнопки мессенджеров в футере: ровный отступ иконка/текст */
footer.main .btn-tg, footer.main .btn-max {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
footer.main .btn-tg i, footer.main .btn-max i { margin: 0; }

/* === Правки 2026-10-16 ===
   1) Кнопка меню — справа в основной шапке (рядом с логотипом/меню)
   2) Telegram и Max — в официальных цветах и стиле мессенджеров
   3) Футер — тёмно-серый, буквы тёплые светлые */

/* Кнопка меню (новое место — справа в шапке) */
/* Кнопка меню теперь в основной шапке справа (см. tpl/header.php) —
   выравнивание правого блока меню+кнопки */
header.main .d-flex.gap-2 { flex-shrink: 0; }
.toggle-mobile-menu { margin-right: -8px; /* визуально выровнять иконку по правому краю контейнера */ }

/* === Межгород (2026-10-16): расстояние и стоимость отдельными строками === */
/* Маршрут в заголовке: жёлтый маркер-выделение */
.route-mark { background: linear-gradient(transparent 55%, rgba(255,193,7,.5) 55%); border-radius: 3px; padding: 0 .12em; }
/* Список фактов: метка слева, значение справа, разделители */
.route-facts { max-width: 560px; margin: 1.1rem 0 0; }
.route-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 2px; border-bottom: 1px solid rgba(0,0,0,.1); }
.route-fact:first-child { border-top: 1px solid rgba(0,0,0,.1); }
.route-fact dt { color: #666; font-weight: 600; }
.route-fact dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; font-size: 1.05rem; }
/* Сумма — крупно, тёплый янтарный акцент */
.route-fact dd.route-price { font-size: 1.3rem; color: #a16207; }

/* === Тарифы (2026-10-16): авто пропорционально реальным размерам ===
   Было: object-fit: cover обрезал машины и делал все одним размером.
   Стало: contain (вся машина видна), масштаб по классу авто, общая «линия земли». */
.tariff-img {
  position: relative;
  height: 250px;
  padding: 14px 16px 12px;
  display: flex; align-items: flex-end; justify-content: center;
  /* Фирменная подложка Такси Уфа: белый верх -> тёплое жёлтое «свечение земли» */
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 55%, #ffedb0 100%);
}
.tariff-img img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
  /* Растворяет белый фон JPG — машина стоит прямо на фирменной подложке */
  mix-blend-mode: multiply;
}
/* Масштаб по реальной длине кузова: седан < минивэн < ГАЗель (внутри блока, единая «линия земли») */
.tariff-img img.tariff-img__pic--econom   { width: 73%; }
.tariff-img img.tariff-img__pic--comfort  { width: 78%; }
.tariff-img img.tariff-img__pic--business { width: 82%; }
.tariff-img img.tariff-img__pic--minivan  { width: 87%; }
.tariff-img img.tariff-img__pic--delivery { width: 80%; }
.tariff-img img.tariff-img__pic--cargo    { width: 100%; }

/* Фирменный стиль карточек тарифов (как у таксопарков): шашечки + жёлтый кант */
.tariff-img::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: repeating-conic-gradient(#141414 0% 25%, var(--taxi-yellow) 0% 50%);
  background-size: 8px 8px;
}
.tariffs .card { border-top: 4px solid var(--taxi-yellow); }

/* Жёлтый бейдж класса поверх фото (фирменная плашка) */
.tariff-img::before {
  content: attr(data-badge);
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--taxi-yellow); color: #000;
  font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}