/* ============================================
   ОБЩИЕ СТИЛИ ДЛЯ ВСЕГО САЙТА
   ============================================ */

/* 1. СБРОС СТИЛЕЙ - чтобы везде выглядело одинаково */
* {
    margin: 0;           /* убираем отступы */
    padding: 0;          /* убираем внутренние отступы */
    box-sizing: border-box;  /* чтобы ширина считалась правильно */
}

/* 2. ОСНОВНОЕ ТЕЛО СТРАНИЦЫ */
body {
    font-family: Arial, sans-serif;  /* шрифт */
    background: #f0f2f5;             /* цвет фона (серенький) */
    min-height: 100vh;                /* высота на весь экран */
}

/* ============================================
   ШАПКА САЙТА (верхняя полоса)
   ============================================ */
.top-bar {
    background: white;                 /* белый фон */
    padding: 15px 30px;                /* отступы внутри */
    display: flex;                     /* элементы в ряд */
    justify-content: space-between;     /*  лого слева, кнопки справа */
    align-items: center;                /* выравнивание по центру */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* тень */
}

.logo {
    font-size: 20px;                   /* размер шрифта */
    font-weight: bold;                  /* жирный шрифт */
    color: #2c3e50;                     /* темно-синий цвет */
}

.logo a {
    color: #2c3e50;                     /* цвет ссылки */
    text-decoration: none;               /* убираем подчеркивание */
}

/* ============================================
   КНОПКИ АВТОРИЗАЦИИ
   ============================================ */
.auth-buttons {
    display: flex;      /* кнопки в ряд */
    gap: 10px;          /* расстояние между кнопками */
    align-items: center; /* по центру */
}

/* ОБЩИЙ стиль для всех кнопок */
.btn {
    padding: 8px 15px;           /* отступы внутри кнопки */
    border-radius: 5px;          /* скругленные углы */
    text-decoration: none;        /* убираем подчеркивание */
    font-size: 14px;              /* размер текста */
    transition: 0.3s;             /* плавное изменение при наведении */
    border: none;                  /* убираем рамку */
    cursor: pointer;               /* курсор-палец */
}

/* КНОПКА ВХОДА - синяя */
.btn-login {
    background: #3498db;    /* синий фон */
    color: white;           /* белый текст */
}

.btn-login:hover {          /* при наведении мышки */
    background: #2980b9;    /* темнее синий */
}

/* КНОПКА РЕГИСТРАЦИИ - зеленая */
.btn-register {
    background: #2ecc71;    /* зеленый фон */
    color: white;
}

.btn-register:hover {
    background: #27ae60;    /* темнее зеленый */
}

/* КНОПКА ПРОФИЛЯ - оранжевая */
.btn-profile {
    background: #f39c12;    /* оранжевый */
    color: white;
}

.btn-profile:hover {
    background: #e67e22;    /* темнее оранжевый */
}

/* КНОПКА ВЫХОДА - красная */
.btn-logout {
    background: #e74c3c;    /* красный */
    color: white;
}

.btn-logout:hover {
    background: #c0392b;    /* темнее красный */
}

/* ============================================
   ПЛАВАЮЩАЯ КНОПКА ФОРУМА
   ============================================ */

/* Контейнер для кнопки */
.forum-float-btn {
    position: fixed;           /* фиксированное положение */
    bottom: 30px;              /* отступ снизу 30px */
    right: 30px;               /* отступ справа 30px */
    z-index: 1000;             /* чтобы была поверх всего */
    display: none;             /* по умолчанию скрыта */
}

/* Сама кнопка */
.forum-float-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #9b59b6;        /* фиолетовый */
    color: white;
    border-radius: 50%;         /* круглая */
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
    transition: all 0.3s ease;
}

/* Эффект при наведении */
.forum-float-btn a:hover {
    background: #8e44ad;        /* темнее фиолетовый */
    transform: scale(1.1);       /* увеличивается */
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.6);
}

/* Текст подсказка при наведении */
.forum-float-btn a::after {
    content: "Форум";
    position: absolute;
    right: 70px;                /* слева от кнопки */
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.forum-float-btn a:hover::after {
    opacity: 1;
    visibility: visible;
    right: 80px;
}

/* Если хочешь текст справа, а не слева */
.forum-float-btn a::before {
    display: none; /* отключаем, используем после */
}

/* Анимация появления */
@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.forum-float-btn.show {
    display: block;
    animation: floatIn 0.5s ease;
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .forum-float-btn {
        bottom: 20px;
        right: 20px;
    }
    
    .forum-float-btn a {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Имя пользователя в шапке */
.user-greeting {
    color: #2c3e50;         /* темно-синий */
    font-weight: bold;       /* жирный */
}

/* ============================================
   ФОРМЫ ВХОДА И РЕГИСТРАЦИИ
   ============================================ */

/* Контейнер для формы (белая карточка) */
.auth-container {
    max-width: 400px;               /* ширина 400 пикселей */
    margin: 50px auto;               /* отступ сверху, по центру */
    background: white;               /* белый фон */
    padding: 30px;                   /* отступы внутри */
    border-radius: 10px;             /* скругленные углы */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* тень */
}

.auth-container h1 {
    text-align: center;              /* текст по центру */
    margin-bottom: 20px;             /* отступ снизу */
    color: #333;                     /* темно-серый */
}

/* Поля ввода (логин, пароль) */
.form-group {
    margin-bottom: 15px;             /* отступ снизу */
}

.form-group input {
    width: 100%;                      /* ширина на всю форму */
    padding: 12px;                    /* отступы внутри */
    border: 1px solid #ddd;           /* серая рамка */
    border-radius: 5px;               /* скругленные углы */
    font-size: 16px;                  /* размер текста */
}

/* Когда кликаешь на поле ввода */
.form-group input:focus {
    outline: none;                    /* убираем обводку */
    border-color: #3498db;             /* рамка становится синей */
}

/* Кнопка в форме */
.form-group button {
    width: 100%;                      /* на всю ширину */
    padding: 12px;                    
    background: #3498db;               /* синий фон */
    color: white;                      /* белый текст */
    border: none;                      
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.form-group button:hover {
    background: #2980b9;               /* темнее при наведении */
}

/* ============================================
   СООБЩЕНИЯ (ОШИБКИ И УСПЕХ)
   ============================================ */

/* Красное сообщение об ошибке */
.error-msg {
    color: #e74c3c;                    /* красный текст */
    background: #fde8e8;                /* светло-красный фон */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Зеленое сообщение об успехе */
.success-msg {
    color: #27ae60;                    /* зеленый текст */
    background: #e8f8e8;                /* светло-зеленый фон */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* ============================================
   ССЫЛКИ
   ============================================ */
.links {
    text-align: center;                /* по центру */
    margin-top: 20px;                   /* отступ сверху */
}

.links a {
    color: #3498db;                    /* синий цвет */
    text-decoration: none;              /* без подчеркивания */
}

.links a:hover {
    text-decoration: underline;         /* подчеркивание при наведении */
}

.back-link {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.back-link a {
    color: #7f8c8d;                    /* серый цвет */
    text-decoration: none;
}

.back-link a:hover {
    color: #2c3e50;                    /* темнеет при наведении */
}

/* ============================================
   ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ
   ============================================ */
.profile-container {
    max-width: 500px;
    margin: 30px auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.profile-info {
    background: #f8f9fa;                /* светло-серый фон */
    padding: 20px;
    border-radius: 5px;
    margin: 20px 0;
}

.info-item {
    margin-bottom: 15px;
}

.info-label {
    color: #7f8c8d;                    /* серый */
    font-size: 14px;                    /* мелкий текст */
    margin-bottom: 5px;
}

.info-value {
    font-size: 18px;                    /* крупный текст */
    font-weight: bold;                   /* жирный */
    color: #2c3e50;                      /* темно-синий */
}

.profile-actions {
    display: flex;                      /* кнопки в ряд */
    gap: 10px;                          /* отступ между кнопками */
    margin-top: 20px;
}

/* ============================================
   КНОПКА НАЗАД
   ============================================ */
.back-btn {
    margin: 20px;
    padding: 10px 20px;
    background: #95a5a6;                /* серый фон */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.back-btn:hover {
    background: #7f8c8d;                /* темнее при наведении */
}