/* Сброс стандартных стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Глобальные стили */
body {
    font-family: 'Times New Roman', sans-serif; /* Выбор шрифта */
    line-height: 1.6; /* Интерлиньяж для лучшей читаемости */
    background-color: #f5f5f5; /* Фоновый цвет страницы */
    color: #000000; /* Цвет текста */
    font-size: 24px; /* Размер шрифта, чуть больше по умолчанию */
}

/* Стили для заголовков */
h1, h2, h3 {
    margin-bottom: 10px;
    font-weight: bold;
}

/* Стили для контейнера */
.container {
    display: flex;
    width: 80%;
    max-width: 900px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрирование */
    padding: 20px; /* Поля внутри контейнера */
    background-color: #ffffff; /* Фоновый цвет контейнера */
    /*border: 1px solid #000000; /* Рамка контейнера */
    border-radius: 8px; /* Скругленные углы */
    
}

/* Стили для блоков */
.block-1 {
    flex: 1 1 calc(100% - 20px); /* Настройка ширины блоков на 1 в строку с отступом */
    margin: 10px; /* Отступы между блоками */
    background-color: #ffffff; /* Цвет фона блоков */
    /*border: 1px solid #ccc; /* Рамка блоков */
    /*border-radius: 5px; /* Скругленные углы у блоков */
    padding: 15px; /* Отступы внутри блоков */
    /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
    text-align: justify;
}
.block-2 {
    flex: 1 1 calc(50% - 20px); /* Настройка ширины блоков на 1 в строку с отступом */
    margin: 10px; /* Отступы между блоками */
    background-color: #ffffff; /* Цвет фона блоков */
    border: 1px solid #ccc; /* Рамка блоков */
    border-radius: 5px; /* Скругленные углы у блоков */
    padding: 15px; /* Отступы внутри блоков */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Тень блока */
    text-align: justify;
}


/* Стили для кнопок */
button {
    background-color: #5f84a1; /* Цвет фона кнопки */
    color: #fff; /* Цвет текста на кнопке */
    border: none; /* Убираем границы */
    border-radius: 10px; /* Округление углов */
    padding: 10px 20px; /* Внутренние отступы */
    cursor: pointer; /* Курсор при наведении */
    transition: background-color 0.3s; /* Плавное изменение цвета фона */
}

button:hover {
    background-color: #2b6da0; /* Цвет фона при наведении */
}

/* Стили для форм */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    width: 100%; /* Полная ширина */
    padding: 10px; /* Внутренние отступы */
    margin: 10px 0; /* Отступы между полями */
    border: 1px solid #ccc; /* Цвет границы */
    border-radius: 5px; /* Округление углов */
}

/* Стили для ссылок */
a {
    color: #5f84a1; /* Цвет ссылки */
    text-decoration: none; /* Убираем подчеркивание */
}

a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
    color: #2b6da0; /* Цвет текста при наведении */
}

/* Стили для флотающих элементов */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
    
.widget {
    text-align: left; /*Выравнивает текст по левому краю*/
    padding-left: 15px; /*Добавляет отступ слева (можете изменить значение по своему усмотрению)*/
    margin-bottom: 10px; /*Отступ между элементами подвала*/
    font-size: 150%; /*Установка размера текста в % от размера родительского шрифта*/
}
    
.btn-primary {
    background-color: rgb(122, 170, 85); /*Цвет кнопки*/
    color: rgb(153, 45, 45); /*Цвет текста кнопки*/
    padding: 10px 20px;
    border-radius: 5px;
    border: none; /*Убирает границу кнопки*/
    cursor: pointer; /*Курсор при наведении*/
}
    
.btn-primary:hover {
    background-color: rgb(143, 206, 204); /*Цвет кнопки при наведении*/
}

.button_up {
    background-color: #5f84a1; /*Цвет кнопки*/
    color: #ffffff; /*Цвет текста кнопки*/
    padding: 10px 20px;
    border-radius: 5px;
    border: none; /*Убирает границу кнопки*/
    cursor: pointer; /*Курсор при наведении*/
}
    
.button_up:hover {
    background-color: #f5f5f5; /*Цвет кнопки при наведении*/
    color: #000000; /*Цвет текста кнопки при наведении*/
}

.footer {
    background-color: #310f00; /*Цвет фона подвала*/
    color: #fffef5; /*Цвет шрифта подвала*/
    padding: 20px 0; /*Отступы сверху и снизу*/
}

.footer-container {
    width: 100%; /*Ширина подвала на всю ширину страницы*/
    padding: 20px; /*Поля внутри подвала*/
    background-color: #310f00; /*Цвет фона подвала*/
    color: #fffef5; /*Цвет текста подвала*/
    border-radius: 0; /*Убираем округление углов, если не нужно*/
}

/*СПЕЦИАЛЬНЫЕ НАСТРОЙКИ ДЛЯ СТРАНИЦ ТИПА ОРУ_ЛИСТ*/
.product-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* расстояние между элементами */
    margin-bottom: 30px;
}
.grid-item {
    text-align: center; /* выравнивание текста по центру */
    border: 1px solid #ccc; /* рамка вокруг каждого элемента */
    padding: 10px; /* внутренние отступы */
    border-radius: 5px; /* скругленные углы */
    background-color: #f9f9f9; /* задний фон каждого элемента */
}
.price {
    font-weight: bold; /* Жирный шрифт для выделения цены */
    color: #333; /* Цвет текста (можно настроить под ваш дизайн) */
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.pagination a {
    margin: 0 15px; /* отступы между страницами */
    text-decoration: none; /* убираем подчеркивание текста */
    color: #007bff; /* цвет ссылок */
}
.pagination span {
    margin: 0 15px;
    font-weight: bold; /* жирный шрифт для номера страницы */
}
.current-page {
    font-weight: bold;
    color: #007bff; /* Цвет подчеркивания или выделения */
    margin: 0 5px;
}

.page-link {
    margin: 0 5px;
    text-decoration: none;
    color: black;
}

/*Добавляю стили для модального окна */


/* Стили для модального окна */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Оверлей на весь экран */
    z-index: 1000; /* Слой поверх остальных элементов */
    left: 0;
    top: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    overflow: auto; /* Прокрутка, если нужно */
    background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный фон */
}

.modal-content {
    background-color: #fefefe
    border: 1px solid #888; /* Рамка вокруг модального окна */
    width: 80%; /* Ширина модального окна */
    max-width: 600px; /* Максимальная ширина */
    margin: 15% auto; /* Центрирование окна по вертикали и горизонтали */
    padding: 20px; /* Внутренние отступы */
    border-radius: 8px; /* Закругленные углы */
}

.close-button {
    color: #aaa; /* Цвет 'X' кнопки закрытия */
    float: right; /* Выравнивание справа */
    font-size: 28px; /* Размер шрифта для кнопки закрытия */
    font-weight: bold; /* Жирный шрифт */
}

.close-button:hover,
.close-button:focus {
    color: black; /* Цвет при наведении */
    text-decoration: none; /* Убираем подчеркивание */
    cursor: pointer; /* Указываем курсор как указатель */
}