/* ================================================================
   dark-mode-homepage.css
   Темний режим — https://emd103.site/ (головна сторінка)
   Клас темного режиму: body.ebdarkmodecolor (EB Dark Mode module)

   Підключати ПІСЛЯ 103-kyivcity-modern.css.
   ================================================================ */


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

body.ebdarkmodecolor {
  --kc-bg:        #00151f;                    /* фон body             */
  --kc-bg-soft:   #091827;                    /* картки, форми        */
  --kc-ink:       #e2e8f0;                    /* основний текст       */
  --kc-ink-2:     #cbd5e1;                    /* вторинний текст      */
  --kc-muted:     #94a3b8;                    /* підписи, placeholder */
  --kc-line:      rgba(255, 255, 255, 0.09);  /* рамки                */
  --kc-red-soft:  rgba(225, 10, 23, 0.12);    /* м'який червоний фон  */

  --kc-shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --kc-shadow:    0 6px 20px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  --kc-shadow-lg: 0 24px 60px -20px rgba(0,0,0,.65), 0 8px 24px -12px rgba(0,0,0,.45);
}


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

body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown {
  background: #091827 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5) !important;
}
body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown li > a {
  color: #cbd5e1 !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: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown .sp-column .sp-module-title {
  color: var(--kc-muted) !important;
  border-bottom-color: rgba(255, 255, 255, 0.09) !important;
}


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

body.ebdarkmodecolor .offcanvas-menu {
  background: #091827 !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
}
body.ebdarkmodecolor .offcanvas-menu .offcanvas-inner > ul > li > a,
body.ebdarkmodecolor .offcanvas-menu a {
  color: #cbd5e1 !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-red) !important;
}
body.ebdarkmodecolor .offcanvas-menu .offcanvas-header {
  background: #00151f !important;
  border-bottom-color: rgba(255, 255, 255, 0.09) !important;
}


/* ─── 4. HOLOGRAPHIC-CARDS ─────────────────────────────────────── */
/*
   Оригінальний background-image: linear-gradient(rgba(255,255,255,.72)…)
   дає сірий ефект на темному тлі → прибираємо, замінюємо glass-ефектом.
*/

body.ebdarkmodecolor .holographic-card {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !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: #e2e8f0 !important;
}

/* Секція «Перша допомога» — голографічні картки з червоним тонуванням */
body.ebdarkmodecolor #qx-section-first-aid-help .holographic-container .holographic-card {
  background: rgba(255, 3, 3, 0.52) !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: #091827 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.ebdarkmodecolor input::placeholder,
body.ebdarkmodecolor textarea::placeholder {
  color: #94a3b8 !important;
}
body.ebdarkmodecolor input:focus,
body.ebdarkmodecolor textarea:focus,
body.ebdarkmodecolor select:focus,
body.ebdarkmodecolor .form-control:focus {
  border-color: var(--kc-red) !important;
  box-shadow: 0 0 0 3px rgba(225, 10, 23, 0.2) !important;
  outline: none !important;
}
body.ebdarkmodecolor label,
body.ebdarkmodecolor .control-label {
  color: #e2e8f0 !important;
}
body.ebdarkmodecolor .sp-searchbox {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}


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

body.ebdarkmodecolor table,
body.ebdarkmodecolor .uk-table,
body.ebdarkmodecolor .table {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
body.ebdarkmodecolor table th,
body.ebdarkmodecolor .uk-table th,
body.ebdarkmodecolor .table > thead > tr > th {
  background: #091827 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.1) !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: #cbd5e1 !important;
}
body.ebdarkmodecolor table tbody tr:hover,
body.ebdarkmodecolor .table-hover > tbody > tr:hover {
  background: rgba(225, 10, 23, 0.06) !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-color: rgba(255, 255, 255, 0.09) !important;
}
body.ebdarkmodecolor .qx-card-body {
  background: #091827 !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(9, 24, 39, 0) 0%, #091827 100%) !important;
}
body.ebdarkmodecolor .article-list .article,
body.ebdarkmodecolor .blog .item,
body.ebdarkmodecolor .items-leading > [itemprop="blogPost"],
body.ebdarkmodecolor .blog-intro {
  border-color: rgba(255, 255, 255, 0.09) !important;
}


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

body.ebdarkmodecolor .qx-btn-default,
body.ebdarkmodecolor .btn-default {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body.ebdarkmodecolor .qx-btn-default:hover,
body.ebdarkmodecolor .btn-default:hover {
  border-color: var(--kc-red) !important;
  color: #fff !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: #ef161b !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);
}


/* ─── 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: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}
body.ebdarkmodecolor .qx-open .qx-accordion-title,
body.ebdarkmodecolor .qx-accordion-title:hover {
  background-color: rgba(225, 10, 23, 0.1) !important;
  color: #fff !important;
}
body.ebdarkmodecolor .qx-accordion-content {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
}


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

/* FAQ Call — circular video */
body.ebdarkmodecolor #qx-section-faq-call video {
  background-color: #091827;
}

/* 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: #04151f !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !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-color: var(--kc-red) !important;
  background: rgba(225, 10, 23, 0.06) !important;
  color: #cbd5e1 !important;
}
body.ebdarkmodecolor hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.ebdarkmodecolor code,
body.ebdarkmodecolor pre {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fca5a5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}


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

body.ebdarkmodecolor .pagination li a,
body.ebdarkmodecolor .uk-pagination > * > a,
body.ebdarkmodecolor .uk-pagination > * > span {
  background: #091827 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
body.ebdarkmodecolor .pagination li.active a,
body.ebdarkmodecolor .uk-pagination > .uk-active > a,
body.ebdarkmodecolor .uk-pagination > .uk-active > span {
  background: var(--kc-red) !important;
  border-color: var(--kc-red) !important;
  color: #fff !important;
}


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

body.ebdarkmodecolor #sp-top-bar,
body.ebdarkmodecolor #sp-top-bar * {
  background-color: rgb(46, 49, 51) !important;
}
body.ebdarkmodecolor #sp-top-bar {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.ebdarkmodecolor #sp-top-bar .social-icons a,
body.ebdarkmodecolor .social-icons a {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.ebdarkmodecolor .social-icons a:hover {
  background: var(--kc-red) !important;
  color: #fff !important;
}


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

body.ebdarkmodecolor ::-webkit-scrollbar-track {
  background: #091827;
}
body.ebdarkmodecolor ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-color: #091827;
}
body.ebdarkmodecolor ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}


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

body.ebdarkmodecolor .uk-label,
body.ebdarkmodecolor .badge,
body.ebdarkmodecolor .label {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}
body.ebdarkmodecolor .uk-label-danger,
body.ebdarkmodecolor .badge-danger,
body.ebdarkmodecolor .label-danger {
  background: rgba(225, 10, 23, 0.2) !important;
  color: #fca5a5 !important;
}


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

body.ebdarkmodecolor .uk-tooltip {
  background: #0f2035 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}


/* ─── 18. СЛАЙДЕР ──────────────────────────────────────────────── */
/*
   EB Dark Mode ставить background-color: rgb(0,21,31) inline на кожен
   елемент всередині слайдера, включаючи .qx-overlay-primary —
   абсолютний div що перекриває фонові зображення слайдів.
   Оригінал: .qx-overlay-primary { background: rgba(34,34,34,0.9) }
   Рішення: wrapper-елементи → transparent; overlay → 60% navy.
*/

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-color: rgba(0, 10, 18, 0.60) !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;
}

/* 3-блоки, 4-телефони, 9-перша допомога — темний фон колонок і дітей */
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block1 *,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block2 *,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3,
body.ebdarkmodecolor #qx-column-3blocks-below-slider-block3 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block1,
body.ebdarkmodecolor #qx-column-4blocks-phones-block1 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block2,
body.ebdarkmodecolor #qx-column-4blocks-phones-block2 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block3,
body.ebdarkmodecolor #qx-column-4blocks-phones-block3 *,
body.ebdarkmodecolor #qx-column-4blocks-phones-block4,
body.ebdarkmodecolor #qx-column-4blocks-phones-block4 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block1,
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-block2 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block3,
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-block4 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block5,
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-block6 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block7,
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-block8 *,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block9,
body.ebdarkmodecolor #qx-column-3x3blocks-first-aid-help-block9 * {
  background-color: #030e14 !important;
}


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

body.ebdarkmodecolor button.djacc__openbtn {
  background-color: rgb(105, 105, 105) !important;
}


/* ─── 21. LOGO (закоментовано) ──────────────────────────────────── */
/*
   Логотип (кольорові цифри 103) добре виглядає і на темному фоні.
   Розкоментуйте за потреби, переконавшись що файл існує.

body.ebdarkmodecolor #sp-header .logo img {
  content: url('/images/logo-wh.png') !important;
}
*/