/****************************************************
 * 0. Цветовая палитра Rider
 ****************************************************/
:root {
    --rider-yellow: #fcda2f;
    --rider-brown: #4c1a1a;
    --rider-yellow-dark: #d4b525;
    --rider-brown-light: #6a2a2a;
}


/****************************************************
 * 1. Контейнеры Bootstrap — на всю ширину
 ****************************************************/
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100% !important;
    width: 100% !important;
}


/****************************************************
 * 2. Основной layout Helix (ТОЛЬКО верхний уровень!)
 ****************************************************/
#sp-main-body > .container > .container-inner > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
}
a {
color: #c10c0c;
}

a:hover, a:focus, a:active {
color: #b52222;
}
/****************************************************
 * 3. Левая панель — скрывать, если нет модулей
 ****************************************************/
#sp-left:not(:has(.sp-module)) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sp-left:not(:has(.sp-module)) + #sp-component,
#sp-left:not(:has(.sp-module)) ~ #sp-component {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}


/****************************************************
 * 4. Модули в боковых панелях
 ****************************************************/
#sp-left .sp-module,
#sp-right .sp-module {
    margin-top: 10px;
}

#sp-left .sp-module ul > li,
#sp-right .sp-module ul > li {
    display: block;
    border-bottom: 1px solid #4c1a1a;
}

#sp-left .sp-module .sp-module-title,
#sp-right .sp-module .sp-module-title {
    margin: 0 0 10px;
    padding-bottom: 5px;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 2px solid #4c1a1a;
}

#sp-left .sp-module, #sp-right .sp-module {
margin-top: 10px;
border: 1px solid #fcda2f;
padding: 10px;
border-radius: 3px;
}

/****************************************************
 * Rider — цвет заголовков модулей
 ****************************************************/
.sp-module-title {
    color: #4c1a1a !important;
}

/****************************************************
 * Rider — цвет заголовков страниц (H1)
 ****************************************************/
#sp-component h1 {
    color: #4c1a1a !important;
}

/****************************************************
 * Rider — hover-анимация пунктов левого меню
 ****************************************************/

 #sp-left .sp-module ul > li a {
     display: block;
     padding: 1px 6px !important; /* компактно, но не узко */
     color: var(--rider-brown) !important;
     background-color: transparent;
     border-radius: 6px;
     transition: background-color 0.2s ease, color 0.2s ease;
 }

 /* Hover — фон жёлтый, текст коричневый */
 #sp-left .sp-module ul > li a:hover {
     background-color: var(--rider-yellow) !important;
     color: var(--rider-brown) !important;
 }


/****************************************************
 * 5. Таблица Fabrik
 ****************************************************/
 /****************************************************
  * FABRIK — идеальная адаптивная таблица Rider
  * Полное устранение правого поля, отступов и ломания
  ****************************************************/

 /* Убираем отрицательные маргины Bootstrap */
 .fabrikForm .row,
 .fabrikForm .row-fluid {
     margin: 0 !important;
     padding: 0 !important;
 }

 /* Убираем padding у контейнеров Helix */
 .fabrikForm .container-fluid,
 .fabrikForm .container-inner {
     padding: 0 !important;
     margin: 0 !important;
 }

 /* Главный контейнер таблицы */
 .fabrikDataContainer {
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
 }

 /* Убираем отступы у .table-responsive */
 .fabrikDataContainer .table-responsive {
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     overflow-x: auto;
 }

 /* Таблица растягивается ровно на ширину */
 .fabrikDataContainer table {
     width: 100% !important;
     table-layout: auto !important;
     border-collapse: collapse;
 }

 /****************************************************
  * Шрифт таблицы Fabrik
  ****************************************************/
 .fabrikDataContainer table th,
 .fabrikDataContainer table td {
     font-size: 0.85rem !important;
 }

 /****************************************************
  * Управление переносами
  ****************************************************/

 /* Общие ячейки — нормальный перенос по словам */
 .fabrikDataContainer table th,
 .fabrikDataContainer table td {
     white-space: normal !important;
     word-break: normal !important;
     overflow-wrap: normal !important;
     word-wrap: normal !important;
     hyphens: manual !important;
 }

 /* Первый столбец (ID) — всегда в одну строку */
 .fabrikDataContainer table td:first-child,
 .fabrikDataContainer table th:first-child {
     white-space: nowrap !important;
     width: 1% !important;
 }

 /* Групповые заголовки Fabrik */
 .fabrik_groupheading td {
     white-space: nowrap !important;
 }

/****************************************************
 * 6. Фильтры Fabrik — ВЕРТИКАЛЬНО
 ****************************************************/

/* Отключаем flex, который ломал всё */
.fabrikFilterContainer .row,
.fabrikFilterContainer .row-fluid,
.fabrikFilterContainer .fabrikFilter,
.fabrikFilterContainer .fabrikFilter .row {
    display: block !important;
    width: 100% !important;
}

/* Каждый фильтр — отдельной строкой */
.fabrikFilterContainer .fabrikFilter {
    margin-bottom: 10px !important;
}

/* Внутренние элементы */
.fabrikFilterContainer label,
.fabrikFilterContainer select,
.fabrikFilterContainer input {
    display: block !important;
    width: 100% !important;
}

/* Popup фильтр */
.fabrikFilterContainer .row-fluid .span12 {
    display: block !important;
    width: 100% !important;
}

/* Внутренние элементы КОМПАКТНОСТЬ*/
/* Контейнер фильтров — убираем лишний воздух */
.fabrikFilterContainer {
    padding: 10px 15px !important;
    margin-bottom: 15px !important;
}

/* Заголовки "Otsi:" и "Puhasta filtrid" */
.fabrikFilterContainer .fabrik___heading {
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

/* Ряды фильтров — уменьшаем вертикальные отступы */
.fabrikFilterContainer .row[data-filter-row] {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* Лейблы */
.fabrikFilterContainer label {
    font-size: 0.85rem;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Поля ввода — компактные, Rider‑стиль */
.fabrikFilterContainer input.fabrik_filter {
    padding: 4px 6px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
    border: 1px solid var(--rider-brown) !important;
    border-radius: 4px !important;
    color: var(--rider-brown) !important;
}

/* Кнопка "Puhasta filtrid" */
.fabrikFilterContainer a.clearFilters {
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--rider-yellow);
    color: var(--rider-brown) !important;
    border: 1px solid var(--rider-brown);
    transition: 0.2s ease;
}

.fabrikFilterContainer a.clearFilters:hover {
    background: var(--rider-brown);
    color: var(--rider-yellow) !important;
}

/* Иконка очистки */
.fabrikFilterContainer a.clearFilters .icon-undo {
    margin-right: 4px;
    font-size: 0.9rem;
}



/****************************************************
 * 7. Верхняя панель Rider (топ-бар)
 ****************************************************/
#sp-top-bar {
    background-color: var(--rider-brown);
    color: #fff;
    padding: 6px 0;
    border-bottom: 2px solid var(--rider-yellow);
}

#sp-top-bar a {
    color: var(--rider-yellow) !important;
}

#sp-top-bar a:hover {
    color: #fff !important;
}

#sp-top-bar .social-icons li a span {
    color: var(--rider-yellow);
}

#sp-top-bar .social-icons li a:hover span {
    color: #fff;
}


/****************************************************
 * 8. Языковой переключатель
 ****************************************************/
.mod-languages__list img {
    border: 2px solid var(--rider-yellow);
    border-radius: 3px;
}

.mod-languages__list li.lang-active img {
    border-color: #fff;
}


/****************************************************
 * 9. Logout-кнопка
 ****************************************************/
.mod-login-logout__button .btn {
    background-color: var(--rider-yellow) !important;
    color: var(--rider-brown) !important;
}


/****************************************************
 * 10. Основная шапка (header)
 ****************************************************/
#sp-header {
    background-color: var(--rider-yellow) !important;
    border-bottom: 3px solid var(--rider-brown);
    padding: 0;
}

/* Вся строка шапки — flex */
#sp-header .container-inner > .row {
    display: flex !important;
    align-items: center !important;
}

/* КОЛОНКИ — ключевой фикс для мобильной версии */
#sp-header .container-inner > .row > div {
    display: flex !important;
    align-items: center !important;
}


/****************************************************
 * Логотип — центрирование
 ****************************************************/
#sp-header .logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#sp-header .logo img {
    max-height: 70px;
    height: auto;
    width: auto;
}


/****************************************************
 * 11. Меню
 ****************************************************/
#sp-header .sp-megamenu-parent > li > a {
    color: var(--rider-brown) !important;
    font-weight: 600;
    padding: 10px 16px !important;
}

#sp-header .sp-megamenu-parent > li > a:hover {
    background-color: var(--rider-brown);
    color: #fff !important;
    border-radius: 4px;
}

#sp-header .sp-megamenu-parent > li.active > a {
    background-color: var(--rider-brown);
    color: #fff !important;
    border-radius: 4px;
}


/****************************************************
 * 12. Бургер-иконка — центр + 3 полоски
 ****************************************************/
#sp-header .burger-icon,
#sp-header .sp-menu-toggler {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sp-header .burger-icon span,
#sp-header .sp-menu-toggler span {
    background-color: var(--rider-brown) !important;
    height: 3px !important;
    width: 26px !important;
    margin: 3px 0 !important;
    display: block;
}


/****************************************************
 * Отступы основного тела
 ****************************************************/
#sp-main-body {
    padding: 50px 0;
}




/****************************************************
 * 13. Offcanvas меню — жёлтое + мягкий hover
 ****************************************************/
.offcanvas-menu {
    background-color: var(--rider-yellow) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu li a {
    color: var(--rider-brown) !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
}

.offcanvas-menu .offcanvas-inner ul.menu li a:hover {
    background-color: var(--rider-brown) !important;
    color: #fff !important;
}

.offcanvas-menu .offcanvas-inner ul.menu li a:hover i,
.offcanvas-menu .offcanvas-inner ul.menu li a:hover span {
    color: var(--rider-yellow) !important;
}


/****************************************************
 * 14. Кнопки Rider
 ****************************************************/
.btn {
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

/* Восстановление цветов Fabrik */
.btn-warning { background-color: #ffc107 !important; color: #000 !important; }
.btn-success { background-color: #198754 !important; color: #fff !important; }
.btn-danger  { background-color: #dc3545 !important; color: #fff !important; }
.btn-primary { background-color: #0d6efd !important; color: #fff !important; }

/* Уменьшение кнопок в таблице */
.fabrikDataContainer .btn {
    padding: 2px 6px !important;
    font-size: 0.7rem !important;
}


/****************************************************
 * 15. Системные сообщения
 ****************************************************/
 #system-message-container joomla-alert {
     font-size: 16px;
     font-weight: bold;
 }

 .alert-info {
     --bs-alert-color: #055160;
     --bs-alert-bg: #ffc109;
     --bs-alert-border-color: #7dc463;
 }



  /****************************************************
   * Rider — кнопка .btn-blockjt в фирменном стиле
   ****************************************************/
  .btn-blockjt {
      display: block;
      width: 100%;
      padding: 8px 14px !important; /* гармонично с Rider-кнопками */
      font-size: 1rem !important;
      line-height: 1.3;
      border-radius: 6px !important;

      background-color: var(--rider-yellow) !important;
      color: var(--rider-brown) !important;
      border: 2px solid var(--rider-brown) !important;

      font-weight: 600;
      text-align: center;
      transition: all 0.2s ease-in-out;
  }

  /* Hover — коричневый фон, жёлтый текст (как в меню/offcanvas) */
  .btn-blockjt:hover {
      background-color: var(--rider-brown) !important;
      color: var(--rider-yellow) !important;
      border-color: var(--rider-brown) !important;
  }


  #jtl a {
      color: #4c1a1a !important;
      text-decoration: none !important;
  }

  #jtl .modal-dialog .modal-content {
  position: relative;
  background-clip: padding-box;
  border: 0;
  border-radius: 20px !important;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  outline: 0;
  padding: 35px 40px 30px 40px;
  height: max-content;
  }

  /****************************************************
   * Rider — блок #jtl .registerlink в фирменном стиле
   ****************************************************/
   /****************************************************
    * Rider — корректный hover для кнопки в модальном логине
    ****************************************************/

   /* Базовый стиль кнопки */
   #jtl .registerlink {
       border-top: 2px solid var(--rider-brown);
       background: var(--rider-yellow) !important;
       color: var(--rider-brown) !important;
       font-weight: 600;
       border-radius: 20px;
       text-align: center;
       min-height: 50px;
       display: grid;
       place-items: center;
       margin-right: -20px;
       margin-left: -20px;
       margin-bottom: 0;
       transition: background-color 0.2s ease, color 0.2s ease;
   }

   /* Ссылка внутри — базовый цвет */
   #jtl .registerlink a {
       color: var(--rider-brown) !important;
       text-decoration: none !important;
       transition: color 0.2s ease;
   }

   /* Hover — фон коричневый, текст жёлтый */
   #jtl .registerlink:hover {
       background: var(--rider-brown) !important;
   }

   #jtl .registerlink:hover a {
       color: var(--rider-yellow) !important;
   }

   #jtl button.login-toggle172,
   #jtl button.register-toggle172 {
       padding: 8px 18px;
       margin: 0 10px;
       border: none;
       border-radius: 6px;
       background: #007bff;
       color: #fff;
       font-weight: 500;
       cursor: pointer;
       transition: background 0.25s ease, transform 0.2s ease;
   }

   #jtl button.login-toggle172:hover,
   #jtl button.register-toggle172:hover {
       background: #0056d2;
       transform: translateY(-2px);
   }

   #jtl button.login-toggle172:active,
   #jtl button.register-toggle172:active {
       transform: translateY(0);
   }


  /****************************************************
   * Rider — левая панель + Fabrik справа
   ****************************************************/

  /* Левая панель: адаптивная ширина */
  #sp-left {
      flex: 0 0 clamp(180px, 22vw, 300px) !important;
      max-width: clamp(180px, 22vw, 300px) !important;
  }

  /* Контент (включая Fabrik) занимает всё оставшееся */
  #sp-component {
      flex: 1 1 auto !important;
      max-width: 100% !important;
      overflow-x: hidden;
  }

  /****************************************************
   * Rider — компактная шапка без лишних отступов
   ****************************************************/
  #sp-header {
      height: auto !important;
      padding: 0 !important; /* убираем любые внешние отступы */
  }

  /****************************************************
   * Rider — компактное меню в шапке
   ****************************************************/
  #sp-header .sp-megamenu-parent > li > a {
      padding-top: 4px !important;
      padding-bottom: 4px !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
  }

  .calendar-message {
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  background-color: rgba(249, 222, 91, 0.31) !important;
  padding: 4px;
  color: #4c1a1a;
  }