/* ==================================================================================
   ПРЕМИАЛЬНЫЙ СТАТИЧЕСКИЙ БАННЕР с поддержкой кастомной графики и сигнальных уровней
   ================================================================================== */

/* ----------------- */
/* БАЗОВЫЕ НАСТРОЙКИ */
/* ----------------- */

@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%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'%3E%3C/polyline%3E%3C/svg%3E");

  /* Сигнальные 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%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'%3E%3C/circle%3E%3Cpolyline%20points='12%206%2012%2012%2016%2014'%3E%3C/polyline%3E%3C/svg%3E");
  --cb-icon-calendar: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'%3E%3C/rect%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'%3E%3C/line%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'%3E%3C/line%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'%3E%3C/line%3E%3C/svg%3E");
  --cb-icon-timer: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='13'%20r='8'%3E%3C/circle%3E%3Cpolyline%20points='12%209%2012%2013%2014%2015'%3E%3C/polyline%3E%3Cpath%20d='M12%202v3'%3E%3C/path%3E%3Cpath%20d='M18%205l-2%202'%3E%3C/path%3E%3C/svg%3E");
  --cb-icon-online: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='3'%20width='20'%20height='14'%20rx='2'%20ry='2'%3E%3C/rect%3E%3Cline%20x1='8'%20y1='21'%20x2='16'%20y2='21'%3E%3C/line%3E%3Cline%20x1='12'%20y1='17'%20x2='12'%20y2='21'%3E%3C/line%3E%3C/svg%3E");
  --cb-icon-hourglass: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2022h14'%3E%3C/path%3E%3Cpath%20d='M5%202h14'%3E%3C/path%3E%3Cpath%20d='M17%2022v-4.172a2%202%200%200%200-.586-1.414L12%2012l-4.414%204.414A2%202%200%200%200%207%2017.828V22'%3E%3C/path%3E%3Cpath%20d='M7%202v4.172a2%202%200%200%200%20.586%201.414L12%2012l4.414-4.414A2%202%200%200%200%2017%206.172V2'%3E%3C/path%3E%3C/svg%3E");
  --cb-icon-clock: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'%3E%3C/circle%3E%3Cpolyline%20points='12%206%2012%2012%2016%2014'%3E%3C/polyline%3E%3C/svg%3E");
  --cb-icon-price: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.59%2013.41l-7.17%207.17a2%202%200%200%201-2.83%200L2%2012V2h10l8.59%208.59a2%202%200%200%201%200%202.83z'/%3E%3Cline%20x1='7'%20y1='7'%20x2='7.01'%20y2='7'/%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-btn-hover-shadow: 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-info-tag.icon-price::before { background-image: var(--cb-icon-price); }

.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;
  position: relative;
}

.course-banner-block .cb-check::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: block;
  background-color: var(--cb-check-color);
  -webkit-mask-image: var(--cb-icon-check);
  mask-image: var(--cb-icon-check);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.course-banner-block .cb-check svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: 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;
  }
}