/* Стил за свързани продукти */
.related-products {
    display: flex;
    flex-direction: column;  /* Продуктите ще се подреждат вертикално (един продукт на ред) */
    gap: 15px;
}

.products-item {
    width: 100%;  /* Всеки продукт ще заема 100% от ширината на родителския контейнер */
    max-width: 400px;  /* Може да ограничим максималната ширина на продуктите */
    margin: 0 auto;  /* Центриране на продуктите */
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.products-item img {
    width: 100%;  /* Снимката ще заема 100% от ширината на продукта */
    max-width: 150px;  /* Максимален размер на изображението */
    height: auto;
    border-radius: 5px;
    object-fit: contain;  /* За да не се изкривява изображението */
    border: 1px solid #ddd;
}

.products-item p {
    margin: 10px 0;
    font-size: 14px;  /* По-малък шрифт за текста */
}




/*  kraj naСтил за свързани продукти */
.products-details {
    max-width: 900px;
    margin: 20px auto;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.products-content {
    display: flex; /* Подреждаме елементите хоризонтално */
    flex-wrap: nowrap; /* Не разрешаваме wrap (завиване на редове) */
    gap: 20px; /* Разстояние между елементите */
}

.products-image {
    flex: 1; /* Основната снимка заема останалото пространство */
    text-align: center;
     border: 1px solid #ddd;
}

.products-image img {
    max-width: 100%; /* Снимката заема цялата ширина на родителския елемент */
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
     border: 1px solid #ddd;
}

.thumbnail-container {
    display: flex; /* Миниатюрите ще са подредени в редица */
    flex-direction: column; /* Подреждаме миниатюрите вертикално */
    gap: 10px; /* Разстояние между миниатюрите */
}

.thumbnail {
    width: 120px; /* Ширината на миниатюрите */
    height: 120px; /* Височината на миниатюрите */
    object-fit: cover; /* Съотношението на изображението да се запази */
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
     border: 1px solid #ddd;
}

.thumbnail:hover {
    transform: scale(1.1); /* Леко уголемяване при ховър */
}

.products-info {
    flex: 1 1 300px; /* Променяме размера на основната информация за продукта */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding-left: 15px;
}


.barzak0 {
    
  background: #E9F4F5;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding-left: 15px;

}

/* Стилове за контейнера */
.barzak {
    background-color: #f9f9f9;
    padding: 8px; /* Намален падинг */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 100%;
    max-width: 250px; /* Още по-малка ширина на контейнера */
    margin-left: auto;
    margin-right: auto;
}

/* Заглавие */
.barzak h4 {
    font-size: 14px; /* Намален шрифт за заглавието */
    color: #333;
    font-weight: bold;
    margin-bottom: 8px; /* По-малко разстояние */
    text-align: center;
}

/* Името на продукта */
.barzak p {
    color: blue;
    font-size: 13px; /* Намален шрифт за името на продукта */
    font-weight: bold;
    margin-bottom: 12px; /* Намалено разстояние */
    text-align: center;
}

/* Формата за поръчка */
.barzak form {
    display: flex;
    flex-direction: column;
    gap: 8px; /* По-малко разстояние между елементите */
}

/* Стилове за лейбълите */
.barzak label {
    font-size: 11px; /* Намален шрифт за лейбълите */
    color: #333;
}

/* Стилове за текстовите полета */
.barzak input[type="text"] {
    padding: 6px; /* Намален падинг */
    font-size: 11px; /* Намален шрифт */
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

/* Стилове за бутона */
.barzak button {
    background-color: #4CAF50;
    color: white;
    padding: 8px; /* Намален падинг */
    font-size: 13px; /* Намален шрифт */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
}

/* Ховър ефект за бутона */
.barzak button:hover {
    background-color: #45a049;
}


.barzak_0 {
    background-color: #f9f9f9;
    padding: 8px; /* Намален падинг */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 80%;
    max-width: 250px; /* Още по-малка ширина на контейнера */
    margin-left: auto;
    margin-right: auto;
}


.products-info2 h3 {
    font-size: 16px;
    margin-bottom: 15px;
}

.products-info2 p {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1;
}

.producst-description {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    display: block;
    margin-bottom: 15px;
}

.products2-info strong {
    color: #707070;
}

.btn.btn-add-cart {
    background-color: #28a745 !important; /* Зелен фон */
    color: white !important; /* Бял текст */
    padding: 12px 24px !important; /* Увеличени вътрешни отстояния */
    font-size: 16px !important; /* Размер на шрифта */
    font-weight: bold !important; /* Дебел шрифт */
    border-radius: 5px !important; /* Заоблени ъгли */
    border: none !important; /* Без рамка */
    cursor: pointer !important; /* Променя курсора на ръка при ховър */
    transition: background-color 0.3s ease, transform 0.3s ease !important; /* Плавен преход за ховър */
}


.price {
    font-size: 18px;
    color: #007bff;
    font-weight: bold;
    margin-bottom: 15px;
    display: inline-block;
}

.price strong {
    font-weight: normal;
    color: #333;
}

/* Адаптивност за мобилни */
@media (max-width: 768px) {
    .products-content {
        flex-direction: column;
        align-items: center;
    }

    .products-info {
        text-align: center;
    }

    .btn-add-carts {
        width: 100%;
        text-align: center;
    }
}
/* ======================= */



/* Адаптивност за мобилни устройства */
@media (max-width: 768px) {
    .thumbnail-container {
        flex-direction: column; /* Подреждаме миниатюрите вертикално за малки екрани */
        align-items: center; /* Центрираме миниатюрите */
    }

    .thumbnail {
        width: 60px; /* По-малки миниатюри на мобилни устройства */
        height: 60px;
    }

    .products-info {
        text-align: center; /* Центрираме текста в продуктовата информация на мобилни устройства */
    }
}

/* Стил за модален прозорец */
.modal {
    display: none; /* Скриваме модала по подразбиране */
    position: fixed;
    z-index: 1; /* Върху всички елементи */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачен фон */
    padding-top: 60px;
}

/* Стил за изображението в модала */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Стил за затварящия бутон */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Стил за надписа в модала */
#modalCaption {
    text-align: center;
    color: #fff;
    font-size: 18px;
    padding: 10px;
}


/* Лява колона - категории */
.sidebar5 {
    width: 30%;
    background-color: #f5f5f5;
    padding: 15px;
    box-sizing: border-box;
}

/* Дясна колона - съдържание */
.main-content5 {
    width: 70%;
    padding: 15px;
    box-sizing: border-box;
}

/* Responsive за екрани под 768px */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .sidebar, .main-content {
        width: 100%;
        padding: 10px;
    }
}

/* ==============================
   Контейнер
============================== */
.container888888 {
    
    max-width: 998px;
    margin: 0 auto;
    padding: 20px;
    
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    
}


/* Контейнер с две колони */
.container_2koloni {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

/* Лява колона - категории */
.sidebar {
    width: 20%;
    background-color: #f5f5f5;
    padding: 15px;
    box-sizing: border-box;
}

/* Дясна колона - съдържание */
.main-content {
    width: 80%;
    padding: 15px;
    box-sizing: border-box;
}

/* Лява колона - категории details */
.sidebarkuru {
    width: 30%;
    background-color: #f5f5f5;
    padding: 15px;
    box-sizing: border-box;
}

/* Дясна колона - dtails */
.main-contentkuru {
    width: 80%;
    padding: 15px;
    box-sizing: border-box;
}


/* Responsive за екрани под 768px */
@media (max-width: 768px) {
    .container_2koloni {
        flex-direction: column;
    }
    .sidebar, .main-content {
        width: 100%;
        padding: 10px;
    }
     .sidebarkuru {
        display: none;
    }
}