/* ============================================================
   upsgroup.ru — кастомные стили
   Стек: MODX + Bootstrap 5 + CSS + JavaScript
   
   Файл: /assets/css/custom.css
   Подключается в шаблоне base после bootstrap.min.css
   Все стили здесь — кастомные, не из Bootstrap
   ============================================================ */

/* ------------------------------------------------------------
   РАЗДЕЛ: Цветовая схема бренда
   Используется через CSS-переменные (custom properties)
   Оранжевый — основной акцентный цвет (как на старом сайте)
   Серый — фон шапки и подвала
   ------------------------------------------------------------ */
:root {
  --ups-orange: #ff9e01;          /* Основной оранжевый (кнопки, меню) */
  --ups-orange-hover: #e88f00;    /* Оранжевый при наведении */
  --ups-gray: #585858;            /* Тёмно-серый (шапка, подвал) */
  --ups-gray-light: #f2f2f2;      /* Светло-серый (фон блоков) */
  --ups-white: #ffffff;
  --ups-bg: #f4f2f3;              /* Фон страницы */
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Базовые стили
   Шрифт Arimo — фирменный шрифт сайта (как на старом сайте)
   ------------------------------------------------------------ */
body {
  font-family: 'Arimo', sans-serif;
  font-size: 16px;
  color: #333;
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Шапка сайта
   #sp-header — верхняя тёмная полоса с корзиной
   #sp-headerlogo — блок с логотипом и телефонами
   #sp-menu-desktop — оранжевое горизонтальное меню
   ------------------------------------------------------------ */
#sp-header {
  background-color: var(--ups-gray);
}

#sp-menu-desktop {
  background-color: var(--ups-orange);
}

#sp-menu-desktop a {
  color: var(--ups-white);
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Заголовки
   Размеры шрифтов как на старом сайте (Joomla/Helix3)
   ------------------------------------------------------------ */
h1 {
  font-family: 'Arimo', sans-serif;
  font-size: 21px;
  font-weight: 700;
}

h2 {
  font-family: 'Arimo', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

h3 {
  font-family: 'Arimo', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Подвал
   #sp-footer — тёмный подвал с контактами
   ------------------------------------------------------------ */
#sp-footer {
  background-color: var(--ups-gray);
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Каталог труб
   .filter-form — форма AJAX-фильтра (диаметр, стенка, марка стали)
   .table-mod-catalogtrub-filter — таблица результатов фильтра
   ------------------------------------------------------------ */
.filter-form {
  margin: 20px 0;
}

.filter-table {
  width: 100%;
}

.table-mod-catalogtrub-filter {
  width: 100%;
  border-collapse: collapse;
}

.table-mod-catalogtrub-filter th {
  background-color: var(--ups-orange);
  color: var(--ups-white);
  padding: 10px;
}

.table-mod-catalogtrub-filter td {
  padding: 8px;
  border: 1px solid #ddd;
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Кнопки
   .btn-ups — фирменная оранжевая кнопка
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   РАЗДЕЛ: Карточки категорий на главной
   .category-card — карточка категории труб
   ------------------------------------------------------------ */
.category-card {
  text-align: center;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}

.category-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-card a {
  color: var(--ups-white);
  text-decoration: none;
}

.category-card a:hover {
  color: var(--ups-orange);
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Статьи
   .article — карточка статьи в списке
   .article-description — краткое описание статьи
   .article-botton — кнопки под статьёй (подробнее, добавить в заказ)
   ------------------------------------------------------------ */
.article {
  margin-bottom: 30px;
}

.article-description {
  margin: 15px 0;
}

.article-botton ul {
  list-style: none;
  display: flex;
  gap: 15px;
  padding: 0;
}

.article-botton li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ups-orange);
  text-decoration: none;
  font-weight: 600;
}

.article-botton li a:hover {
  color: var(--ups-orange-hover);
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Галерея (благодарственные письма, сертификаты)
   .gallery-item — элемент галереи с изображением
   ------------------------------------------------------------ */
.gallery-item {
  margin-bottom: 20px;
}

.gallery-item img {
  width: 100%;
  border-radius: 4px;
  transition: transform 0.3s;
}

.gallery-item img:hover {
  transform: scale(1.02);
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Корзина
   #div_korzina — счётчик позиций в шапке
   ------------------------------------------------------------ */
#div_korzina a {
  color: var(--ups-white);
  text-decoration: none;
}

/* ------------------------------------------------------------
   РАЗДЕЛ: Адаптивность
   Мобильные устройства (до 767px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .article-botton ul {
    flex-direction: column;
    gap: 10px;
  }
}


/* ============================================================
   ДОПОЛНЕНИЯ: главная страница, тёмные карточки, баннер
   ============================================================ */

/* Оранжевый фон для блока в баннере */
.bg-ups-orange {
  background-color: var(--ups-orange) !important;
}

/* Оранжевый текст */
.text-ups-orange {
  color: var(--ups-orange);
  font-weight: 700;
}

/* Баннер главной страницы */
.home-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-banner-text {
  text-align: center;
  max-width: 800px;
  padding: 20px;
}

.home-banner-block {
  display: inline-block;
  border-radius: 4px;
}

/* Тёмные карточки категорий (как на старом сайте) */
.category-card-dark {
  display: block;
  text-align: center;
  padding: 25px 15px;
  background-color: var(--ups-gray);
  color: var(--ups-white);
  border: 2px solid var(--ups-orange);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s;
  height: 100%;
}

.category-card-dark:hover {
  background-color: var(--ups-orange);
  color: var(--ups-white);
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(255, 158, 1, 0.3);
}

.category-card-dark h3 {
  color: var(--ups-white);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.category-card-dark p {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 0;
}

.category-card-dark:hover h3,
.category-card-dark:hover p {
  color: var(--ups-white);
}

/* Меню: оранжевый фон, белый текст (важно — без !important не перебить Bootstrap) */
#sp-menu-desktop {
  background-color: var(--ups-orange) !important;
}

#sp-menu-desktop .nav-link {
  color: var(--ups-white) !important;
  font-size: 18px;
  font-weight: 400;
  padding: 8px 20px;
}

#sp-menu-desktop .nav-link:hover {
  color: var(--ups-white) !important;
  background-color: var(--ups-orange-hover);
}

/* Кнопка btn-ups — оранжевая, как на старом сайте */
.btn-ups {
  background-color: var(--ups-orange);
  color: var(--ups-white);
  border: none;
  padding: 12px 30px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s;
}

.btn-ups:hover {
  background-color: var(--ups-orange-hover);
  color: var(--ups-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 158, 1, 0.3);
}

/* Телефоны в шапке */
.HeaderPhone a {
  font-size: 18px;
  font-weight: 700;
}

.HeaderPhone a:hover {
  color: var(--ups-orange) !important;
  text-decoration: none;
}

/* === Каталог труб === */

/* Боковое меню каталога */
.catalog-sidebar {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}
.catalog-sidebar-header {
    background: var(--ups-orange, #ff9e01);
    color: #fff;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.95rem;
}
.catalog-sidebar-header i {
    margin-right: 8px;
}
.catalog-menu {
    padding: 8px 0;
}
.catalog-menu .nav-item {
    list-style: none;
}
.catalog-menu .nav-link {
    color: #555;
    padding: 6px 15px;
    font-size: 0.9rem;
    border-radius: 0;
    transition: all 0.2s;
}
.catalog-menu .nav-link:hover {
    background: #e9ecef;
    color: var(--ups-orange, #ff9e01);
}
.catalog-menu .nav-link.active {
    color: var(--ups-orange, #ff9e01);
    font-weight: 600;
    background: #fff3e0;
    border-left: 3px solid var(--ups-orange, #ff9e01);
}
.catalog-menu ul {
    padding-left: 0;
    margin-left: 10px;
}
.catalog-menu ul .nav-link {
    font-size: 0.85rem;
    padding: 4px 15px 4px 25px;
    color: #777;
}
.catalog-menu ul .nav-link.active {
    color: var(--ups-orange, #ff9e01);
}

/* Таблица каталога */
.catalog-table {
    font-size: 0.9rem;
}
.catalog-table th {
    background: #f1f1f1;
    font-weight: 600;
    white-space: nowrap;
}
.catalog-table td {
    vertical-align: middle;
}
.catalog-table tbody tr:hover {
    background-color: #fff8e1;
}

/* Форма фильтрации */
.catalog-filter {
    border: 1px solid #e0e0e0;
}
.catalog-filter .form-label {
    margin-bottom: 2px;
}
.catalog-filter .form-select-sm {
    font-size: 0.85rem;
}

/* Информация о количестве */
.catalog-info {
    padding: 5px 0;
}

/* Кнопка "В заказ" */
.add-to-cart.btn-success {
    opacity: 0.9;
}

/* Адаптивность */
@media (max-width: 768px) {
    .catalog-sidebar {
        margin-bottom: 1rem;
    }
    .catalog-table {
        font-size: 0.8rem;
    }
    .catalog-filter .col-md-2 {
        margin-top: 5px;
    }
}


/* === Пагинация каталога в фирменном цвете === */
.pagination .page-link {
    color: var(--ups-orange);
    border-color: #dee2e6;
}
.pagination .page-link:hover {
    color: var(--ups-orange-hover);
    background-color: #fff3e0;
    border-color: #dee2e6;
}
.pagination .page-item.active .page-link {
    background-color: var(--ups-orange);
    border-color: var(--ups-orange);
    color: #fff;
}
.pagination .page-item.active .page-link:hover {
    background-color: var(--ups-orange-hover);
    border-color: var(--ups-orange-hover);
}
.pagination .page-item.disabled .page-link {
    color: #adb5bd;
}


/* === Другие варианты (смежные позиции) === */
.similar-variants {
    border-top: 2px solid var(--ups-orange);
    padding-top: 1rem;
    margin-top: 2rem;
}
.similar-variants h5 {
    color: var(--ups-orange);
    font-weight: 600;
}
.similar-variants .catalog-info {
    margin-bottom: 0.5rem;
}


/* === Ссылки в фирменном цвете === */
.articles-list a,
.col-lg-12 > ul a,
.col-lg-12 > .articles-list a {
    color: var(--ups-orange);
    text-decoration: none;
    transition: color 0.2s;
}
.articles-list a:hover,
.col-lg-12 > ul a:hover,
.col-lg-12 > .articles-list a:hover {
    color: var(--ups-orange-hover);
    text-decoration: underline;
}


/* === PDF grid (Справочная информация) === */
.pdf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.pdf-card {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
    background: #fff;
}
.pdf-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.pdf-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.pdf-card-title {
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: #333;
    line-height: 1.3;
}
.pdf-card-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,158,1,0.9);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.oblasti-toggle {
    width: 100%;
    font-weight: 600;
    padding: 10px 20px;
}
.oblasti-toggle i {
    transition: transform 0.3s;
}
.oblasti-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}
.oblasti-toggle:not(.collapsed) {
    background: var(--ups-orange);
    color: #fff;
    border-color: var(--ups-orange);
}


/* === Contacts page === */
.contacts-page h3 {
    color: var(--ups-orange);
    font-weight: 700;
    margin-bottom: 1rem;
}
.contacts-page p {
    margin-bottom: 1rem;
    line-height: 1.6;
}
.contacts-page a[href^="tel:"],
.contacts-page a[href^="mailto:"] {
    color: var(--ups-orange);
    text-decoration: none;
}
.contacts-page a[href^="tel:"]:hover,
.contacts-page a[href^="mailto:"]:hover {
    text-decoration: underline;
}
.map-link {
    color: var(--ups-orange);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}
.map-link:hover {
    text-decoration: underline;
    color: var(--ups-orange-hover);
}
.contacts-form-wrapper {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e9ecef;
}
.contacts-form-wrapper h3 {
    margin-bottom: 0.5rem;
}
.contacts-form-wrapper .btn-warning {
    background: var(--ups-orange);
    border-color: var(--ups-orange);
    color: #fff;
    font-weight: 600;
}
.contacts-form-wrapper .btn-warning:hover {
    background: var(--ups-orange-hover);
    border-color: var(--ups-orange-hover);
}


/* === Footer subscribe === */
.footer-subscribe {
    margin-top: 8px;
}
.subscribe-toggle {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}
.subscribe-toggle:hover {
    color: var(--ups-orange);
    text-decoration: none;
}
.subscribe-form {
    max-width: 300px;
}
.subscribe-form .form-control-sm {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}
.subscribe-form .form-control-sm::placeholder {
    color: rgba(255,255,255,0.5);
}
.subscribe-form .btn-warning {
    background: var(--ups-orange);
    border-color: var(--ups-orange);
    color: #fff;
    font-weight: 600;
}
.subscribe-form .btn-warning:hover {
    background: var(--ups-orange-hover);
    border-color: var(--ups-orange-hover);
}
.subscribe-form .alert {
    font-size: 0.85rem;
    border-radius: 4px;
}


/* === Mailing admin === */
.mailing-admin .card { border: 1px solid #dee2e6; }
.mailing-admin h3 { color: var(--ups-orange); }
.mailing-admin h5 { font-weight: 600; color: #333; }
.mailing-admin .btn-warning { background: var(--ups-orange); border-color: var(--ups-orange); color: #fff; font-weight: 600; }
.mailing-admin .btn-warning:hover { background: var(--ups-orange-hover); border-color: var(--ups-orange-hover); }
.mailing-admin table input.form-control-sm { font-size: 0.85rem; }


/* === Mailing manual === */
.manual-toggle {
    color: var(--ups-orange);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    display: inline-block;
}
.manual-toggle:hover {
    color: var(--ups-orange-hover);
    text-decoration: none;
}
.manual-content h6 {
    color: #333;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}
.manual-content p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.manual-content code {
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85rem;
    color: #c0392b;
}
.cron-code {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    margin: 8px 0;
}
���r�>

/* === HOMEPAGE BLOCKS === */

/* Catalog categories on background image */
.home-catalog-bg {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/bg_block3.jpg') center/cover;
    background-attachment: fixed;
}

/* About section - orange background */
.home-about-bg {
    background-color: var(--ups-orange, #ff9e01);
    background-image: linear-gradient(rgba(255,158,1,0.85), rgba(255,158,1,0.85)), url('../images/fon.jpg') center/cover;
}

.home-medal {
    display: inline-block;
    padding: 1rem;
}
.home-medal img {
    width: 80px;
    height: 80px;
    filter: brightness(0) invert(1);
}
.home-medal p {
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* Certificates section */
.home-cert-img {
    max-width: 200px;
    border: 3px solid #f0f0f0;
    transition: transform 0.3s, box-shadow 0.3s;
}
.home-cert-link:hover .home-cert-img {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-color: var(--ups-orange, #ff9e01);
}

/* Contacts section */
.home-contacts-bg {
    background-color: #F4F2F3;
}
.home-contact-block {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--ups-orange, #ff9e01);
}
.home-contact-block p {
    margin-bottom: 0.5rem;
}
.home-contact-form {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--ups-orange, #ff9e01);
}
.home-contact-form input,
.home-contact-form textarea {
    margin-bottom: 0.75rem;
}
.home-contact-form button {
    width: 100%;
}


/* ============================================================
   ВЫНЕСЕННЫЕ СТИЛИ (из контента и чанков — единая точка правды)
   ============================================================ */

/* Баннер главной страницы: фон перенесён из inline-стиля */
.home-banner-bg {
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/block1bg.jpg') center/cover;
  min-height: 350px;
}

/* Значок «Лучшее предприятие отрасли» */
.home-badge-img { max-width: 200px; }

/* Карта в модалке (страница контактов и главная) */
.map-iframe { width: 100%; height: 500px; border: none; }

/* Логотипы шапки — не вылезают за экран на любом устройстве.
   Соотношение сторон лого ~10.9:1, поэтому ширина ограничивается контейнером,
   а object-fit: contain не даёт растянуть картинку */
.logo-desktop {
  height: 70px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.logo-mobile {
  height: 50px;
  max-width: 100%;
  object-fit: contain;
}

/* Фиксация шапки при прокрутке (CSS-версия, без прыжков контента) */
#sp-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}
#sp-header.sticky {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Галерея сертификатов и писем (перенесено из сниппета getGallery) */
.gallery-section { border-top: 1px solid #dee2e6; padding-top: 1.5rem; }
.gallery-title { margin-bottom: 1.2rem; font-size: 1.5rem; }
.gallery-item { transition: transform 0.2s; }
.gallery-item:hover { transform: translateY(-3px); }
.gallery-item img { transition: box-shadow 0.2s; }
.gallery-item:hover img { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
.glightbox-clean .gslide-description { display: block; }
.glightbox-clean .gslide-title { font-size: 1.1rem; font-weight: 600; }

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 767.98px) {
  /* Шапка */
  .HeaderPhone a { font-size: 15px; }
  .logo-desktop { height: 52px; }

  /* Баннер главной */
  .home-banner-bg { min-height: 230px; }
  .home-banner-text { padding: 10px; max-width: 95%; }
  .home-banner-text h2 { font-size: 1.15rem; line-height: 1.35; }
  .home-banner-text p { font-size: 0.85rem; }
  .home-banner-block { padding: 8px 12px !important; }

  /* Тексты главной: специализация и О НАС */
  .text-center.my-5 p.fs-5 { font-size: 1.02rem; }
  .py-5 p.fs-5 { font-size: 1.02rem; }

  /* Кнопки главной — в столбец по центру */
  .btn-ups.btn-lg {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Карточки категорий */
  .category-card-dark { padding: 16px 10px; }
  .category-card-dark h3 { font-size: 14px; }
  .category-card-dark p { font-size: 12px; }

  /* Медали */
  .home-medal { padding: 0.5rem; }
  .home-medal img { width: 64px; height: 64px; }

  /* Заголовки секций */
  .py-5 h2 { font-size: 1.35rem; }
  .home-contacts-bg h2 { font-size: 1.35rem; }

  /* Контактные блоки и форма */
  .home-contact-block,
  .home-contact-form { padding: 1rem; }
  .map-iframe { height: 350px; }

  /* Футер — колонки по центру */
  #sp-footer .col-md-4 { text-align: center; margin-bottom: 1.2rem; }
  #sp-footer .col-md-4:last-child { margin-bottom: 0; }

  /* Каталог */
  .catalog-filter .card-body { padding: 0.75rem; }
}

@media (max-width: 575.98px) {
  h1 { font-size: 1.45rem; }
  .home-cert-img { max-width: 150px; }
  .logo-mobile { height: 44px; }
}


/* ===== СПАМ-ЗАЩИТА: honeypot (поле для ботов, невидимо людям) ===== */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}