/*=============================================================
  DARK MODE — Connecting Earthlings / Atlas
  Applied via:  html.dark { ... }
  Toggle stored in localStorage key: "ce_dark_mode"
  Brand: #A9CF3A (lime) / #1C3D1F (forest green)
=============================================================*/

/* ── CSS Variables (light defaults) ── */
:root {
  --dm-bg:           #ffffff;
  --dm-bg-2:         #f2f4f8;
  --dm-bg-3:         #e8eaf0;
  --dm-surface:      #ffffff;
  --dm-surface-2:    #f7f8fc;
  --dm-border:       #e0e0e0;
  --dm-border-2:     #ebebf0;
  --dm-text:         #333333;
  --dm-text-2:       #555555;
  --dm-text-3:       #888888;
  --dm-text-inv:     #ffffff;
  --dm-header-bg:    rgba(255,255,255,0.97);
  --dm-header-shadow:0 2px 12px rgba(0,0,0,0.08);
  --dm-footer-bg:    #1C3D1F;
  --dm-footer-text:  rgba(255,255,255,0.75);
  --dm-card-bg:      #ffffff;
  --dm-card-shadow:  0 2px 12px rgba(0,0,0,0.07);
  --dm-input-bg:     #ffffff;
  --dm-input-border: #d0d0d0;
  --dm-accent:       #A9CF3A;
  --dm-accent-dark:  #1C3D1F;
  --dm-overlay:      rgba(0,0,0,0.45);
  --dm-toggle-bg:    #e0e0e0;
  --dm-toggle-knob:  #ffffff;
  --dm-toggle-icon:  "☀️";
}

/* ── Dark mode overrides ── */
html.dark {
  --dm-bg:           #0d1117;
  --dm-bg-2:         #161b22;
  --dm-bg-3:         #1c2128;
  --dm-surface:      #1c2128;
  --dm-surface-2:    #21262d;
  --dm-border:       #30363d;
  --dm-border-2:     #21262d;
  --dm-text:         #e6edf3;
  --dm-text-2:       #b1bac4;
  --dm-text-3:       #6e7681;
  --dm-text-inv:     #0d1117;
  --dm-header-bg:    rgba(13,17,23,0.97);
  --dm-header-shadow:0 2px 16px rgba(0,0,0,0.4);
  --dm-footer-bg:    #0a1a0b;
  --dm-footer-text:  rgba(255,255,255,0.6);
  --dm-card-bg:      #1c2128;
  --dm-card-shadow:  0 2px 12px rgba(0,0,0,0.3);
  --dm-input-bg:     #21262d;
  --dm-input-border: #30363d;
  --dm-accent:       #A9CF3A;
  --dm-accent-dark:  #c8e86a;
  --dm-overlay:      rgba(0,0,0,0.7);
  --dm-toggle-bg:    #A9CF3A;
  --dm-toggle-knob:  #1C3D1F;
}

/* ══════════════════════════════════════════
   GLOBAL BASE
══════════════════════════════════════════ */
html.dark body {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

html.dark *,
html.dark *::before,
html.dark *::after {
  border-color: var(--dm-border) !important;
  /* Don't override color globally — too aggressive */
}

/* ══════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════ */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
  color: var(--dm-text) !important;
}
html.dark p, html.dark li, html.dark span,
html.dark label, html.dark small {
  color: var(--dm-text-2) !important;
}
html.dark a {
  color: var(--dm-accent) !important;
}
html.dark a:hover {
  color: var(--dm-accent-dark) !important;
}
/* Keep white text on coloured backgrounds */
html.dark .btn_1,
html.dark .btn_glass,
html.dark .btn_glass_green,
html.dark .btn_glass_solid,
html.dark .ul-btn-primary,
html.dark .claim-cta-btn,
html.dark .auth-brand-icon,
html.dark .ul-stat-ico {
  color: #fff !important;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
html.dark header,
html.dark .header,
html.dark .header_in {
  background: var(--dm-header-bg) !important;
  box-shadow: var(--dm-header-shadow) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}
html.dark #top_menu a,
html.dark .main-menu ul li a,
html.dark .main-menu ul li span a {
  color: var(--dm-text-2) !important;
}
html.dark .main-menu ul li a:hover,
html.dark .main-menu ul li span a:hover {
  color: var(--dm-accent) !important;
}
html.dark .hamburger-inner,
html.dark .hamburger-inner::before,
html.dark .hamburger-inner::after {
  background-color: var(--dm-text) !important;
}

/* ══════════════════════════════════════════
   HERO / BANNER SECTION
══════════════════════════════════════════ */
html.dark .hero_single {
  /* Keep the background image but darken overlay */
}
html.dark .hero_single .wrapper {
  background: rgba(0,0,0,0.55) !important;
}
html.dark .hero_single h3,
html.dark .hero_single p {
  color: #ffffff !important;
}

/* Search bar in hero */
html.dark .custom-search-input-2 .form-group,
html.dark .custom-search-input-2 {
  background: rgba(13,17,23,0.85) !important;
  border-color: var(--dm-border) !important;
}
html.dark .custom-search-input-2 input[type="text"],
html.dark .custom-search-input-2 .form-control {
  background: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark .custom-search-input-2 input::placeholder {
  color: var(--dm-text-3) !important;
}
html.dark .custom-search-input-2 select.wide {
  background: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* ══════════════════════════════════════════
   MAIN CATEGORIES BAR
══════════════════════════════════════════ */
html.dark .main_categories {
  background: var(--dm-surface) !important;
  border-top: 1px solid var(--dm-border) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}
html.dark .main_categories ul li a {
  color: var(--dm-text-2) !important;
}
html.dark .main_categories ul li a:hover {
  color: var(--dm-accent) !important;
}
html.dark .main_categories ul li a h3 {
  color: var(--dm-text) !important;
}

/* ══════════════════════════════════════════
   SECTION BACKGROUNDS
══════════════════════════════════════════ */
html.dark .bg_color_1,
html.dark .bg_color_2 {
  background: var(--dm-bg-2) !important;
}
html.dark .container,
html.dark .container-fluid {
  /* transparent — inherits body */
}

/* ══════════════════════════════════════════
   CARDS / GRID ITEMS
══════════════════════════════════════════ */
html.dark .grid_item,
html.dark .strip,
html.dark .box_list,
html.dark .box_grid {
  background: var(--dm-card-bg) !important;
  box-shadow: var(--dm-card-shadow) !important;
  border-color: var(--dm-border) !important;
}
html.dark .grid_item .info,
html.dark .strip .wrapper {
  background: rgba(13,17,23,0.85) !important;
}
html.dark .grid_item h3,
html.dark .strip h3,
html.dark .box_list h3 {
  color: var(--dm-text) !important;
}

/* ══════════════════════════════════════════
   LISTING DETAIL PAGE
══════════════════════════════════════════ */
html.dark .detail_title_1 h1,
html.dark .detail_title_1 h2 {
  color: var(--dm-text) !important;
}
html.dark .box_detail {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: var(--dm-card-shadow) !important;
}
html.dark .box_detail h3,
html.dark .box_detail p {
  color: var(--dm-text-2) !important;
}
html.dark .secondary_nav {
  background: var(--dm-surface) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}
html.dark .secondary_nav ul li a {
  color: var(--dm-text-2) !important;
}
html.dark .secondary_nav ul li a.active,
html.dark .secondary_nav ul li a:hover {
  color: var(--dm-accent) !important;
  border-bottom-color: var(--dm-accent) !important;
}

/* ══════════════════════════════════════════
   FORMS & INPUTS
══════════════════════════════════════════ */
html.dark .form-control,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select {
  background: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-input-border) !important;
}
html.dark .form-control::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--dm-text-3) !important;
}
html.dark .form-control:focus,
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: var(--dm-accent) !important;
  box-shadow: 0 0 0 3px rgba(169,207,58,0.15) !important;
  background: var(--dm-surface-2) !important;
}
html.dark label {
  color: var(--dm-text-2) !important;
}

/* ══════════════════════════════════════════
   NAVIGATION / SECONDARY NAV
══════════════════════════════════════════ */
html.dark nav,
html.dark .nav,
html.dark .navbar {
  background: var(--dm-surface) !important;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
html.dark footer,
html.dark footer.plus_border {
  background: var(--dm-footer-bg) !important;
  border-top: 1px solid rgba(169,207,58,0.2) !important;
}
html.dark footer h3,
html.dark footer h5 {
  color: rgba(255,255,255,0.9) !important;
}
html.dark footer p,
html.dark footer li,
html.dark footer a,
html.dark footer .links li a,
html.dark footer .contacts li,
html.dark footer #additional_links li a {
  color: var(--dm-footer-text) !important;
}
html.dark footer a:hover,
html.dark footer .links li a:hover {
  color: var(--dm-accent) !important;
}
html.dark footer hr {
  border-color: rgba(255,255,255,0.1) !important;
}
html.dark footer .social-links ul li a i {
  color: rgba(255,255,255,0.6) !important;
}
html.dark footer .social-links ul li a:hover i {
  color: var(--dm-accent) !important;
}

/* ══════════════════════════════════════════
   CALL SECTION (How it works)
══════════════════════════════════════════ */
html.dark .call_section {
  background: linear-gradient(135deg, #060e07 0%, #0f1f10 60%, #0a1a0b 100%) !important;
}

/* ══════════════════════════════════════════
   PRICING PAGE
══════════════════════════════════════════ */
html.dark .box_pricing {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: var(--dm-card-shadow) !important;
}
html.dark .box_pricing h3,
html.dark .box_pricing .price,
html.dark .box_pricing ul li {
  color: var(--dm-text) !important;
}
html.dark .box_pricing.featured {
  background: linear-gradient(135deg, #1C3D1F, #2d6e32) !important;
}
html.dark .box_pricing.featured h3,
html.dark .box_pricing.featured .price,
html.dark .box_pricing.featured ul li {
  color: #fff !important;
}

/* ══════════════════════════════════════════
   BLOG
══════════════════════════════════════════ */
html.dark .blog-post-card,
html.dark article.blog_post,
html.dark .post_info {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark .post_info h2,
html.dark .post_info h3 {
  color: var(--dm-text) !important;
}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
html.dark .modal-content {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html.dark .modal-header {
  background: var(--dm-surface-2) !important;
  border-bottom-color: var(--dm-border) !important;
}
html.dark .modal-header h4,
html.dark .modal-title {
  color: var(--dm-text) !important;
}
html.dark .modal-footer {
  border-top-color: var(--dm-border) !important;
  background: var(--dm-surface-2) !important;
}
html.dark .close {
  color: var(--dm-text-2) !important;
}

/* ══════════════════════════════════════════
   DROPDOWNS
══════════════════════════════════════════ */
html.dark .dropdown-menu {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
html.dark .dropdown-menu li a,
html.dark .dropdown-item {
  color: var(--dm-text-2) !important;
}
html.dark .dropdown-menu li a:hover,
html.dark .dropdown-item:hover {
  background: var(--dm-surface-2) !important;
  color: var(--dm-accent) !important;
}

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
html.dark .table,
html.dark table {
  color: var(--dm-text) !important;
  background: var(--dm-surface) !important;
}
html.dark .table th,
html.dark .table td,
html.dark table th,
html.dark table td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
  background: var(--dm-surface) !important;
}
html.dark .table-striped tbody tr:nth-of-type(odd) td {
  background: var(--dm-surface-2) !important;
}
html.dark .table-hover tbody tr:hover td {
  background: var(--dm-bg-3) !important;
}
html.dark .table-bordered {
  border-color: var(--dm-border) !important;
}

/* ══════════════════════════════════════════
   BADGES / LABELS
══════════════════════════════════════════ */
html.dark .badge-secondary {
  background: var(--dm-bg-3) !important;
  color: var(--dm-text-2) !important;
}

/* ══════════════════════════════════════════
   PANELS / BOXES (backend style on frontend)
══════════════════════════════════════════ */
html.dark .panel,
html.dark .panel-primary {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark .panel-heading {
  background: var(--dm-surface-2) !important;
  border-bottom-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html.dark .panel-body {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

/* ══════════════════════════════════════════
   ABOUT / STATIC PAGES
══════════════════════════════════════════ */
html.dark .box_about,
html.dark .box_faq,
html.dark .box_terms {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

/* ══════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════ */
html.dark .review_card,
html.dark .review_listing {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark .review_card p,
html.dark .review_listing p {
  color: var(--dm-text-2) !important;
}

/* ══════════════════════════════════════════
   LISTINGS PAGE (filter sidebar etc.)
══════════════════════════════════════════ */
html.dark #filters_col,
html.dark .filters_listing {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark .filter_type h6,
html.dark .filter_type label {
  color: var(--dm-text-2) !important;
}
html.dark .layout_view a {
  color: var(--dm-text-3) !important;
}
html.dark .layout_view a.active {
  color: var(--dm-accent) !important;
}

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
html.dark .page-link {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-2) !important;
}
html.dark .page-item.active .page-link {
  background: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #fff !important;
}
html.dark .page-link:hover {
  background: var(--dm-surface-2) !important;
  color: var(--dm-accent) !important;
}

/* ══════════════════════════════════════════
   SCROLLBAR (webkit)
══════════════════════════════════════════ */
html.dark ::-webkit-scrollbar {
  width: 8px; height: 8px;
}
html.dark ::-webkit-scrollbar-track {
  background: var(--dm-bg-2);
}
html.dark ::-webkit-scrollbar-thumb {
  background: var(--dm-border);
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--dm-text-3);
}

/* ══════════════════════════════════════════
   SELECTION
══════════════════════════════════════════ */
html.dark ::selection {
  background: rgba(169,207,58,0.3);
  color: var(--dm-text);
}

/* ══════════════════════════════════════════
   IMAGES — subtle dim in dark mode
══════════════════════════════════════════ */
html.dark img:not([src*="logo"]):not([src*="verified"]):not([src*="icon"]) {
  filter: brightness(0.88) contrast(1.02);
  transition: filter 0.2s;
}
html.dark img:hover {
  filter: brightness(1) contrast(1);
}

/* ══════════════════════════════════════════
   DARK MODE TOGGLE BUTTON
══════════════════════════════════════════ */
#dm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px 8px;
  border-radius: 50px;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
#dm-toggle:hover {
  background: rgba(169,207,58,0.12);
}

/* The pill track */
.dm-track {
  width: 42px; height: 22px;
  border-radius: 50px;
  background: var(--dm-toggle-bg);
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.1);
}
html.dark .dm-track {
  background: #A9CF3A;
  border-color: rgba(255,255,255,0.15);
}

/* The knob */
.dm-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
html.dark .dm-knob {
  transform: translateX(20px);
  background: #1C3D1F;
}

/* Icon inside knob */
.dm-knob::after {
  content: '☀️';
  font-size: 9px;
}
html.dark .dm-knob::after {
  content: '🌙';
}

/* Label next to toggle */
.dm-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  transition: color 0.2s;
}
html.dark .dm-label {
  color: rgba(255,255,255,0.7);
}

/* Hide label on very small screens */
@media (max-width: 480px) {
  .dm-label { display: none; }
  #dm-toggle { padding: 4px 6px; }
}

/* ══════════════════════════════════════════
   SMOOTH TRANSITION on mode switch
══════════════════════════════════════════ */
html {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
body,
header, footer, nav,
.bg_color_1, .bg_color_2,
.main_categories,
.call_section,
.box_detail, .grid_item, .strip,
.form-control, input, textarea, select,
.modal-content, .dropdown-menu,
.panel, .panel-body, .panel-heading,
.table, .table th, .table td {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}