/* DHL Services frontend-only contrast hotfix v26.
   Scope: tool description, results, page content and footer in dark mode.
   No rules touch .adsbygoogle, .sideXd, .xd_top_box or advertisement iframes. */
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] {
  --dhl-v26-ink: #eef3fb;
  --dhl-v26-muted: #c4d0e1;
  --dhl-v26-panel: #232b39;
  --dhl-v26-inset: #192331;
  --dhl-v26-line: #435168;
  --dhl-v26-link: #a5caff;
}

/* Rich text from the tool database may include inline white text and light backgrounds.
   These selectors cover the description after #sec1 without touching tool/ads output. */
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ :is(p,div:not(.xd_top_box),section,article,blockquote,ul,ol),
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ :is(p,div:not(.xd_top_box),section,article,blockquote,ul,ol) :is(p,div,span,font,strong,b,em,i,small,section,article,li,ul,ol,blockquote,h2,h3,h4,h5,h6) {
  color: var(--dhl-v26-ink) !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ :is(p,div:not(.xd_top_box),section,article,blockquote,ul,ol) a,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ :is(p,div:not(.xd_top_box),section,article,blockquote,ul,ol) a :is(span,font,strong,b,em) {
  color: var(--dhl-v26-link) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration-color: currentColor;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ :is(p,div:not(.xd_top_box),section,article,blockquote,ul,ol) a:hover {
  color: #d5e7ff !important;
}

/* Pages managed in the editor use .csContent. Only article formatting is normalized. */
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .csContent :is(p,div,span,font,strong,b,em,i,small,li,ul,ol,blockquote,section,article,h1,h2,h3,h4,h5,h6),
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .csContent {
  color: var(--dhl-v26-ink) !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .csContent a,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .csContent a :is(span,font,strong,em) {
  color: var(--dhl-v26-link) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .csContent :is(table,td,th),
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ :is(p,div,section,article) :is(table,td,th) {
  background-color: var(--dhl-v26-panel) !important;
  color: var(--dhl-v26-ink) !important;
  border-color: var(--dhl-v26-line) !important;
}

/* Regular tool copy and secondary UI text. */
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index > p:not(.xd_top_box),
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index > p:not(.xd_top_box) :is(span,font,strong,small,em),
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index :is(.help-block,.text-muted,.text_size12,.color-grey) {
  color: var(--dhl-v26-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Description copy is more important than generic muted-tool text. */
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ p,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index #sec1 ~ p :is(span,font,strong,small,em) {
  color: var(--dhl-v26-ink) !important;
}

/* Result widgets from legacy tools (for example Word Counter). */
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index :is(.widget-box,.widget-header,.widget-body,.widget-main,#resultBox,#countBox,.result,.resultBox,.outputBox) {
  background: var(--dhl-v26-panel) !important;
  border-color: var(--dhl-v26-line) !important;
  color: var(--dhl-v26-ink) !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index :is(.widget-title,#resultBox,#countBox,#wordCount,#charCount) {
  color: var(--dhl-v26-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index :is(.widget-box,.widget-body,.widget-main) :is(p,span,strong,small,b,em) {
  color: var(--dhl-v26-ink) !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index :is(input:not([type="submit"]):not([type="button"]),textarea,select) {
  background: var(--dhl-v26-inset) !important;
  border-color: #64748b !important;
  color: var(--dhl-v26-ink) !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index :is(input,textarea)::placeholder {
  color: var(--dhl-v26-muted) !important;
  opacity: 1;
}

/* Footer has its own background rules in the legacy theme. Override both colors
   and background images; do not change its width, layout or social icons. */
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer .b-widgets,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer .b-widgets > .container,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer .b-widgets .row-item,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer > .container,
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer .footerCopyright {
  background: #1b2431 !important;
  background-image: none !important;
  color: #e5edf8 !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer :is(.footer-title,h1,h2,h3,h4,h5,h6) {
  color: #f3f7ff !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer :is(.b-twitter p,.b-widgets p,.b-widgets li,.footerCopyright) {
  color: #dce6f5 !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer :is(.b-widgets a:not(.ultm),.footerCopyright a) {
  color: #b6d4ff !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer :is(.b-widgets a:not(.ultm),.footerCopyright a):hover {
  color: #e0edff !important;
}
html[data-dhl-ui="frontend"][data-dhl-theme="dark"] footer.footer :is(.modal-content,.modal-header,.modal-footer,.modal-body) {
  background: var(--dhl-v26-panel) !important;
  color: var(--dhl-v26-ink) !important;
  border-color: var(--dhl-v26-line) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-dhl-ui="frontend"][data-dhl-theme="dark"] .main-index * {
    transition-duration: 0.01ms;
  }
}



@media (max-width: 1024px) {
  .navbar-collapse,
  .navbar-collapse.in,
  .navbar-collapse.show {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(28, 44, 74, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
    padding: 14px 16px;
    margin-top: 12px;
  }

  html[data-dhl-theme="dark"] .navbar-collapse,
  html[data-dhl-theme="dark"] .navbar-collapse.in,
  html[data-dhl-theme="dark"] .navbar-collapse.show {
    background: rgba(20, 28, 43, 0.96);
    border: 1px solid rgba(120, 146, 201, 0.18);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  }

  .navbar-nav {
    float: none;
    margin: 0;
  }

  .navbar-nav > li {
    float: none;
    width: 100%;
    position: relative;
  }

  .navbar-nav > li + li {
    border-top: 1px solid rgba(28, 44, 74, 0.10);
  }

  html[data-dhl-theme="dark"] .navbar-nav > li + li {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }

  .navbar-nav > li > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 12px;
    color: #0f172a;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition:
      background-color 0.22s ease,
      color 0.22s ease,
      transform 0.22s ease,
      box-shadow 0.22s ease;
  }

  html[data-dhl-theme="dark"] .navbar-nav > li > a {
    color: #e5edf8;
  }

  .navbar-nav > li > a:hover,
  .navbar-nav > li > a:focus {
    background: linear-gradient(135deg, rgba(72, 111, 255, 0.12), rgba(127, 86, 217, 0.10));
    color: #1d4ed8;
    transform: translateX(4px);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.10);
  }

  html[data-dhl-theme="dark"] .navbar-nav > li > a:hover,
  html[data-dhl-theme="dark"] .navbar-nav > li > a:focus {
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.20), rgba(99, 102, 241, 0.16));
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(125, 167, 255, 0.20);
  }

  .navbar-nav > li.active > a,
  .navbar-nav > li.current > a {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(99, 102, 241, 0.10));
    color: #0f3ea8;
    box-shadow: inset 3px 0 0 #2563eb;
  }

  html[data-dhl-theme="dark"] .navbar-nav > li.active > a,
  html[data-dhl-theme="dark"] .navbar-nav > li.current > a {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(99, 102, 241, 0.18));
    color: #ffffff;
    box-shadow: inset 3px 0 0 #7aa2ff;
  }

  .navbar-nav > li > a:active {
    transform: translateX(2px) scale(0.99);
  }

  .navbar-nav > li > a .menu-icon,
  .navbar-nav > li > a i,
  .navbar-nav > li > a svg {
    margin-right: 10px;
    flex-shrink: 0;
  }

  .navbar-nav > li > a .nav-label {
    flex: 1 1 auto;
  }

  .navbar-nav > li > a .nav-badge,
  .navbar-nav > li > a .caret {
    margin-left: auto;
  }

  .navbar-toggle {
    border-radius: 12px;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .navbar-toggle:hover,
  .navbar-toggle:focus {
    background: rgba(59, 130, 246, 0.08);
    transform: scale(1.03);
  }

  html[data-dhl-theme="dark"] .navbar-toggle:hover,
  html[data-dhl-theme="dark"] .navbar-toggle:focus {
    background: rgba(125, 167, 255, 0.14);
  }
}

@media (max-width: 1024px) {
  .navbar-collapse {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .navbar-collapse.in,
  .navbar-collapse.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}