/* Адаптивні стилі для PAAGRIO.com */

/* Загальні стилі для всіх розмірів екранів */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Мобільне меню */
.mobile-menu {
    display: none;
}

/* Великі екрани (більше 1200px) */
@media (min-width: 1201px) {
    .container {
        max-width: 1170px;
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .main-menu {
        display: flex;
        justify-content: center;
    }
    
    .news-container {
        display: flex;
        justify-content: space-between;
    }
    
    .news-item {
        width: 31%;
        margin-bottom: 0;
    }
    
    .server-status-container {
        display: flex;
        justify-content: space-between;
    }
    
    .server-status {
        width: 48%;
    }
}

/* Середні екрани (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .main-menu {
        display: flex;
        justify-content: center;
    }
    
    .news-container {
        display: flex;
        justify-content: space-between;
    }
    
    .news-item {
        width: 31%;
        margin-bottom: 0;
    }
    
    .server-status-container {
        display: flex;
        justify-content: space-between;
    }
    
    .server-status {
        width: 48%;
    }
}

/* Планшети (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .main-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .news-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .news-item {
        width: 48%;
        margin-bottom: 20px;
    }
    
    .server-status-container {
        display: flex;
        justify-content: space-between;
    }
    
    .server-status {
        width: 48%;
    }
}

/* Мобільні пристрої (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        max-width: 540px;
    }
    
    .mobile-menu-toggle {
        display: block;
        margin: 0 auto 10px;
    }
    
    .main-menu {
        display: none;
    }
    
    .main-menu.show {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .main-menu .nav-link {
        margin: 5px 0;
        text-align: center;
        width: 100%;
    }
    
    .news-container {
        display: flex;
        flex-direction: column;
    }
    
    .news-item {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .server-status-container {
        display: flex;
        flex-direction: column;
    }
    
    .server-status {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .auth-buttons {
        flex-direction: column;
    }
    
    .btn-auth {
        margin: 5px 0;
        text-align: center;
    }
    
    .lang-selector {
        margin-top: 10px;
        text-align: center;
    }
}

/* Малі мобільні пристрої (менше 576px) */
@media (max-width: 575px) {
    .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .mobile-menu-toggle {
        display: block;
        margin: 0 auto 10px;
    }
    
    .main-menu {
        display: none;
    }
    
    .main-menu.show {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .main-menu .nav-link {
        margin: 5px 0;
        text-align: center;
        width: 100%;
    }
    
    .news-container {
        display: flex;
        flex-direction: column;
    }
    
    .news-item {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .server-status-container {
        display: flex;
        flex-direction: column;
    }
    
    .server-status {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .logo-container img {
        max-width: 90%;
    }
    
    .auth-buttons {
        flex-direction: column;
    }
    
    .btn-auth {
        margin: 5px 0;
        text-align: center;
    }
    
    .auth-page {
        padding: 15px;
    }
    
    h2 {
        font-size: 22px;
    }
    
    h3 {
        font-size: 18px;
    }
    
    .lang-selector {
        margin-top: 10px;
        text-align: center;
    }
}