/* Dark hosting-card accents. Add after the current site styles. */
html[data-theme="dark"] body.tfuk-modern [data-product-list] .plan-card .plan-resource dd,
html[data-theme="dark"] body.tfuk-modern [data-product-list] .plan-card .plan-features > summary,
html[data-theme="dark"] body.tfuk-modern [data-product-list] .plan-card .free-domain-tooltip > summary,
html[data-theme="dark"] body.tfuk-modern [data-product-list] .plan-card .free-domain-tooltip-panel a,
html[data-theme="dark"] body.tfuk-modern [data-product-list] .plan-card .free-domain-tooltip-panel li,
html[data-theme="dark"] body.tfuk-modern [data-product-list] .plan-card .compare-button {
  color: #dd9933 !important;
}
html[data-theme="dark"] body.tfuk-modern [data-product-list] .plan-card .free-domain-tooltip > summary {
  border-bottom-color: currentColor;
}

/* Amber labels on the site’s dark section and menu surfaces. */
html[data-theme="dark"] body.tfuk-modern .section-intro .eyebrow,
html[data-theme="dark"] body.tfuk-modern .mega-guidance .eyebrow,
html[data-theme="dark"] body.tfuk-modern .domain-intro .eyebrow {
  color: #dd9933 !important;
}

/* Keep in-page navigation readable in dark mode, including the global link hover state. */
html[data-theme="dark"] body.tfuk-modern .page-nav a[href^="#"] {
  color: #e4ebf7 !important;
}
html[data-theme="dark"] body.tfuk-modern .page-nav a[href^="#"]:hover,
html[data-theme="dark"] body.tfuk-modern .page-nav a[href^="#"]:focus-visible,
html[data-theme="dark"] body.tfuk-modern .page-nav a[href^="#"]:active,
html[data-theme="dark"] body.tfuk-modern .page-nav a[href^="#"][aria-current] {
  color: #dd9933 !important;
}

/* More filters uses one input border and contains its full-size view buttons. */
body.tfuk-modern [data-product-list] .plan-extra-filters-r6 .product-search > div {
  border: 0;
  padding: 0;
  display: block;
  position: relative;
  height: auto;
  min-height: 46px;
}
body.tfuk-modern [data-product-list] .plan-extra-filters-r6 .product-search input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding-left: 37px;
}
body.tfuk-modern [data-product-list] .plan-extra-filters-r6 .product-search > div > svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
body.tfuk-modern [data-product-list] .plan-extra-filters-r6 .view-toggle {
  box-sizing: border-box;
  height: auto;
  min-height: 52px;
  align-items: center;
}
@media (max-width: 760px) {
  body.tfuk-modern [data-product-list] .plan-controls-r6 select {
    font-size: 16px !important;
  }
}