@charset "UTF-8";
/* ================================================================
   Premium Black Glassmorphism — Global Dark Styles
   Темний режим — (глобальні стилі)
   Версія 42 — Premium Black Glass Health UI

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

   Концепція:
   • Справжній преміальний чорний фон (#08090B → #0F1013), без синього
     підтону — глибший і спокійніший за попередню навігаційно-сіру версію.
   • Скляні картки: rgba(255,255,255, .04–.10) + backdrop-filter blur(18–28px).
   • Тонкі напівпрозорі контури 1px rgba(255,255,255,.10–.20).
   • М'які розсіяні тіні 0 8px 32px rgba(0,0,0,.55) — глибші, бо фон темніший.
   • Акцентна палітра збережена: бірюзовий #00F2FE, зелений #00E676,
     фіолетовий #7B1FA2, бренд-червоний #E10A17 — використовуються
     ощадливо, як коштовні вкраплення на чорному, а не неонова плата.
   ================================================================ */


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

body.ebdarkmodecolor {
  /* Фони — справжній преміальний чорний */
  --kc-bg:          #08090B;                    /* фон body — глибокий чорний, без синяви */
  --kc-bg-2:        #0F1013;                    /* верхній тон градієнта             */
  --kc-bg-soft:     #14151A;                    /* непрозорі дроп-даун, offcanvas    */

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

  /* Текст */
  --kc-ink:         #f2f3f5;                    /* основний текст       */
  --kc-ink-2:       #c7cad1;                    /* вторинний текст      */
  --kc-muted:       #8b8f99;                    /* підписи, placeholder */
  --kc-line:        rgba(255, 255, 255, 0.08);  /* стандартна рамка     */

  /* Акценти (медичні, збережені — як коштовні вкраплення на чорному) */
  --kc-accent:        #00F2FE;                  /* бірюзовий (primary)               */
  --kc-accent-menu:   #ff3b47;                  /* бірюзовий (primary)               */
  --kc-accent-2:      #00E676;                  /* зелений (success/health)          */
  --kc-accent-purple: #7B1FA2;                  /* фіолетовий (info, рідко)          */
  --kc-accent-glow:   rgba(0, 242, 254, 0.35);
  --kc-accent-soft:   rgba(0, 242, 254, 0.10);
  --kc-accent2-soft:  rgba(0, 230, 118, 0.10);
  --kc-accent2-soft-menu:  #fe00001f;


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

  /* Тіні — глибші, бо фон темніший */
  --kc-shadow-sm:   0 2px 8px rgba(0,0,0,.55);
  --kc-shadow:      0 8px 32px 0 rgba(0, 0, 0, 0.55);
  --kc-shadow-lg:   0 24px 64px -12px rgba(0,0,0,.75), 0 8px 24px -12px rgba(0,0,0,.55);
  --kc-shadow-glow: 0 0 0 1px rgba(0,242,254,.20), 0 8px 32px rgba(0,242,254,.12);
}


/* ─── 1a. ФОН BODY (преміальний чорний з тонкою ауреолою) ──────── */

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

body.ebdarkmodecolor .qx-list-unstyled,
body.ebdarkmodecolor .qx-list-unstyled *
{
    background-color: transparent!important;
}


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

.ebdarkmodecolor #sp-top-bar {
  background: var(--kc-bg-soft) !important;
}


body.ebdarkmodecolor #sp-header,
body.ebdarkmodecolor #sp-header *
{
background-color:transparent !important;
}


body.site.ebdarkmodecolor #sp-header {
    background: rgba(8, 9, 11, 0.55) !important;
    backdrop-filter: var(--kc-blur);
    -webkit-backdrop-filter: var(--kc-blur);
}

.ebdarkmodecolor #sp-header {
  border-bottom: 1px solid var(--kc-line) !important;
}

body.ebdarkmodecolor #sp-header::before {
    background: linear-gradient(-45deg, #562b1e73, #51152c8f, #22627980, #0e3b308f) !important;
    opacity: 0.7;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.ebdarkmodecolor #qx-section-blog-news {
  background: var(--kc-bg-soft) !important;
}


body.ebdarkmodecolor #sp-menu .sp-megamenu-parent .sp-dropdown {
  background: rgba(15, 16, 19, 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-menu) !important;
  color: var(--kc-accent-menu) !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: rgb(11 26 36) !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-red) !important;
}
body.ebdarkmodecolor .offcanvas-menu .offcanvas-header {
  background: rgba(8, 9, 11, 0.6) !important;
  border-bottom-color: var(--kc-glass-line) !important;
}

body.ebdarkmodecolor #offcanvas-toggler div.burger-icon > span,
body.ebdarkmodecolor .offcanvas-menu div.burger-icon > span
{
   background-color: rgb(255 22 24) !important;
}

body.ebdarkmodecolor .offcanvas-menu .offcanvas-inner ul.menu>li {
    border-radius: 25px;
}

body.ebdarkmodecolor .offcanvas-overlay {
  background-color: transparent !important;
}


/* ─── 4. ФОРМИ (скляні інпути) ─────────────────────────────────── */

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;
}

body.ebdarkmodecolor .qx-btn-primary, 
body.ebdarkmodecolor .btn-primary {
    background: #e10a17!important;
    box-shadow: 0 6px 16px -4px rgba(225, 10, 23, .28);
    color: white !important;
}
/* ─── 5. ТАБЛИЦІ ───────────────────────────────────────────────── */

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;
}

body.ebdarkmodecolor table tr *{
background-color:transparent!important;
}


/* ─── 6. КАРТКИ / 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,
body.ebdarkmodecolor .qx-card-body .qx-card-title,
body.ebdarkmodecolor .qx-card-body .qx-post-meta,
body.ebdarkmodecolor .qx-card-body .qx-post-meta .qx-element-jarticle-date,
body.ebdarkmodecolor .qx-card-body .qx-card-text
{
  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(8, 9, 11, 0) 0%, rgba(8, 9, 11, 0.2) 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;
}


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

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;
}

body.ebdarkmodecolor .sticky-wrapper, 
body.ebdarkmodecolor .sticky-wrapper label > span
{
    background-color: transparent!important;
}

body.ebdarkmodecolor .expanded-panel,
body.ebdarkmodecolor .expanded-panel *
{
    background-color: #0b121b!important;
}

body.ebdarkmodecolor .expanded-panel {
    border-left: 1px solid #1f181b!important;
}

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

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;
}


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

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;
}


/* ─── 10. HEADER / TOPBAR ──────────────────────────────────────── */

body.ebdarkmodecolor #sp-top-bar,
body.ebdarkmodecolor #sp-top-bar * {
  background-color: rgba(15, 16, 19, 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;
}


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

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));
}


/* ─── 12. 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;
}


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

body.ebdarkmodecolor .uk-tooltip {
  background: rgba(15, 16, 19, 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;
}

/* ─── 14. ACCESSIBILITY ─────────────────────────────────────────── */

body.ebdarkmodecolor section.djacc{
background-color:transparent!important;
}

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;
}


/* ─── 15. 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);
}

body.itemid-426.ebdarkmodecolor #sp-main-body{
    background-color: var(--kc-bg-soft) !important;
}

body.ebdarkmodecolor iframe .liky-wrapper{
    background-color: white!important;
	padding: 1px 1px 10px 1pximportant;
}


/* ─── 16. 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(15, 16, 19, 0.92) !important;
  }
}