/* NotBadCloud landing — dark theme (2026-11-10).
   Active when <html data-theme="dark">: set before paint by the inline script in <head>
   (saved choice in localStorage "nb_theme", otherwise the system preference). Toggle: site/js/theme.js. */
html[data-theme="dark"] {
  --d-bg: #070818;
  --d-surface: #0F1230;
  --d-surface-2: #151937;
  --d-line: rgba(131, 154, 209, 0.18);
  --d-ink: #EEF1FA;
  --d-text: #C9D1E6;
  --d-muted: #97A1BD;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--d-bg); color: var(--d-text); }

/* top bar + mobile menu */
html[data-theme="dark"] body nav.navbar { background: rgba(7, 8, 24, 0.82); }
html[data-theme="dark"] body nav.navbar.nb-scrolled { box-shadow: 0 1px 0 var(--d-line), 0 8px 24px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] body nav .navbar-brand,
html[data-theme="dark"] body nav.footer .navbar-brand { color: var(--d-ink) !important; }
html[data-theme="dark"] body nav .navbar-brand img { filter: invert(1); }
html[data-theme="dark"] body nav.navbar .container-fluid .navbar-toggler { background: var(--d-surface-2); }
html[data-theme="dark"] body nav.navbar .navbar-toggler-icon { filter: invert(1); }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse { background: transparent; }
@media (max-width: 991px) {
  html[data-theme="dark"] body nav.navbar .container-fluid .collapse { background: var(--d-surface); border: 1px solid var(--d-line); }
}
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item .nav-link { color: var(--d-muted); }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item .nav-link:hover { color: #FFFFFF; }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu li { background: var(--d-surface-2); }
html[data-theme="dark"] body nav.navbar .dropdown-item { color: var(--d-text) !important; }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-end .btn { background: var(--d-surface-2); color: var(--d-ink); }
html[data-theme="dark"] body nav.navbar .btn-login img, html[data-theme="dark"] body nav.navbar .btn-login i { filter: invert(1); }

/* footer */
html[data-theme="dark"] body nav.footer { background: var(--d-bg); border-top: 1px solid var(--d-line); }
html[data-theme="dark"] body nav.footer p,
html[data-theme="dark"] body nav.footer .header,
html[data-theme="dark"] body nav.footer .footer-nav-link,
html[data-theme="dark"] body nav.footer .footer-bottom-left { color: var(--d-muted) !important; }
/* !important: style.css sets #F7F9FB with a more specific selector, the inverted icons were invisible on it */
html[data-theme="dark"] body nav.footer .footer-social .social-item { background: var(--d-surface-2) !important; color: var(--d-ink); box-shadow: inset 0 0 0 1px var(--d-line); }
html[data-theme="dark"] body nav.footer img:not([src*="flags"]) { filter: invert(1); }

/* headings with the dark-ink gradient */
html[data-theme="dark"] body .main .default-title,
html[data-theme="dark"] body .main .default-header h4,
html[data-theme="dark"] body .main-info-header .title,
html[data-theme="dark"] body .main .server-informations .default-main-title {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(201, 209, 230, 0.7) 100%);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="dark"] body .main .default-header p,
html[data-theme="dark"] body .main-info-header .main-info-header-after p,
html[data-theme="dark"] body .main .full-rules,
html[data-theme="dark"] body .main .accordion-container { color: var(--d-muted); }
html[data-theme="dark"] body .main .full-rules h1, html[data-theme="dark"] body .main .full-rules h2,
html[data-theme="dark"] body .main .full-rules h3, html[data-theme="dark"] body .main .full-rules b,
html[data-theme="dark"] body .main .full-rules strong { color: var(--d-ink); }

/* tariff cards */
html[data-theme="dark"] body .main .price-list-item { background: var(--d-surface); border: 1px solid var(--d-line); box-shadow: none; }
html[data-theme="dark"] body .main .price-list-item.nb-popular { border: 2px solid #0065FF; box-shadow: 0 18px 50px rgba(0, 101, 255, 0.22); }
html[data-theme="dark"] body .main .price-list-item-header { background: var(--d-surface-2); }
html[data-theme="dark"] body .main .price-list-item-header .name,
html[data-theme="dark"] body .main .price-list-item-header .price,
html[data-theme="dark"] body .main .price-list-item p { color: var(--d-ink); }
html[data-theme="dark"] body .main .price-list-item-header .btn { background: #FFFFFF; color: #0C0E25; }
html[data-theme="dark"] body .main .price-list-item.nb-popular .price-list-item-header .btn { background: #0065FF; color: #FFFFFF; }
html[data-theme="dark"] body .main .price-list-item .server-statistick img { filter: invert(1) brightness(1.5); }
html[data-theme="dark"] body .main .price-list-item .nb-ic { stroke: var(--d-ink); }
html[data-theme="dark"] body .main .price-list-item .server-statistick p.nb-v small { color: #8FA6DD; }
html[data-theme="dark"] body .main .price-list-item .nb-use-title,
html[data-theme="dark"] body .main .nb-locs-title { color: var(--d-muted); }
html[data-theme="dark"] body .main .price-list-item .nb-use-chip { background: rgba(0, 101, 255, 0.14); color: #CFE0FF; }
html[data-theme="dark"] body .main .nb-loc,
html[data-theme="dark"] body .main .nb-loc-badge { background: rgba(0, 101, 255, 0.14); color: #CFE0FF; }
html[data-theme="dark"] body .main .nb-loc.soon { background: var(--d-surface-2); }
html[data-theme="dark"] body .main .nb-stock-note,
html[data-theme="dark"] body .main .nb-vpn-locations span { background: var(--d-surface-2); color: var(--d-text); }
html[data-theme="dark"] body .main .nb-old-price { color: var(--d-muted); }

/* light blocks on inner pages */
html[data-theme="dark"] body .main .testimonials .testimonial,
html[data-theme="dark"] body .main .accordion-container .accordion .accordion-item,
html[data-theme="dark"] body .main .accordion-container .accordion .accordion-item .accordion-button,
html[data-theme="dark"] body .main .accordion-container .accordion .accordion-item .accordion-body,
html[data-theme="dark"] body .main .main-offers .offer-left,
html[data-theme="dark"] body .main .main-offers .offer-right-top,
html[data-theme="dark"] body .main .main-offers .offer-right-bottom-item,
html[data-theme="dark"] body .main .advantages .advantage-item,
html[data-theme="dark"] body .main .hosting-features-right-bottom,
html[data-theme="dark"] body .main .possibilities .right .card,
html[data-theme="dark"] body .main .nb-vpn-step,
html[data-theme="dark"] body .main .main-small-rules,
html[data-theme="dark"] body .main .main-small-rules .rules-list .rule-item {
  background: var(--d-surface) !important; border-color: var(--d-line) !important; color: var(--d-text) !important;
}
html[data-theme="dark"] body .main .accordion-button { box-shadow: none !important; }
html[data-theme="dark"] body .main .accordion-button::after { filter: invert(1); }
html[data-theme="dark"] body .main .testimonials .testimonial__name,
html[data-theme="dark"] body .main .main-offers .header,
html[data-theme="dark"] body .main .advantages .advantage-item .header,
html[data-theme="dark"] body .main .hosting-features-right-bottom .info-text .header,
html[data-theme="dark"] body .main .possibilities .right .card h3,
html[data-theme="dark"] body .main .nb-vpn-step .header { color: var(--d-ink) !important; }
html[data-theme="dark"] body .main .testimonials .testimonial__text,
html[data-theme="dark"] body .main .testimonials .testimonial__position,
html[data-theme="dark"] body .main .main-offers p,
html[data-theme="dark"] body .main .advantages .advantage-item p,
html[data-theme="dark"] body .main .possibilities .right .card p,
html[data-theme="dark"] body .main .nb-vpn-step p,
html[data-theme="dark"] body .main .main-small-rules .rules-list .rule-item p { color: var(--d-muted) !important; }
html[data-theme="dark"] body .main .advantages .advantage-item img,
html[data-theme="dark"] body .main .main-offers img[src*="icons"],
html[data-theme="dark"] body .main .possibilities .right .card img[src*="icons"] { filter: invert(1) brightness(1.5); }
html[data-theme="dark"] body .main .possibilities .left .default-title::after { background-color: #FFFFFF; }
html[data-theme="dark"] body .main .possibilities .left .default-title::before { border-color: #FFFFFF; }

/* homepage "why" panel + hero already dark: just make the edges melt into the page */
html[data-theme="dark"] body .main .nb-why { background:
    radial-gradient(800px 360px at 15% 100%, rgba(0, 101, 255, 0.14), transparent 70%),
    radial-gradient(800px 360px at 85% 100%, rgba(131, 154, 209, 0.10), transparent 70%),
    linear-gradient(180deg, #0C0E25 0%, var(--d-bg) 100%); }

/* theme switch button */
.nb-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0;
  border-radius: 10px; background: #F7F9FB; color: #0C0E25; cursor: pointer; padding: 0; flex-shrink: 0; }
.nb-theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-theme-btn .sun { display: none; }
html[data-theme="dark"] .nb-theme-btn { background: var(--d-surface-2); color: #FFD66B; }
html[data-theme="dark"] .nb-theme-btn .sun { display: block; }
html[data-theme="dark"] .nb-theme-btn .moon { display: none; }
/* light illustrations (white server, AMD chip, VPS banner): invert to dark, keep hues; text turns light */
html[data-theme="dark"] body .main .hosting-features-left > img,
html[data-theme="dark"] body .main .server-target .white-server > img,
html[data-theme="dark"] body .main .banner-white > img {
  filter: invert(0.92) hue-rotate(180deg);
  mix-blend-mode: luminosity;
}
html[data-theme="dark"] body .main .hosting-features-left .info .info-text .header,
html[data-theme="dark"] body .main .server-target .white-server .info .header,
html[data-theme="dark"] body .main .banner-white .banner-header h4,
html[data-theme="dark"] body .main .banner-white .banner-statisticks .statistic-item-header {
  background: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
html[data-theme="dark"] body .main .hosting-features-left .info .info-text p,
html[data-theme="dark"] body .main .server-target .white-server .info p,
html[data-theme="dark"] body .main .banner-white .banner-header p,
html[data-theme="dark"] body .main .banner-white .banner-statisticks .statistic-item p {
  color: var(--d-text) !important; -webkit-text-fill-color: var(--d-text) !important;
}
html[data-theme="dark"] body .main .hosting-features-left .info .btn-tarif,
html[data-theme="dark"] body .main .server-target .white-server .info .btn-take { background: #0065FF !important; color: #FFFFFF !important; }
html[data-theme="dark"] body .main a.btn:not(.btn-register):not(.btn-login) { color: var(--d-ink); }
html[data-theme="dark"] body .main a.btn[href*="virtualServers"] { background: var(--d-surface-2); border: 1px solid var(--d-line); }
html[data-theme="dark"] body .main .hosting-features-right-bottom .info-text p,
html[data-theme="dark"] body .main .hosting-features-right-bottom p { color: var(--d-muted) !important; -webkit-text-fill-color: var(--d-muted) !important; }
html[data-theme="dark"] body .main .hosting-features-left,
html[data-theme="dark"] body .main .server-target .white-server,
html[data-theme="dark"] body .main .banner-white { background: #1B2A63; border-radius: 20px; isolation: isolate; }
/* top menu active marker + dropdown in dark */
@media (min-width: 992px) {
  html[data-theme="dark"] body nav.navbar .navbar-nav .nav-item > .nav-link.nb-active { color: #FFFFFF !important; }
}
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
  background: #0F1230; border-color: var(--d-line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu li,
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu li:hover { background: transparent; }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu li .dropdown-item { color: var(--d-text) !important; }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu li .dropdown-item:hover { background: #151937; color: #FFFFFF !important; }
html[data-theme="dark"] body nav.navbar .container-fluid .collapse .navbar-nav .nav-item.dropdown .dropdown-menu li .dropdown-item.nb-active { background: rgba(0, 101, 255, 0.16); color: #8EC0FF !important; }
html[data-theme="dark"] body nav.navbar .dropdown-menu .dropdown-item img { box-shadow: 0 0 0 1px rgba(131, 154, 209, 0.25); border-radius: 8px; }
/* card buttons: white with dark text in dark mode (the generic a.btn rule above made the text light) */
html[data-theme="dark"] body .main .price-list-item-header .btn,
html[data-theme="dark"] body .main .price-list-item-header a.btn { background: #FFFFFF !important; color: #0C0E25 !important; }
html[data-theme="dark"] body .main .price-list-item.nb-popular .price-list-item-header .btn { background: #0065FF !important; color: #FFFFFF !important; }
html[data-theme="dark"] body .main .price-list-item-header .btn:hover { background: #0065FF !important; color: #FFFFFF !important; }
/* smoother dark transitions (2026-11-10): dark blocks fade into the page instead of ending on a hard line */
html[data-theme="dark"] body .main .nb-hero {
  background: radial-gradient(1000px 460px at 50% -10%, rgba(0, 101, 255, 0.45), transparent 70%), #0C0E25;
}
html[data-theme="dark"] body .main .nb-why {
  background:
    radial-gradient(900px 380px at 50% 40%, rgba(0, 101, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #0C0E25 0%, #0A0C22 55%, var(--d-bg) 100%);
  padding-bottom: 110px;
}
html[data-theme="dark"] body .main-info-header.main-info-header-full-display {
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(0, 101, 255, 0.45), transparent 70%),
    linear-gradient(180deg, #0C0E25 0%, #0C0E25 55%, var(--d-bg) 100%);
  padding-bottom: 110px;
}
html[data-theme="dark"] body .main-info-header.main-info-header-full-display::before,
html[data-theme="dark"] body .main .nb-hero::before {
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 70%);
}
html[data-theme="dark"] body .main .banner { box-shadow: 0 0 0 1px rgba(131, 154, 209, 0.10); border-radius: 20px; }