/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/

.nobr,
.nowrap,
a[href^="tel:"] {
    white-space: nowrap;
}
p {
    margin: 1rem 0;
}


table.table-data tr:nth-child(even) {
    background-color: #f2f2f2; /* Цвет для четных строк */
}

table.table-data tr:nth-child(odd) {
    background-color: #ffffff; /* Цвет для нечетных строк */
}
table.table-data th {
    background-color: #d2d2d2; /* Цвет заголовка таблицы */
}
table.table-data td,
table.table-data th {
    padding: 4px 8px;
}

.texticon__canister {
    display: inline-block;
    color: #fff;
    background: url("/local/templates/aspro_max/images/canister.webp") no-repeat center;
    background-size: contain;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    /*font-style: italic;*/
    padding: 24px 16px 8px 16px; /* Зависит от размера текста */
    /*width: calc(1em * 2); !* Поле для картинки вдвое шире текста *!*/
    /*height: calc(1em * 2); !* Поле для картинки вдвое выше текста *!*/
    /*font-size: 1em;*/
}





.accordion {
    position: relative;
    opacity: 0; /* Начальное состояние: прозрачное */
    transition: opacity 0.3s; /* Плавный переход */
}
.accordion__control {
    position: relative;
    cursor: pointer;
    height: 20px;
}
.accordion__control-item {
    overflow: hidden; /* Необходим для анимации */
}
.accordion__show,
.accordion__hide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    color: var(--fill_dark_light_white_hover);
    border-bottom: dashed 1px var(--fill_dark_light_white_hover);
}
.accordion__show:hover,
.accordion__hide:hover {
    color: red;
    border-bottom: unset;
}
.accordion__hidden,
.accordion__hide {
    display: none;
    width: 100%;
}
.accordion__icon {
}
.accordion__icon svg {
    transform: rotate(-90deg);
    transform-origin: center;
    will-change: transform;
    transition: transform 200ms ease;
}

.wrap_debt {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    position: absolute;
    top: 47px;
    right: 0;
    z-index: 5;
    text-align: right;
    width: auto;
    gap: 3px;
}
.wrap_debt__item {
    line-height: 1em;
    background: #fff;
    border-bottom-left-radius: 3px;
    padding: 1px 2px 2px 4px;
}
.wrap_debt__item_extra {
    color: #fe5252;
}

/* Стили шаблона компонента "Компактный список складов", поскольку не подключаются через ajax */
.stores-compact {
    margin: 30px 0 0;
}
.stores-compact__item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 2px 10px;
}
.stores-compact__name {
}
.stores-compact__quantity {
    white-space: nowrap;
}

.accordion__control_stores-compact {
    position: absolute !important;
    top: -26px;
    left: 3px;
}



/* Основной контейнер - позиционирование */
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    margin: auto; /* Центровка на странице */
}

/* Вращающееся кольцо - перенесли все стили анимации сюда */
.loading-indicator__ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 6px solid #f3f3f3; /* Цвет фона индикатора */
    border-top: 6px solid #365edc; /* Цвет вращающейся части */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Анимация вращения - остается без изменений */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Счетчик - остается в центре, не вращается */
.loading-indicator__counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 16px;
    color: #365edc;
    width: 100%;
    text-align: center;
}

/* Сообщение об ошибке - стили аналогичны счетчику */
.loading-indicator__error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #365edc;
    border-radius: 6px;
    background-color: #fff;
    padding: 0.2em 2em;
    text-wrap: nowrap;
}

.search-crosses-brands-popup {
    position: absolute;
    top: 50px;
    right: 0;

    /*opacity: 0;*/
    /*visibility: hidden;*/

    opacity: 1; /* Кнопка всегда видима */
    visibility: visible; /* Кнопка всегда видима */

    transition: opacity 0.3s, visibility 0.3s;
    z-index: 3100;
    border: 0px solid red;
}
.btn-direct-search:hover + .search-crosses-brands-popup,
.search-crosses-brands-popup:hover {
    opacity: 1;
    visibility: visible;
}
.search-button-div:hover + .search-crosses-brands-popup,
.search-crosses-brands-popup:hover {
    opacity: 1;
    visibility: visible;
}



/* Показываем блок с брендами при наведении на кнопку */
.btn-search-crosses:hover + .search-crosses-brands-content,
.search-crosses-brands-content:hover {
    opacity: 1;
    visibility: visible;
}

.search-crosses-brands-content {
    position: absolute;
    top: 50px;
    right: 0;
    max-width: 600px;
    min-width: 267px;
    max-height: 80vh;
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 3101;

    opacity: 0; /* Начальное состояние - скрыт */
    visibility: hidden; /* Начальное состояние - скрыт */
    transition: opacity 0.3s, visibility 0.3s; /* Добавляем плавный переход */

}

.search-crosses-brands-content .header-item {
    /* Фиксированный заголовок */
    position: sticky;
    top: 0;
    background: white;
}

.search-crosses-brands-content .search-crosses-brands-scroll {
    overflow-y: auto;
}

.title-search-result__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
}
.title-search-result__error,
.title-search-result__no-results {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

}

#crosses_search_results_container,
#direct_search_results_container {
    position: relative;
}