/*
 * Dark variant of the "Ferah" theme. base.html loads it with
 * media="(prefers-color-scheme: dark)", so it only applies when the
 * visitor's OS/browser is in dark mode. Loaded after ferah.css.
 */
:root {
  color-scheme: dark;
  --no-bg: #0b1220;
  --no-surface: #111a2b;
  --no-surface-2: #162238;
  --no-soft: #15284a;
  --no-blue: #4d8eff;
  --no-blue-dark: #75a8ff;
  --no-ink: #e9eef6;
  --no-text: #c4cedc;
  --no-muted: #8f9cb0;
  --no-line: #223049;
  --no-field: #2e3d5a;
}

html, body, html.dashboard, html.dashboard body { background-color: var(--no-bg); color: var(--no-text); }
strong, .label, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
h1, h2, h3, h4, h5, h6 { color: var(--no-ink); }
.content, .content p, .content li, p, li, td, th, label { color: inherit; }
.title, .mygray, .is-gray, .mygray .title, .has-text-dark, .has-text-black, .has-text-black-bis, .has-text-grey-darker { color: var(--no-ink) !important; }
.has-text-grey, .has-text-grey-dark, .help { color: var(--no-muted) !important; }
hr, .dropdown-divider { background-color: var(--no-line); }
code, pre, .content pre { background: var(--no-surface-2); color: var(--no-ink); }
::selection { background: rgba(77, 142, 255, 0.35); }

/* Surfaces */
.box, .card, .card-header, .card-footer, .modal-card-body, .panel, .panel-block,
.dropdown-content, .navbar-dropdown, .pricing-plan, .plan-header, .plan-price,
.bundle-card, .mail-mock, .mail-plan, .mail-feature, .hosting-card, .hosting-compare-box, .hosting-faq,
.dev-steps > div, .endpoint-table, .prompt-box, .ferah-tlds a, .form-border, .has-background-white {
  background-color: var(--no-surface) !important;
  color: var(--no-text);
  border-color: var(--no-line) !important;
}
.box, .card { box-shadow: none; border: 1px solid var(--no-line); }
.plan-item, .mail-mock-row.is-head, .mail-compare, .has-background-light, .has-background-white-ter, .has-background-white-bis {
  background-color: var(--no-surface-2) !important;
  color: var(--no-text);
}
.mail-mock-row, .mail-faq-list details, .card-footer-item, .panel-heading { border-color: var(--no-line) !important; }
.modal-card-head, .modal-card-foot, .panel-heading { background: var(--no-surface-2); border-color: var(--no-line); }
.modal-card-title { color: var(--no-ink); }
.modal-background { background-color: rgba(3, 7, 15, 0.8); }
.dropdown-item, a.dropdown-item, .navbar-dropdown a.navbar-item { color: var(--no-text); }
a.dropdown-item:hover, .navbar-dropdown a.navbar-item:hover { background: var(--no-surface-2); color: var(--no-ink); }
.dropdown-bg { background: var(--no-soft); }
.form-border { box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6); }

/* Page sections that hardcode light backgrounds (inline styles and per-page <style> blocks) */
section[style*="background:#fff"], section[style*="background: #fff"],
section[style*="background:#f8f9fb"], section[style*="background: #f8f9fb"],
section[style*="background-color: white"], div[style*="background-color: white"],
.section, .hero.is-light, .hero.is-white, .footer,
.freessl, .ferah-dev, .mail-pricing, .mail-features {
  background-color: var(--no-bg) !important;
}
.testimonials-bg, .bundles, .mail-bundle,
.main-search, .webp .main-search, .no-webp .main-search {
  background: linear-gradient(180deg, var(--no-bg) 0%, var(--no-surface) 100%) !important;
}
.need-help-bg { background: var(--no-surface); }
.ferah-dev { border-color: var(--no-line); }
.top-bg-gray { background: #0e1728; border-color: var(--no-line); }
header .header { background: var(--no-surface); border-color: var(--no-line); }
.navbar, .navbar-menu, .navbar-brand { background-color: transparent; }
@media screen and (max-width: 1087px) {
  .navbar-menu { background-color: var(--no-surface); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); }
}
.navbar-burger span { background-color: var(--no-ink); }
.ferah-hero .pill, .navbar-item .api-badge { background: var(--no-soft); color: var(--no-blue-dark); }
.dev-page code { background: var(--no-soft); color: var(--no-blue-dark); }
.myfooter { background-color: #060b14 !important; }

/* Buttons */
.button { background-color: var(--no-surface-2); color: var(--no-ink); border-color: var(--no-field); }
.button:hover { color: var(--no-ink); border-color: var(--no-muted); }
.button.is-white, .button.is-light, .button.is-black,
.header .navbar-end .button.is-primary { background: var(--no-surface-2); color: var(--no-ink); border: 1px solid var(--no-field); }
.button.is-white:hover, .button.is-light:hover, .button.is-black:hover,
.header .navbar-end .button.is-primary:hover { background: var(--no-soft); color: var(--no-blue-dark); }
.button.is-red, .button.is-primary, .button.is-link, .button.is-success.checkout-button { background: #2f73ea; color: #fff; }
.button.is-red:hover, .button.is-primary:hover, .button.is-link:hover, .button.is-success.checkout-button:hover { background: #1f5fd0; color: #fff; }
.button.is-text { background: transparent; color: var(--no-text); }
.delete, .modal-close { background-color: rgba(255, 255, 255, 0.2); }

/* Form fields */
.input, .textarea, .select select, .file-cta, .file-name {
  background-color: var(--no-bg);
  border-color: var(--no-field);
  color: var(--no-ink);
}
.input::placeholder, .textarea::placeholder { color: #5f6d84; }
.input[disabled], .textarea[disabled], .select select[disabled], .input[readonly] { background-color: var(--no-surface-2); color: var(--no-muted); }
.form-border .input { background: transparent; }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--no-blue); }

/* Tables */
.table, .table-container { background-color: var(--no-surface); color: var(--no-text); }
.table thead, .table tfoot { background-color: transparent; }
.table th, .table thead th, .table tfoot th { color: var(--no-ink); }
.table td, .table th, .table.is-bordered td, .table.is-bordered th { border-color: var(--no-line); }
.table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: var(--no-surface-2); }
.table.is-hoverable tbody tr:not(.is-selected):hover,
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover { background-color: #1b2942; }
.hosting-table { border-color: var(--no-line); }

/* Tabs, menus, pagination */
.tabs a { color: var(--no-muted); border-bottom-color: var(--no-line); }
.tabs a:hover { color: var(--no-ink); border-bottom-color: var(--no-muted); }
.tabs ul { border-bottom-color: var(--no-line); }
.tabs li.is-active a { color: var(--no-blue-dark); border-bottom-color: var(--no-blue); }
.tabs.is-boxed a:hover { background-color: var(--no-surface-2); }
.tabs.is-boxed li.is-active a { background-color: var(--no-surface); border-color: var(--no-line); border-bottom-color: transparent !important; }
.tabs.is-toggle a { border-color: var(--no-field); }
.tabs.is-toggle a:hover { background-color: var(--no-surface-2); }
.menu-list a { color: var(--no-text); }
.menu-list a:hover { background-color: var(--no-surface-2); color: var(--no-ink); }
.menu-label { color: var(--no-muted); }
.pagination-link, .pagination-previous, .pagination-next { background: var(--no-surface); border-color: var(--no-field); color: var(--no-text); }

/* Dashboard */
.dashboard-sidebar { background: var(--no-surface); border-color: var(--no-line); }
.dashboard-sidebar .menu-list a:hover { background: var(--no-surface-2); }
.dashboard-sidebar .menu-list a.is-active { background: var(--no-soft); color: var(--no-blue-dark); }
.dashboard-top { background: var(--no-bg); border-color: var(--no-line); }

/* Notifications, messages, tags: keep the hue, darken the light variants */
.notification { background-color: var(--no-surface-2); color: var(--no-text); }
.notification[style*="#effaf3"], .message.is-success .message-body { background-color: #0f2a1c !important; color: #6ee7a0 !important; }
.notification[style*="#feecf0"], .message.is-danger .message-body { background-color: #2e1218 !important; color: #ff8fa3 !important; }
.message-body { background-color: var(--no-surface-2); color: var(--no-text); border-color: var(--no-field); }
.message.is-info .message-body, .message.is-link .message-body { background-color: #10203d; color: #a9c8ff; border-color: var(--no-blue); }
.message.is-warning .message-body { background-color: #2b220c; color: #f5d27a; border-color: #b8860b; }
.tag:not(body) { background-color: var(--no-surface-2); color: var(--no-text); }
.tag.is-light, .tag.is-white { background-color: var(--no-surface-2); color: var(--no-text); }
.method.get { background: #0f2a1c; color: #6ee7a0; }
.method.post { background: #10203d; color: #8fb8ff; }
.method.patch, .method.put { background: #2b220c; color: #f5d27a; }
.method.delete { background: #2e1218; color: #ff8fa3; }
.click-copy::after { background-color: var(--no-surface-2); color: var(--no-ink); }

/* Images that are dark-on-transparent */
img[src*="GoDaddy_Logo"], img[src*="letsencrypt-logo"] { filter: brightness(0) invert(0.9); }

/* Per-page <style> blocks and inline styles that hardcode dark text */
.plan-header, .plan-price, .plan-price-amount, .plan-price-currency, .pricing-plan .plan-item,
.bundle-price strong, .mail-plan-name, .mail-plan-price strong, .mail-mock-row.is-head, .mail-faq-list summary {
  color: var(--no-ink) !important;
}
.bundle-items li, .mail-plan-items li, .mail-plan-users, .hosting-card p, .hosting-faq p,
.mail-feature p, .mail-faq-list details p, .blog-content blockquote {
  color: var(--no-text) !important;
}
.bundle-price span, .mail-plan-price span, .mail-mock-row span { color: var(--no-muted) !important; }
.vps { background: var(--no-surface) !important; }
[style*="color:#333"], [style*="color: #333"], [style*="color:#555"], [style*="color: #555"],
[style*="color:#34495E" i], [style*="color: #34495E" i] { color: var(--no-text) !important; }
[style*="color:#666"], [style*="color: #666"] { color: var(--no-muted) !important; }
.notification[style*="#fffbeb" i] { background-color: #2b220c !important; color: #f5d27a !important; }
.hosting-card-icon { background: var(--no-soft) !important; color: var(--no-blue-dark) !important; }

/* mystyles.scss components with hardcoded light backgrounds */
.login-table, .reset-table, .reset-done-table, .register-table-body, .new-form, .tabs-content,
.payment-container, .cart-items, .server-type.active .head, .plan-type.active .head {
  background: var(--no-surface) !important;
  color: var(--no-text);
}
.plan-type, .server-type, .plan-type .head { border-color: var(--no-line); }
.tabs.is-boxed li.is-active a, .tabs.is-boxed li.is-active a:hover, .tabs.is-boxed li.is-active {
  background-color: var(--no-surface) !important;
  border-bottom-color: var(--no-surface) !important;
}
.StripeElement { background-color: var(--no-bg) !important; border-color: var(--no-field) !important; }
.breadcrumb a { color: var(--no-blue-dark); }
.breadcrumb li.is-active a, .breadcrumb li.is-active a span { color: var(--no-ink); }
.breadcrumb li + li::before { color: var(--no-muted); }
.dashboard-content table tbody, .dashboard-content table thead, .dashboard-content .table { background-color: var(--no-surface) !important; }
.balloon { background: var(--no-surface-2); color: var(--no-text); }