cartCSS.css

/* Стилізація для тіла сторінки: задається шрифт Arial або запасний sans-serif */
body { 
    font-family: Arial, sans-serif; /* Встановлення основного шрифту для тексту */
    padding: 20px; /* Встановлення внутрішнього відступу для всього тіла сторінки */
}

/* Секція для елементів кошика */
#cart-items { 
    margin-bottom: 20px; /* Відступ знизу для простору між елементами кошика та іншими блоками */
}

/* Оформлення окремого елемента кошика */
.cart-item { 
    display: flex; /* Встановлення гнучкого контейнера для вирівнювання елементів */
    align-items: center; /* Вирівнювання елементів по вертикалі */
    justify-content: space-between; /* Розподіл простору між елементами */
    border-bottom: 1px solid #ddd; /* Додавання нижньої межі для розділення елементів */
    padding: 10px 0; /* Встановлення внутрішніх відступів зверху та знизу */
}

/* Зображення товару у кошику */
.cart-item img { 
    width: 50px; /* Фіксована ширина зображення */
    height: auto; /* Збереження пропорцій висоти */
    margin-right: 20px; /* Відступ справа від зображення */
}

/* Деталі товару у кошику */
.item-details { 
    flex-grow: 1; /* Дозволяє займати весь доступний простір у контейнері */
}

/* Контейнер для вибору кількості товару */
.item-quantity { 
    display: flex; /* Використання гнучкого контейнера для вирівнювання елементів */
    align-items: center; /* Вирівнювання по вертикалі */
}

/* Поле для вводу кількості товару */
.item-quantity input { 
    width: 50px; /* Встановлення фіксованої ширини поля */
    text-align: center; /* Вирівнювання тексту по центру */
    margin: 0 10px; /* Відступи ліворуч та праворуч */
}

/* Стилізація загальної суми */
#total-price { 
    font-size: 18px; /* Збільшений розмір шрифту */
    font-weight: bold; /* Жирний текст */
}

/* Кнопка оформлення замовлення */
#checkout-button { 
    padding: 10px 20px; /* Внутрішні відступи для кнопки */
    background-color: #007bff; /* Синій фон кнопки */
    color: white; /* Білий колір тексту */
    border: none; /* Відсутність меж */
    cursor: pointer; /* Зміна курсору на вказівник */
}

/* Кнопка видалення товару */
.delete-button { 
    background-color: #ff4d4d; /* Червоний фон для кнопки */
    color: white; /* Білий колір тексту */
    border: none; /* Відсутність меж */
    padding: 4px 6px; /* Внутрішні відступи кнопки */
    cursor: pointer; /* Зміна курсору на вказівник */
    display: flex; /* Використання гнучкого контейнера */
    align-items: center; /* Вирівнювання елементів по вертикалі */
    gap: 3px; /* Проміжок між елементами всередині кнопки */
    font-size: 12px; /* Розмір шрифту кнопки */
    border-radius: 3px; /* Згладження кутів кнопки */
    transition: background-color 0.3s; /* Плавна зміна кольору фону при наведенні */
    margin-left: 10px; /* Відступ ліворуч від кнопки */
}

/* Зміна кольору кнопки видалення при наведенні */
.delete-button:hover { 
    background-color: #e60000; /* Темніший червоний колір фону */
}

/* Іконка всередині кнопки видалення */
.delete-button i { 
    font-size: 12px; /* Розмір шрифту іконки */
}