/* ================================================================
   dark-mode-homepage29.css
   Темний режим — https://emd103.site/ (головна сторінка)
   Версія 29 — Dark Glassmorphism Health UI

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

   Концепція:
   • Глибокий темно-синій фон (#0B0E14 → #121620) з тонким градієнтом-ауреолою.
   • Скляні картки: rgba(255,255,255, .06–.12) + backdrop-filter blur(15–30px).
   • Тонкі напівпрозорі контури 1px rgba(255,255,255,.18–.28).
   • М'які розсіяні тіні 0 8px 32px rgba(0,0,0,.37).
   • Медичні неонові акценти: бірюзовий #00F2FE, зелений #00E676.
     Бренд-червоний #e10a17 залишається для критичних CTA (швидка допомога).
   ================================================================ */


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

body.ebdarkmodecolor {
  /* Фони */
  --kc-bg:          #0B0E14;                    /* фон body — глибокий темно-синій */
  --kc-bg-2:        #121620;                    /* верхній тон градієнта             */
  --kc-bg-soft:     #131826;                    /* непрозорі дроп-даун, offcanvas    */

  /* Скло */
  --kc-glass:       rgba(255, 255, 255, 0.06);  /* базова прозорість карток          */
  --kc-glass-2:     rgba(255, 255, 255, 0.10);  /* підсилена для hover/важливих      */
  --kc-glass-3:     rgba(255, 255, 255, 0.14);  /* контрольовані елементи            */
  --kc-glass-line:  rgba(255, 255, 255, 0.22);  /* напівпрозорий контур              */
  --kc-glass-line2: rgba(255, 255, 255, 0.28);  /* контур hover/focus                */
  --kc-blur:        blur(22px) saturate(140%);  /* матове скло                       */
  --kc-blur-strong: blur(30px) saturate(150%);  /* посилене скло                     */

  /* Текст */
  --kc-ink:         #eef2f7;                    /* основний текст       */
  --kc-ink-2:       #cbd5e1;                    /* вторинний текст      */
  --kc-muted:       #94a3b8;                    /* підписи, placeholder */
  --kc-line:        rgba(255, 255, 255, 0.10);  /* стандартна рамка     */

  /* Акценти (медичні неонові) */
  --kc-accent:        #00F2FE;                  /* неоновий бірюзовий (primary)      */
  --kc-accent-2:      #00E676;                  /* неоновий зелений (success/health) */
  --kc-accent-purple: #7B1FA2;                  /* фіолетовий (info, рідко)          */
  --kc-accent-glow:   rgba(0, 242, 254, 0.45);
  --kc-accent-soft:   rgba(0, 242, 254, 0.12);
  --kc-accent2-soft:  rgba(0, 230, 118, 0.12);

  /* Бренд-червоний (екстрена допомога) */
  --kc-red-soft:    rgba(225, 10, 23, 0.14);
  --kc-red-glow:    rgba(225, 10, 23, 0.45);

  /* Тіні */
  --kc-shadow-sm:   0 2px 6px rgba(0,0,0,.40);
  --kc-shadow:      0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --kc-shadow-lg:   0 24px 60px -10px rgba(0,0,0,.65), 0 8px 24px -12px rgba(0,0,0,.45);
  --kc-shadow-glow: 0 0 0 1px rgba(0,242,254,.25), 0 8px 32px rgba(0,242,254,.15);
}


/* ─── 1a. ФОН BODY (градієнт-аура) ─────────────────────────────── */

body.ebdarkmodecolor {
  background-color: var(--kc-bg) !important;
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(0, 242, 254, 0.10), transparent 60%),
    radial-gradient(900px 500px at 95% 8%,    rgba(123, 31, 162, 0.10), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(0, 230, 118, 0.08), transparent 60%),
    linear-gradient(180deg, var(--kc-bg-2) 0%, var(--kc-bg) 60%) !important;
  background-attachment: fixed !important;
  color: var(--kc-ink) !important;
}


/* ─── 2. НАВІГАЦІЙНИЙ ДРОПДАУН (скло) ──────────────────────────── */

body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown {
  background: rgba(18, 22, 32, 0.72) !important;
  border: 1px solid var(--kc-glass-line) !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !important;
  box-shadow: var(--kc-shadow-lg) !important;
  border-radius: 14px !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;
}
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-accent-soft) !important;
  color: var(--kc-accent) !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-glass-line) !important;
}


/* ─── 3. МОБІЛЬНЕ OFFCANVAS МЕНЮ (скло) ────────────────────────── */

body.ebdarkmodecolor .offcanvas-menu {
  background: rgba(11, 14, 20, 0.85) !important;
  border-right: 1px solid var(--kc-glass-line) !important;
  backdrop-filter: var(--kc-blur-strong) !important;
  -webkit-backdrop-filter: var(--kc-blur-strong) !important;
}
body.ebdarkmodecolor .offcanvas-menu .offcanvas-inner > ul > li > a,
body.ebdarkmodecolor .offcanvas-menu a {
  color: var(--kc-ink-2) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}
body.ebdarkmodecolor .offcanvas-menu a:hover,
body.ebdarkmodecolor .offcanvas-menu a.active {
  color: var(--kc-accent) !important;
}
body.ebdarkmodecolor .offcanvas-menu .offcanvas-header {
  background: rgba(11, 14, 20, 0.6) !important;
  border-bottom-color: var(--kc-glass-line) !important;
}


/* ─── 4. HOLOGRAPHIC-CARDS (Glass Cards) ───────────────────────── */

body.ebdarkmodecolor .holographic-card {
  background-image: none !important;
  background-color: var(--kc-glass) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--kc-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !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-glass-2) !important;
  border-color: var(--kc-glass-line2) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--kc-accent-glow),
    0 0 28px -6px var(--kc-accent-glow) !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;
}

/* Секція «Перша допомога» — критичні картки з червоним скляним тонуванням */
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:
    var(--kc-shadow),
    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-glass) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !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-accent) !important;
  background: var(--kc-glass-2) !important;
  box-shadow: 0 0 0 3px var(--kc-accent-soft), 0 0 24px -6px var(--kc-accent-glow) !important;
  outline: none !important;
}
body.ebdarkmodecolor label,
body.ebdarkmodecolor .control-label {
  color: var(--kc-ink) !important;
}
body.ebdarkmodecolor .sp-searchbox {
  background: var(--kc-glass) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 12px !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !important;
}


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

body.ebdarkmodecolor table,
body.ebdarkmodecolor .uk-table,
body.ebdarkmodecolor .table {
  border-color: var(--kc-glass-line) !important;
  color: var(--kc-ink-2) !important;
  background: transparent !important;
}
body.ebdarkmodecolor table th,
body.ebdarkmodecolor .uk-table th,
body.ebdarkmodecolor .table > thead > tr > th {
  background: var(--kc-glass-2) !important;
  color: var(--kc-ink) !important;
  border-color: var(--kc-glass-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body.ebdarkmodecolor table td,
body.ebdarkmodecolor .uk-table td,
body.ebdarkmodecolor .table > tbody > tr > td {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--kc-ink-2) !important;
}
body.ebdarkmodecolor table tbody tr:hover,
body.ebdarkmodecolor .table-hover > tbody > tr:hover {
  background: var(--kc-accent-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-glass-line) !important;
  border-radius: 16px !important;
  background: var(--kc-glass) !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !important;
  box-shadow: var(--kc-shadow) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .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);
  border-color: var(--kc-glass-line2) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--kc-accent-glow) !important;
}
body.ebdarkmodecolor .qx-card-body {
  background: transparent !important;
}
/* Gradient-fade внизу превью новин */
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(11, 14, 20, 0) 0%, rgba(11, 14, 20, 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-glass-line) !important;
}


/* ─── 8. КНОПКИ (скляні + неонові акценти) ─────────────────────── */

body.ebdarkmodecolor .qx-btn-default,
body.ebdarkmodecolor .btn-default {
  background: var(--kc-glass) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all .25s ease;
}
body.ebdarkmodecolor .qx-btn-default:hover,
body.ebdarkmodecolor .btn-default:hover {
  background: var(--kc-accent-soft) !important;
  border-color: var(--kc-accent) !important;
  color: var(--kc-accent) !important;
  box-shadow: 0 0 24px -6px var(--kc-accent-glow) !important;
}

/* FAQ-кнопки: hover-стан — неоновий бірюзовий */
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-accent-soft) !important;
  box-shadow: 0 0 24px -6px var(--kc-accent-glow), inset 0 0 0 1px var(--kc-accent) !important;
  color: var(--kc-accent) !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-accent) !important;
}


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

/* «3 blocks below slider» — прозорі обгортки */
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;
}

/* Секція fa5a6 — прозора */
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-glass-line) !important;
  color: var(--kc-ink) !important;
  background: var(--kc-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 10px !important;
  transition: background .25s ease, color .25s ease;
}
body.ebdarkmodecolor .qx-open .qx-accordion-title,
body.ebdarkmodecolor .qx-accordion-title:hover {
  background: var(--kc-accent-soft) !important;
  color: var(--kc-accent) !important;
  box-shadow: inset 0 0 0 1px var(--kc-accent-glow) !important;
}
body.ebdarkmodecolor .qx-accordion-content {
  border-color: var(--kc-glass-line) !important;
  color: var(--kc-ink-2) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}


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

/* FAQ Call — circular video */
body.ebdarkmodecolor #qx-section-faq-call video {
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px var(--kc-glass-line), 0 0 40px -8px var(--kc-accent-glow);
}

/* FAQ Call — машина швидкої допомоги (екстрений бренд-червоний) */
body.ebdarkmodecolor #qx-section-faq-call #qx-raw-html-video-car * {
  background-color: rgb(255, 3, 3) !important;
}

/* «Ми у числах» — відео-логотип (скляний контейнер) */
body.ebdarkmodecolor #qx-raw-html-video-logo {
  background: var(--kc-glass) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !important;
  box-shadow: var(--kc-shadow) !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-accent) !important;
  background: var(--kc-accent-soft) !important;
  color: var(--kc-ink-2) !important;
  border-radius: 0 10px 10px 0 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
body.ebdarkmodecolor hr {
  border-color: var(--kc-glass-line) !important;
}
body.ebdarkmodecolor code,
body.ebdarkmodecolor pre {
  background: var(--kc-glass) !important;
  color: var(--kc-accent) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 8px !important;
}


/* ─── 13. ПАГІНАЦІЯ (скло) ─────────────────────────────────────── */

body.ebdarkmodecolor .pagination li a,
body.ebdarkmodecolor .uk-pagination > * > a,
body.ebdarkmodecolor .uk-pagination > * > span {
  background: var(--kc-glass) !important;
  border: 1px solid var(--kc-glass-line) !important;
  color: var(--kc-ink-2) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all .2s ease;
}
body.ebdarkmodecolor .pagination li a:hover,
body.ebdarkmodecolor .uk-pagination > * > a:hover {
  border-color: var(--kc-accent) !important;
  color: var(--kc-accent) !important;
  background: var(--kc-accent-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-accent) !important;
  border-color: var(--kc-accent) !important;
  color: #062028 !important;
  box-shadow: 0 0 24px -6px var(--kc-accent-glow) !important;
}


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

body.ebdarkmodecolor #sp-top-bar,
body.ebdarkmodecolor #sp-top-bar * {
  background-color: rgba(20, 24, 34, 0.85) !important;
}
body.ebdarkmodecolor #sp-top-bar {
  border-bottom: 1px solid var(--kc-glass-line) !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !important;
}
body.ebdarkmodecolor #sp-top-bar .social-icons a,
body.ebdarkmodecolor .social-icons a {
  background: var(--kc-glass) !important;
  color: var(--kc-muted) !important;
  border: 1px solid var(--kc-glass-line) !important;
  transition: all .25s ease;
}
body.ebdarkmodecolor .social-icons a:hover {
  background: var(--kc-accent-soft) !important;
  color: var(--kc-accent) !important;
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 18px -4px var(--kc-accent-glow) !important;
}


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

body.ebdarkmodecolor ::-webkit-scrollbar-track {
  background: var(--kc-bg);
}
body.ebdarkmodecolor ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 242, 254, 0.35), rgba(0, 230, 118, 0.35));
  border: 2px solid var(--kc-bg);
  border-radius: 8px;
}
body.ebdarkmodecolor ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0, 242, 254, 0.55), rgba(0, 230, 118, 0.55));
}


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

body.ebdarkmodecolor .uk-label,
body.ebdarkmodecolor .badge,
body.ebdarkmodecolor .label {
  background: var(--kc-glass-2) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
body.ebdarkmodecolor .uk-label-success,
body.ebdarkmodecolor .badge-success,
body.ebdarkmodecolor .label-success {
  background: var(--kc-accent2-soft) !important;
  color: var(--kc-accent-2) !important;
  border-color: rgba(0, 230, 118, 0.45) !important;
}
body.ebdarkmodecolor .uk-label-primary,
body.ebdarkmodecolor .badge-primary,
body.ebdarkmodecolor .label-primary {
  background: var(--kc-accent-soft) !important;
  color: var(--kc-accent) !important;
  border-color: rgba(0, 242, 254, 0.45) !important;
}
body.ebdarkmodecolor .uk-label-danger,
body.ebdarkmodecolor .badge-danger,
body.ebdarkmodecolor .label-danger {
  background: var(--kc-red-soft) !important;
  color: #fca5a5 !important;
  border-color: rgba(225, 10, 23, 0.45) !important;
}


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

body.ebdarkmodecolor .uk-tooltip {
  background: rgba(15, 22, 35, 0.85) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-glass-line) !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !important;
  border-radius: 8px !important;
  box-shadow: var(--kc-shadow) !important;
}


/* ─── 18. СЛАЙДЕР ──────────────────────────────────────────────── */
/*
   EB Dark Mode ставить background-color inline на кожен елемент
   слайдера. Робимо wrapper-и прозорими, оверлей — темно-синім.
*/

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(11, 14, 20, 0.72) 0%, rgba(18, 22, 32, 0.55) 100%) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !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;
}

/* FAQ-кнопки — прозорі обгортки */
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-accent) !important;
  text-shadow: 0 0 24px var(--kc-accent-glow) !important;
}

/* 3-блоки, 4-телефони, 9-перша допомога — скляні картки замість суцільного фону */
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,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block1,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block2,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block3,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block4,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block5,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block6,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block7,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block8,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block9 {
  background-color: var(--kc-glass) !important;
  border: 1px solid var(--kc-glass-line) !important;
  border-radius: 16px !important;
  backdrop-filter: var(--kc-blur) !important;
  -webkit-backdrop-filter: var(--kc-blur) !important;
  box-shadow: var(--kc-shadow) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s 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,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block1:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block2:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block3:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block4:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block5:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block6:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block7:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block8:hover,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block9:hover {
  transform: translateY(-3px);
  background-color: var(--kc-glass-2) !important;
  border-color: var(--kc-glass-line2) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--kc-accent-glow) !important;
}
/* Внутрішні діти — прозорі, щоб скло читалось */
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 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block1 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block2 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block3 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block4 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block5 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block6 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block7 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block8 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block9 * {
  background-color: transparent !important;
}


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

body.ebdarkmodecolor button.djacc__openbtn {
  background: var(--kc-glass-2) !important;
  color: var(--kc-ink) !important;
  border: 1px solid var(--kc-glass-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}


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

body.ebdarkmodecolor #darkmode_button {
  background: var(--kc-glass-2) !important;
  color: var(--kc-accent) !important;
  border: 1px solid var(--kc-glass-line2) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 0 18px -4px var(--kc-accent-glow) !important;
  transition: all .25s ease;
}
body.ebdarkmodecolor #darkmode_button:hover {
  box-shadow: 0 0 28px -2px var(--kc-accent-glow) !important;
  transform: translateY(-1px);
}


/* ─── 22. LOGO (закоментовано) ──────────────────────────────────── */
/*
body.ebdarkmodecolor #sp-header .logo img {
  content: url('/images/logo-wh.png') !important;
}
*/


/* ─── 23. REDUCED MOTION / FALLBACK ─────────────────────────────── */

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

/* Браузери без backdrop-filter — посилюємо непрозорість фону */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ebdarkmodecolor .holographic-card,
  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,
  body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown,
  body.ebdarkmodecolor .offcanvas-menu {
    background-color: rgba(18, 22, 32, 0.92) !important;
  }
}