/* ================================================================
   dark-mode-homepage37.css
   Темний режим — https://emd103.site/ (головна сторінка)
   Версія 37 — Black Premium Red Accent UI

   Клас темного режиму: body.ebdarkmodecolor (EB Dark Mode module)
   Підключати ПІСЛЯ 103-kyivcity-modern.css.

   Концепція (за референсом — premium black UI with red highlights):
   • Глибоко-чорний фон #06070A з ледь помітною червоною аурою.
   • Картки — суцільні матово-чорні #111316 / #15181D, hairline-рамка
     1px rgba(255,255,255,.06), внутрішній highlight inset 0 1px 0
     rgba(255,255,255,.05) і м'яка тінь 0 10px 30px rgba(0,0,0,.55).
   • Великі радіуси (18–24px), активні картки — червоний градієнт
     linear-gradient(160deg, #2A0B10 0%, #5A0E18 55%, #E10A17 120%)
     з glow 0 0 32px rgba(225,10,23,.35).
   • Pill-кнопки з градієнтом #FF3B47 → #B0091A, рожевий glow.
   • Цифри/акцентний текст — неоновий червоний #FF4554 + text-shadow.
   • Секція #qx-section-first-aid-help залишається без змін (v35).
   ================================================================ */


/* ─── 1. CSS-ЗМІННІ ────────────────────────────────────────────── */

body.ebdarkmodecolor {
  /* Фони */
  --kc-bg:          #06070A;
  --kc-bg-2:        #0A0C10;
  --kc-bg-soft:     #0F1115;

  /* Картки (суцільні, не glass) */
  --kc-surface:     #111316;
  --kc-surface-2:   #15181D;
  --kc-surface-3:   #1B1F26;

  /* Hairline-рамки */
  --kc-line:        rgba(255, 255, 255, 0.06);
  --kc-line-2:      rgba(255, 255, 255, 0.10);
  --kc-line-3:      rgba(255, 255, 255, 0.16);

  /* Текст */
  --kc-ink:         #F4F6FA;
  --kc-ink-2:       #C3C8D1;
  --kc-muted:       #7B8290;

  /* Червоні акценти (преміум) */
  --kc-red:         #E10A17;
  --kc-red-hot:     #FF3B47;
  --kc-red-deep:    #5A0E18;
  --kc-red-soft:    rgba(225, 10, 23, 0.10);
  --kc-red-soft-2:  rgba(225, 10, 23, 0.18);
  --kc-red-glow:    rgba(225, 10, 23, 0.45);
  --kc-red-glow-2:  rgba(255, 59, 71, 0.55);

  /* Градієнти */
  --kc-grad-red:    linear-gradient(135deg, #FF3B47 0%, #E10A17 50%, #B0091A 100%);
  --kc-grad-card:   linear-gradient(160deg, #2A0B10 0%, #5A0E18 55%, #E10A17 120%);
  --kc-grad-surface:linear-gradient(180deg, #15181D 0%, #0F1115 100%);

  /* Тіні */
  --kc-shadow-sm:   0 2px 8px rgba(0,0,0,.55);
  --kc-shadow:      0 10px 30px rgba(0, 0, 0, 0.55);
  --kc-shadow-lg:   0 24px 60px -10px rgba(0,0,0,.75), 0 8px 24px -12px rgba(0,0,0,.55);
  --kc-shadow-red:  0 10px 40px -8px var(--kc-red-glow);
  --kc-inset:       inset 0 1px 0 rgba(255,255,255,.05);
}


/* ─── 1a. ФОН BODY (deep black + червона аура) ─────────────────── */

body.ebdarkmodecolor {
  background-color: var(--kc-bg) !important;
  background-image:
    radial-gradient(900px 500px at 12% -5%,  rgba(225, 10, 23, 0.18), transparent 60%),
    radial-gradient(700px 400px at 92% 8%,   rgba(255, 59, 71, 0.10), transparent 60%),
    radial-gradient(1100px 700px at 50% 110%,rgba(225, 10, 23, 0.10), transparent 60%),
    linear-gradient(180deg, var(--kc-bg-2) 0%, var(--kc-bg) 70%) !important;
  background-attachment: fixed !important;
  color: var(--kc-ink) !important;
}


/* ─── 2. НАВІГАЦІЙНИЙ ДРОПДАУН ─────────────────────────────────── */

body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  box-shadow: var(--kc-shadow-lg), var(--kc-inset) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown li > a {
  color: var(--kc-ink-2) !important;
  transition: color .2s ease, background .2s ease;
  border-radius: 10px !important;
}
body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown li > a:hover,
body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown li > a:focus {
  background: var(--kc-red-soft) !important;
  color: var(--kc-red-hot) !important;
}
body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown .sp-column .sp-module-title {
  color: var(--kc-muted) !important;
  border-bottom-color: var(--kc-line) !important;
}


/* ─── 3. МОБІЛЬНЕ OFFCANVAS МЕНЮ ───────────────────────────────── */

body.ebdarkmodecolor .offcanvas-menu {
  background: var(--kc-bg-2) !important;
  border-right: 1px solid var(--kc-line) !important;
}
body.ebdarkmodecolor .offcanvas-menu .offcanvas-inner > ul > li > a,
body.ebdarkmodecolor .offcanvas-menu a {
  color: var(--kc-ink-2) !important;
  border-bottom-color: var(--kc-line) !important;
}
body.ebdarkmodecolor .offcanvas-menu a:hover,
body.ebdarkmodecolor .offcanvas-menu a.active {
  color: var(--kc-red-hot) !important;
}
body.ebdarkmodecolor .offcanvas-menu .offcanvas-header {
  background: var(--kc-bg) !important;
  border-bottom-color: var(--kc-line) !important;
}


/* ─── 4. HOLOGRAPHIC-CARDS → суцільні чорні картки ─────────────── */

body.ebdarkmodecolor .holographic-card {
  background-image: none !important;
  background-color: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--kc-shadow), var(--kc-inset) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background-color .35s ease !important;
}
body.ebdarkmodecolor .holographic-card:hover {
  transform: translateY(-4px);
  background-color: var(--kc-surface-2) !important;
  border-color: var(--kc-line-3) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(225, 10, 23, .35),
    0 0 36px -6px var(--kc-red-glow),
    var(--kc-inset) !important;
}
body.ebdarkmodecolor .holographic-card .qx-element-text *,
body.ebdarkmodecolor .holographic-card p,
body.ebdarkmodecolor .holographic-card span,
body.ebdarkmodecolor .holographic-card h1,
body.ebdarkmodecolor .holographic-card h2,
body.ebdarkmodecolor .holographic-card h3,
body.ebdarkmodecolor .holographic-card h4 {
  color: var(--kc-ink) !important;
}

/* Секція «Перша допомога» — НЕ ЧІПАТИ (стилі v35 збережено) */
body.ebdarkmodecolor #qx-section-first-aid-help .holographic-container .holographic-card {
  background: linear-gradient(135deg, rgba(225, 10, 23, 0.22), rgba(225, 10, 23, 0.08)) !important;
  border: 1px solid rgba(225, 10, 23, 0.45) !important;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 24px -8px var(--kc-red-glow) !important;
}
body.ebdarkmodecolor #qx-section-first-aid-help .holographic-container .holographic-card:hover {
  border-color: rgba(225, 10, 23, 0.7) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 32px -4px var(--kc-red-glow) !important;
}


/* ─── 5. ФОРМИ ─────────────────────────────────────────────────── */

body.ebdarkmodecolor input[type="text"],
body.ebdarkmodecolor input[type="email"],
body.ebdarkmodecolor input[type="tel"],
body.ebdarkmodecolor input[type="number"],
body.ebdarkmodecolor input[type="search"],
body.ebdarkmodecolor input[type="password"],
body.ebdarkmodecolor input[type="url"],
body.ebdarkmodecolor input[type="date"],
body.ebdarkmodecolor textarea,
body.ebdarkmodecolor select,
body.ebdarkmodecolor .uk-input,
body.ebdarkmodecolor .uk-textarea,
body.ebdarkmodecolor .uk-select,
body.ebdarkmodecolor .form-control,
body.ebdarkmodecolor .sp-searchbox .sp-search-query {
  background: var(--kc-surface-2) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-line-2) !important;
  border-radius: 12px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body.ebdarkmodecolor input::placeholder,
body.ebdarkmodecolor textarea::placeholder {
  color: var(--kc-muted) !important;
}
body.ebdarkmodecolor input:focus,
body.ebdarkmodecolor textarea:focus,
body.ebdarkmodecolor select:focus,
body.ebdarkmodecolor .form-control:focus {
  border-color: var(--kc-red-hot) !important;
  background: var(--kc-surface-3) !important;
  box-shadow: 0 0 0 3px var(--kc-red-soft-2), 0 0 24px -6px var(--kc-red-glow) !important;
  outline: none !important;
}
body.ebdarkmodecolor label,
body.ebdarkmodecolor .control-label {
  color: var(--kc-ink) !important;
}
body.ebdarkmodecolor .sp-searchbox {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 14px !important;
}


/* ─── 6. ТАБЛИЦІ ───────────────────────────────────────────────── */

body.ebdarkmodecolor table,
body.ebdarkmodecolor .uk-table,
body.ebdarkmodecolor .table {
  border-color: var(--kc-line) !important;
  color: var(--kc-ink-2) !important;
  background: var(--kc-surface) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
body.ebdarkmodecolor table th,
body.ebdarkmodecolor .uk-table th,
body.ebdarkmodecolor .table > thead > tr > th {
  background: var(--kc-surface-2) !important;
  color: var(--kc-ink) !important;
  border-color: var(--kc-line) !important;
}
body.ebdarkmodecolor table td,
body.ebdarkmodecolor .uk-table td,
body.ebdarkmodecolor .table > tbody > tr > td {
  border-color: var(--kc-line) !important;
  color: var(--kc-ink-2) !important;
}
body.ebdarkmodecolor table tbody tr:hover,
body.ebdarkmodecolor .table-hover > tbody > tr:hover {
  background: var(--kc-red-soft) !important;
}
body.ebdarkmodecolor .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}


/* ─── 7. КАРТКИ / BOXES ────────────────────────────────────────── */

body.ebdarkmodecolor .qx-card,
body.ebdarkmodecolor .qx-image-box,
body.ebdarkmodecolor .qx-info-box,
body.ebdarkmodecolor .qx-icon-box,
body.ebdarkmodecolor .qx-feature-box,
body.ebdarkmodecolor .quix-card {
  border: 1px solid var(--kc-line) !important;
  border-radius: 20px !important;
  background: var(--kc-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--kc-shadow), var(--kc-inset) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
body.ebdarkmodecolor .qx-card:hover,
body.ebdarkmodecolor .qx-image-box:hover,
body.ebdarkmodecolor .qx-info-box:hover,
body.ebdarkmodecolor .qx-icon-box:hover,
body.ebdarkmodecolor .qx-feature-box:hover,
body.ebdarkmodecolor .quix-card:hover {
  transform: translateY(-3px);
  background: var(--kc-surface-2) !important;
  border-color: rgba(225, 10, 23, .35) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.6),
    0 0 30px -8px var(--kc-red-glow),
    var(--kc-inset) !important;
}
body.ebdarkmodecolor .qx-card-body,
body.ebdarkmodecolor .qx-card-body .qx-card-title,
body.ebdarkmodecolor .qx-card-body .qx-post-meta,
body.ebdarkmodecolor .qx-card-body .qx-card-text {
  background: transparent !important;
}
body.ebdarkmodecolor .qx-card-body .qx-card-text.qx-element-jarticle-introtext::after,
body.ebdarkmodecolor .qx-card-body .qx-element-jarticle-introtext::after {
  background: linear-gradient(180deg, rgba(6, 7, 10, 0) 0%, rgba(6, 7, 10, 0.9) 100%) !important;
}
body.ebdarkmodecolor .article-list .article,
body.ebdarkmodecolor .blog .item,
body.ebdarkmodecolor .items-leading > [itemprop="blogPost"],
body.ebdarkmodecolor .blog-intro {
  border-color: var(--kc-line) !important;
}


/* ─── 8. КНОПКИ ────────────────────────────────────────────────── */

body.ebdarkmodecolor .qx-btn-default,
body.ebdarkmodecolor .btn-default {
  background: var(--kc-surface-2) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-line-2) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  transition: all .25s ease;
}
body.ebdarkmodecolor .qx-btn-default:hover,
body.ebdarkmodecolor .btn-default:hover {
  background: var(--kc-grad-red) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--kc-shadow-red) !important;
  transform: translateY(-1px);
}

/* Primary / Danger CTA — червоний градієнт-пілюля */
body.ebdarkmodecolor .qx-btn-primary,
body.ebdarkmodecolor .btn-primary,
body.ebdarkmodecolor .qx-btn-danger,
body.ebdarkmodecolor .btn-danger,
body.ebdarkmodecolor button[type="submit"],
body.ebdarkmodecolor input[type="submit"] {
  background: var(--kc-grad-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  box-shadow: var(--kc-shadow-red), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: all .25s ease;
}
body.ebdarkmodecolor .qx-btn-primary:hover,
body.ebdarkmodecolor .btn-primary:hover,
body.ebdarkmodecolor .qx-btn-danger:hover,
body.ebdarkmodecolor .btn-danger:hover,
body.ebdarkmodecolor button[type="submit"]:hover,
body.ebdarkmodecolor input[type="submit"]:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 50px -6px var(--kc-red-glow-2), inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-1px);
}

/* FAQ-кнопки: hover-стан — червоний glow */
body.ebdarkmodecolor #qx-button-faq1 a:hover,
body.ebdarkmodecolor #qx-button-faq2 a:hover,
body.ebdarkmodecolor #qx-button-faq3 a:hover,
body.ebdarkmodecolor #qx-button-faq4 a:hover,
body.ebdarkmodecolor #qx-button-faq5 a:hover,
body.ebdarkmodecolor #qx-button-faq6 a:hover {
  background-color: var(--kc-red-soft) !important;
  box-shadow: 0 0 28px -6px var(--kc-red-glow), inset 0 0 0 1px var(--kc-red-hot) !important;
  color: var(--kc-red-hot) !important;
}

/* FAQ-кнопки: SVG-іконки */
body.ebdarkmodecolor #qx-button-faq1 .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq2 .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq3 .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq4 .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq5 .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq6 .qx-element-button-wrapper path {
  fill: rgba(255, 255, 255, 0.87);
  transition: fill .2s ease;
}
body.ebdarkmodecolor #qx-button-faq1 a:hover .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq2 a:hover .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq3 a:hover .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq4 a:hover .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq5 a:hover .qx-element-button-wrapper path,
body.ebdarkmodecolor #qx-button-faq6 a:hover .qx-element-button-wrapper path {
  fill: var(--kc-red-hot) !important;
}


/* ─── 9. СЕКЦІЇ ─────────────────────────────────────────────────── */

body.ebdarkmodecolor #qx-section-3blocks-below-slider {
  background-color: transparent !important;
}
body.ebdarkmodecolor #qx-section-3blocks-below-slider .qx-container,
body.ebdarkmodecolor #qx-section-3blocks-below-slider .qx-container #qx-row-3blocks-below-slider,
body.ebdarkmodecolor #qx-section-3blocks-below-slider .qx-container #qx-row-3blocks-below-slider .qx-row {
  background: none !important;
}
body.ebdarkmodecolor #qx-section-fa5a6,
body.ebdarkmodecolor #qx-section-fa5a6 * {
  background-color: transparent !important;
}


/* ─── 10. ACCORDION / FAQ ──────────────────────────────────────── */

body.ebdarkmodecolor .qx-accordion-title {
  border-bottom-color: var(--kc-line) !important;
  color: var(--kc-ink) !important;
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 14px !important;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
body.ebdarkmodecolor .qx-open .qx-accordion-title,
body.ebdarkmodecolor .qx-accordion-title:hover {
  background: linear-gradient(135deg, rgba(225,10,23,.18), rgba(225,10,23,.06)) !important;
  color: var(--kc-red-hot) !important;
  border-color: rgba(225,10,23,.45) !important;
  box-shadow: 0 0 24px -8px var(--kc-red-glow) !important;
}
body.ebdarkmodecolor .qx-accordion-content {
  border-color: var(--kc-line) !important;
  color: var(--kc-ink-2) !important;
  background: var(--kc-surface-2) !important;
}


/* ─── 11. ВІДЕО-ЕЛЕМЕНТИ ───────────────────────────────────────── */

body.ebdarkmodecolor #qx-section-faq-call video {
  background-color: var(--kc-surface);
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px var(--kc-line-2), 0 0 50px -8px var(--kc-red-glow);
}
body.ebdarkmodecolor #qx-section-faq-call #qx-raw-html-video-car * {
  background-color: rgba(225, 10, 23, 0.18) !important;
}
body.ebdarkmodecolor #qx-raw-html-video-logo {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: var(--kc-shadow), var(--kc-inset) !important;
  display: inline-block !important;
}
body.ebdarkmodecolor #qx-raw-html-video-logo video {
  display: block !important;
}


/* ─── 12. ТИПОГРАФІКА ──────────────────────────────────────────── */

body.ebdarkmodecolor blockquote,
body.ebdarkmodecolor .uk-blockquote {
  border-left: 3px solid var(--kc-red-hot) !important;
  background: var(--kc-red-soft) !important;
  color: var(--kc-ink-2) !important;
  border-radius: 0 12px 12px 0 !important;
}
body.ebdarkmodecolor hr {
  border-color: var(--kc-line) !important;
}
body.ebdarkmodecolor code,
body.ebdarkmodecolor pre {
  background: var(--kc-surface-2) !important;
  color: var(--kc-red-hot) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 10px !important;
}


/* ─── 13. ПАГІНАЦІЯ ────────────────────────────────────────────── */

body.ebdarkmodecolor .pagination li a,
body.ebdarkmodecolor .uk-pagination > * > a,
body.ebdarkmodecolor .uk-pagination > * > span {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  color: var(--kc-ink-2) !important;
  border-radius: 999px !important;
  transition: all .2s ease;
}
body.ebdarkmodecolor .pagination li a:hover,
body.ebdarkmodecolor .uk-pagination > * > a:hover {
  border-color: var(--kc-red-hot) !important;
  color: var(--kc-red-hot) !important;
  background: var(--kc-red-soft) !important;
}
body.ebdarkmodecolor .pagination li.active a,
body.ebdarkmodecolor .uk-pagination > .uk-active > a,
body.ebdarkmodecolor .uk-pagination > .uk-active > span {
  background: var(--kc-grad-red) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--kc-shadow-red) !important;
}


/* ─── 14. HEADER / TOPBAR ──────────────────────────────────────── */

body.ebdarkmodecolor #sp-top-bar,
body.ebdarkmodecolor #sp-top-bar * {
  background-color: rgba(10, 12, 16, 0.92) !important;
}
body.ebdarkmodecolor #sp-top-bar {
  border-bottom: 1px solid var(--kc-line) !important;
}
body.ebdarkmodecolor #sp-top-bar .social-icons a,
body.ebdarkmodecolor .social-icons a {
  background: var(--kc-surface) !important;
  color: var(--kc-ink-2) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 999px !important;
  transition: all .25s ease;
}
body.ebdarkmodecolor .social-icons a:hover {
  background: var(--kc-grad-red) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px -4px var(--kc-red-glow) !important;
  transform: translateY(-1px);
}


/* ─── 15. СКРОЛБАР ─────────────────────────────────────────────── */

body.ebdarkmodecolor ::-webkit-scrollbar-track {
  background: var(--kc-bg);
}
body.ebdarkmodecolor ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF3B47, #B0091A);
  border: 2px solid var(--kc-bg);
  border-radius: 8px;
}
body.ebdarkmodecolor ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF6973, #E10A17);
}


/* ─── 16. BADGES / LABELS ──────────────────────────────────────── */

body.ebdarkmodecolor .uk-label,
body.ebdarkmodecolor .badge,
body.ebdarkmodecolor .label {
  background: var(--kc-surface-2) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-line-2) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
}
body.ebdarkmodecolor .uk-label-success,
body.ebdarkmodecolor .badge-success,
body.ebdarkmodecolor .label-success {
  background: rgba(0, 230, 118, 0.12) !important;
  color: #6EE7A8 !important;
  border-color: rgba(0, 230, 118, 0.35) !important;
}
body.ebdarkmodecolor .uk-label-primary,
body.ebdarkmodecolor .badge-primary,
body.ebdarkmodecolor .label-primary {
  background: var(--kc-red-soft-2) !important;
  color: var(--kc-red-hot) !important;
  border-color: rgba(225, 10, 23, 0.45) !important;
}
body.ebdarkmodecolor .uk-label-danger,
body.ebdarkmodecolor .badge-danger,
body.ebdarkmodecolor .label-danger {
  background: var(--kc-grad-red) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px -4px var(--kc-red-glow) !important;
}


/* ─── 17. ТУЛТІПИ ──────────────────────────────────────────────── */

body.ebdarkmodecolor .uk-tooltip {
  background: var(--kc-surface-3) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-line-2) !important;
  border-radius: 10px !important;
  box-shadow: var(--kc-shadow) !important;
}


/* ─── 18. СЛАЙДЕР ──────────────────────────────────────────────── */

body.ebdarkmodecolor #qx-section-slider .qx-container-fluid,
body.ebdarkmodecolor #qx-section-slider .qx-row-wrap,
body.ebdarkmodecolor #qx-section-slider .qx-row,
body.ebdarkmodecolor #qx-section-slider .qx-column,
body.ebdarkmodecolor #qx-section-slider .qx-col-wrap,
body.ebdarkmodecolor #qx-section-slider .qx-elements-wrap,
body.ebdarkmodecolor #qx-section-slider .qx-element-wrap,
body.ebdarkmodecolor #qx-section-slider .qx-element,
body.ebdarkmodecolor #qx-section-slider .slider-content-wrapper,
body.ebdarkmodecolor #qx-section-slider .qx-transition-toggle,
body.ebdarkmodecolor #qx-section-slider .qx-background-overlay,
body.ebdarkmodecolor #qx-section-slider #qx-slideshow-1,
body.ebdarkmodecolor #qx-section-slider h1,
body.ebdarkmodecolor #qx-section-slider h2,
body.ebdarkmodecolor #qx-section-slider h3,
body.ebdarkmodecolor #qx-section-slider p,
body.ebdarkmodecolor #qx-section-slider .qx-element-blurb_wrapper,
body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__content,
body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__title,
body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__body,
body.ebdarkmodecolor #qx-section-slider .qx-element-blurb__subtitle,
body.ebdarkmodecolor #qx-section-slider .qx-slidenav-container,
body.ebdarkmodecolor #qx-section-slider #slider-company-name-after div,
body.ebdarkmodecolor #qx-row-slider-company-name-emblems * {
  background-color: transparent !important;
}

/* Червоний оверлей у дусі референсу — від глибокого чорного до криваво-червоного */
body.ebdarkmodecolor #qx-section-slider .qx-overlay-primary {
   background: linear-gradient(135deg, rgba(6, 7, 10, 0.85) 0%, rgba(40, 8, 12, 0.70) 50%, rgba(225, 10, 23, 0.45) 100%) !important;
}


/* ─── 19. КОНТЕНТНІ БЛОКИ ──────────────────────────────────────── */

body.ebdarkmodecolor #qx-section-useful-phones * {
  background-color: transparent !important;
}

body.ebdarkmodecolor #qx-row-4blocks-phones .qx-col-wrap,
body.ebdarkmodecolor #qx-row-4blocks-phones .qx-element-blurb__content .qx-element-blurb__title,
body.ebdarkmodecolor #qx-row-4blocks-phones .qx-element-blurb__content .qx-element-blurb__body,
body.ebdarkmodecolor #qx-row-4blocks-phones .qx-element-blurb__content .qx-element-blurb__body p,
body.ebdarkmodecolor #qx-row-4blocks-phones .qx-background-overlay,
body.ebdarkmodecolor #qx-row-4blocks-phones .qx-background-overlay .qx-element-blurb_wrapper {
  background-color: transparent !important;
}

body.ebdarkmodecolor #qx-button-faq1 *,
body.ebdarkmodecolor #qx-button-faq2 *,
body.ebdarkmodecolor #qx-button-faq3 *,
body.ebdarkmodecolor #qx-button-faq4 *,
body.ebdarkmodecolor #qx-button-faq5 *,
body.ebdarkmodecolor #qx-button-faq6 * {
  background-color: transparent !important;
}

body.ebdarkmodecolor #qx-column-we-are-in-numbers-block1 *,
body.ebdarkmodecolor #qx-column-we-are-in-numbers-block2 *,
body.ebdarkmodecolor #qx-column-we-are-in-numbers-block3 *,
body.ebdarkmodecolor #qx-column-we-are-in-numbers-block4 * {
  background-color: transparent !important;
}

/* «Ми у числах» — неоновий червоний акцент на цифрах */
body.ebdarkmodecolor #qx-column-we-are-in-numbers-block1 .qx-element-blurb__title,
body.ebdarkmodecolor #qx-column-we-are-in-numbers-block2 .qx-element-blurb__title,
body.ebdarkmodecolor #qx-column-we-are-in-numbers-block3 .qx-element-blurb__title,
body.ebdarkmodecolor #qx-column-we-are-in-numbers-block4 .qx-element-blurb__title {
  color: var(--kc-red-hot) !important;
  text-shadow: 0 0 24px var(--kc-red-glow-2), 0 0 48px var(--kc-red-glow) !important;
}

/* 3-блоки + 4-телефони — суцільні чорні картки.
   ВАЖЛИВО: блоки #qx-column-3x3blocks-first-aid-help-blockN НЕ чіпаємо. */
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3,
body.ebdarkmodecolor #qx-column-4blocks-phones-block1,
body.ebdarkmodecolor #qx-column-4blocks-phones-block2,
body.ebdarkmodecolor #qx-column-4blocks-phones-block3,
body.ebdarkmodecolor #qx-column-4blocks-phones-block4 {
  background-color: var(--kc-surface) !important;
  background-image: var(--kc-grad-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 22px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--kc-shadow), var(--kc-inset) !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1:hover,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2:hover,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3:hover,
body.ebdarkmodecolor #qx-column-4blocks-phones-block1:hover,
body.ebdarkmodecolor #qx-column-4blocks-phones-block2:hover,
body.ebdarkmodecolor #qx-column-4blocks-phones-block3:hover,
body.ebdarkmodecolor #qx-column-4blocks-phones-block4:hover {
  transform: translateY(-4px);
  background-image: var(--kc-grad-card) !important;
  border-color: rgba(225, 10, 23, .55) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.7),
    0 0 40px -6px var(--kc-red-glow),
    var(--kc-inset) !important;
}
/* Текст усередині — світлий навіть на червоному hover */
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1 *,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2 *,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block1 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block2 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block3 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block4 * {
  background-color: transparent !important;
  color: var(--kc-ink) !important;
}

/* Перевизначення старого «#434343» градієнта з v35 */
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1 > div,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2 > div,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3 > div {
  background: transparent !important;
}


/* ─── 20. ACCESSIBILITY ─────────────────────────────────────────── */

body.ebdarkmodecolor button.djacc__openbtn {
  background: var(--kc-surface-2) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-line-2) !important;
  border-radius: 999px !important;
}


/* ─── 21. DARK MODE TOGGLE (#darkmode_button) ──────────────────── */

body.ebdarkmodecolor #darkmode_button {
  background: var(--kc-grad-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: var(--kc-shadow-red), inset 0 1px 0 rgba(255,255,255,.20) !important;
  transition: all .25s ease;
}
body.ebdarkmodecolor #darkmode_button:hover {
  filter: brightness(1.10);
  box-shadow: 0 14px 50px -4px var(--kc-red-glow-2), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-1px);
}


/* ─── 22. REDUCED MOTION ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.ebdarkmodecolor *,
  body.ebdarkmodecolor *::before,
  body.ebdarkmodecolor *::after {
    transition: none !important;
    animation: none !important;
  }
}