/* Базовые стили */
:root { --primary-color: #2c3e50; --secondary-color: #3498db; --text-color: #333; --light-bg: #f9f9f9; --white: #fff;--bg-darker: #3b4054;--ui-elem-height: 40px;
    --ui-elem-padding: 20px;
    --ui-elem-gap: 10px;
    --ui-elem-bdrs: 4px;    --ui-bg-btn: #75bdc2;--tt-fade: #ccc;--bsh: 0 3px 10px 0 rgba(0, 0, 0, 0.45);    --accent: #75bdc2;--accentt: #46a2a9;
 }

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--light-bg); }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
ul { list-style: none; }
/* Хeder */
.header { background-color: var(--primary-color); color: var(--white); padding: 15px 0; position: sticky; top: 0; z-index: 100; }
.header .container { display: flex; justify-content: space-between; align-items: center; }
.logo a { font-size: 24px; font-weight: bold; color: var(--white); text-decoration: none;}
.nav-list { display: flex; list-style: none; }
.nav-link { color: var(--white); text-decoration: none; margin-left: 20px; transition: color 0.3s; }
.nav-link:hover { color: var(--secondary-color); }
.menu-toggle { display: none; background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; }

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--secondary-color), #2980b9);
    color: var(--white);
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    opacity: 0.3;
    z-index: 0;
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Category Description */
.category-description {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 30px;
    margin: 30px auto;
    max-width: 900px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.category-description h2 {
    color: var(--primary-color);
    font-size: 32px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

.category-description p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    color: var(--text-color);
}

.category-description ul {
    padding-left: 20px;
}

.category-description li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;    color: #000;
}

.category-description li::before {
    content: '•';
    color: var(--accent);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
.shows { padding: 40px 0; }
.shows h2 { text-align: center; margin-bottom: 30px; font-size: 28px; }
.show-card { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s;    padding: 15px;    margin-bottom: 10px; position: relative; }
.show-card:hover { transform: translateY(-5px);background-color: #f3f1f1; }
.show-card img { width: 250px;  object-fit: cover; }
.show-card h3 { padding: 15px 15px 5px; }
.show-card p { padding: 0 15px 15px; color: #666; }
.show-card a { text-decoration: none; color: var(--text-color);font-weight: 700; }
.flex { display: flex; }
.show-card .flex { align-items: center; gap: 15px; }
.show-card a::before { content: ''; position: absolute; inset: 0; z-index: 1;  }
.footer { background-color: var(--primary-color); color: var(--white); text-align: center; padding: 20px 0; }
.d-flex { display: flex ; flex-wrap: wrap; flex-direction: row; }
.pagination {gap: 20px 10px; padding-top: 10px;}
.pagination__pages a, .pagination__pages span, .pagination > a, .pagination > span 
{display: grid; place-items: center; color: var(--tt-fade);
	height: 36px; min-width: 36px; padding: 0 10px; border-radius: 3px; background-color: var(--primary-color);}
.pagination__pages {gap: 10px; font-size: 14px;}
.pagination__pages span:not(.nav_ext) {color: #fff; background: var(--accent);}
.pagination__btns {height: 36px; border-radius: 4px; overflow: hidden; background-color: var(--primary-color); box-shadow: var(--bsh);}
.pagination__btns > * {width: 40px; display: grid; place-items: center; color: var(--accent); font-size: 18px;}
.pagination__btns > span {color: var(--tt-fade);}
.pagination__btn-loader:has(span:not(.fal)) {display: none;}
.pagination__btn-loader a {min-width: 360px;}
.jc-center { justify-content: center; }
.w-100 { width: 100%; }
.ai-center { align-items: center; }
.pagination__btn-loader a {display: inline-flex; justify-content: center; align-items: center; cursor: pointer; white-space: nowrap; height: var(--ui-elem-height); padding: 0 var(--ui-elem-padding); gap: var(--ui-elem-gap); border-radius: var(--ui-elem-bdrs); background-color: var(--ui-bg-btn); color: var(--white); font-size: 14px; font-weight: 500;}
a {text-decoration: none;}
.pagination__pages a:hover, .pagination__btns > * {background-color: var(--accent);}
.pagination__btn-loader a:hover  {background-color: var(--accentt);}
.stat-item .rating {display: flex;display: flex ; align-items: center; gap: 10px;}
.footer-nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 15px; background-color: #2c3e50; padding: 10px; border-radius: 5px;    flex-wrap: wrap; justify-content: center; }
.footer-nav__link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #ecf0f1; /* Светлый текст для контраста */ font-weight: 500; padding: 8px 12px; border-radius: 4px; transition: all 0.3s ease; }
.footer-nav__link:hover { background-color: #34495e; /* Немного светлее фона */ color: #ffffff; }
.footer-nav__link i { font-size: 16px; color: #bdc3c7; /* Светло-серый для иконок */ }
.zfx__ac {margin-bottom: 15px;}
.blockcomment {display: flex;    gap: 15px;}
.js-comm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: white; font-weight: bold; text-transform: uppercase; font-size: 16px; }
.comheader {    display: flex ; gap: 15px;}






/* Адаптивность */
@media (max-width: 768px) {
    .nav-list { display: none; flex-direction: column; width: 100%; position: absolute; top: 60px; left: 0; background-color: var(--primary-color); padding: 20px;text-decoration: none; }
    .nav-list.active { display: flex; }
    .nav-link { margin: 10px 0; }
.menu-toggle { display: block; }
.stats {flex-direction: column;
    gap: 15px;}
    .news-title {font-size:25px;}
}
@media (max-width: 560px) {
.hero h1 {font-size: 25px;}
.show-card .flex { flex-direction: column; gap: 10px; }
.show-card img {width: 100%;}
.shows h2 {font-size: 20px}
}
.ac-form__btn {    display: inline-flex ; justify-content: center; align-items: center; cursor: pointer; white-space: nowrap; height: var(--ui-elem-height); padding: 0 var(--ui-elem-padding); gap: var(--ui-elem-gap); border-radius: var(--ui-elem-bdrs); background-color: var(--ui-bg-btn); color: var(--white); font-size: 14px; font-weight: 500;border: none;}
.ac-form__header {margin-bottom: 15px;gap: 15px;}
.ac-form__input {padding: 10px; border-radius: 8px;}
 /* Новые стили для страницы новости */
.news-header { background-color: var(--white); border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: var(--bsh); }
.news-title { font-size: 28px; margin-bottom: 15px; color: var(--primary-color); }
.news-meta { display: flex; align-items: center; gap: 15px; color: var(--tt-fade); font-size: 14px; margin-bottom: 20px; }
.news-meta i { margin-right: 5px; }
.video-container { position: relative; width: 100%;   aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background-color: #000; }
.video-container iframe,
.video-container video { width: 100%; height: 100%; object-fit: cover; }
.news-content { background-color: var(--white); border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: var(--bsh); }
.stats { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--light-bg); }
.stat-item { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.comments-section { background-color: var(--white); border-radius: 8px; padding: 20px; box-shadow: var(--bsh); }
.comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.comment-form textarea { width: 100%; min-height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; }
.comment-form button { background-color: var(--accent); color: var(--white); border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
.comment { border-bottom: 1px solid #eee; padding: 15px 0; }
/* Адаптивность */
@media (max-width: 768px) {
  
    .news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.speedbar {margin-bottom: 15px;
    padding: 15px;}