

/* базові змінні */
body {
  --c-glass: #fff;
  --c-light: #fff;
  --c-dark: #001e4d;

  --c-content: #224;
  --c-action: #0052f5;

  --c-bg: #fff;

  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;

  --saturation: 150%;

  background: var(--c-bg);
  color: var(--c-content);
  transition: background 400ms, color 400ms;
}

/* 🌙 Темна тема */
body.dark-theme {
  --c-glass: #001e4d;
  --c-light: #fff;
  --c-dark: #000;

  /*--c-content: #e1e1e1;*/
  --c-action: #03d5ff;

  --c-bg: #001e4d;

  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;
}

/* --- SWITCHER STYLES --- */

.switcher {
    position: fixed;
    bottom: 2%;
    left: 11%;
    translate: -50%;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 105px;
    height: 40px;
    padding: 8px 5px;
    border-radius: 99em;
    background-color: 
 color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    z-index: 999;
}
 

.switcher__input {
  display: none;
}

.switcher__option {
  --c: var(--c-content);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 68px;
  height: 100%;
  border-radius: 99em;
  cursor: pointer;
  transition: all 200ms;
  padding: 5px;
}

.switcher__option:hover {
  --c: var(--c-action);
}

.switcher__icon {
  font-size: 26px;
  transition: transform 200ms;
}

/* збільшення при наведенні */
.switcher__option:hover .switcher__icon {
  transform: scale(1.3);
}

/* активний стан */
.switcher__input:checked + .switcher__icon {
  transform: scale(1);
  color: var(--c-action);
}

/* змінний фон підсвітки */
.switcher::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: calc(50% - 8px);
  height: calc(100% - 8px);
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  border-radius: 99em;
  z-index: 0;
  transition: translate 400ms;
}

/* якщо темна тема обрана → рамка зсувається вправо */
body.dark-theme .switcher::after {
  translate: 50px 0;
}


/*********************************/


body.dark-theme h1.elementor-heading-title, body.dark-theme h3.elementor-heading-title {
    color: #fff !important;
}

body.dark-theme .elementor-1359 .elementor-element.elementor-element-8a30894 .elementor-divider__text,
body.dark-theme li.elementor-icon-list-item.elementor-inline-item span,
body.dark-theme .new-kontakt-block span.elementor-divider__text {
  color: #fff !important;
}

body.dark-theme a.footer-social-ico img {
  filter: brightness(0) invert(1);
}

body.dark-theme .kontakt-tab-personal .elementor-accordion .elementor-tab-title a,
body.dark-theme .elementor-1359 .elementor-element.elementor-element-ee076d9>.elementor-background-overlay {
    background: #001e4d !important;
    color: #fff;
}

body.dark-theme .elementor-widget-divider--view-line_text .elementor-divider-separator:after {
    border-color: #fff;
    margin-top: 12px;
}

body.dark-theme .kontakt-page-zespol span.elementor-icon-list-text,
body.dark-theme .kontakt-page-tab h5.elementor-image-box-title {
    color: #fff;
}

body.dark-theme .sect_title h1 {
  color: #fff;
}

body.dark-theme .ymc-smart-filter-container .filter-layout3 .dropdown-filter .menu-active {
  color: #fff;
  border-bottom: 0.1rem solid #fff;
}

body.dark-theme .ymc-smart-filter-container .filter-layout3 .dropdown-filter .menu-active .arrow {
      border-color: #fff;
}


body.dark-theme .nav-links a,
body.dark-theme .blog-section-sidebar a,
body.dark-theme .blog-section .elementor-widget-sidebar a,
body.dark-theme .sidebar-title,
body.dark-theme .blog-section-content .entry-content,
body.dark-theme .blog-section h1,
body.dark-theme .breadkr-page .elementor-widget-container span,
body.dark-theme .breadkr-page .elementor-widget-container p,
body.dark-theme .breadkr-page .elementor-widget-container a {
    color: #fff;
}

body.dark-theme .new-category-title,
body.dark-theme.sprzet-section-description {
  color: #fff !important;
}

body.dark-theme .ymc-smart-filter-container .container-posts .post-layout1 .ymc-post-layout1 {
    background: #ffffff1f;
}

body.dark-theme a.header-read-more {
    color: #fff !important;
}

body.dark-theme .ymc-smart-filter-container .search-layout .search-form .form-inner {
      border: 1px solid #fff;
}

body.dark-theme .ymc-smart-filter-container .search-layout .search-form__input {
      background: transparent;
          color: #fff;
}

body.dark-theme #ymc-smart-filter-container-1 .container-posts .post-entry .ymc-post-layout1 {
    background: #ffffff1f;
    border-radius: 1rem;
}

body.dark-theme .ymc-smart-filter-container .pagination-load-more .btn-load {
    border: 0.2rem solid #fff !important;
    color: #fff !important;
}

body.dark-theme .kontakt-tab-personal .elementor-col-25 .elementor-widget-wrap.elementor-element-populated {
  background: #ffffff1f;
    border-radius: 1rem;
}

body.dark-theme div#secondary {
  background: #ffffff1f;
  border-radius: 1rem;
}

body.dark-theme .elementor-14917 .elementor-element.elementor-element-cfef55a {
    color: #fff;
}

body.dark-theme .kup-teraz-tab .eael-advance-tabs .eael-tabs-nav>ul li {
    color: #fff !important;
}


body.dark-theme .kup-teraz-tab .eael-advance-tabs .eael-tabs-nav>ul li.active:before,
body.dark-theme .kup-teraz-tab .eael-advance-tabs .eael-tabs-nav ul:before {
  background: #fff !important;
}

body.dark-theme div#gstarcad-roczna-licencja-tab .elementor-col-33, 
body.dark-theme #gstarcad-wieczysta-licencja-tab .elementor-col-33, 
body.dark-theme #roczna-licencja-tab>div .elementor-col-33, 
body.dark-theme #wieczysta-licencja-tab>div .elementor-col-33 {
      color: #fff  !important;
      background: #ffffff1f  !important;
}

body.dark-theme .kup-gs-short-new:after {
  background: #ffffff1f !important;
}

body.dark-theme .elementor-widget-container {
    color: #fff;
}

.realizacje-block-content {
  border-radius: 1rem;
}

body.dark-theme .realizacje-block-content {
    background: #ffffff1f;
}

body.dark-theme .realizacje-block-content-title {
  color: #fff;
}

body.dark-theme .realizacje-block-content-title:after {
  filter: brightness(0) invert(1);
}