/* ============================================
   CONTENT BLOCKS - Визуальные стили универсальных блоков
   Version: 6.0.0 - REFACTORED: Приведено к стандарту casino-blocks.css v5.0.0
   Description: Визуальные стили для всех универсальных блоков контента (цвета, фоны, эффекты, типографика)
   Dependencies: theme-vars.css, buttons.css
   Changelog:
   - v6.0.0: REFACTORED - Полная модернизация под стандарт casino/slot/bonus blocks
   - v5.0.0: LEGACY - Устаревшая версия с несовместимыми стилями
   ============================================ */



/* =============================================================================================================================
   БАЗОВЫЙ КОНТЕЙНЕР БЛОКА (content-block)
   -CONTENT BLOCKS (ГИБКИЙ КОНТЕНТ)
	Текстовый блок, Еще
   -CONTENT BLOCKS (slot_)
	О слоте, Символы Слота, Интерфейс слота, Ещё о, Текстовый блок.
   -CONTENT BLOCKS (casino_)
	Официальный сайт, История казино, Интерфейс казино, Личный кабинет, Регистрация и верификация казино, Провайдеры казино, Игры и Демо-режимы, Мобильные приложения, Способы оплаты, Служба поддержки, Ещё о, Текстовый блок.
   -CONTENT BLOCKS (bonus_)
	Текстовый блок, Ещё о.
   ============================================================================================================================= */
/*.flexible-block,*/
.content-block {
    background: var(--bg-blok);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    padding-bottom: 20px;
    margin-bottom: var(--spacing-10);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
    border: 1px solid var(--border-color);
}

/*.flexible-block:hover,*/
.content-block:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Заголовки блоков используют шрифт заголовков */
/*.flexible-block h2,
.flexible-block h3,
.flexible-block h4,*/
.content-block h2,
.content-block h3,
.content-block h4 {
    font-family: var(--font-headings);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-bold);
}

/*.flexible-block h2,*/
.content-block h2 {
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
    text-transform: uppercase;
    border-bottom: 3px solid var(--info);
    padding-bottom: var(--spacing-sm);
}

/*.flexible-block h3,*/
.content-block h3 {
    font-size: var(--h3-size);
    line-height: var(--h2-line-height);
    color: var(--info);
}

/*.flexible-block h4,*/
.content-block h4 {
    font-size: var(--h4-size);
    line-height: var(--h2-line-height);
}

/* Основной текст использует основной шрифт - светлый на темном фоне */
/*.flexible-block p,
.flexible-block li,*/
.content-block p,
.content-block li {
    font-family: var(--font-primary);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}




/* =============================================================================================================================
   ВВЕДЕНИЕ (intro-block)
   ЗАКЛЮЧЕНИЕ (conclusion-block)
   
   -CONTENT BLOCKS (ГИБКИЙ КОНТЕНТ)
	Введение, Заключение
   -CONTENT BLOCKS (slot_)
	Введение, Заключение
   -CONTENT BLOCKS (casino_)
	Введение, Заключение
   -CONTENT BLOCKS (bonus_)
	Введение, Заключение
   ============================================================================================================================= */
.intro-block,
.conclusion-block {
    /*background: linear-gradient(135deg, 
        var(--bg-secondary) 0%, 
        var(--bg-tertiary) 100%
    );*/
    background: var(--bg-blok);
    border-left: 4px solid var(--primary);
}

.intro-title {
    font-family: var(--font-headings);
    font-size: var(--h2-size);
    font-weight: var(--font-bold);
    line-height: var(--h2-line-height);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.intro-content {
    color: var(--text-secondary);
    font-size: var(--font-base);
    line-height: var(--line-height-relaxed);
}

/* ============================================
   3. TEXT BLOCK (Текстовый блок)
   ============================================ */
.text-block-title {
    font-family: var(--font-headings);
    font-size: var(--h2-size);
    font-weight: var(--font-bold);
    line-height: var(--h2-line-height);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.text-block-content {
    font-size: var(--font-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

/* ============================================
   4. MORE BLOCK (Ещё о...)
   ============================================
.more-block {
    background: linear-gradient(135deg, 
        var(--bg-secondary) 0%, 
        var(--bg-tertiary) 100%
    );
}

.more-block-title {
    font-family: var(--font-headings);
    font-size: var(--h2-size);
    font-weight: var(--font-bold);
    line-height: var(--h2-line-height);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.more-block-content {
    font-size: var(--font-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
} */

/* ============================================
   5. PROS AND CONS BLOCK (Преимущества/Недостатки)
   ============================================ */
.pros-cons-block {
    /*background: transparent;*/
    background: var(--bg-blok);
}

.pros-cons-block__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin: var(--spacing-lg) 0;
}

/* Секции преимуществ и недостатков */
.pros-section,
.cons-section {
    background: var(--bg-tertiary);
    padding: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.pros-section {
    border-left: 3px solid var(--primary);
}

.cons-section {
    border-left: 3px solid var(--text-on-red);
}

.pros-heading,
.cons-heading {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.pros-heading {
    color: var(--info) !important;
}

.cons-heading {
    color: var(--text-on-red) !important;
}

.pros-cons-description p {
    color: var(--text-secondary);
}

.pros-heading i,
.cons-heading i {
    font-size: var(--font-xl);
}

/* ============================================
   PROS/CONS LISTS - Inline SVG Icons Support
   ============================================ */
.pros-cons-block .pros-list,
.pros-cons-block .cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Стили для inline SVG иконок */
.pros-cons-block .pros-cons-block__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: 0 !important;
    position: relative;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: var(--font-base);
    margin-bottom: 0 !important;
}

.pros-cons-block .pros-cons-block__item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

/* Преимущества - зелёные иконки */
.pros-cons-block .pros-cons-block__list--pros .pros-cons-block__item-icon {
    color: var(--primary);
}

/* Недостатки - красные иконки */
.pros-cons-block .pros-cons-block__list--cons .pros-cons-block__item-icon {
    color: var(--text-on-red);
}

.pros-cons-block .pros-cons-block__item-text {
    flex: 1;
    color: var(--text-secondary);
}

/* Убираем старые стили ::marker */
.pros-cons-block .pros-list li::marker,
.pros-cons-block .cons-list li::marker {
    display: none;
}

/* Совместимость со старым кодом */
.pros-cons-block .pros-list li:not(.pros-cons-block__item),
.pros-cons-block .cons-list li:not(.pros-cons-block__item) {
    padding: 6px 0;
    position: relative;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: var(--font-base);
    margin-bottom: 0 !important;
    list-style: decimal;
    padding-left: 20px;
}

.pros-cons-block .pros-list li:not(.pros-cons-block__item)::marker {
    color: var(--success);
    font-weight: var(--font-bold);
}

.pros-cons-block .cons-list li:not(.pros-cons-block__item)::marker {
    color: var(--error);
    font-weight: var(--font-bold);
}

/* ============================================
   6. CONCLUSION BLOCK (Заключение)
   ============================================
.conclusion-block {
    background: linear-gradient(135deg, 
        var(--bg-secondary) 0%, 
        var(--bg-tertiary) 100%
    );
    border-left: 4px solid var(--tertiary);
}

.conclusion-block__title {
    color: var(--tertiary);
    font-family: var(--font-headings);
    font-size: var(--h2-size);
    font-weight: var(--font-bold);
    line-height: var(--h2-line-height);
    margin-bottom: var(--spacing-md);
}

.conclusion-block .conclusion-block__text,
.conclusion-block .block-content {
    color: var(--text-secondary);
}

.conclusion-block h2 {
    color: var(--tertiary);
}

 */


/* ============================================
   10. КНОПКИ
   Сами стили кнопок управляются из buttons.css
   ============================================
.flexible-block .gt-button,
.content-block .gt-button {
    margin-top: var(--spacing-md);
}

.content-block__actions,
.intro-buttons-wrapper,
.text-block .gt-buttons-group,
.more-block .gt-buttons-group {
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
} */

/* ============================================
   11. ИЗОБРАЖЕНИЯ В БЛОКАХ
   ============================================ */
.flexible-block .block-image,
.content-block .block-image {
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-10);
}

.flexible-block .block-image-wrapper,
.content-block .block-image-wrapper,
.content-block__image-wrapper,
.intro-image-wrapper {
    margin-bottom: var(--spacing-10);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.content-block__image,
.intro-image {
    width: 100%;
    height: auto;
    display: block;
}

.content-block__image-caption,
.intro-image-caption {
    font-size: var(--font-sm);
    color: var(--text-tertiary);
    margin-top: var(--spacing-sm);
    text-align: center;
    font-style: italic;
}

.pag-width-7 {
    width: var(--pag-width-7) !important;
    height: auto;
    margin-bottom: var(--spacing-10);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   12. АДАПТИВНОСТЬ
   ============================================ */
@media (max-width: 768px) {
    .flexible-block,
    .content-block {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-10);
    }

    .pag-width-7 {
        width: 100% !important;
    }

    .flexible-block h2,
    .content-block h2,
    .intro-title,
    .text-block-title,
    .more-block-title,
    .conclusion-block__title,
    .review-block__title,
    .faq-block__title,
    .form-block__title {
        font-size: var(--h2-size-tablet);
    }
    
    .flexible-block h3,
    .content-block h3 {
        font-size: var(--h3-size-tablet);
    }
    
    .pros-heading,
    .cons-heading {
        font-size: var(--h3-size-tablet);
    }
    
    .pros-cons-block__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .review-block__avatar {
        width: 40px;
        height: 40px;
        font-size: var(--font-lg);
    }
}

@media (max-width: 480px) {
    .flexible-block,
    .content-block {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }
    
    .pag-width-7 {
        width: 100% !important;
    }
    
    .flexible-block h2,
    .content-block h2,
    .intro-title,
    .text-block-title,
    .more-block-title,
    .conclusion-block__title,
    .review-block__title,
    .faq-block__title,
    .form-block__title {
        font-size: var(--h2-size-mobile);
    }
    
    .flexible-block h3,
    .content-block h3 {
        font-size: var(--h3-size-mobile);
    }
    
    .pros-heading,
    .cons-heading {
        font-size: var(--h3-size-mobile);
    }
    
    .content-block__actions,
    .intro-buttons-wrapper,
    .text-block .gt-buttons-group,
    .more-block .gt-buttons-group {
        flex-direction: column;
    }
    
    .gt-button {
        width: 100%;
        justify-content: center;
    }
}