/* Общие стили */
/* Общие стили */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}



body.dark-mode {
    background-color: #121212; /* Темный фон */
    color: #e0e0e0; /* Светло-серый текст */
}

/* Темная тема для заголовков */
h1, h2, h3, h4, h5, h6 {
    color: #333;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e8eafa; /* Фиолетовый оттенок для заголовков */
}

/* Темная тема для шапки */
header.header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

body.dark-mode header.header {
    background-color: #1e1e1e; /* Темный фон для шапки */
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

.logo {
    color: #007bff;
}

.bx-sun {
    color: #e8eafa;
}

body.dark-mode .logo {
    color: #e8eafa; /* Фиолетовый логотип */
}

.search-bar input {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .search-bar input {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

/* Темная тема для кнопок */
.action-btn {
    background-color: #007bff;
    color: #e0e0e0;
}

body.dark-mode .action-btn {
    color: #121212;
}



/* Темная тема для мобильного меню */
.mobile-nav {
    background-color: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

body.dark-mode .mobile-nav {
    background-color: #1e1e1e;
    box-shadow: 0 -2px 4px rgba(255, 255, 255, 0.1);
}

/* Темная тема для карточек */
.post-card, .box, .profile-card, .navigation-box {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .post-card,
body.dark-mode .box,
body.dark-mode .profile-card,
body.dark-mode .chat-list,
body.dark-mode .navigation-box,
body.dark-mode .profile-item,
body.dark-mode .menu-grid li,
body.dark-mode .notifications-page,
body.dark-mode .main-features,
body.dark-mode .modal-content,
body.dark-mode #messages,
body.dark-mode .reposts-page,
body.dark-mode .profile-list,
body.dark-mode .post-form-container{
    background-color: #18191a;
    border-color: #2c343f;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

body.dark-mode .chat-messages,
body.dark-mode .chat-messages a,
body.dark-mode .chat-messages i{
    color: #121212!important;
}

body.dark-mode .friend-item,
body.dark-mode .chat-container,
body.dark-mode .chat-input-area{
    background-color: rgba(96, 97, 98, 0.12)!important;
    border-color: #2c343f;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

body.dark-mode friend-item{
    background-color: #25272a;
    color: #e0e0e0;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

body.dark-mode .profile-info strong,
body.dark-mode .profile-info
{
font-size: 16px;
color: #e0e0e0;
}

body.dark-mode .menu-btn{
    color: #e0e0e0;
}

body.dark-mode .create-post-section textarea,
body.dark-mode #message-input,
body.dark-mode .friends-page,
body.dark-mode .create-post textarea,
body.dark-mode .chat-input-form textarea,
body.dark-mode .post-form form
{
    background-color: #18191a;
    border-color: #2c343f;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}


body.dark-mode .sent {
    background-color: #6ea0d6;
    border-color: #2c343f;
}

body.dark-mode .received {
    background-color: #1e1f22;
    border-color: #2c343f;
}


/* Темная тема для ссылок */
a {
    color: #007bff;
    transition: color 0.3s ease;
}

body.dark-mode a {
    color: #e0e0e0!important;
}

/* Темная тема для аватаров */
.user-avatar {
    border: 2px solid #fff;
}

body.dark-mode .user-avatar {
    border-color: #444;
}

/* Стили для шапки */
header.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 20px; /* Отступы внутри шапки */
}

.desktop-header,
.mobile-header {
    display: none; /* По умолчанию скрываем обе версии шапки */
    align-items: center; /* Выравниваем элементы по центру по вертикали */
    justify-content: space-between; /* Распределяем элементы равномерно */
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
}

.search-bar input {
    width: 50%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
}

.actions {
    display: flex;
    align-items: center; /* Выравниваем аватар и кнопку в одну строку */
    gap: 10px; /* Добавляем отступ между аватаром и кнопкой */
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.other-actions {
    background: none;
    border: none;
    font-size: 16px;
    color: #007bff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px; /* Отступ между иконкой и текстом */
}

.menu-btn,
.feed-toggle-btn {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Мобильное нижнее меню */
.mobile-nav {
    display: none; /* Скрываем по умолчанию */
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.nav-item {
    text-align: center;
}

.nav-item button {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    font-size: 14px;
    color: #007bff;
    cursor: pointer;
}

.nav-item i {
    font-size: 24px;
    margin-bottom: 5px;
}

.chat-circle button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.chat-circle button i {
    margin: 0;
}
.mainn{
    display: flex;
    grid-template-columns: 1fr
}

.divider {
    border-top: 1px solid #eaeaea;
    margin: 20px 0;
}

.unfollow-btn {
    background-color: #ff6347!important;
}

.unfollow-btn:hover {
    background-color: #e34234;
}

.action-btn{
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3sease;
}

.captcha {
    margin-bottom: 15px;
}

.captcha img {
    width: 100%;
    height: auto;
}

/* Стили для модального окна */
.modal {
    display: none; /* По умолчанию скрыто */
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Затемненный фон */
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
}

/* Кнопка закрытия */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

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

/* Адаптивность */
@media (min-width: 769px) {
    .desktop-header {
        display: flex; /* Показываем десктопную шапку */
    }

    .mobile-header {
        display: none; /* Скрываем мобильную шапку */
    }

    .mobile-nav {
        display: none; /* Скрываем мобильную навигацию */
    }
}

@media (max-width: 768px) {
    .desktop-header {
        display: none; /* Скрываем десктопную шапку */
    }
    .mainn {
        padding-bottom: 80px !important; /* Высота мобильного меню + отступ */
    }

    .mobile-header {
        display: flex; /* Показываем мобильную шапку */
    }

    .mobile-nav {
        display: flex; /* Показываем мобильную навигацию */
    }

    .search-bar {
        display: none; /* Скрываем строку поиска на телефонах */
    }
}




@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        background-color: #121212;
        color: #e0e0e0;
    }

    body:not(.light-mode) header.header {
        background-color: #1e1e1e;
    }

    body:not(.light-mode) .post-card,
    body:not(.light-mode) .box,
    body:not(.light-mode) .profile-card,
    body:not(.light-mode) .navigation-box {
        background-color: #2c2c2c;
        border-color: #444;
    }
}