/**
 * Стили рекомендательных баннеров инструментов
 * Для buyhold.ru
 */

/* ===========================================
   ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ CPT
   =========================================== */

/* Ширина баннера */
.view-content .ib-tool-banner,
.view-content .ib-tools-combined,
.expert-review-content .ib-tool-banner,
.expert-review-content .ib-tools-combined,
.expert-review-page .expert-review-content .ib-tool-banner,
.expert-review-page .expert-review-content .ib-tools-combined {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Побеждаем cpt-styles.css с аналогичными :not() селекторами */
.expert-review-page .expert-review-content > div:not([class*="service"]):not([class*="block"]):not([class*="premium"]):not([class*="characteristics"]).ib-tool-banner p,
.expert-review-page .expert-review-content > div.ib-tool-banner p,
.expert-review-page .expert-review-content div.ib-tool-banner p.ib-tool-banner__desc,
.expert-review-page .expert-review-content .ib-tool-banner p.ib-tool-banner__desc {
    color: rgba(255, 255, 255, 0.85) !important;
}

.expert-review-page .expert-review-content > div:not([class*="service"]):not([class*="block"]):not([class*="premium"]):not([class*="characteristics"]).ib-tool-banner h3,
.expert-review-page .expert-review-content div.ib-tool-banner h3.ib-tool-banner__title {
    color: #ffffff !important;
}

.expert-review-page .expert-review-content > div:not([class*="service"]):not([class*="block"]):not([class*="premium"]):not([class*="characteristics"]).ib-tool-banner ul li,
.expert-review-page .expert-review-content div.ib-tool-banner ul.ib-tool-banner__features li {
    color: rgba(255, 255, 255, 0.6) !important;
}

.expert-review-page .expert-review-content div.ib-tool-banner ul.ib-tool-banner__features li::before {
    color: #95ce5a !important;
}

.expert-review-page .expert-review-content div.ib-tool-banner--journal ul.ib-tool-banner__features li::before {
    color: #64b5f6 !important;
}

/* Комбинированный баннер */
.expert-review-page .expert-review-content > div:not([class*="service"]):not([class*="block"]):not([class*="premium"]):not([class*="characteristics"]).ib-tools-combined p,
.expert-review-page .expert-review-content div.ib-tools-combined p {
    color: rgba(255, 255, 255, 0.6) !important;
}

.expert-review-page .expert-review-content div.ib-tools-combined h2 {
    color: #ffffff !important;
}

.expert-review-page .expert-review-content div.ib-tools-combined .ib-tools-combined__card-title {
    color: #ffffff !important;
}

/* Сброс стилей статьи внутри баннеров */
.entry-content .ib-tool-banner,
.entry-content .ib-tool-banner *,
.entry-content .ib-tools-combined,
.entry-content .ib-tools-combined *,
article .ib-tool-banner,
article .ib-tool-banner *,
article .ib-tools-combined,
article .ib-tools-combined *,
.view-content .ib-tool-banner,
.view-content .ib-tool-banner *,
.view-content .ib-tools-combined,
.view-content .ib-tools-combined * {
    text-align: left;
    text-indent: 0;
    text-justify: auto;
    word-spacing: normal;
}

.entry-content .ib-tool-banner__desc,
.entry-content .ib-tool-banner__title,
.entry-content .ib-tool-banner__features li,
.entry-content .ib-tools-combined__card-text p,
.entry-content .ib-tools-combined__card-title,
article .ib-tool-banner__desc,
article .ib-tool-banner__title,
article .ib-tools-combined__card-text p,
.view-content .ib-tool-banner__desc,
.view-content .ib-tool-banner__title,
.view-content .ib-tool-banner__features li,
.view-content .ib-tools-combined__card-text p,
.view-content .ib-tools-combined__card-title {
    text-align: left !important;
    text-indent: 0 !important;
}

.entry-content .ib-tools-combined__header,
.entry-content .ib-tools-combined__title,
.entry-content .ib-tools-combined__subtitle,
.view-content .ib-tools-combined__header,
.view-content .ib-tools-combined__title,
.view-content .ib-tools-combined__subtitle {
    text-align: center !important;
}

/* ===========================================
   ОДИНОЧНЫЕ БАННЕРЫ (живой график, журнал)
   =========================================== */

.ib-tool-banner {
    position: relative;
    margin: 2rem auto !important;
    max-width: 900px !important;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1d24 0%, #252a33 50%, #1a1d24 100%);
    border: 1px solid rgba(149, 206, 90, 0.2);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Hover эффект */
.ib-tool-banner:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 206, 90, 0.4);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 20px rgba(149, 206, 90, 0.1);
}

/* Фоновый паттерн — сетка со свечами */
.ib-tool-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.08;
    background-image: 
        linear-gradient(rgba(149, 206, 90, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 206, 90, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, transparent 20%, rgba(149, 206, 90, 0.4) 20%, rgba(149, 206, 90, 0.4) 21%, transparent 21%),
        linear-gradient(90deg, transparent 35%, rgba(239, 83, 80, 0.4) 35%, rgba(239, 83, 80, 0.4) 36%, transparent 36%),
        linear-gradient(90deg, transparent 50%, rgba(149, 206, 90, 0.4) 50%, rgba(149, 206, 90, 0.4) 51%, transparent 51%),
        linear-gradient(90deg, transparent 65%, rgba(149, 206, 90, 0.4) 65%, rgba(149, 206, 90, 0.4) 66%, transparent 66%),
        linear-gradient(90deg, transparent 80%, rgba(239, 83, 80, 0.4) 80%, rgba(239, 83, 80, 0.4) 81%, transparent 81%);
    background-size: 
        40px 40px,
        40px 40px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
    pointer-events: none;
}

/* Затемнение по краям фона */
.ib-tool-banner__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(26, 29, 36, 0.9) 0%,
        rgba(26, 29, 36, 0.4) 50%,
        rgba(26, 29, 36, 0.9) 100%
    );
}

/* Зелёное свечение справа (в районе кнопки) */
.ib-tool-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(149, 206, 90, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.ib-tool-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
}

/* Сброс стилей статьи внутри баннера */
.ib-tool-banner__content,
.ib-tool-banner__content * {
    text-align: left;
    text-justify: auto;
    word-spacing: normal;
}

/* Иконка */
.ib-tool-banner__icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(149, 206, 90, 0.2) 0%, rgba(149, 206, 90, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(149, 206, 90, 0.3);
    color: #95ce5a;
}

.ib-tool-banner__icon svg {
    width: 48px;
    height: 48px;
}

/* Текстовый блок */
.ib-tool-banner__text {
    flex: 1;
    min-width: 0;
}

.ib-tool-banner__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
    line-height: 1.3;
    text-align: left !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
}

.ib-tool-banner__desc {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.5;
    text-align: left !important;
    text-indent: 0 !important;
    text-justify: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Список фич */
.ib-tool-banner__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ib-tool-banner__features li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: left !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

.ib-tool-banner__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #95ce5a;
    font-weight: 600;
}

/* Кнопка */
.ib-tool-banner__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg, #95ce5a 0%, #7ab842 100%);
    color: #1a1d24;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(149, 206, 90, 0.3);
}

/* Бейдж "Бесплатно" */
.ib-tool-banner__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.35rem 0.75rem;
    background: rgba(149, 206, 90, 0.15);
    border: 1px solid rgba(149, 206, 90, 0.3);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #95ce5a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.ib-tool-banner__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(149, 206, 90, 0.4);
    color: #1a1d24;
    text-decoration: none;
}

.ib-tool-banner__btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.ib-tool-banner__btn:hover svg {
    transform: translateX(4px);
}

/* ===========================================
   МОДИФИКАТОР: ЖУРНАЛ СДЕЛОК (голубой акцент)
   =========================================== */

/* Голубое свечение для журнала (в районе кнопки) */
.ib-tool-banner--journal::before {
    background: radial-gradient(ellipse, rgba(100, 181, 246, 0.12) 0%, transparent 70%);
}

.ib-tool-banner--journal .ib-tool-banner__icon {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.2) 0%, rgba(100, 181, 246, 0.05) 100%);
    border-color: rgba(100, 181, 246, 0.3);
    color: #64b5f6;
}

.ib-tool-banner--journal .ib-tool-banner__features li::before {
    color: #64b5f6;
}

.ib-tool-banner--journal:hover {
    border-color: rgba(100, 181, 246, 0.4);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 20px rgba(100, 181, 246, 0.1);
}

/* ===========================================
   КОМБИНИРОВАННЫЙ БАННЕР (оба инструмента)
   =========================================== */

.ib-tools-combined {
    position: relative;
    margin: 2rem auto !important;
    max-width: 900px !important;
    padding: 2rem;
    background: 
        radial-gradient(ellipse at 80% 50%, rgba(149, 206, 90, 0.12) 0%, transparent 50%),
        linear-gradient(135deg, #1a1d24 0%, #252a33 100%);
    border-radius: 16px;
    border: 1px solid rgba(149, 206, 90, 0.15);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

/* Фоновый паттерн для комбинированного баннера */
.ib-tools-combined::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.06;
    background-image: 
        linear-gradient(rgba(149, 206, 90, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 206, 90, 0.3) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* Затемнение по краям */
.ib-tools-combined::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(26, 29, 36, 0.8) 0%,
        rgba(26, 29, 36, 0.3) 50%,
        rgba(26, 29, 36, 0.8) 100%
    );
    pointer-events: none;
}

.ib-tools-combined:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 206, 90, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(149, 206, 90, 0.08);
}

.ib-tools-combined__header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Сброс стилей статьи внутри комбинированного баннера */
.ib-tools-combined,
.ib-tools-combined * {
    text-justify: auto;
    word-spacing: normal;
}

.ib-tools-combined__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
}

.ib-tools-combined__title svg {
    color: #95ce5a;
}

.ib-tools-combined__subtitle {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6) !important;
}

.ib-tools-combined__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ib-tools-combined__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

.ib-tools-combined__card:hover {
    transform: translateY(-2px);
    text-decoration: none !important;
}

.ib-tools-combined__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ib-tools-combined__card--chart::before {
    background: linear-gradient(135deg, rgba(149, 206, 90, 0.1) 0%, transparent 100%);
}

.ib-tools-combined__card--journal::before {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.1) 0%, transparent 100%);
}

.ib-tools-combined__card--chart:hover {
    border-color: rgba(149, 206, 90, 0.3);
}

.ib-tools-combined__card--journal:hover {
    border-color: rgba(100, 181, 246, 0.3);
}

.ib-tools-combined__card:hover::before {
    opacity: 1;
}

.ib-tools-combined__card-icon {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.ib-tools-combined__card--chart .ib-tools-combined__card-icon {
    background: rgba(149, 206, 90, 0.15);
    color: #95ce5a;
}

.ib-tools-combined__card--journal .ib-tools-combined__card-icon {
    background: rgba(100, 181, 246, 0.15);
    color: #64b5f6;
}

.ib-tools-combined__card-icon svg {
    width: 32px;
    height: 32px;
}

.ib-tools-combined__card-text {
    position: relative;
    flex: 1;
    min-width: 0;
}

.ib-tools-combined__card-title {
    display: block;
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff !important;
    text-align: left !important;
    text-indent: 0 !important;
}

.ib-tools-combined__card-text p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.4;
    text-align: left !important;
    text-indent: 0 !important;
}

.ib-tools-combined__card-arrow {
    position: relative;
    flex-shrink: 0;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease;
}

.ib-tools-combined__card--chart:hover .ib-tools-combined__card-arrow {
    color: #95ce5a;
    transform: translateX(4px);
}

.ib-tools-combined__card--journal:hover .ib-tools-combined__card-arrow {
    color: #64b5f6;
    transform: translateX(4px);
}

/* ===========================================
   АДАПТИВНОСТЬ
   =========================================== */

@media (max-width: 900px) {
    .ib-tool-banner__content {
        flex-direction: column;
        text-align: center;
    }
    
    .ib-tool-banner__features {
        justify-content: center;
    }
    
    .ib-tools-combined__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ib-tool-banner__content {
        padding: 1.5rem;
    }
    
    .ib-tool-banner__icon {
        width: 64px;
        height: 64px;
    }
    
    .ib-tool-banner__icon svg {
        width: 36px;
        height: 36px;
    }
    
    .ib-tool-banner__title {
        font-size: 1.25rem;
    }
    
    .ib-tool-banner__desc {
        font-size: 0.9rem;
    }
    
    .ib-tool-banner__features {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .ib-tool-banner__btn {
        width: 100%;
        justify-content: center;
    }
    
    .ib-tools-combined {
        padding: 1.5rem;
    }
    
    .ib-tools-combined__card {
        padding: 1rem;
    }
}