/* ============================================
   CDP HEADER STYLES - 17 CLEAN VARIANTS
   Всі варіанти зі світлим фоном
   ============================================ */

/* === БАЗОВІ ЕЛЕМЕНТИ === */

.ch-cdp-logo {
    width: 100% !important;
    height: auto !important;
    max-width: 120px !important;
    border-radius: 8px !important;
    display: block !important;
}

.ch-cdp-logo-placeholder {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
}

.ch-cdp-license-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-top: 8px !important;
}

.ch-cdp-license-badge svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

.ch-cdp-desc-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.ch-cdp-desc-text {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

.ch-cdp-bonus-amount {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #dc2626 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.ch-cdp-bonus-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
}

.ch-cdp-section-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.ch-cdp-about-icon {
    color: #3b82f6 !important;
}

.ch-cdp-bonus-icon {
    color: #dc2626 !important;
}

.ch-cdp-bonus-promo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    border: 2px dashed #f59e0b !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ch-cdp-bonus-promo:hover {
    background: linear-gradient(135deg, #fde68a, #fcd34d) !important;
    border-color: #d97706 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.ch-cdp-promo-icon {
    font-size: 16px !important;
}

.ch-cdp-promo-code {
    font-size: 14px !important;
    color: #78350f !important;
    letter-spacing: 1.5px !important;
    font-weight: 800 !important;
}

.ch-cdp-copy-icon {
    width: 18px !important;
    height: 18px !important;
    color: #f59e0b !important;
    transition: all 0.2s ease !important;
}

.ch-cdp-bonus-promo:hover .ch-cdp-copy-icon {
    color: #d97706 !important;
    transform: scale(1.1) !important;
}

.ch-cdp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    margin-top: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

.ch-cdp-btn:hover {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
}

@media (max-width: 768px) {
    .ch-cdp-header {
        grid-template-columns: 1fr !important;
    }
    .ch-cdp-btn {
        width: 100% !important;
    }
}

/* ============================================
   17 ВАРІАНТІВ - ВСІ ЗІ СВІТЛИМ ФОНОМ
   ============================================ */

/* ВАРІАНТ 1 - Classic Rounded */
.ch-cdp-header.ch-cdp-style-1 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fafafa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-1 .ch-cdp-logo-section {
    background: #fff !important;
    padding: 16px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-1 .ch-cdp-description-box {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
}

.ch-cdp-header.ch-cdp-style-1 .ch-cdp-bonus-section {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 2 - Left Accent Line */
.ch-cdp-header.ch-cdp-style-2 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fafafa !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-2 .ch-cdp-logo-section {
    background: #fff !important;
    padding: 16px !important;
    border-radius: 6px !important;
    border: 1px solid #e5e5e5 !important;
    border-left: 3px solid #3b82f6 !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-2 .ch-cdp-description-box {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 6px !important;
    border: 1px solid #e5e5e5 !important;
    border-left: 3px solid #8b5cf6 !important;
}

.ch-cdp-header.ch-cdp-style-2 .ch-cdp-bonus-section {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 6px !important;
    border: 1px solid #e5e5e5 !important;
    border-left: 3px solid #dc2626 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 3 - Outlined Only */
.ch-cdp-header.ch-cdp-style-3 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-3 .ch-cdp-logo-section {
    background: transparent !important;
    padding: 16px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-3 .ch-cdp-description-box {
    background: transparent !important;
    padding: 18px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
}

.ch-cdp-header.ch-cdp-style-3 .ch-cdp-bonus-section {
    background: transparent !important;
    padding: 18px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 4 - Soft Shadows */
.ch-cdp-header.ch-cdp-style-4 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 14px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-4 .ch-cdp-logo-section {
    background: #fafafa !important;
    padding: 16px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-4 .ch-cdp-description-box {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.ch-cdp-header.ch-cdp-style-4 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 5 - Two Column Layout */
.ch-cdp-header.ch-cdp-style-5 {
    display: grid !important;
    grid-template-columns: 1fr 240px !important;
    gap: 24px !important;
    padding: 24px !important;
    background: #fafafa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-5 .ch-cdp-left-block {
    background: #fff !important;
    padding: 20px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    display: flex;
    gap: 20px;
}

.ch-cdp-header.ch-cdp-style-5 .ch-cdp-logo-section {
    flex-shrink: 0;
}

.ch-cdp-header.ch-cdp-style-5 .ch-cdp-description-box {
    flex: 1;
    min-width: 0;
}

.ch-cdp-header.ch-cdp-style-5 .ch-cdp-bonus-section {
    background: #fff !important;
    padding: 20px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 6 - Top Border Accent */
.ch-cdp-header.ch-cdp-style-6 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-6 .ch-cdp-logo-section {
    background: #fafafa !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border-top: 3px solid #3b82f6 !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-6 .ch-cdp-description-box {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 8px !important;
    border-top: 3px solid #8b5cf6 !important;
}

.ch-cdp-header.ch-cdp-style-6 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 8px !important;
    border-top: 3px solid #dc2626 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 7 - Gradient Border */
.ch-cdp-header.ch-cdp-style-7 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 2px solid transparent !important;
    background-image: linear-gradient(white, white), linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-7 .ch-cdp-logo-section,
.ch-cdp-header.ch-cdp-style-7 .ch-cdp-description-box,
.ch-cdp-header.ch-cdp-style-7 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 8px !important;
    border: 1px solid #f0f0f0 !important;
}

.ch-cdp-header.ch-cdp-style-7 .ch-cdp-logo-section {
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-7 .ch-cdp-bonus-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 8 - Stacked Vertical */
.ch-cdp-header.ch-cdp-style-8 {
    display: grid !important;
    grid-template-columns: 1fr 240px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fafafa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-8 .ch-cdp-left-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ch-cdp-header.ch-cdp-style-8 .ch-cdp-logo-section,
.ch-cdp-header.ch-cdp-style-8 .ch-cdp-description-box {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
}

.ch-cdp-header.ch-cdp-style-8 .ch-cdp-logo-section {
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-8 .ch-cdp-bonus-section {
    background: #fff !important;
    padding: 20px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 9 - Dashed Borders */
.ch-cdp-header.ch-cdp-style-9 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fafafa !important;
    border: 1px dashed #d0d0d0 !important;
    border-radius: 10px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-9 .ch-cdp-logo-section {
    background: #fff !important;
    padding: 16px !important;
    border-radius: 10px !important;
    border: 1px dashed #3b82f6 !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-9 .ch-cdp-description-box {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px dashed #8b5cf6 !important;
}

.ch-cdp-header.ch-cdp-style-9 .ch-cdp-bonus-section {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px dashed #dc2626 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 10 - Clean Minimal */
.ch-cdp-header.ch-cdp-style-10 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-10 .ch-cdp-logo-section,
.ch-cdp-header.ch-cdp-style-10 .ch-cdp-description-box,
.ch-cdp-header.ch-cdp-style-10 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #f0f0f0 !important;
}

.ch-cdp-header.ch-cdp-style-10 .ch-cdp-logo-section {
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-10 .ch-cdp-bonus-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 11 - Light Shadow */
.ch-cdp-header.ch-cdp-style-11 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-11 .ch-cdp-logo-section,
.ch-cdp-header.ch-cdp-style-11 .ch-cdp-description-box,
.ch-cdp-header.ch-cdp-style-11 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.ch-cdp-header.ch-cdp-style-11 .ch-cdp-logo-section {
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-11 .ch-cdp-bonus-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 12 - Compact Inline */
.ch-cdp-header.ch-cdp-style-12 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 20px !important;
    background: #fafafa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-12 .ch-cdp-logo-section {
    background: #fff !important;
    padding: 14px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-12 .ch-cdp-description-box {
    background: #fff !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e5e5 !important;
}

.ch-cdp-header.ch-cdp-style-12 .ch-cdp-bonus-section {
    background: #fff !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 13 - Card Stack */
.ch-cdp-header.ch-cdp-style-13 {
    display: grid !important;
    grid-template-columns: 140px 1fr 240px !important;
    gap: 16px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-13 .ch-cdp-logo-section,
.ch-cdp-header.ch-cdp-style-13 .ch-cdp-description-box {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.ch-cdp-header.ch-cdp-style-13 .ch-cdp-logo-section {
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-13 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 20px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 14 - Highlighted */
.ch-cdp-header.ch-cdp-style-14 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 140px 1fr 240px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-14::before {
    content: '' !important;
    position: absolute !important;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    opacity: 0.1;
    border-radius: 0 12px 0 100%;
}

.ch-cdp-header.ch-cdp-style-14 .ch-cdp-logo-section,
.ch-cdp-header.ch-cdp-style-14 .ch-cdp-description-box {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    position: relative;
    z-index: 1;
}

.ch-cdp-header.ch-cdp-style-14 .ch-cdp-logo-section {
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-14 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 20px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

/* ВАРІАНТ 15 - Split Layout */
.ch-cdp-header.ch-cdp-style-15 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 140px 1fr 240px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: linear-gradient(to right, #fafafa 50%, #fff 50%) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-15 .ch-cdp-logo-section {
    background: #fff !important;
    padding: 16px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ch-cdp-header.ch-cdp-style-15 .ch-cdp-description-box {
    background: rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(10px);
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    position: relative;
    z-index: 1;
}

.ch-cdp-header.ch-cdp-style-15 .ch-cdp-bonus-section {
    background: #fff !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

/* ВАРІАНТ 16 - Bordered Sections */
.ch-cdp-header.ch-cdp-style-16 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-16 .ch-cdp-logo-section {
    background: #fafafa !important;
    padding: 16px !important;
    border-radius: 10px !important;
    border: 2px solid #3b82f6 !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-16 .ch-cdp-description-box {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 2px solid #8b5cf6 !important;
}

.ch-cdp-header.ch-cdp-style-16 .ch-cdp-bonus-section {
    background: #fafafa !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 2px solid #dc2626 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВАРІАНТ 17 - Professional */
.ch-cdp-header.ch-cdp-style-17 {
    display: grid !important;
    grid-template-columns: 140px 1fr 220px !important;
    gap: 24px !important;
    padding: 28px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    margin-bottom: 40px !important;
}

.ch-cdp-header.ch-cdp-style-17 .ch-cdp-logo-section {
    background: #f9fafb !important;
    padding: 18px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    text-align: center;
}

.ch-cdp-header.ch-cdp-style-17 .ch-cdp-description-box {
    background: #f9fafb !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
}

.ch-cdp-header.ch-cdp-style-17 .ch-cdp-bonus-section {
    background: #f9fafb !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* ============================================
   MOBILE RESPONSIVE - ВСІ СТИЛІ В 1 КОЛОНКУ
   ============================================ */

/* === TABLET (768px - 1024px) === */
@media (max-width: 1024px) {
    /* Планшети: контент + бонус */
    .ch-cdp-header.ch-cdp-style-1,
    .ch-cdp-header.ch-cdp-style-2,
    .ch-cdp-header.ch-cdp-style-3,
    .ch-cdp-header.ch-cdp-style-4,
    .ch-cdp-header.ch-cdp-style-7,
    .ch-cdp-header.ch-cdp-style-8,
    .ch-cdp-header.ch-cdp-style-10,
    .ch-cdp-header.ch-cdp-style-13,
    .ch-cdp-header.ch-cdp-style-15,
    .ch-cdp-header.ch-cdp-style-17 {
        grid-template-columns: 1fr 280px !important;
    }
}

/* === MOBILE (MAX 768px) - ВСІ СТИЛІ В 1 КОЛОНКУ === */
@media (max-width: 768px) {
    
    /* Базові розміри */
    .ch-cdp-logo { max-width: 90px !important; }
    .ch-cdp-logo-placeholder { width: 70px !important; height: 70px !important; font-size: 26px !important; }
    .ch-cdp-desc-title { font-size: 14px !important; }
    .ch-cdp-desc-text { font-size: 12px !important; }
    .ch-cdp-bonus-amount { font-size: 15px !important; }
    .ch-cdp-btn { padding: 11px 18px !important; font-size: 13px !important; }
    .ch-cdp-bonus-promo { font-size: 12px !important; padding: 6px 12px !important; }

    /* === ВСІ 17 СТИЛІВ → 1 КОЛОНКА === */
    .ch-cdp-header.ch-cdp-style-1,
    .ch-cdp-header.ch-cdp-style-2,
    .ch-cdp-header.ch-cdp-style-3,
    .ch-cdp-header.ch-cdp-style-4,
    .ch-cdp-header.ch-cdp-style-5,
    .ch-cdp-header.ch-cdp-style-6,
    .ch-cdp-header.ch-cdp-style-7,
    .ch-cdp-header.ch-cdp-style-8,
    .ch-cdp-header.ch-cdp-style-9,
    .ch-cdp-header.ch-cdp-style-10,
    .ch-cdp-header.ch-cdp-style-11,
    .ch-cdp-header.ch-cdp-style-12,
    .ch-cdp-header.ch-cdp-style-13,
    .ch-cdp-header.ch-cdp-style-14,
    .ch-cdp-header.ch-cdp-style-15,
    .ch-cdp-header.ch-cdp-style-16,
    .ch-cdp-header.ch-cdp-style-17 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        padding: 18px !important;
        gap: 14px !important;
    }

    /* Всі дочірні елементи - повна ширина */
    .ch-cdp-header.ch-cdp-style-1 > *,
    .ch-cdp-header.ch-cdp-style-2 > *,
    .ch-cdp-header.ch-cdp-style-3 > *,
    .ch-cdp-header.ch-cdp-style-4 > *,
    .ch-cdp-header.ch-cdp-style-5 > *,
    .ch-cdp-header.ch-cdp-style-6 > *,
    .ch-cdp-header.ch-cdp-style-7 > *,
    .ch-cdp-header.ch-cdp-style-8 > *,
    .ch-cdp-header.ch-cdp-style-9 > *,
    .ch-cdp-header.ch-cdp-style-10 > *,
    .ch-cdp-header.ch-cdp-style-11 > *,
    .ch-cdp-header.ch-cdp-style-12 > *,
    .ch-cdp-header.ch-cdp-style-13 > *,
    .ch-cdp-header.ch-cdp-style-14 > *,
    .ch-cdp-header.ch-cdp-style-15 > *,
    .ch-cdp-header.ch-cdp-style-16 > *,
    .ch-cdp-header.ch-cdp-style-17 > * {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    /* Left-block теж вертикальний */
    .ch-cdp-header .ch-cdp-left-block {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    /* Всі секції - повна ширина */
    .ch-cdp-header .ch-cdp-logo-section,
    .ch-cdp-header .ch-cdp-description-box,
    .ch-cdp-header .ch-cdp-bonus-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ch-cdp-header { margin-bottom: 24px !important; }
}

/* === SMALL MOBILE (MAX 480px) === */
@media (max-width: 480px) {
    .ch-cdp-logo { max-width: 80px !important; }
    .ch-cdp-logo-placeholder { width: 60px !important; height: 60px !important; font-size: 22px !important; }
    .ch-cdp-desc-title { font-size: 13px !important; }
    .ch-cdp-desc-text { font-size: 11px !important; }
    .ch-cdp-bonus-amount { font-size: 14px !important; }
    .ch-cdp-bonus-promo { padding: 5px 10px !important; font-size: 11px !important; }
    .ch-cdp-btn { padding: 9px 14px !important; font-size: 12px !important; }
    .ch-cdp-license-badge { font-size: 8px !important; padding: 3px 7px !important; }

    .ch-cdp-header { padding: 14px !important; margin-bottom: 20px !important; }
    
    .ch-cdp-header.ch-cdp-style-1,
    .ch-cdp-header.ch-cdp-style-2,
    .ch-cdp-header.ch-cdp-style-3,
    .ch-cdp-header.ch-cdp-style-4,
    .ch-cdp-header.ch-cdp-style-5,
    .ch-cdp-header.ch-cdp-style-6,
    .ch-cdp-header.ch-cdp-style-7,
    .ch-cdp-header.ch-cdp-style-8,
    .ch-cdp-header.ch-cdp-style-9,
    .ch-cdp-header.ch-cdp-style-10,
    .ch-cdp-header.ch-cdp-style-11,
    .ch-cdp-header.ch-cdp-style-12,
    .ch-cdp-header.ch-cdp-style-13,
    .ch-cdp-header.ch-cdp-style-14,
    .ch-cdp-header.ch-cdp-style-15,
    .ch-cdp-header.ch-cdp-style-16,
    .ch-cdp-header.ch-cdp-style-17 {
        padding: 14px !important;
        gap: 10px !important;
    }

    .ch-cdp-header .ch-cdp-logo-section,
    .ch-cdp-header .ch-cdp-description-box,
    .ch-cdp-header .ch-cdp-bonus-section {
        padding: 12px !important;
    }
}