/* Стиль для навигационной панели */
/* latin-ext */
@font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

.audiowide-regular {
    font-family: "Audiowide", sans-serif;
    font-weight: 400;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

.custom-navbar {
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 980;
    padding: 5px 30px;
    border-bottom: 1px solid #e5e5e5;
}

/* Стиль для логотипа */
.custom-logo {
    display: flex;
    align-items: center;
}

/* Тени и границы */
.uk-box-shadow-medium {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Общие стили для всех карточек */
.uk-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc; /* Темно-серая рамка */
}

.uk-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Стиль для стандартной карточки */
.custom-default-card {
    background-color: #ffffff; /* Белый фон */
    color: #777; /* Темный текст */
    border-color: #ddd; /* Серая рамка */
}

/* Стиль для серой карточки */
.custom-gray-card {
    background-color: #f8f9fa; /* Светло-серый фон */
    border-color: #b3b3b3; /* Темно-серая рамка */
}

/* Стиль для синей карточки */
.custom-primary-card {
    background-color: #007bff; /* Синий фон */
    color: #ffffff; /* Белый текст */
    border-color: #0056b3; /* Темно-синяя рамка */
}

/* Стиль для темно-серой карточки */
.custom-secondary-card {
    background-color: #343a40; /* Темно-серый фон */
    color: #ffffff; /* Белый текст */
    border-color: #1d2124; /* Черная рамка */
}

/* Исправление видимости текста и заголовков при наведении */
.custom-primary-card:hover,
.custom-secondary-card:hover {
    color: #000 !important; /* Фиксированный белый текст */
}

/* Явное указание цвета заголовков h3 */
.custom-primary-card h3,
.custom-secondary-card h3 {
    color: #ffffff !important; /* Белый текст для заголовков */
}

/* Убедиться, что заголовки остаются белыми при наведении */
.custom-primary-card:hover h3,
.custom-secondary-card:hover h3 {
    color: #000 !important; /* Белый текст для заголовков при наведении */
}

/* Корректировка выравнивания иконки */
.uk-form-icon {
    top: 50%;
    transform: translateY(-75%);
}

/* Настройка отступов для поля ввода */
.custom-input {
    line-height: 1.5; /* Настройте значение, если нужно */
    padding-left: 40px; /* Отступ слева для иконки */
}

/* Уменьшение шрифта для заголовков карточек */
.uk-card-title {
    font-size: 16px; /* Уменьшенный размер шрифта */
    margin-bottom: 10px; /* Отступ снизу для лучшей читаемости */
    line-height: 1.2; /* Интервал между строками */
    font-weight: 300; /* Жирность шрифта */
}

.company-logo {
    font-size: 28px; color: #666; font-family  : 'Audiowide'
}

.uk-notification-message {
    max-width: 350px; /* Ограничение ширины */
    padding: 20px; /* Отступы внутри уведомления */
}

.uk-notification-message p {
    font-size: 14px; /* Размер текста */
    margin-bottom: 10px; /* Расстояние между параграфами */
}

.catalog-content .uk-grid > div {
    min-width: 350px; /* Минимальная ширина карточки */
    max-width: 100%; /* Ограничение максимальной ширины */
}

.uk-pagination {
    margin-top: 25px; /* Установите нужное значение */
}

/* Добавление разделителя между товарами */
.list-view-item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

/* Установка фиксированной ширины */
.uk-modal-dialog {
    width: 800px; /* Задайте нужную ширину */
    max-width: 90%; /* Ограничьте максимальную ширину для мобильных устройств */
    margin-left: auto;
    margin-right: auto;
}

.uk-notification-message {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Стили для кнопки обратной связи */
.feedback-button {
    position: fixed;
    right: 20px;
    top: calc(25% + 65px);
    transform: translateY(-50%);
    z-index: 9999;
    padding: 10px 20px;
    /* border-radius: 50px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* Стили для кнопки обратной связи */
.catalog-menu-button {
    position: fixed;
    right: 20px;
    top: calc(25% + 130px);
    transform: translateY(-50%);
    z-index: 9999;
    padding: 10px 20px;
    /* border-radius: 50px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* Стили для кнопки обратной связи */
.cart-button {
    position: fixed;
    right: 20px;
    top: 25%;
    transform: translateY(-50%);
    z-index: 9999;
    padding: 10px 20px; 
    /* border-radius: 50px; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* Стили для контейнера кнопок */
.mobile-buttons {
    position: fixed;
    bottom: 20px; /* Расстояние от нижнего края экрана */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Корректировка для точного центрирования */
    z-index: 777; /* Убедитесь, что кнопки выше других элементов */
    display: flex; /* Размещение кнопок в строку */
    gap: 15px; /* Расстояние между кнопками */
    padding: 10px; /* Внутренний отступ для кнопок */
    background-color: #fff; /* Фон для кнопок */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Тень для лучшего визуального разделения */
    border-radius: 50px; /* Закругление углов контейнера */
}

/* Стили для кнопок */
.mobile-buttons a.uk-button {
    display: flex; /* Используем flexbox для иконок */
    align-items: center; /* Выравнивание по центру */
    justify-content: center; /* Центрирование содержимого */
    width: 50px; /* Ширина кнопки */
    height: 50px; /* Высота кнопки */
    padding: 10px; /* Внутренний отступ */
    border-radius: 50%; /* Круглые кнопки */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для кнопок */
    text-decoration: none; /* Убираем подчеркивание */
    transition: transform 0.2s ease; /* Плавный эффект при наведении */
    pointer-events: auto; /* Убедитесь, что кнопки кликабельны */
}

/* Эффект при наведении */
.mobile-buttons a.uk-button:hover {
    transform: scale(1.1); /* Увеличение кнопки при наведении */
}

/* Tooltip для мобильной версии */
.mobile-buttons [uk-tooltip] {
    pointer-events: none; /* Отключаем tooltip на мобильных устройствах */
}

/* Дополнительные стили для кнопки */
.custom-large-button {
    margin: 40px auto; /* Внешние отступы (по вертикали и горизонтали) */
    padding: 30px 5%; /* Внутренние отступы (по вертикали и горизонтали) */
    font-size: 24px; /* Размер текста */
    font-weight: 300; /* Жирность шрифта */
    color: #666; /* Цвет текста */
    background-color: #fff; /* Цвет фона */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Тень для объема */
    cursor: pointer; /* Курсор в виде руки */
    transition: all 0.3s ease; /* Плавные переходы */
    border-width: 1px;
    border-style: solid;
    border-color: #eee; 
}

/* Эффект при наведении */
.custom-large-button:hover {
    color: #fff; /* Цвет текста */
    background-color: #007BFF; /* Темнее цвет фона */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Увеличиваем тень */
    transform: translateY(-2px); /* Легкое поднятие кнопки */
}

/* Эффект при нажатии */
.custom-large-button:active {
    transform: translateY(0); /* Возвращаем кнопку на место */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Уменьшаем тень */
}

.product-image {
    max-width: 400px; /* Ограничиваем максимальную ширину */
    height: auto; /* Сохраняем пропорции изображения */
    display: block; /* Убираем лишние отступы под изображением */
    margin: 0 auto; /* Центрируем изображение по горизонтали */
}

.custom2-large-button {
    margin: 40px auto;
    padding: 30px 5%;
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    background-color: #007BFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    border-width: 1px;
    border-style: solid;
    border-color: #007BFF;
}

/* Эффект при наведении - как у uk-button-secondary */
.custom2-large-button:hover {
    color: #007BFF;
    background-color: #fff;
    border-color: #007BFF;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Эффект при нажатии */
.custom2-large-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.uk-nav > li:last-child .uk-margin-small {
    margin-bottom: 0 !important;
}

@media (max-width: 640px) {
    .uk-position-top-right {
        padding: 5px; /* Уменьшенные отступы для мобильных устройств */
    }
    .company-logo {
        font-size: 20px; color: #666; font-family  : 'Audiowide'
    }

    .uk-flex-between {
        flex-direction: column;
        align-items: flex-start;
    }
    .uk-flex-between > div {
        margin-bottom: 10px;
    }
    .uk-form-width-medium {
        width: 100%;
    }

    .custom2-large-button,
    .custom-large-button {
        width: 90%;
        padding: 20px 5%; /* Уменьшил padding для мобильных */
        font-size: 20px; /* Уменьшил шрифт для мобильных */
        margin: 10px auto !important; /* Единый отступ для мобильных */
    }
}