/* ========================================================
   SEO Boost PRO - Content Unified Design (Perfect Grid)
   ======================================================== */

.sb-tldr, .sb-pros, .sb-cons, .sb-toc, .sb-faq details { background: #ffffff; border: 1px solid #e2e8f0; border-left-width: 4px; border-left-style: solid; padding: 20px 25px; margin-bottom: 25px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); font-size: 15px; line-height: 1.6; color: #333; display: block; box-sizing: border-box; }
.sb-toc { border-left-color: #6366f1; }
.sb-faq details { border-left-color: #8b5cf6; }
.sb-tldr { border-left-color: #3b82f6; }
.sb-pros { border-left-color: #10b981; }
.sb-cons { border-left-color: #ef4444; }

.sb-title, .sb-toc-title, .sb-faq summary { font-size: 14px; font-weight: 800; text-transform: uppercase; color: #1e293b; margin: 0 0 15px 0; display: flex; align-items: center; }
.sb-title i, .sb-toc-title i { display: none !important; }

.sb-toc-title::before { content: "\f0ca"; font-family: FontAwesome, sans-serif; color: #6366f1; } 
.sb-faq summary::before { content: "\f059"; font-family: FontAwesome, sans-serif; color: #8b5cf6; } 
.sb-tldr .sb-title::before { content: "\f0e7"; font-family: FontAwesome, sans-serif; color: #3b82f6; } 
.sb-pros .sb-title::before { content: "\f058"; font-family: FontAwesome, sans-serif; color: #10b981; } 
.sb-cons .sb-title::before { content: "\f057"; font-family: FontAwesome, sans-serif; color: #ef4444; } 

.sb-toc-title::before, .sb-title::before, .sb-faq summary::before { display: inline-flex !important; justify-content: center !important; align-items: center !important; width: 24px !important; height: 24px !important; font-size: 16px !important; margin-right: 12px !important; flex-shrink: 0 !important; }
.sb-content ul, .sb-toc ul { margin: 0; padding: 0 0 0 20px; list-style: disc; }
.sb-content li, .sb-toc li { margin-bottom: 8px; }

.sb-faq { margin: 25px 0; }
.sb-faq details { padding: 0; margin-bottom: 15px; } 
.sb-faq summary { padding: 20px 25px; margin: 0; cursor: pointer; outline: none; border-bottom: 1px solid transparent; }
.sb-faq details[open] summary { border-bottom-color: #e2e8f0; margin-bottom: 15px; } 
.sb-faq .sb-faq-body { padding: 0 25px 20px 61px; }

/* HowTo Шаги */
.sb-howto-step { margin: 25px 0; padding: 20px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.sb-howto-header { display: flex; align-items: center; margin-bottom: 15px; }
.sb-howto-badge { background: #10b981; color: #ffffff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; margin-right: 15px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(16,185,129,0.3); }
.sb-howto-title { margin: 0; font-size: 18px; font-weight: 800; color: #1e293b; }
.sb-howto-body { padding-left: 47px; }
.sb-howto-img { margin-bottom: 15px; border-radius: 6px; max-width: 100%; border: 1px solid #e2e8f0; }
.sb-howto-text { font-size: 15px; line-height: 1.6; color: #333; }
@media (max-width: 767px) {
    .sb-howto-body { padding-left: 0; margin-top: 15px; }
}

/* Звездный рейтинг */
.xl-star-rating { display: inline-block; direction: rtl; font-size: 26px; padding-top: 2px; }
.xl-star-rating input[type="radio"] { display: none; }
.xl-star-rating label { color: #dddddd; cursor: pointer; margin: 0 2px; transition: color 0.2s ease-in-out; }
.xl-star-rating label:hover, .xl-star-rating label:hover ~ label, .xl-star-rating input[type="radio"]:checked ~ label { color: #ffb300; }

a.xl-auto-link { border-bottom: 1px dashed #1e91cf; text-decoration: none; color: inherit; transition: 0.2s; }
a.xl-auto-link:hover { color: #1e91cf; border-bottom: 1px solid #1e91cf; }

/* ========================================================
   XL Articles - Components
   ======================================================== */
.xl-video-wrapper { margin: 30px 0; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.xl-related-intext { margin: 25px 0; padding: 15px; background: #f4f7f6; border-left: 4px solid #1e91cf; border-radius: 4px; display: flex; align-items: center; gap: 15px; }
.xl-related-intext img { border-radius: 4px; }
.xl-related-intext .xl-related-label { display: block; font-size: 12px; color: #777; text-transform: uppercase; margin-bottom: 5px; font-weight: bold; }
.xl-related-intext .xl-related-title { font-size: 16px; font-weight: bold; color: #333; text-decoration: none; }

.xl-intext-product { display: flex; align-items: center; gap: 20px; margin: 35px 0; padding: 20px; border: 1px solid #e1e8ed; border-radius: 8px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.03); flex-wrap: wrap; box-sizing: border-box; }
.xl-intext-product .xl-prod-img { flex-shrink: 0; width: 120px; text-align: center; }
.xl-intext-product .xl-prod-img img { border-radius: 4px; margin: 0 auto; }
.xl-intext-product .xl-prod-info { flex-grow: 1; min-width: 200px; }
.xl-intext-product .xl-prod-label { font-size: 12px; color: #1e91cf; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; }
.xl-intext-product .xl-prod-title { font-size: 16px; font-weight: bold; color: #333; text-decoration: none; display: block; margin-bottom: 10px; line-height: 1.4; }
.xl-intext-product .xl-prod-price { margin-bottom: 15px; font-weight: bold; font-size: 20px; color: #333; }
.xl-intext-product .xl-prod-special { color: #e74c3c; font-weight: bold; font-size: 20px; }
.xl-intext-product .xl-prod-old { color: #999; font-size: 14px; margin-left: 5px; text-decoration: line-through; }
.xl-intext-product .xl-btn-cart { border-radius: 4px; padding: 8px 20px; font-weight: bold; outline: none; }

.xl-coupon-box { margin: 40px 0 30px; padding: 30px 20px; background: linear-gradient(135deg, #fffdf5 0%, #fff 100%); border: 2px dashed #f5a623; border-radius: 8px; text-align: center; position: relative; box-shadow: 0 10px 20px rgba(245, 166, 35, 0.05); box-sizing: border-box; }
.xl-coupon-box .fa-gift { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 28px; color: #f5a623; background: #fff; padding: 0 15px; }
.xl-coupon-box h4 { margin-top: 10px; color: #333; font-weight: 800; font-size: 22px; }
.xl-coupon-box p { color: #666; font-size: 15px; margin-bottom: 20px; max-width: 450px; margin-left: auto; margin-right: auto; }

.xl-shortcode-carousel { margin: 35px 0; padding: 20px; background: #fafafa; border-radius: 8px; border: 1px solid #eee; }
.xl-shortcode-carousel h4 { font-weight:bold; margin-top:0; margin-bottom:20px; text-transform:uppercase; font-size:14px; color:#1e91cf; }
.xl-shortcode-carousel .item { background:#fff; border: 1px solid #e1e8ed; padding: 15px 10px; border-radius: 6px; margin: 5px; }
.xl-shortcode-carousel .caption a { font-size: 13px; font-weight: bold; color: #333; display:block; line-height:1.3; }
.xl-shortcode-carousel .price { margin-top:10px; font-weight:bold; font-size:16px; }
.xl-shortcode-carousel .price-new { color: #e74c3c; font-weight:bold; font-size:16px; }
.xl-shortcode-carousel .price-old { color: #999; font-size:12px; text-decoration: line-through; margin-left: 5px; }
.xl-shortcode-carousel .owl-buttons div { position:absolute; top:35%; opacity:0.5; color:#999; margin:0; padding:0; background:none; transition:0.2s; }
.xl-shortcode-carousel .owl-buttons div:hover { opacity:1; color:#1e91cf; }
.xl-shortcode-carousel .owl-buttons .owl-prev { left:-10px; }
.xl-shortcode-carousel .owl-buttons .owl-next { right:-10px; }
.xl-shortcode-carousel .owl-buttons i { font-size: 30px; }

/* Прогресс бар чтения */
.xl-reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background: #1e91cf; z-index: 9999; transition: width 0.1s; }

/* Цитаты и Источники */
.xl-article-citations { margin: 30px 0; padding: 20px; background: #fdfdfd; border-radius: 6px; border: 1px dashed #ccc; box-sizing: border-box; }
.xl-article-citations-title { font-weight: bold; font-size: 16px; margin-bottom: 10px; color: #555; }
.xl-article-citations ul { margin: 0; padding-left: 20px; font-size: 14px; word-break: break-all; }
.xl-article-citations a { color: #1e91cf; }

/* Голосование за статью */
.xl-article-vote { margin: 30px 0; padding: 20px; text-align: center; background: #fafafa; border-radius: 6px; border: 1px solid #eee; box-sizing: border-box; }
.xl-article-vote-title { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 15px; }
.xl-btn-vote { margin: 0 5px; border-radius: 20px; padding: 6px 20px; transition: 0.2s; }
.xl-btn-vote .badge { background: #fff; margin-left: 5px; border: 1px solid #ddd; }
.xl-btn-vote[data-type="like"] .badge { color: #3c763d; }
.xl-btn-vote[data-type="dislike"] .badge { color: #a94442; }

/* Профиль Автора (Карточка статьи) */
.xl-author-box { margin-top: 40px; padding: 25px; background: #fff; border: 1px solid #e1e8ed; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; align-items: flex-start; gap: 20px; box-sizing: border-box; }
.xl-author-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #f4f7f6; }
.xl-author-avatar-letter { width: 80px; height: 80px; border-radius: 50%; background-color: #1e91cf; color: #fff; text-align: center; line-height: 80px; font-size: 32px; font-weight: bold; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1); }
.xl-author-label { font-size: 11px; color: #1e91cf; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; display: block; margin-bottom: 2px; }
.xl-author-name { margin: 0; font-weight: bold; color: #222; font-size: 18px; }
.xl-author-meta { font-size: 12px; color: #777; margin-top: 4px; }
.xl-author-expertise { font-size: 12px; color: #1e91cf; margin-top: 6px; }
.xl-author-socials a { display: inline-block; margin-right: 12px; color: #1e91cf; font-size: 18px; transition: 0.2s; }
.xl-author-socials a:hover { color: #0d6ba1; }
.xl-author-bio { color: #555; font-size: 14px; line-height: 1.6; margin-top: 5px; margin-bottom: 0; }

/* Профиль Автора Hero (Список статей) */
.xl-author-hero { position: relative; background: linear-gradient(135deg, #f6f9fc 0%, #e3ecf5 100%); border-radius: 16px; padding: 50px 40px; margin-bottom: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.03); overflow: hidden; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.xl-hero-bg-1 { position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255,255,255,0.4); border-radius: 50%; filter: blur(30px); }
.xl-hero-bg-2 { position: absolute; bottom: -30px; left: 20%; width: 150px; height: 150px; background: rgba(30, 145, 207, 0.05); border-radius: 50%; filter: blur(20px); }
.xl-hero-avatar-wrapper { flex-shrink: 0; text-align: center; position: relative; z-index: 2; }
.xl-hero-avatar-img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.xl-hero-avatar-letter { width: 160px; height: 160px; border-radius: 50%; background: linear-gradient(135deg, #1e91cf 0%, #0d6ba1 100%); color: #fff; text-align: center; line-height: 150px; font-size: 64px; font-weight: bold; border: 6px solid #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin: 0 auto; }
.xl-hero-badge { position: absolute; bottom: 10px; right: 10px; background: #fff; border-radius: 50%; padding: 2px; }
.xl-hero-badge i { color: #1e91cf; font-size: 24px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.xl-hero-content { flex-grow: 1; min-width: 280px; position: relative; z-index: 2; }
.xl-hero-expert-label { display: inline-block; padding: 4px 12px; background: rgba(30, 145, 207, 0.1); color: #1e91cf; font-size: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: 1.5px; border-radius: 20px; margin-bottom: 15px; }
.xl-hero-name { margin: 0 0 10px 0; font-weight: 900; color: #1a202c; font-size: 32px; letter-spacing: -0.5px; }
.xl-hero-bio { color: #4a5568; font-size: 16px; line-height: 1.8; margin: 0; max-width: 800px; }
.xl-hero-bio-empty { color: #a0aec0; font-style: italic; font-size: 15px; margin: 0; }

/* Облако тегов */
.xl-tag-cloud { margin-bottom: 30px; text-align: center; }
.xl-tag-cloud-title { font-size: 13px; text-transform: uppercase; color: #999; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; }
.xl-tag-cloud a { margin: 3px; border-radius: 20px; color: #1e91cf; border: 1px solid #1e91cf; background: transparent; transition: 0.2s; }
.xl-tag-cloud a:hover { background: #1e91cf; color: #fff; }

/* Комментарии */
.xl-comment-item { border-bottom: 1px solid #f0f0f0; padding: 20px 0; margin-bottom: 10px; box-sizing: border-box; }
.xl-comment-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: #00a046; color: #fff; text-align: center; line-height: 48px; font-size: 20px; font-weight: bold; margin-right: 15px; flex-shrink: 0; }
.xl-reply-avatar { width: 24px; height: 24px; border-radius: 50%; background-color: #78909c; color: #fff; text-align: center; line-height: 24px; font-size: 12px; font-weight: bold; margin-right: 10px; }
.xl-reply-avatar-admin { width: 24px; height: 24px; border-radius: 50%; background-color: #f5a623; color: #fff; text-align: center; line-height: 24px; font-size: 12px; margin-right: 10px; }
.xl-replies { margin-top: 15px; padding-left: 20px; border-left: 2px solid #e9e9e9; }
.xl-comment-form-box { background: #f9f9f9; padding: 25px; border-radius: 6px; margin-top: 40px; }