/* CSS для форума о воспитании детей 
   Веселая цветовая гамма и прикольные шрифты */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Bubblegum+Sans&family=Patrick+Hand&display=swap');

/* Основные настройки */
body {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fffae0; /* Мягкий кремовый фон */
    color: #554466; /* Фиолетово-коричневый для текста */
    font-family: 'Comic Neue', cursive; /* Веселый прикольный шрифт */
    font-size: 16px;
    line-height: 1.6;
    padding: 15px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill-opacity="0.07"><circle cx="25" cy="25" r="8" fill="%23ff9966"/><circle cx="75" cy="75" r="8" fill="%236dc066"/><circle cx="75" cy="25" r="8" fill="%23ffcc66"/><circle cx="25" cy="75" r="8" fill="%23cc99ff"/></svg>');
    background-attachment: fixed;
}

/* Контейнер форума */
.wrapper {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    overflow: hidden;
    border: 2px solid #ffcc66; /* Желтая рамка */
}

/* Шапка форума */
.header {
    background: linear-gradient(to right, #ff9966, #ff7eb3); /* Градиент оранжевый-розовый */
    padding: 20px;
    color: #ffffff;
    text-align: center;
    border-bottom: 5px dotted #ffffff;
}

.header-logo {
    font-family: 'Bubblegum Sans', cursive;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 2px 2px 0 #ff6633;
    letter-spacing: 1px;
}

.header-logo:before {
    content: "👶"; /* Эмодзи малыша */
    margin-right: 10px;
}

.header-logo:after {
    content: "👩‍👧‍👦"; /* Эмодзи семьи */
    margin-left: 10px;
}

/* Навигация и хлебные крошки */
.breadcrumb {
    background-color: #e6f7ff; /* Светло-голубой */
    border: 2px dashed #66ccff; /* Голубая пунктирная рамка */
    border-radius: 12px;
    padding: 10px 20px;
    margin: 15px;
    font-size: 15px;
    color: #5588aa;
}

.breadcrumb a {
    color: #ff7eb3; /* Розовый */
    font-weight: bold;
}

/* Основной контент */
.content {
    padding: 20px;
}

/* Таблица форумов */
table.forumline {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 20px;
}

th, td.th {
    background-color: #ccf0c8; /* Мятно-зеленый */
    color: #338855;
    font-family: 'Patrick Hand', cursive;
    font-weight: bold;
    padding: 12px 20px;
    text-align: left;
    border-radius: 8px 8px 0 0;
    font-size: 18px;
    letter-spacing: 0.5px;
    border-bottom: 3px solid #aadd99;
}

td {
    padding: 15px 20px;
    border-bottom: 2px dotted #ffcc66;
    vertical-align: middle;
}

/* Строки таблицы */
.row, .row1 {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.row:hover, .row1:hover {
    transform: scale(1.01);
}

.row2 {
    background-color: #fff5f7; /* Светло-розовый */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.row2:hover {
    transform: scale(1.01);
}

.row3 {
    background-color: #f0faff; /* Светло-голубой */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.row3:hover {
    transform: scale(1.01);
}

/* Иконки категорий форума */
.forum-icon {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px;
    background-color: #ffeecc;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 24px; 
    color: #ff9966;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.forum-row {
    display: flex;
    align-items: center;
}

.forum-info {
    flex-grow: 1;
}

.forum-title {
    font-family: 'Bubblegum Sans', cursive;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
    color: #ff7eb3; /* Розовый */
}

.forum-description {
    color: #7788aa;
    font-size: 15px;
}

/* Темы и сообщения */
.topic-title {
    font-size: 18px;
    font-weight: normal;
    font-family: 'Patrick Hand', cursive;
}

.topic-title a {
    color: #6699cc; /* Синий */
    text-decoration: none;
    transition: color 0.2s;
}

.topic-title a:hover {
    color: #ff9966; /* Оранжевый при наведении */
    text-decoration: underline wavy #ffcc66;
}

.topic-statistic {
    color: #7788aa;
    font-size: 14px;
}

.topic-last-post {
    font-size: 14px;
    color: #7788aa;
}

/* Сообщения */
.postbody {
    color: #554466;
    line-height: 1.7;
    margin-bottom: 15px;
}

.post-header {
    background-color: #e6f7ff; /* Светло-голубой */
    padding: 12px 20px;
    border-bottom: 2px dotted #66ccff;
    font-size: 15px;
    color: #5588aa;
    border-radius: 12px 12px 0 0;
}

.post-content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 0 0 12px 12px;
}

.post-footer {
    font-size: 14px;
    color: #7788aa;
    padding: 10px 20px;
    background-color: #fffae8;
    border-top: 2px dotted #ffcc66;
    border-radius: 0 0 12px 12px;
}

/* Пользовательская панель */
.user-panel {
    background-color: #fff5f7; /* Светло-розовый */
    border: 2px solid #ffcc99;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
}

.username {
    font-family: 'Bubblegum Sans', cursive;
    font-weight: bold;
    color: #ff7eb3; /* Розовый */
    font-size: 18px;
}

.user-avatar {
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    border: 3px solid #ffcc66;
}

.user-info {
    color: #7788aa;
    font-size: 14px;
    margin-top: 8px;
}

/* Цитаты и код */
.quote {
    background-color: #e6f7ff; /* Светло-голубой */
    border-left: 5px solid #66ccff;
    border-radius: 10px;
    padding: 15px 20px;
    margin: 15px 0;
    color: #5588aa;
    font-style: italic;
}

.code {
    background-color: #f9f9f9;
    border: 2px dashed #dddddd;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    padding: 15px;
    margin: 15px 0;
    overflow-x: auto;
    color: #554466;
}

/* Ссылки */
a {
    color: #ff7eb3; /* Розовый */
    text-decoration: none;
    transition: all 0.2s;
}

a:hover {
    color: #ff9966; /* Оранжевый при наведении */
    text-decoration: underline;
}

a:visited {
    color: #cc99ff; /* Лавандовый */
}

/* Кнопки */
.button {
    display: inline-block;
    background-color: #ff9966; /* Оранжевый */
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: 'Bubblegum Sans', cursive;
    font-weight: bold;
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 0 #ff6633;
    transition: all 0.2s;
}

.button:hover {
    background-color: #ff7eb3; /* Розовый при наведении */
    transform: translateY(-3px);
    box-shadow: 0 6px 0 #ff5599;
    text-decoration: none;
    color: #ffffff;
}

.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 #ff5599;
}

.button-secondary {
    background-color: #66ccff; /* Голубой */
    box-shadow: 0 3px 0 #3399cc;
}

.button-secondary:hover {
    background-color: #3399cc;
    box-shadow: 0 6px 0 #0077aa;
}

/* Статусы */
.status-new {
    color: #66cc66; /* Зеленый */
    font-weight: bold;
    font-family: 'Patrick Hand', cursive;
}

.status-new:before {
    content: "✨ ";
}

.status-hot {
    color: #ff6633; /* Красно-оранжевый */
    font-weight: bold;
    font-family: 'Patrick Hand', cursive;
}

.status-hot:before {
    content: "🔥 ";
}

.status-closed {
    color: #9999aa;
    font-family: 'Patrick Hand', cursive;
}

.status-closed:before {
    content: "🔒 ";
}

.status-sticky {
    color: #ffaa33; /* Оранжевый */
    font-weight: bold;
    font-family: 'Patrick Hand', cursive;
}

.status-sticky:before {
    content: "📌 ";
}

/* Специфические элементы для форума о воспитании детей */
.category-babies:before {
    content: "👶";
    margin-right: 8px;
    font-size: 20px;
}

.category-toddlers:before {
    content: "🧒";
    margin-right: 8px;
    font-size: 20px;
}

.category-preschool:before {
    content: "🎨";
    margin-right: 8px;
    font-size: 20px;
}

.category-school:before {
    content: "📚";
    margin-right: 8px;
    font-size: 20px;
}

.category-teens:before {
    content: "🎭";
    margin-right: 8px;
    font-size: 20px;
}

.category-health:before {
    content: "🍎";
    margin-right: 8px;
    font-size: 20px;
}

.category-psychology:before {
    content: "🧠";
    margin-right: 8px;
    font-size: 20px;
}

/* Статистика форума */
.stats-panel {
    background-color: #e6f7ff; /* Светло-голубой */
    border: 2px dashed #66ccff;
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #5588aa;
}

.stats-title {
    font-family: 'Bubblegum Sans', cursive;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 18px;
    color: #ff7eb3; /* Розовый */
}

/* Подвал форума */
.footer {
    background: linear-gradient(to right, #66ccff, #cc99ff); /* Градиент голубой-лавандовый */
    padding: 20px;
    border-radius: 0 0 15px 15px;
    font-size: 14px;
    text-align: center;
    color: #ffffff;
    font-family: 'Comic Neue', cursive;
}

/* Пагинация */
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border: 2px solid #ffcc66;
    background-color: #ffffff;
    color: #ff9966;
    border-radius: 30px;
    font-size: 16px;
    font-family: 'Bubblegum Sans', cursive;
    transition: all 0.2s;
}

.pagination span.current {
    background-color: #ff9966;
    color: #ffffff;
    border-color: #ff9966;
}

.pagination a:hover {
    background-color: #fff5e6;
    transform: scale(1.1);
    text-decoration: none;
}

/* Уведомления */
.notification {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    font-family: 'Patrick Hand', cursive;
    font-size: 16px;
}

.notification-info {
    background-color: #e6f7ff;
    border: 2px dashed #66ccff;
    color: #3377aa;
}

.notification-info:before {
    content: "ℹ️ ";
}

.notification-success {
    background-color: #eeffee;
    border: 2px dashed #66cc66;
    color: #338833;
}

.notification-success:before {
    content: "✅ ";
}

.notification-warning {
    background-color: #fffae0;
    border: 2px dashed #ffcc66;
    color: #bb8833;
}

.notification-warning:before {
    content: "⚠️ ";
}

.notification-error {
    background-color: #ffeeee;
    border: 2px dashed #ff6666;
    color: #cc3333;
}

.notification-error:before {
    content: "❌ ";
}

/* Анимированные элементы */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.new-topic-label {
    display: inline-block;
    animation: bounce 2s infinite;
    color: #ff6633;
    font-weight: bold;
}

/* Декоративные элементы */
.section-header {
    position: relative;
    margin: 30px 0 20px;
    text-align: center;
}

.section-header h2 {
    font-family: 'Bubblegum Sans', cursive;
    color: #ff7eb3;
    font-size: 28px;
    display: inline-block;
    background: #ffffff;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.section-header:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, #ffcc66, #ffcc66 8px, transparent 8px, transparent 16px);
    z-index: 0;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    body {
        padding: 10px;
        max-width: 100%;
    }
    
    .header-logo {
        font-size: 28px;
    }
    
    th, td {
        padding: 10px;
    }
    
    .forum-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
    }
    
    .forum-title {
        font-size: 18px;
    }
    
    .section-header h2 {
        font-size: 24px;
    }
}

/* Веселые эффекты при наведении */
.forum-title:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
}

.user-avatar:hover {
    transform: rotate(5deg);
    transition: transform 0.3s;
}

.header-logo:hover {
    animation: bounce 1s;
}