/* =====================================
   ЗАГАЛЬНІ НАЛАШТУВАННЯ
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,sans-serif;
    background:#f5f5f5;
    color:#222;
}

main{
    padding:30px;
    min-height:70vh;
}

h1{
    text-align:center;
    color:#0b4f2f;
    margin-bottom:30px;
}

h2{
    color:#0b4f2f;
    margin:25px 0 15px;
}

h3{
    margin:20px 0 10px;
}

p{
    font-size:18px;
    line-height:1.6;
    margin-bottom:15px;
}

ul,
ol{
    margin-left:30px;
    margin-bottom:15px;
}

li{
    margin-bottom:8px;
}

/* =====================================
   HEADER
===================================== */

header{
    background:#0b4f2f;
    color:white;
    padding:15px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    height:100px;
    width:auto;
}

.logo span{
    font-size:28px;
    font-weight:bold;
}

nav ul{
    list-style:none;
    display:flex;
    gap:25px;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}

nav a:hover{
    color:#ffeb3b;
}

/* =====================================
   КАТЕГОРІЇ
===================================== */

.categories{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.category{
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 0 12px rgba(0,0,0,.15);
    transition:.3s;
}

.category:hover{
    transform:translateY(-5px);
}

.category img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.category h2{
    text-align:center;
    padding:15px;
}

.category a{
    text-decoration:none;
    color:black;
}

/* =====================================
   СТОРІНКИ КАТЕГОРІЙ
===================================== */

.category-page-image{
    display:block;
    width:100%;
    max-width:900px;
    margin:25px auto;
    border-radius:10px;
}

.catalog-button{
    display:inline-block;
    background:#0b4f2f;
    color:white;
    text-decoration:none;
    padding:14px 28px;
    border-radius:6px;
    font-weight:bold;
}

.catalog-button:hover{
    background:#146c43;
}

/* =====================================
   КОНТАКТИ
===================================== */

.contact-table{
    border-collapse:collapse;
    width:600px;
    max-width:100%;
    margin:20px auto;
    background:white;
}

.contact-table td{
    border:1px solid #ccc;
    padding:12px;
}

.contact-table tr:nth-child(even){
    background:#f8f8f8;
}

/* =====================================
   КНОПКИ
===================================== */

.btn{
    display:inline-block;
    background:#004d26;
    color:white;
    text-decoration:none;
    border:none;
    padding:16px 35px;
    border-radius:8px;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
}

.btn:hover{
    background:#006633;
}

/* =====================================
   ФОРМА ЗАМОВЛЕННЯ
===================================== */

.order-form{
    width:1400px;
    max-width:95%;
    margin:30px auto;
    padding:40px;
    background:white;
    border-radius:12px;
    box-shadow:0 3px 15px rgba(0,0,0,.15);
}

.order-form h1{
    margin-bottom:30px;
}

.order-form p{
    text-align:center;
    font-size:22px;
    margin-bottom:20px;
}

.order-form input{
    width:50%;
    height:35px;
    padding:15px;
    margin-top:8px;
    border:2px solid #ccc;
    border-radius:8px;
    font-size:22px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.order-form button{
    background:#004d26;
    color:white;
    border:none;
    padding:18px 40px;
    border-radius:8px;
    font-size:22px;
    font-weight:bold;
    cursor:pointer;
}

.order-form button:hover{
    background:#006633;
}

/* =====================================
   ТАБЛИЦЯ ЗАМОВЛЕНЬ
===================================== */

.table-container{
    display:flex;
    justify-content:center;
    margin-top:25px;
    overflow-x:auto;
}

.orders-table{
    width:1800px;
    max-width:98%;
    border-collapse:collapse;
    background:white;
    box-shadow:0 3px 15px rgba(0,0,0,.15);
}

.orders-table th{
    background:#006633;
    color:white;
    padding:18px;
    font-size:20px;
}

.orders-table td{
    padding:18px;
    border:1px solid #ddd;
    text-align:center;
    font-size:18px;
}

.orders-table tr:hover{
    background:#f0fff4;
}

.orders-table th:nth-child(1),
.orders-table td:nth-child(1){
    width:250px;
}

.orders-table th:nth-child(2),
.orders-table td:nth-child(2){
    width:700px;
}

.orders-table th:nth-child(3),
.orders-table td:nth-child(3){
    width:250px;
}

.orders-table th:nth-child(4),
.orders-table td:nth-child(4){
    width:250px;
}

.orders-table th:nth-child(5),
.orders-table td:nth-child(5){
    width:300px;
}

.orders-table th:nth-child(6),
.orders-table td:nth-child(6){
    width:220px;
}

/* =====================================
   ВИДАЛЕННЯ
===================================== */

.delete-link{
    color:#d00000;
    text-decoration:none;
    font-weight:bold;
}

.delete-link:hover{
    text-decoration:underline;
}

/* =====================================
   СТОРІНКА ПОДЯКИ
===================================== */

.success-message{
    max-width:900px;
    margin:50px auto;
    text-align:center;
}

.success-message h1{
    color:#006633;
}

.success-message p{
    font-size:22px;
}

/* =====================================
   FOOTER
===================================== */

footer{
    background:#0b4f2f;
    color:white;
    text-align:center;
    padding:15px;
    margin-top:40px;
}

/* =====================================
   МОБІЛЬНА ВЕРСІЯ
===================================== */

@media (max-width:768px){

    header{
        flex-direction:column;
        gap:15px;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
    }

    .logo img{
        height:70px;
    }

    .logo span{
        font-size:22px;
    }

    .order-form{
        padding:20px;
    }

    .order-form input{
        height:55px;
        font-size:18px;
    }

    .order-form p{
        font-size:18px;
    }

    .btn,
    .order-form button{
        width:100%;
        font-size:18px;
    }

    .orders-table th,
    .orders-table td{
        font-size:16px;
        padding:10px;
    }
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.product-card img {
    width: 100%;
    max-width: 220px;
    height: 180px;
    object-fit: contain;
    margin-bottom: 15px;
}

.product-card p {
    margin: 8px 0;
}

.product-card strong {
    color: #0a4c8b;
}

.flash-messages {
    max-width: 700px;
    margin: 20px auto;
}

.flash-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 12px 20px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
}

.flash-message {
    position: fixed;
    top: 20px;
    right: 20px;

    padding: 12px 20px;
    border-radius: 8px;

    color: red;          /* Червоний текст */
    font-size: 36px;     /* У 2 рази більший */
    font-weight: bold;

    z-index: 9999;

    opacity: 0;
    transform: translateY(-20px);

    animation: showFlash 2.5s forwards;
}

@keyframes showFlash {

    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Кнопка "До головної сторінки" */
.back-home {
    text-align: center;
    margin: 40px 0 20px;
}

.btn-home {
    display: inline-block;
    padding: 12px 30px;
    background-color: #0d6efd;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-home:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
}

.delete-btn {
    background-color: #d9534f;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.delete-btn:hover {
    background-color: #c9302c;
}

.language-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 20px;
    font-weight: bold;
}

.language-switch a {
    color: white;
    text-decoration: none;
    padding: 4px 8px;
}

.language-switch a:hover {
    color: yellow;
}

.active-language {
    color: #ffeb3b !important;
    text-decoration: underline;
}

/* =====================================
   Дані замовника
===================================== */

.order-info {

    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;

}

.order-info td {

    padding: 10px 12px;
    border: 1px solid #ddd;

}

.order-info .header {

    background: #f5f5f5;
    font-weight: bold;
    text-align: center;

}

.order-info .value {

    background: #ffffff;
    text-align: center;

}

/* =====================================
   Таблиця товарів
===================================== */

.cart-table {

    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;

}

.cart-table th,
.cart-table td {

    border: 1px solid #ddd;
    padding: 10px;

}

.cart-table th {

    background: #f5f5f5;
    text-align: center;

}

.cart-table td {

    text-align: center;

}

.cart-table td:first-child {

    text-align: left;

}

/* =====================================
   Контакти менеджера
===================================== */

.manager-table {

    width: 100%;
    border-collapse: collapse;
    margin: 25px 0 35px;

}

.manager-table th,
.manager-table td {

    border: 1px solid #d9d9d9;
    padding: 12px;
    text-align: center;

}

.manager-table th {

    background: #f2f2f2;
    font-weight: bold;

}

.manager-table td a {

    color: #0066cc;
    text-decoration: none;

}

.manager-table td a:hover {

    text-decoration: underline;

}

.customer-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0 35px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.customer-table th {
    background: #1e73be;
    color: white;
    padding: 14px;
    text-align: center;
    font-size: 16px;
}

.customer-table td {
    padding: 14px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
    font-size: 15px;
}

.customer-table tr:last-child td {
    border-bottom: none;
}

.customer-table tr:hover {
    background: #f8fbff;
}