/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Премиальный статический баннер с поддержкой кастомной графики и сигнальных уровней'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Oleksii Sukhoi'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "https://experimentum-life-practice.com/wp-content/uploads/2026/07/logo-small-dummy-hd.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Финальный комплект стилей с возможностью гибкого подключения внешних изображений, SVG-иконок и сигнальных уровней сложности через переменные, с оптимизированной анимацией и адаптивным дизайном'; */

/* ----------------- */
/* БАЗОВЫЕ НАСТРОЙКИ */
/* ----------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.course-banner-block {
  /* Цветовая схема */
  --cb-bg-color: #f4f7ef;
  --cb-text-main: #2b2b2b;
  --cb-text-title: #161616;
  --cb-text-subtitle: #595959;
  
  --cb-accent-btn: #8e1d43;
  --cb-accent-hover: #721433;
  --cb-gradient-text: linear-gradient(135deg, #8e1d43 0%, #b8335f 100%);
  
  --cb-btn-hover-bg: #ffffff;
  --cb-btn-hover-color: var(--cb-accent-btn);
  --cb-btn-hover-shadow: var(--cb-shadow-btn);

  --cb-speaker-bg: rgba(255, 255, 255, 0.85);
  --cb-speaker-color: #435436;

  --cb-check-bg: rgba(76, 109, 63, 0.12);
  --cb-check-color: #4c6d3f;

  /* Кастомная SVG иконка списков (Data URI) */
  --cb-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

  /* Сигнальные SVG-иконки уровней сложности (обновленный SVG для всех уровней) */
  --cb-icon-level-green: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15C15.7279 15 18.75 12.0899 18.75 8.5C18.75 4.91015 15.7279 2 12 2C8.27208 2 5.25 4.91015 5.25 8.5C5.25 12.0899 8.27208 15 12 15Z' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.51999 13.52L7.51001 20.9C7.51001 21.8 8.14001 22.24 8.92001 21.87L11.6 20.6C11.82 20.49 12.19 20.49 12.41 20.6L15.1 21.87C15.87 22.23 16.51 21.8 16.51 20.9V13.34' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  
  --cb-icon-level-yellow: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15C15.7279 15 18.75 12.0899 18.75 8.5C18.75 4.91015 15.7279 2 12 2C8.27208 2 5.25 4.91015 5.25 8.5C5.25 12.0899 8.27208 15 12 15Z' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.51999 13.52L7.51001 20.9C7.51001 21.8 8.14001 22.24 8.92001 21.87L11.6 20.6C11.82 20.49 12.19 20.49 12.41 20.6L15.1 21.87C15.87 22.23 16.51 21.8 16.51 20.9V13.34' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  
  --cb-icon-level-red: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15C15.7279 15 18.75 12.0899 18.75 8.5C18.75 4.91015 15.7279 2 12 2C8.27208 2 5.25 4.91015 5.25 8.5C5.25 12.0899 8.27208 15 12 15Z' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.51999 13.52L7.51001 20.9C7.51001 21.8 8.14001 22.24 8.92001 21.87L11.6 20.6C11.82 20.49 12.19 20.49 12.41 20.6L15.1 21.87C15.87 22.23 16.51 21.8 16.51 20.9V13.34' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  
  --cb-icon-level-black: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15C15.7279 15 18.75 12.0899 18.75 8.5C18.75 4.91015 15.7279 2 12 2C8.27208 2 5.25 4.91015 5.25 8.5C5.25 12.0899 8.27208 15 12 15Z' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.51999 13.52L7.51001 20.9C7.51001 21.8 8.14001 22.24 8.92001 21.87L11.6 20.6C11.82 20.49 12.19 20.49 12.41 20.6L15.1 21.87C15.87 22.23 16.51 21.8 16.51 20.9V13.34' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Дополнительные SVG иконки для info-tag (⏳, 📅, ⏱, онлайн) */
  --cb-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --cb-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --cb-icon-timer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'%3E%3C/circle%3E%3Cpolyline points='12 9 12 13 14 15'%3E%3C/polyline%3E%3Cpath d='M12 2v3'%3E%3C/path%3E%3Cpath d='M18 5l-2 2'%3E%3C/path%3E%3C/svg%3E");
  --cb-icon-online: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");
  --cb-icon-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'%3E%3C/path%3E%3Cpath d='M5 2h14'%3E%3C/path%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'%3E%3C/path%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'%3E%3C/path%3E%3C/svg%3E");
  --cb-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");

 /* Отступы и размеры */
  --cb-radius: 18px;
  --cb-padding-top: clamp(32px, 4vw, 48px);
  --cb-padding-right: clamp(32px, 32vw, 420px); 
  --cb-padding-bottom: clamp(32px, 4vw, 48px);
  --cb-padding-left: clamp(32px, 4vw, 48px);
  
  --cb-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cb-shadow-btn: 0 6px 20px rgba(142, 29, 67, 0.25);
  
  /* Управление подключением и позицией картинки */
  --cb-image-url: none;
  --cb-image-top: -45px;
  --cb-image-right: -150px;
  --cb-image-bottom: auto;
  --cb-image-left: auto;
  --cb-image-rotate: 46deg;
  --cb-image-width: clamp(280px, 28vw, 570px);
  --cb-image-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08);

  --cb-anim-duration: 0.7s;
  --cb-anim-timing: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: var(--cb-bg-color);
  border-radius: var(--cb-radius);
  padding: var(--cb-padding-top) var(--cb-padding-right) var(--cb-padding-bottom) var(--cb-padding-left);
  box-sizing: border-box;
  font-family: var(--cb-font-family) !important;
  color: var(--cb-text-main);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  
  animation: cbFadeInSlide var(--cb-anim-duration) var(--cb-anim-timing) forwards;
  contain: layout style;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

@keyframes cbFadeInSlide {
  0% { opacity: 0; transform: translateY(20px) translateZ(0); }
  100% { opacity: 1; transform: translateY(0) translateZ(0); }
}

.course-banner-block.image-left {
  padding-right: var(--cb-padding-left);
  padding-left: var(--cb-padding-right);
}

.course-banner-block.image-left .cb-image-wrapper {
  right: auto;
  left: var(--cb-image-left, -150px);
  transform: rotate(calc(var(--cb-image-rotate) * -1));
}

.course-banner-block *,
.course-banner-block *::before,
.course-banner-block *::after {
  box-sizing: border-box;
  font-family: var(--cb-font-family) !important;
}

/* ------------------------------------------------------------- */
/* ВСЕ 30 ДОСТУПНЫХ ТЕМ ОФОРМЛЕНИЯ                                 */
/* ------------------------------------------------------------- */
/* 1. Синяя (theme-blue) */
.course-banner-block.theme-blue {
  --cb-bg-color: #f0f4f8; 
  --cb-accent-btn: #1d4ed8; 
  --cb-accent-hover: #1e40af;
  --cb-gradient-text: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  --cb-speaker-color: #1e3a8a; 
  --cb-check-bg: rgba(29, 78, 216, 0.1); 
  --cb-check-color: #1d4ed8;
  --cb-shadow-btn: 0 6px 20px rgba(29, 78, 216, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 2. Темная (theme-dark) */
.course-banner-block.theme-dark {
  --cb-bg-color: #16181d; 
  --cb-text-main: #c9d1d9; 
  --cb-text-title: #ffffff; 
  --cb-text-subtitle: #96a0ac;
  --cb-accent-btn: #d4af37; 
  --cb-accent-hover: #b89728;
  --cb-gradient-text: linear-gradient(135deg, #f3e5ab 0%, #d4af37 100%);
  --cb-speaker-bg: rgba(33, 38, 45, 0.9); 
  --cb-speaker-color: #d4af37;
  --cb-check-bg: rgba(212, 175, 55, 0.15); 
  --cb-check-color: #d4af37;
  --cb-shadow-btn: 0 6px 25px rgba(212, 175, 55, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}
.course-banner-block.theme-dark .cb-button { font-weight: 700 !important; }

/* 3. Терракотовая (theme-terracotta) */
.course-banner-block.theme-terracotta {
  --cb-bg-color: #faf5f0; 
  --cb-accent-btn: #bc5a38; 
  --cb-accent-hover: #9c482b;
  --cb-gradient-text: linear-gradient(135deg, #bc5a38 0%, #e07a5f 100%);
  --cb-speaker-color: #78350f; 
  --cb-check-bg: rgba(188, 90, 56, 0.1); 
  --cb-check-color: #bc5a38;
  --cb-shadow-btn: 0 6px 20px rgba(188, 90, 56, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 4. Изумрудная (theme-emerald) */
.course-banner-block.theme-emerald {
  --cb-bg-color: #edfcf5; 
  --cb-accent-btn: #059669; 
  --cb-accent-hover: #047857;
  --cb-gradient-text: linear-gradient(135deg, #059669 0%, #10b981 100%);
  --cb-speaker-color: #064e3b; 
  --cb-check-bg: rgba(5, 150, 105, 0.12); 
  --cb-check-color: #059669;
  --cb-shadow-btn: 0 6px 20px rgba(5, 150, 105, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 5. Фиолетовая (theme-purple) */
.course-banner-block.theme-purple {
  --cb-bg-color: #f5f3ff; 
  --cb-accent-btn: #7c3aed; 
  --cb-accent-hover: #6d28d9;
  --cb-gradient-text: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  --cb-speaker-color: #5b21b6; 
  --cb-check-bg: rgba(124, 58, 237, 0.12); 
  --cb-check-color: #7c3aed;
  --cb-shadow-btn: 0 6px 20px rgba(124, 58, 237, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 6. Янтарная (theme-amber) */
.course-banner-block.theme-amber {
  --cb-bg-color: #fffbeb; 
  --cb-accent-btn: #d97706; 
  --cb-accent-hover: #b45309;
  --cb-gradient-text: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  --cb-speaker-color: #78350f; 
  --cb-check-bg: rgba(217, 119, 6, 0.12); 
  --cb-check-color: #d97706;
  --cb-shadow-btn: 0 6px 20px rgba(217, 119, 6, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 7. Минимализм (theme-minimal) */
.course-banner-block.theme-minimal {
  --cb-bg-color: #f8fafc; 
  --cb-text-main: #334155; 
  --cb-text-title: #0f172a; 
  --cb-text-subtitle: #64748b;
  --cb-accent-btn: #334155; 
  --cb-accent-hover: #0f172a;
  --cb-gradient-text: linear-gradient(135deg, #0f172a 0%, #475569 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.9); 
  --cb-speaker-color: #334155;
  --cb-check-bg: rgba(51, 65, 85, 0.1); 
  --cb-check-color: #334155;
  --cb-shadow-btn: 0 6px 20px rgba(15, 23, 42, 0.2);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 8. Розовая (theme-pink) */
.course-banner-block.theme-pink {
  --cb-bg-color: #fff1f2; 
  --cb-accent-btn: #e11d48; 
  --cb-accent-hover: #be123c;
  --cb-gradient-text: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
  --cb-speaker-color: #881337; 
  --cb-check-bg: rgba(225, 29, 72, 0.1); 
  --cb-check-color: #e11d48;
  --cb-shadow-btn: 0 6px 20px rgba(225, 29, 72, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 9. Голубая / Циан (theme-cyan) */
.course-banner-block.theme-cyan {
  --cb-bg-color: #ecfeff; 
  --cb-accent-btn: #0891b2; 
  --cb-accent-hover: #0e7490;
  --cb-gradient-text: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
  --cb-speaker-color: #164e63; 
  --cb-check-bg: rgba(8, 145, 178, 0.1); 
  --cb-check-color: #0891b2;
  --cb-shadow-btn: 0 6px 20px rgba(8, 145, 178, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 10. Красная (theme-red) */
.course-banner-block.theme-red {
  --cb-bg-color: #fef2f2; 
  --cb-accent-btn: #dc2626; 
  --cb-accent-hover: #b91c1c;
  --cb-gradient-text: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
  --cb-speaker-color: #7f1d1d; 
  --cb-check-bg: rgba(220, 38, 38, 0.1); 
  --cb-check-color: #dc2626;
  --cb-shadow-btn: 0 6px 20px rgba(220, 38, 38, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 11. Кофейная (theme-coffee) */
.course-banner-block.theme-coffee {
  --cb-bg-color: #fdf8f6; 
  --cb-text-main: #3e2723; 
  --cb-text-title: #271c19; 
  --cb-text-subtitle: #6d4c41;
  --cb-accent-btn: #795548; 
  --cb-accent-hover: #5d4037;
  --cb-gradient-text: linear-gradient(135deg, #795548 0%, #a1887f 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.9); 
  --cb-speaker-color: #4e342e;
  --cb-check-bg: rgba(121, 85, 72, 0.12); 
  --cb-check-color: #795548;
  --cb-shadow-btn: 0 6px 20px rgba(121, 85, 72, 0.2);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 12. Закат (theme-sunset) */
.course-banner-block.theme-sunset {
  --cb-bg-color: #fff7ed; 
  --cb-accent-btn: #ea580c; 
  --cb-accent-hover: #c2410c;
  --cb-gradient-text: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  --cb-speaker-color: #7c2d12; 
  --cb-check-bg: rgba(234, 88, 12, 0.12); 
  --cb-check-color: #ea580c;
  --cb-shadow-btn: 0 6px 20px rgba(234, 88, 12, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 13. Океан (theme-ocean) */
.course-banner-block.theme-ocean {
  --cb-bg-color: #f0fdf4; 
  --cb-accent-btn: #0284c7; 
  --cb-accent-hover: #0369a1;
  --cb-gradient-text: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --cb-speaker-color: #0c4a6e; 
  --cb-check-bg: rgba(2, 132, 199, 0.12); 
  --cb-check-color: #0284c7;
  --cb-shadow-btn: 0 6px 20px rgba(2, 132, 199, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 14. Неон (theme-neon) */
.course-banner-block.theme-neon {
  --cb-bg-color: #0f172a; 
  --cb-text-main: #cbd5e1; 
  --cb-text-title: #ffffff; 
  --cb-text-subtitle: #94a3b8;
  --cb-accent-btn: #10b981; 
  --cb-accent-hover: #059669;
  --cb-gradient-text: linear-gradient(135deg, #34d399 0%, #38bdf8 100%);
  --cb-speaker-bg: rgba(30, 41, 59, 0.9); 
  --cb-speaker-color: #34d399;
  --cb-check-bg: rgba(52, 211, 153, 0.15); 
  --cb-check-color: #34d399;
  --cb-shadow-btn: 0 6px 25px rgba(52, 211, 153, 0.3);
  --cb-btn-hover-bg: #0f172a; 
  --cb-btn-hover-color: var(--cb-accent-btn);
  --cb-btn-hover-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}
.course-banner-block.theme-neon .cb-button {
  font-weight: 700 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

/* 15. Серая / Слейт (theme-slate) */
.course-banner-block.theme-slate {
  --cb-bg-color: #f1f5f9; 
  --cb-text-main: #475569; 
  --cb-text-title: #1e293b; 
  --cb-text-subtitle: #64748b;
  --cb-accent-btn: #475569; 
  --cb-accent-hover: #334155;
  --cb-gradient-text: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  --cb-speaker-color: #1e293b; 
  --cb-check-bg: rgba(71, 85, 105, 0.12); 
  --cb-check-color: #475569;
  --cb-shadow-btn: 0 6px 20px rgba(71, 85, 105, 0.2);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 16. Киберпанк (theme-cyberpunk) */
.course-banner-block.theme-cyberpunk {
  --cb-bg-color: #0b091a; 
  --cb-text-main: #e2e8f0; 
  --cb-text-title: #00f0ff; 
  --cb-text-subtitle: #a855f7;
  --cb-accent-btn: #ff007f; 
  --cb-accent-hover: #d9006b;
  --cb-gradient-text: linear-gradient(135deg, #00f0ff 0%, #ff007f 100%);
  --cb-speaker-bg: rgba(20, 16, 40, 0.9); 
  --cb-speaker-color: #00f0ff;
  --cb-check-bg: rgba(255, 0, 127, 0.15); 
  --cb-check-color: #ff007f;
  --cb-shadow-btn: 0 6px 25px rgba(255, 0, 127, 0.4);
  --cb-btn-hover-bg: #0b091a; 
  --cb-btn-hover-color: #00f0ff;
  --cb-btn-hover-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}
.course-banner-block.theme-cyberpunk .cb-button {
  font-weight: 700 !important;
  border: 2px solid #ff007f;
}

/* 17. Премиальное золото (theme-gold) */
.course-banner-block.theme-gold {
  --cb-bg-color: #1c1c1c; 
  --cb-text-main: #e5e5e5; 
  --cb-text-title: #f3e5ab; 
  --cb-text-subtitle: #b3a16d;
  --cb-accent-btn: #c5a059; 
  --cb-accent-hover: #ab8642;
  --cb-gradient-text: linear-gradient(135deg, #f3e5ab 0%, #c5a059 100%);
  --cb-speaker-bg: rgba(30, 30, 30, 0.9); 
  --cb-speaker-color: #c5a059;
  --cb-check-bg: rgba(197, 160, 89, 0.15); 
  --cb-check-color: #c5a059;
  --cb-shadow-btn: 0 6px 25px rgba(197, 160, 89, 0.3);
  --cb-btn-hover-bg: #f3e5ab; 
  --cb-btn-hover-color: #1c1c1c; 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}
.course-banner-block.theme-gold .cb-button { font-weight: 700 !important; }

/* 18. Пастель (theme-pastel) */
.course-banner-block.theme-pastel {
  --cb-bg-color: #fcf6f5; 
  --cb-text-main: #5c5353; 
  --cb-text-title: #3a3232; 
  --cb-text-subtitle: #8c8282;
  --cb-accent-btn: #d4a5a5; 
  --cb-accent-hover: #bf9191;
  --cb-gradient-text: linear-gradient(135deg, #d4a5a5 0%, #9bc1bc 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.8); 
  --cb-speaker-color: #8c7b7b;
  --cb-check-bg: rgba(212, 165, 165, 0.15); 
  --cb-check-color: #d4a5a5;
  --cb-shadow-btn: 0 6px 20px rgba(212, 165, 165, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 19. Лаванда (theme-lavender) */
.course-banner-block.theme-lavender {
  --cb-bg-color: #f7f5fa; 
  --cb-text-main: #443e52; 
  --cb-text-title: #2a2536; 
  --cb-text-subtitle: #7a708f;
  --cb-accent-btn: #8a6fb0; 
  --cb-accent-hover: #735996;
  --cb-gradient-text: linear-gradient(135deg, #8a6fb0 0%, #b39ddb 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.85); 
  --cb-speaker-color: #735996;
  --cb-check-bg: rgba(138, 111, 176, 0.12); 
  --cb-check-color: #8a6fb0;
  --cb-shadow-btn: 0 6px 20px rgba(138, 111, 176, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 20. Мята (theme-mint) */
.course-banner-block.theme-mint {
  --cb-bg-color: #f0f7f4; 
  --cb-text-main: #2f4538; 
  --cb-text-title: #1b2c22; 
  --cb-text-subtitle: #577362;
  --cb-accent-btn: #40916c; 
  --cb-accent-hover: #2d6a4f;
  --cb-gradient-text: linear-gradient(135deg, #40916c 0%, #52b788 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.85); 
  --cb-speaker-color: #2d6a4f;
  --cb-check-bg: rgba(64, 145, 108, 0.12); 
  --cb-check-color: #40916c;
  --cb-shadow-btn: 0 6px 20px rgba(64, 145, 108, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 21. Шоколад (theme-chocolate) */
.course-banner-block.theme-chocolate {
  --cb-bg-color: #261c14; 
  --cb-text-main: #d7ccc8; 
  --cb-text-title: #fff3e0; 
  --cb-text-subtitle: #a1887f;
  --cb-accent-btn: #d7ccc8; 
  --cb-accent-hover: #bcaaa4;
  --cb-gradient-text: linear-gradient(135deg, #ffccbc 0%, #d7ccc8 100%);
  --cb-speaker-bg: rgba(45, 33, 25, 0.9); 
  --cb-speaker-color: #ffccbc;
  --cb-check-bg: rgba(215, 204, 200, 0.15); 
  --cb-check-color: #d7ccc8;
  --cb-shadow-btn: 0 6px 20px rgba(0, 0, 0, 0.4);
  --cb-btn-hover-bg: #fff3e0; 
  --cb-btn-hover-color: #261c14; 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 22. Индиго (theme-indigo) */
.course-banner-block.theme-indigo {
  --cb-bg-color: #eef2ff; 
  --cb-text-main: #312e81; 
  --cb-text-title: #1e1b4b; 
  --cb-text-subtitle: #4f46e5;
  --cb-accent-btn: #4f46e5; 
  --cb-accent-hover: #4338ca;
  --cb-gradient-text: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.85); 
  --cb-speaker-color: #4338ca;
  --cb-check-bg: rgba(79, 70, 229, 0.12); 
  --cb-check-color: #4f46e5;
  --cb-shadow-btn: 0 6px 20px rgba(79, 70, 229, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 23. Оливковая (theme-olive) */
.course-banner-block.theme-olive {
  --cb-bg-color: #f4f6f0; 
  --cb-text-main: #383d2a; 
  --cb-text-title: #222619; 
  --cb-text-subtitle: #60664d;
  --cb-accent-btn: #606c38; 
  --cb-accent-hover: #4d562c;
  --cb-gradient-text: linear-gradient(135deg, #606c38 0%, #8f9d54 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.85); 
  --cb-speaker-color: #4d562c;
  --cb-check-bg: rgba(96, 108, 56, 0.12); 
  --cb-check-color: #606c38;
  --cb-shadow-btn: 0 6px 20px rgba(96, 108, 56, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 24. Винная / Бордовая (theme-wine) */
.course-banner-block.theme-wine {
  --cb-bg-color: #faf2f4; 
  --cb-text-main: #4a2c34; 
  --cb-text-title: #2d181d; 
  --cb-text-subtitle: #7a4a55;
  --cb-accent-btn: #800020; 
  --cb-accent-hover: #5e0017;
  --cb-gradient-text: linear-gradient(135deg, #800020 0%, #b3002d 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.85); 
  --cb-speaker-color: #5e0017;
  --cb-check-bg: rgba(128, 0, 32, 0.12); 
  --cb-check-color: #800020;
  --cb-shadow-btn: 0 6px 20px rgba(128, 0, 32, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 25. Арктика (theme-arctic) */
.course-banner-block.theme-arctic {
  --cb-bg-color: #f0f9ff; 
  --cb-text-main: #0369a1; 
  --cb-text-title: #0c4a6e; 
  --cb-text-subtitle: #0284c7;
  --cb-accent-btn: #0284c7; 
  --cb-accent-hover: #0369a1;
  --cb-gradient-text: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.9); 
  --cb-speaker-color: #0c4a6e;
  --cb-check-bg: rgba(2, 132, 199, 0.12); 
  --cb-check-color: #0284c7;
  --cb-shadow-btn: 0 6px 20px rgba(2, 132, 199, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 26. Солнечный яркий (theme-sunshine) */
.course-banner-block.theme-sunshine {
  --cb-bg-color: #fefce8; 
  --cb-text-main: #713f12; 
  --cb-text-title: #422006; 
  --cb-text-subtitle: #a16207;
  --cb-accent-btn: #ca8a04; 
  --cb-accent-hover: #a16207;
  --cb-gradient-text: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.9); 
  --cb-speaker-color: #713f12;
  --cb-check-bg: rgba(202, 138, 4, 0.12); 
  --cb-check-color: #ca8a04;
  --cb-shadow-btn: 0 6px 20px rgba(202, 138, 4, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 27. Лесная ягода (theme-berry) */
.course-banner-block.theme-berry {
  --cb-bg-color: #f5f0f3; 
  --cb-text-main: #4a154b; 
  --cb-text-title: #2b0b2c; 
  --cb-text-subtitle: #792d7a;
  --cb-accent-btn: #881337; 
  --cb-accent-hover: #500724;
  --cb-gradient-text: linear-gradient(135deg, #881337 0%, #be123c 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.85); 
  --cb-speaker-color: #500724;
  --cb-check-bg: rgba(136, 19, 55, 0.12); 
  --cb-check-color: #881337;
  --cb-shadow-btn: 0 6px 20px rgba(136, 19, 55, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 28. Стальной синий (theme-steelblue) */
.course-banner-block.theme-steelblue {
  --cb-bg-color: #e2e8f0; 
  --cb-text-main: #334155; 
  --cb-text-title: #0f172a; 
  --cb-text-subtitle: #64748b;
  --cb-accent-btn: #2563eb; 
  --cb-accent-hover: #1d4ed8;
  --cb-gradient-text: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.9); 
  --cb-speaker-color: #1d4ed8;
  --cb-check-bg: rgba(37, 99, 235, 0.12); 
  --cb-check-color: #2563eb;
  --cb-shadow-btn: 0 6px 20px rgba(37, 99, 235, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 29. Песчаный дюн (theme-sand) */
.course-banner-block.theme-sand {
  --cb-bg-color: #fcfaf2; 
  --cb-text-main: #57534e; 
  --cb-text-title: #292524; 
  --cb-text-subtitle: #78716c;
  --cb-accent-btn: #b45309; 
  --cb-accent-hover: #92400e;
  --cb-gradient-text: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  --cb-speaker-bg: rgba(255, 255, 255, 0.85); 
  --cb-speaker-color: #92400e;
  --cb-check-bg: rgba(180, 83, 9, 0.12); 
  --cb-check-color: #b45309;
  --cb-shadow-btn: 0 6px 20px rgba(180, 83, 9, 0.25);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: var(--cb-accent-btn); 
  --cb-btn-hover-shadow: var(--cb-shadow-btn);
}

/* 30. Ультрафиолет (theme-ultraviolet) */
.course-banner-block.theme-ultraviolet {
  --cb-bg-color: #130f26; 
  --cb-text-main: #e2e8f0; 
  --cb-text-title: #ffffff; 
  --cb-text-subtitle: #a5b4fc;
  --cb-accent-btn: #8b5cf6; 
  --cb-accent-hover: #7c3aed;
  --cb-gradient-text: linear-gradient(135deg, #c084fc 0%, #8b5cf6 100%);
  --cb-speaker-bg: rgba(30, 24, 56, 0.9); 
  --cb-speaker-color: #c084fc;
  --cb-check-bg: rgba(139, 92, 246, 0.2); 
  --cb-check-color: #c084fc;
  --cb-shadow-btn: 0 6px 25px rgba(139, 92, 246, 0.35);
  --cb-btn-hover-bg: #ffffff; 
  --cb-btn-hover-color: #7c3aed; 
  --cb-shadow-btn: var(--cb-shadow-btn);
}
.course-banner-block.theme-ultraviolet .cb-button { font-weight: 700 !important; }

/* ----------------- */
/* ТЕКСТОВЫЕ ЭЛЕМЕНТЫ */
/* ----------------- */
.course-banner-block h1 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700 !important;
  color: var(--cb-text-title);
  margin: 0 0 10px 0;
  line-height: 1.18;
  letter-spacing: -0.5px;
}

.course-banner-block .cb-gradient {
  background: var(--cb-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.course-banner-block .cb-subtitle {
  font-size: clamp(14px, 1.4vw, 15px);
  font-weight: 500 !important;
  color: var(--cb-text-subtitle);
  margin: 0 0 14px 0;
  line-height: 1.5;
}

.course-banner-block .cb-meta-row,
.course-banner-block .cb-details-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.course-banner-block .cb-details-row {
  margin-bottom: 20px;
}

.course-banner-block .cb-speaker-tag, 
.course-banner-block .cb-info-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cb-speaker-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 12px 5px 6px;
  border-radius: 16px;
  font-size: clamp(12px, 1.2vw, 13px);
  font-weight: 600 !important;
  color: var(--cb-speaker-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.course-banner-block .cb-info-tag {
  padding: 12px 14px;
}

.course-banner-block .cb-info-tag::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Автоматическое подключение иконок по классам */
.course-banner-block .cb-info-tag.level-green::before { background-image: var(--cb-icon-level-green); }
.course-banner-block .cb-info-tag.level-yellow::before { background-image: var(--cb-icon-level-yellow); }
.course-banner-block .cb-info-tag.level-red::before { background-image: var(--cb-icon-level-red); }
.course-banner-block .cb-info-tag.level-black::before { background-image: var(--cb-icon-level-black); }
.course-banner-block .cb-info-tag.icon-time::before { background-image: var(--cb-icon-time); }
.course-banner-block .cb-info-tag.icon-calendar::before { background-image: var(--cb-icon-calendar); }
.course-banner-block .cb-info-tag.icon-timer::before { background-image: var(--cb-icon-timer); }
.course-banner-block .cb-info-tag.icon-online::before { background-image: var(--cb-icon-online); }
.course-banner-block .cb-info-tag.icon-hourglass::before { background-image: var(--cb-icon-hourglass); }
.course-banner-block .cb-info-tag.icon-clock::before { background-image: var(--cb-icon-clock); }

.course-banner-block .cb-speaker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.course-banner-block .cb-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.course-banner-block .cb-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-banner-block .cb-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(13px, 1.3vw, 14px);
  line-height: 1.45;
  color: var(--cb-text-main);
  transition: transform 0.2s ease;
}

.course-banner-block .cb-list li:hover {
  transform: translateX(4px);
}

.course-banner-block .cb-check {
  flex-shrink: 0;
  width: clamp(20px, 2vw, 24px);
  height: clamp(20px, 2vw, 24px);
  background-color: var(--cb-check-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cb-check-color);
  padding: 4px;
}

.course-banner-block .cb-check:empty::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--cb-check-color);
  -webkit-mask: var(--cb-icon-check) no-repeat center / contain;
  mask: var(--cb-icon-check) no-repeat center / contain;
}

.course-banner-block .cb-check svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.course-banner-block .cb-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ----------------- */
/* КНОПКА            */
/* ----------------- */
.course-banner-block .cb-button {
  appearance: none;
  -webkit-appearance: none;
  background: var(--cb-accent-btn);
  color: #ffffff !important;
  border: 2px solid var(--cb-accent-btn);
  padding: clamp(12px, 1.5vw, 15px) clamp(24px, 2.5vw, 30px);
  border-radius: 16px;
  font-family: var(--cb-font-family) !important;
  font-size: clamp(13px, 1.3vw, 14px);
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--cb-shadow-btn);
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.course-banner-block .cb-button:hover,
.course-banner-block .cb-button:active {
  background-color: var(--cb-btn-hover-bg) !important;
  color: var(--cb-btn-hover-color) !important;
  border-color: var(--cb-accent-btn) !important;
  box-shadow: var(--cb-btn-hover-shadow);
}

.course-banner-block .cb-button:focus-visible {
  outline: 2px solid var(--cb-accent-btn);
  outline-offset: 4px;
}

/* ----------------- */
/* КАРТИНКА          */
/* ----------------- */
.course-banner-block .cb-image-wrapper {
  position: absolute;
  top: var(--cb-image-top);
  right: var(--cb-image-right);
  bottom: var(--cb-image-bottom);
  left: var(--cb-image-left);
  width: var(--cb-image-width);
  z-index: 1;
  pointer-events: none;
  transform: rotate(var(--cb-image-rotate));
  opacity: 0.92;
}

.course-banner-block .cb-image {
  width: 100%;
  height: auto;
  border-radius: 28px;
  object-fit: contain;
  box-shadow: var(--cb-image-shadow);
}

.course-banner-block .cb-image-wrapper.from-css {
  height: 100%;
  background-image: var(--cb-image-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ------------------------------------------------------------- */
/* РЕГУЛИРОВКА ШРИФТОВ ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ                  */
/* ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .course-banner-block h1 { font-size: 28px !important; }
  .course-banner-block .cb-subtitle { font-size: 15px !important; }
  .course-banner-block .cb-list li { font-size: 14px !important; }
  .course-banner-block .cb-button { font-size: 14px !important; }
}

@media (max-width: 767px) {
  .course-banner-block h1 { font-size: 23px !important; }
  .course-banner-block .cb-subtitle { font-size: 14px !important; }
  .course-banner-block .cb-list li { font-size: 13px !important; }
  .course-banner-block .cb-button { font-size: 13px !important; }
}

@media (max-width: 360px) {
  .course-banner-block h1 { font-size: 21px !important; }
  .course-banner-block .cb-subtitle { font-size: 13px !important; }
  .course-banner-block .cb-list li { font-size: 12px !important; }
}

/* ----------------- */
/* АДАПТИВНОСТЬ БЛОКА */
/* ----------------- */
@media (max-width: 900px) {
  .course-banner-block,
  .course-banner-block.image-left {
    padding: 24px;
  }
  .course-banner-block .cb-image-wrapper {
    display: none !important;
  }
  .course-banner-block {
    display: flex;
    flex-direction: column;
  }
  .course-banner-block .cb-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .course-banner-block .cb-button {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .course-banner-block h1 {
    line-height: 1.12;
  }
}