/* dark-mode.css */
/* 1) CSS variables used for theming */
/* :root {
  --dm-bg: #ffffff;
  --dm-text: #111111;
  --dm-link: #1a73e8;
  --dm-accent: #1a73e8;
  --dm-post-bg: transparent;
} */

/* 2) Basic switch position + look */
.dm-toggle {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
/*   border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.95); */
  background: rgba(20, 20, 22, 0.9);
  color: #e6eef3;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: transform .12s ease, opacity .12s ease;
}

.dm-toggle:active {
  transform: scale(.98);
}

/* icons/label inside toggle */
.dm-toggle .dm-icon {
  font-size: 16px;
  line-height: 1;
}

.dm-toggle .dm-label {
  display: inline-block;
}

/* 3) Dark mode overrides — add/extend as needed */
body.dm-enabled,
html.dm-enabled body,
.dm-enabled .header {
  background-color: #1a272e !important;
  color: #ffffff !important;
  transition: background-color .25s ease, color .25s ease;
}


.dm-enabled .read_more.hover_yellow {
  color: #ffffff !important;
}

.dm-enabled .header li a,
.dm-enabled .fourteen_p p,
.dm-enabled .fourteen_p li,
.dm-enabled .title_h1_big,
.dm-enabled .back_btn p,
.dm-enabled .story-paragraph a,
.dm-enabled .footer li a,
.dm-enabled .title_h2,
.dm-enabled .btnLogin a,
.dm-enabled .article_description a,
.dm-enabled .article_left_otr h2,
.dm-enabled .article_left_otr h3,
.dm-enabled .article_left_otr h4,
.dm-enabled .article_left_otr h5,
.dm-enabled .article_left_otr h6,
.dm-enabled .right_header .user_account_name, .dm-enabled .btnRegister.d-none.d-xxl-block.d-xl-block.d-lg-block a.btn.btn-orange-contact.navButton.fw-bold {
  color: #ffffff !important;
}

.dm-enabled .article_left_otr .small_intro li:after {
  background: #F6F6F6 !important;
}

.dm-enabled .header .sub-menu li a,
.dm-enabled .article_detail_right .banner_top_img p,
.dm-enabled .article_detail_right .small_intro li:after,
.dm-enabled .user-dropdown-menu li a {
  color: #000 !important;
}

.dm-enabled .user-dropdown-menu li a:hover {
  color: var(--orange) !important;
}

/* DEFAULT (normal mode) — BLACK ICON */
body.single .search-bar .search-icon {
  color: #000;
}

/* DARK MODE — WHITE ICON */
body.single.dm-enabled .search-bar .search-icon,
html.dm-enabled body.single .search-bar .search-icon {
  color: #fff;
}


.dm-enabled .header_menu .menu-item-has-children p {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  opacity: 1;
}

.dm-enabled .header_menu .menu-item-has-children:hover p {
  filter: invert(90%) sepia(22%) saturate(6699%) hue-rotate(359deg) brightness(102%) contrast(106%);
}



/* Header/footer logos — default show light, hide dark */
.site-logo--dark {
  display: none !important;
}

.site-logo--light {
  display: inline-block;
}

/* When dark mode active, swap visibility */
html.dm-enabled .site-logo--light {
  display: none !important;
}

html.dm-enabled .site-logo--dark {
  display: inline-block !important;
}

/* Optional: ensure images don't take extra layout space */
.site-logo {
  max-height: 64px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* If you used fallback class, you can dim/adjust it in dark mode */
.site-logo--dark-fallback {
  filter: brightness(.9) contrast(.95);
}

html.dm-enabled .site-logo--dark-fallback {
  filter: none;
}











/* Replace many common elements — extend list for your theme */

body.dm-enabled .site-header,
body.dm-enabled .site-footer,
body.dm-enabled .sidebar,
body.dm-enabled .widget {
  background-color: transparent !important;
  color: inherit !important;
}

/* Post container tweaks */
body.dm-enabled .post,
body.dm-enabled article,
body.dm-enabled .entry-content,
body.dm-enabled .post-content {
  background-color: var(--dm-post-bg) !important;
  color: inherit !important;
}

/* Example: invert images that look too bright (optional) */
body.dm-enabled img.dm-no-invert {
  filter: none !important;
}

body.dm-enabled img {
  filter: none;
}

/* If you want mild dimming of images uncomment below (careful) */
/* body.dm-enabled img { filter: brightness(.92) contrast(.95); } */

/* Make toggle look like "on" in dark mode */
html.dm-enabled .dm-toggle {
/*   background: rgba(20, 20, 22, 0.9);
  color: #e6eef3;
  border: 1px solid rgba(255, 255, 255, 0.06); */
	border: 1px solid rgba(0, 0, 0, 0.06);
   background: rgba(255, 255, 255, 0.95);
	color: rgb(20 20 22 / 90%);
}


@media screen and (max-width:1024px) {

  .dm-enabled .mobileIcon a,
  .dm-enabled .mobileIcon a:after,
  .dm-enabled .mobileIcon a:before {
    background: #fff;
  }

  .dm-enabled .header .for_mobile .sub-menu li a {
    color: #fff !important;
  }

  .dm-enabled .right_menu {
    background: #1a272e;
  }

  .menu-open .mobileIcon a {
    height: unset;
  }

}