/* =========================
   ОБЩИЕ НАСТРОЙКИ САЙТА
   ========================= */

* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    margin: 0;
    color: #000;                 /* ВЕСЬ ТЕКСТ ЧЁРНЫЙ */
    background: #ffeded;         /* БЛЕДНО-РОЗОВЫЙ ФОН САЙТА */
}


/* =========================
   ШАПКА САЙТА (HEADER)
   ========================= */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;

    background: #ffffff;         /* БЕЛАЯ ШАПКА */
    border-bottom: 2px solid #ffeded; /* ТОНКАЯ ЛИНИЯ СВЕРХУ */
}

/* Ссылки в шапке */
.header a {
    margin-left: 12px;
    text-decoration: none;
    color: #c62828;              /* КРАСНЫЕ ССЫЛКИ */
    font-weight: 500;
}

.header a:hover {
    text-decoration: underline;
}

/* Логотип */
.logo {
    font-weight: bold;
    font-size: 18px;
    color: #000;                 /* ЛОГОТИП ЧЁРНЫЙ */
}


/* =========================
   ГЛАВНАЯ СТРАНИЦА (HERO)
   ========================= */

.hero {
    max-width: 1024px;
    margin: 40px auto;
    padding: 40px 30px;

    background: #ffffff;         /* БЕЛЫЙ ЦЕНТРАЛЬНЫЙ БЛОК */
    border-radius: 6px;

    /* Белая "рамка", как на рисунке */
    box-shadow: 0 0 0 6px #ffffff;

    text-align: center;
}

/* Заголовок */
.hero h1 {
    font-size: 32px;
    margin-bottom: 10px;
    color: #000;                 /* ЧЁРНЫЙ ЗАГОЛОВОК */
}

/* Описание под заголовком */
.hero p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #000;                 /* ЧЁРНЫЙ ТЕКСТ */
}


/* =========================
   ОСНОВНАЯ КНОПКА
   ========================= */

.main-btn {
    display: inline-block;
    padding: 14px 24px;

    background: #c62828;         /* КРАСНАЯ КНОПКА */
    color: #ffffff;              /* БЕЛЫЙ ТЕКСТ */

    text-decoration: none;
    border-radius: 6px;
}

.main-btn:hover {
    background: #b71c1c;         /* ТЕМНЕЕ ПРИ НАВЕДЕНИИ */
}


/* =========================
   КНОПКА "ВЫЙТИ" (КАК ССЫЛКА)
   ========================= */

.link-btn {
    background: none;
    border: none;

    color: #c62828;              /* КРАСНАЯ */
    cursor: pointer;
    font-weight: 500;
}

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


/* ===========================
   АВТОРИЗАЦИЯ / ВХОД / РЕГИСТРАЦИЯ
   =========================== */

/* Обёртка — центрирование формы */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    margin-top: 20px;
    padding: 20px;
}

/* Белый блок формы */
.auth-card {
    background: #ffffff;
    max-width: 420px;
    width: 100%;

    padding: 30px;
    border-radius: 8px;
}

/* Заголовок формы */
.auth-card h1 {
    margin-bottom: 20px;
    text-align: center;
    color: #000;
}

/* Отступы между полями Django */
.auth-card form p {
    margin-bottom: 14px;
}

/* Поля ввода */
.auth-card input {
    width: 100%;
    padding: 10px;
    margin-top: 4px;

    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Блок ссылок под формой */
.auth-links {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

/* Ссылки в формах */
.auth-links a {
    color: #c62828;              /* КРАСНЫЕ ССЫЛКИ */
    text-decoration: none;
    font-weight: 500;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* ===========================
   СТРАНИЦА ВХОДА (LOGIN)
   =========================== */

/* Чтобы страница входа выглядела как главная */
.login-page {
    min-height: calc(100vh - 70px); /* высота экрана минус шапка */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Немного приподнимаем белый блок */
.login-page .auth-wrapper {
    margin-top: 40px;
}

/* Кнопка входа — как основная */
.auth-card button {
    width: 100%;
    padding: 12px;
    margin-top: 15px;

    background: #c62828;     /* красная */
    color: #fff;
    border: none;
    border-radius: 6px;

    font-size: 16px;
    cursor: pointer;
}

.auth-card button:hover {
    background: #b71c1c;
}

/* Ошибка логина */
.auth-error {
    background: #ffebee;
    color: #c62828;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
}
/* =========================
   ОСНОВНАЯ КНОПКА (главная кнопка сайта)
   ========================= */
.main-btn {
    background: #c62828;      /* красный фон */
    color: #ffffff !important; /* БЕЛЫЙ текст */
    padding: 6px 6px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: 0.2s;
}

/* Эффект наведения */
.main-btn:hover {
    background: #a61e1e;
}

/* =========================
   ШАПКА: СЕТКА (ЛОГО / ПОИСК / МЕНЮ)
   ========================= */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
}

/* Логотип-ссылка (чёрный текст как ты хотел) */
.logo-link {
    text-decoration: none;
    color: #000;
}

/* Центр шапки */
.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Правая часть меню */
.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Чтобы form в меню не ломал строку */
.inline-form {
    display: inline;
    margin: 0;
}

/* =========================
   ПОИСК
   ========================= */
.search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(700px, 100%);
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.search-btn {
    padding: 8px 14px;
    border: none;
    background: #c62828;
    color: #fff; /* ✅ белый текст на кнопке */
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.search-btn:hover {
    background: #b71c1c;
}

/* Подсказка поиска */
.search-hint {
    margin-top: 10px;
    color: #444;
}

.search-reset {
    margin-left: 10px;
    color: #c62828;
    text-decoration: none;
    font-weight: 500;
}

.search-reset:hover {
    text-decoration: underline;
}

/* =========================
   ЛЕНТА ОБЪЯВЛЕНИЙ
   ========================= */
.ads-grid {
    text-align: left;
    display: grid;
    gap: 14px;
}

.ad-card {
    border: 1px solid #ffeded;
    padding: 14px;
    border-radius: 8px;
    background: #fff;
}

.ad-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 6px;
}

.ad-title-link {
    color: #c62828;
    text-decoration: none;
}

.ad-title-link:hover {
    text-decoration: underline;
}

.ad-price {
    margin-bottom: 6px;
}

.ad-desc {
    color: #000;
    margin-bottom: 8px;
}

.ad-author {
    margin-top: 10px;
    font-size: 13px;
    color: #444;
}
/* =========================
   ШАПКА: ПОИСК + МЕНЮ (ЛЕНТА)
   ========================= */

.logo-link {
    text-decoration: none;
    color: #c62828; /* как фирменный красный */
}

.header-search {
    flex: 1;
    display: flex;
    justify-content: center;
}

.search-form {
    width: min(640px, 100%);
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.search-btn {
    padding: 10px 16px;
    border: none;
    background: #c62828;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.search-btn:hover {
    background: #b71c1c;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-user {
    color: #000;
    font-weight: 500;
}

/* Заголовок объявления как ссылка */
.ad-title-link {
    color: #c62828;
    text-decoration: none;
}

.ad-title-link:hover {
    text-decoration: underline;
}

/* ВАЖНО: чтобы текст на кнопке main-btn был белый (если вдруг где-то перекрасился) */
.main-btn {
    color: #fff;
}