/*
  Объединяем все основные правила для html и body,
  чтобы весь макет занимал 100% высоты окна.
*/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/*
  Используем flexbox на body, чтобы создать колонку.
  Это позволяет .content-wrapper занимать всё доступное место.
*/
body {
    overflow: hidden;
}

/*
  Новый контейнер для прокрутки.
  Он будет занимать всё доступное пространство (flex: 1)
  именно в нём будет полоса прокрутки.
*/
.content-wrapper {
    height: calc(100vh - 80px); /* 100vh - это 100% высоты окна, 80px - высота меню */
    overflow-y: auto; /* Полоса прокрутки будет только в этом блоке */
    -webkit-overflow-scrolling: touch; /* Для плавного скролла на iOS */
}


/* Стили для всего нижнего меню */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #343a40; /* Темный фон */
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3); /* Более выраженная тень */
    z-index: 1000;
    border-top: 1px solid #495057; /* Небольшая граница сверху */
}

    /* Стили для каждого элемента меню (иконка + текст) */
    .bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #adb5bd; /* Светло-серый цвет текста и иконок */
        font-size: 0.85em;
        flex-grow: 1;
        text-align: center;
        padding: 8px 0;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

        /* Стили для иконок */
        .bottom-nav .nav-item i {
            font-size: 1.5em; /* Больше иконки */
            margin-bottom: 5px; /* Отступ между иконкой и текстом */
        }

        /* Стили для активного элемента меню */
        .bottom-nav .nav-item.active {
            color: #007bff;
        }

        /* Стили при наведении */
        /*.bottom-nav .nav-item:hover {
            color: #fff;
        }*/

    /* Стили для значка корзины */
    .bottom-nav .icon-container {
        position: relative;
        display: inline-block;
    }

/* Стили для самой карточки, чтобы контент не выходил за рамки */
.card {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden; /* Важно, чтобы тень и поднятие работали корректно */
}

/* Стили для карточки деталей продукта */
.product-detail-card {
    border: none !important; /* Убирает границу */
    box-shadow: none !important; /* Убирает тень, если она была по умолчанию у card */
    /* Можешь добавить padding, если нужно, чтобы компенсировать отсутствие border */
}

#basketCount {
    position: absolute;
    top: -5px; /* Поднимаем значок */
    right: -10px; /* Смещаем значок вправо, относительно иконки */
    background-color: red; /* Или любой другой цвет */
    color: white;
    border-radius: 50%; /* Сделает значок круглым */
    padding: 2px 6px; /* Настройка размера и отступов */
    font-size: 12px;
    font-weight: bold;
    line-height: 1; /* Центрирует текст по вертикали */
}

    /* Скрываем значок, когда он пуст */
    #basketCount:empty {
        display: none;
    }

/* Простые стили для демонстрации. Лучше вынести в отдельный CSS файл. */
.basket-item-card {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.basket-item-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 1.5rem;
    border-radius: 8px;
}

.basket-item-details {
    flex-grow: 1;
}

.quantity-selector {
    display: flex;
    align-items: center;
}

    .quantity-selector input {
        width: 50px;
        text-align: center;
        border: 1px solid #ced4da;
        border-radius: 4px;
        margin: 0 0.5rem;
    }

    .quantity-selector .btn {
        padding: 0.25rem 0.5rem;
    }

.remove-btn {
    margin-left: auto;
    padding-left: 1.5rem;
}

.summary-card {
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #f8f9fa;
    position: sticky;
    top: 20px; /* Чтобы блок "прилипал" при скролле */
}