/* Стили для всплывающего блока */
.under-block {
    position: fixed;
    width: 86%;
    background: radial-gradient(circle, 
    rgba(255, 255, 255, 1) 0%, 
    rgb(250, 107, 107, 1) 70%, 
    rgba(255, 179, 68, 1) 100%);
    color: black;
    border-radius: 15px;
    padding: 50px 0px 0px 0px;
    box-shadow: 3px 3px 20px 1px #dc7000;
    opacity: 0;
    transition: transform 0.3s ease;
    cursor: move;
    display: none;
    z-index: 1;
}

.z-index-1001 {
    z-index: 1001;
   }
   
   .z-index-1002 {
    z-index: 1002;
   }
   
   .z-index-1003 {
    z-index: 1003;
   }

.under-block.active {
    opacity: 1;
    display: block;
}

.newMachineBtn, .orderModalForm button {
    position: relative;
    float: right;
    padding: 10px 20px;
    background-color: #fb8b14;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
    outline: none;
}

.orderBtnDiv {
    display: flex;
    justify-content: left;
    gap: .5rem;
}

.under-block .orderButton, .newMachineAddBtn,
.form-group input[type="file"]::file-selector-button, 
.pop-up-body #send-pop-up, #msg-info-container button {
    padding: 10px 20px;
    background-color: #fb8b14;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    outline: none;
}

#msg-info-container button {
    margin-top: .5rem;
}

.orderModalForm {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.orderModalForm h3 {
    margin-bottom: .5rem;
}

.orderModalForm button {
    margin-bottom: initial;
}

.under-block .newMachineBtn:hover, 
.orderButton:hover, .newMachineAddBtn:hover, .btn-services-more:hover, 
.form-group input[type="file"]::file-selector-button:hover, 
.pop-up-body #send-pop-up:hover, .orderModalForm button:hover,
#msg-info-container button:hover {
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
    background-color: #ff9a2f;
}

.under-block .newMachineBtn:active, 
.orderButton:active, .newMachineAddBtn:active, .btn-services-more:active,
.form-group input[type="file"]::file-selector-button:active, 
.pop-up-body #send-pop-up:active, .orderModalForm button:active,
#msg-info-container button:active {
    transform: scale(1.01);
    background-color: #fb8b14;
}

.table-form {
    position: relative;
    background: #fff;
    cursor: initial;
    padding: 0px 10px 10px 10px;
    border-radius: 0px 0px 15px 15px;
    max-height: 38rem;
    overflow-y: auto; /* Добавляем вертикальную прокрутку */
    overflow-x: hidden; /* Скрываем горизонтальный скролл */
    box-sizing: border-box; /* Учитываем padding в размерах */
}

.table-form .h1-header, .p-description {
    position: relative;
    top: 20px;
    left: 15px;
}

/* Общие стили для контейнера */

.full-width {
    width: 100%; /* Таблица занимает всю ширину родителя */
    table-layout: fixed; /* Равномерное распределение ширины столбцов */
}

.full-width td, .full-width th {
    word-wrap: break-word; /* Переносит длинные слова на новую строку */
    padding: 8px; /* Отступы внутри ячеек */
}

.machine-table, .shop-table {
    border-collapse: collapse;
    border: none;
    table-layout: auto; /* Убираем фиксированную раскладку */
    margin-top: 10px;
}

.machine-table td,
.machine-table th, .shop-table td, .shop-table th {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}

.machine-table th, .shop-table th {
	text-align: center;
	border: none;
	padding: 15px 15px;
	background: #ffb344;
	font-size: 13px;
    position: sticky;
    z-index: 1;
    top: 0;
}

.machine-table td, .shop-table td {
    font-size: 12px;
}

.machine-table td:nth-child(4) {
    width: 25rem;
    /* word-break: break-all; */
}

.machine-table td:nth-child(5) {
    width: 150px;
}

.machine-table thead tr th:first-child, .shop-table thead tr th:first-child {
    border-radius: 10px 0 0 0;
    border: none;
}
.machine-table thead tr th:last-child, .shop-table thead tr th:last-child {
    border-radius: 0 10px 0 0;
    border: none;
}

.machine-table tbody tr:nth-child(even), .shop-table tbody tr:nth-child(even) {
    background: #efefef51;
}

.machine-table tbody tr:last-child td:first-child, .shop-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
}
.machine-table tbody tr:last-child td:last-child, .shop-table tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}

.machine-table tbody tr:hover, .shop-table tbody tr:hover {
    background: rgb(255, 240, 212);
}

.machine-table td img, .shop-table td img {
    border-radius: 10px;
    transform: scale(1.01);
    opacity: .5;
}

.machine-table td img:hover, .shop-table td img:hover {
    border-radius: 10px;
    transform: scale(1.01);
    opacity: initial;
    cursor: pointer;
}

.machines {
    padding: 20px; 
}

/* Стили для группы машин */
.popular-machine {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    width: 100%;
}

/* Стили для контейнера с машинами */
.machine-container {
    padding: 10px;
}

/* Стили для отдельных элементов машины */
.machine-item {
    position: relative;
    display: flex; 
    flex-direction: column;
}

/* Стили для изображений */
.machine-block {
    display: block;
    width: 100%;
    border-radius: 10px;
    transition: all 300ms ease;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    opacity: 0.5;
    transform: scale(1.001);
}

.machine-block:hover {
    transform: scale(1.005);
    opacity: 1;
}

.machine-item img:hover {
    box-shadow: 0px 0px 10px 0px white;
}

.price-overlay-machine-block {
    position: absolute;
    border-radius: 0px 10px 0px;
    background: rgba(255, 213, 0, 1);
    /* z-index: 1; */
    text-align: center;
    bottom: 2.45rem;
    padding: 5px;
}

.price-overlay-machine-block p {
    margin: 0;
    color: black;
}

/* Стили для названий машин */
.machine-name {
    display: block;
    text-align: center;
    margin: 10px 0;
    font-weight: 500;
    text-shadow: 1px 1px black;
}
   
/* Адаптивные стили */
@media (max-width: 1200px) {
    .popular-machine {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
    }
}

@media (max-width: 768px) {
    .popular-machine {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
    }
}

@media (max-width: 480px) {
    .popular-machine {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, auto);
    }
}