﻿/* =============================================================================
   mht-switcher.css — Maharatri Color Switcher + Buy Widget
   ============================================================================= */

/* ── Color Theme Switcher (left side) ──────────────────────────────────────── */
.mht-color-theme {
  position: fixed;
  top: 55%;
  left: 0;
  z-index: 9999;
  transition: left .4s ease;
}
.mht-color-theme.mht-slide-out {
  left: -210px;
}

.mht-theme-panel {
  width: 210px;
  background: #fff;
  padding: 20px 22px 14px;
  box-shadow: 2px 2px 14px rgba(0, 0, 0, .18);
  border-radius: 0 0 10px 0;
}
.mht-theme-panel h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--mht-primary);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mht-theme-panel p {
  font-size: 11px;
  color: #888;
  margin: 12px 0 0;
  line-height: 1.5;
}

/* Toggle tab */
.mht-theme-switch {
  position: absolute;
  right: -46px;
  top: 0;
  width: 46px;
  height: 46px;
  background: var(--mht-primary);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
  box-shadow: 2px 2px 8px rgba(0,0,0,.2);
  transition: background .25s;
}
.mht-theme-switch:hover {
  background: var(--mht-accent);
}
.mht-theme-switch i {
  transition: transform .45s ease;
}
/* Panel open: gear sits flat */
.mht-theme-switch i { transform: rotate(0deg); }
/* Panel closed: gear rotates 45° — "settings locked" cue */
.mht-color-theme.mht-slide-out .mht-theme-switch i { transform: rotate(45deg); }

/* Colour swatches */
.mht-theme-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mht-each-color {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .2s, transform .2s;
}
.mht-each-color:hover {
  transform: scale(1.15);
}
.mht-each-color.mht-active {
  outline-color: #333;
  transform: scale(1.1);
}

/* ── Buy Widget (right side) ────────────────────────────────────────────────── */
.mht-buy-widget {
  position: fixed;
  top: 55%;
  right: -178px;
  z-index: 9999;
  transition: right .4s ease;
}
.mht-buy-widget.mht-buy-open {
  right: 0;
}

/* Panel is now an <a> — entire area is the link. */
.mht-buy-panel {
  display: block;
  width: 178px;
  background: var(--mht-primary);
  padding: 18px 16px;
  box-shadow: -2px 2px 14px rgba(0, 0, 0, .18);
  border-radius: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s;
}
.mht-buy-panel:hover {
  background: var(--mht-accent);
}
.mht-buy-panel p {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Buy tab — prominent + animated ──────────────────────────────────────────── */
.mht-buy-switch {
  position: absolute;
  left: -58px;
  top: 0;
  width: 58px;
  height: 64px;
  background: var(--mht-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 0;
  animation: mht-buy-tab-glow 2.8s ease-in-out infinite;
  transition: background .25s;
}
.mht-buy-switch::after {
  content: 'BUY';
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-family: sans-serif;
  line-height: 1;
}
.mht-buy-switch i {
  font-size: 22px;
  animation: mht-bag-shake 4s ease-in-out infinite;
}
/* Pause both animations on hover for clean interaction */
.mht-buy-switch:hover {
  background: var(--mht-accent);
  animation: none;
}
.mht-buy-switch:hover i {
  animation: none;
}

/* ── Attention animations ─────────────────────────────────────────────────────── */

@keyframes mht-buy-tab-glow {
  0%, 100% { box-shadow: -3px 0 10px rgba(0,0,0,.25); }
  50%       { box-shadow: -4px 0 22px rgba(0,0,0,.45),
                          -2px 0 40px rgba(0,0,0,.18); }
}

/* Periodic bag shake: still for 2.8s, then 3 quick wiggles */
@keyframes mht-bag-shake {
  0%, 70%   { transform: rotate(0deg) scale(1);    }
  74%        { transform: rotate(-18deg) scale(1.1); }
  78%        { transform: rotate(16deg)  scale(1.1); }
  82%        { transform: rotate(-12deg) scale(1.05);}
  86%        { transform: rotate(8deg)   scale(1.05);}
  90%        { transform: rotate(-4deg)  scale(1);   }
  94%, 100%  { transform: rotate(0deg)  scale(1);   }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mht-buy-switch,
  .mht-buy-switch i { animation: none; }
}

/* ── Floating WhatsApp Button (bottom-left) ──────────────────────────────── */
.mht-whatsapp-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .45);
  animation: mht-wa-pulse 2.5s ease-in-out infinite;
  text-decoration: none;
  transition: transform .2s;
}
.mht-whatsapp-btn:hover {
  transform: scale(1.12);
  animation: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .6);
}
.mht-whatsapp-btn i {
  font-size: 28px;
  color: #fff;
  line-height: 1;
}

/* Disabled state */
.mht-whatsapp-btn.mht-wa-disabled {
  background: #9e9e9e;
  animation: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  cursor: not-allowed;
}
.mht-whatsapp-btn.mht-wa-disabled:hover {
  background: #9e9e9e;
  transform: none;
  animation: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

/* "Not configured" notice — slides up above the button on click */
.mht-wa-notice {
  position: fixed;
  bottom: 96px;
  left: 16px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-family: sans-serif;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 230px;
  line-height: 1.55;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  z-index: 10001;
}
.mht-wa-notice::after {            /* arrow pointing down toward the button */
  content: '';
  position: absolute;
  bottom: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: #1a1a1a;
  transform: rotate(45deg);
}
.mht-wa-notice.mht-wa-show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes mht-wa-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, .45); }
  50%       { box-shadow: 0 4px 24px rgba(37, 211, 102, .75),
                          0 0 0 8px rgba(37, 211, 102, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .mht-whatsapp-btn { animation: none; }
}

/* â”€â”€â”€ mht Dark Mode Row & Toggle (appended for all non-maharatri templates) â”€â”€â”€ */
.mht-dark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 4px;
    margin-top: 10px;
    border-top: 1px solid #e8e8e8;
}
.mht-dark-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .2px;
}
.mht-darkmode-tab {
    width: 36px;
    height: 36px;
    background: var(--mht-primary, #1565C0);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: background .25s, transform .2s;
}
.mht-darkmode-tab:hover {
    background: var(--mht-accent, #1976D2);
    transform: scale(1.08);
}
body.mht-dark .mht-darkmode-tab        { background: #e0e0e0; color: #333; }
body.mht-dark .mht-darkmode-tab:hover  { background: var(--mht-accent, #1976D2); color: #fff; }
body.mht-dark .mht-theme-panel         { background: #1e1e2e; box-shadow: 2px 2px 14px rgba(0,0,0,.45); }
body.mht-dark .mht-theme-panel h5      { color: #e2e2e2; }
body.mht-dark .mht-theme-panel p       { color: #888; }
body.mht-dark .mht-dark-label          { color: #bbb; }
body.mht-dark .mht-dark-row            { border-color: #333; }
body.mht-dark .mht-buy-panel           { filter: brightness(0.8); }
body.mht-dark .mht-buy-switch          { animation: none !important; filter: brightness(0.75); }
/* â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”
   mht DARK MODE â€” Template Body Overrides  (v2)
â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â” */

/* â”€â”€ Base â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark {
  background-color: #0d0d0d !important;
  color: #cccccc !important;
}

/* â”€â”€ Header / Nav (tag + common class names) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark header,
body.mht-dark .header,
body.mht-dark .header-area, body.mht-dark .header-section,
body.mht-dark .header-top,  body.mht-dark .header-bottom,
body.mht-dark .header-inner,body.mht-dark .header-wrapper,
body.mht-dark .main-header, body.mht-dark .sticky-header,
body.mht-dark .top-header,  body.mht-dark .top-bar,
body.mht-dark .menu-area,   body.mht-dark .menu-bar,
body.mht-dark .navigation-area, body.mht-dark .navigation,
body.mht-dark nav, body.mht-dark .navbar,
body.mht-dark .nav-area, body.mht-dark .main-nav,
body.mht-dark [class*="header-"],
body.mht-dark [class*="-header"] {
  background-color: #111111 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.6) !important;
  border-color: #222222 !important;
}
body.mht-dark nav a, body.mht-dark .navbar a,
body.mht-dark .main-menu ul li a, body.mht-dark .nav-link,
body.mht-dark .navbar-nav .nav-link { color: #dddddd !important; }

/* â”€â”€ Typography â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark h1, body.mht-dark h2, body.mht-dark h3,
body.mht-dark h4, body.mht-dark h5, body.mht-dark h6 { color: #f0f0f0 !important; }
body.mht-dark p, body.mht-dark span:not(.badge),
body.mht-dark li, body.mht-dark label,
body.mht-dark td, body.mht-dark th { color: #b0b0b0 !important; }

/* â”€â”€ Sections / Areas â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark main,
body.mht-dark section,
body.mht-dark .section-padding, body.mht-dark .section-area,
body.mht-dark .section-bg,
body.mht-dark [class*="-section"], body.mht-dark [class*="section-"],
body.mht-dark [class*="-area"],    body.mht-dark [class*="area-"],
body.mht-dark [class*="-wrapper"], body.mht-dark [class*="-block"],
body.mht-dark [class*="-content"], body.mht-dark [class*="content-"],
body.mht-dark [class*="-wrap"] {
  background-color: #111111 !important;
}

/* â”€â”€ Hero / Banner / Slider â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="hero"],
body.mht-dark [class*="banner"],
body.mht-dark [class*="slider"],
body.mht-dark [class*="intro"],
body.mht-dark [class*="jumbotron"],
body.mht-dark .page-title, body.mht-dark .page-header { background-color: #1a1a1a !important; }

/* â”€â”€ Light / White Backgrounds â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark .bg-white, body.mht-dark .bg-light,
body.mht-dark [class*="bg-gray"],  body.mht-dark [class*="bg-light"],
body.mht-dark [class*="grey-bg"],  body.mht-dark [class*="light-bg"],
body.mht-dark [class*="white-bg"], body.mht-dark [class*="gray-bg"],
body.mht-dark [class*="f5f5f5"],   body.mht-dark [class*="section-bg"],
body.mht-dark [class*="bg-f"],
body.mht-dark .gray-bg, body.mht-dark .grey-bg,
body.mht-dark .white-bg, body.mht-dark .light-bg { background-color: #1a1a1a !important; }

/* â”€â”€ Cards / Boxes / Items â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark .card, body.mht-dark .widget,
body.mht-dark .single-box, body.mht-dark .box,
body.mht-dark [class*="single-"], body.mht-dark [class*="-box"],
body.mht-dark [class*="-card"],   body.mht-dark [class*="-item"],
body.mht-dark [class*="-widget"], body.mht-dark [class*="widget-"],
body.mht-dark [class*="-service"],body.mht-dark [class*="service-"],
body.mht-dark [class*="-post"],   body.mht-dark [class*="post-"],
body.mht-dark [class*="-blog"],   body.mht-dark [class*="blog-"],
body.mht-dark [class*="-team"],   body.mht-dark [class*="team-"],
body.mht-dark [class*="-price"],  body.mht-dark [class*="price-"],
body.mht-dark [class*="-feature"],body.mht-dark [class*="feature-"],
body.mht-dark [class*="-panel"],  body.mht-dark [class*="panel-"],
body.mht-dark [class*="-thumb"],  body.mht-dark [class*="-info"],
body.mht-dark [class*="-detail"], body.mht-dark [class*="-list"],
body.mht-dark [class*="-tab"],    body.mht-dark [class*="-accordion"],
body.mht-dark [class*="-menu"],   body.mht-dark [class*="-sidebar"] {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Footer â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark footer, body.mht-dark .footer,
body.mht-dark .footer-area,   body.mht-dark .footer-section,
body.mht-dark .footer-top,    body.mht-dark .footer-bottom,
body.mht-dark .footer-middle, body.mht-dark .footer-widget,
body.mht-dark [class*="footer"] {
  background-color: #080808 !important;
  border-color: #1a1a1a !important;
}
body.mht-dark footer p,    body.mht-dark footer a,
body.mht-dark footer span, body.mht-dark footer li,
body.mht-dark .footer *  { color: #777777 !important; }

/* â”€â”€ Forms â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark input, body.mht-dark textarea, body.mht-dark select,
body.mht-dark .form-control, body.mht-dark .input-group {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
  color: #cccccc !important;
}
body.mht-dark ::placeholder { color: #555555 !important; }

/* â”€â”€ Links â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark a:not([class*="btn"]):not(.mht-buy-panel):not(.mht-whatsapp-btn) {
  color: #cc0004;
}

/* â”€â”€ Misc â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark #preloader, body.mht-dark .preloader { background: #0d0d0d !important; }
body.mht-dark .breadcrumb-area, body.mht-dark .page-banner,
body.mht-dark [class*="breadcrumb"] { background-color: #1a1a1a !important; }
body.mht-dark .border, body.mht-dark [class*="border"] { border-color: #2a2a2a !important; }
body.mht-dark hr { border-color: #2a2a2a !important; }
body.mht-dark table { background-color: #1e1e1e !important; }
body.mht-dark .dropdown-menu,
body.mht-dark [class*="dropdown"] { background-color: #1e1e1e !important; border-color: #333 !important; }
body.mht-dark .dropdown-item:hover { background-color: #2a2a2a !important; }
body.mht-dark .modal-content,
body.mht-dark .modal-header, body.mht-dark .modal-footer {
  background-color: #1e1e1e !important; border-color: #333 !important;
}
body.mht-dark img { filter: brightness(0.88); }
/* â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”
   mht DARK MODE â€” Extended Coverage (v2.1)
â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â” */

/* â”€â”€ Template-specific namespaces â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="exp-"],
body.mht-dark [class*="sigma_"],
body.mht-dark [class*="acr-"],
body.mht-dark [class*="metro_"],
body.mht-dark [class*="clinet"] {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
  color: #b0b0b0 !important;
}

/* â”€â”€ Blog elements â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="blog-"],
body.mht-dark [class*="-blog"],
body.mht-dark [class*="blog_"],
body.mht-dark [class*="post-"],
body.mht-dark [class*="-post"],
body.mht-dark [class*="entry-"],
body.mht-dark [class*="article-"] {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Shop / Product / Cart â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="product-"],
body.mht-dark [class*="-product"],
body.mht-dark [class*="shop-"],
body.mht-dark [class*="-shop"],
body.mht-dark [class*="cart-"],
body.mht-dark [class*="-cart"],
body.mht-dark [class*="cat-product"],
body.mht-dark [class*="collection-"],
body.mht-dark [class*="-collection"],
body.mht-dark [class*="woo-"] {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Cards / Boxes (Bootstrap + custom) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark .card-body,
body.mht-dark .card-header,
body.mht-dark .card-footer,
body.mht-dark .card-img-overlay,
body.mht-dark [class*="icon-box"],
body.mht-dark [class*="image-box"],
body.mht-dark [class*="info-box"],
body.mht-dark [class*="icon-block"],
body.mht-dark [class*="counter-"],
body.mht-dark [class*="-counter"] {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Listings â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="listing-"],
body.mht-dark [class*="-listing"],
body.mht-dark .listing,
body.mht-dark [class*="featured-"],
body.mht-dark [class*="-featured"],
body.mht-dark .featured,
body.mht-dark [class*="masonry-"],
body.mht-dark [class*="grid-item"],
body.mht-dark [class*="filter-"] {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Gallery / Portfolio â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="gallery-"],
body.mht-dark [class*="-gallery"],
body.mht-dark [class*="portfolio-"],
body.mht-dark [class*="-portfolio"] {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ CTA / Contact â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="cta-"],
body.mht-dark [class*="-cta"],
body.mht-dark [class*="contact-"],
body.mht-dark [class*="-contact"] {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Progress / Stats â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="progress-"],
body.mht-dark [class*="-progress"],
body.mht-dark .progress { background-color: #2a2a2a !important; }

/* â”€â”€ Pagination â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark .page-item .page-link,
body.mht-dark [class*="pagination-"] {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  color: #b0b0b0 !important;
}
body.mht-dark .page-item.active .page-link {
  background-color: var(--mht-primary) !important;
  border-color: var(--mht-primary) !important;
}

/* â”€â”€ Preloader / Overlay â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="overlay"],
body.mht-dark [class*="-overlay"] { background-color: rgba(0,0,0,0.75) !important; }

/* â”€â”€ Text color fixes for namespace elements â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body.mht-dark [class*="exp-"] *,
body.mht-dark [class*="sigma_"] *,
body.mht-dark [class*="acr-"] *,
body.mht-dark [class*="metro_"] * { color: #b0b0b0 !important; }
body.mht-dark [class*="exp-"] h1, body.mht-dark [class*="exp-"] h2,
body.mht-dark [class*="exp-"] h3, body.mht-dark [class*="exp-"] h4,
body.mht-dark [class*="exp-"] h5, body.mht-dark [class*="exp-"] h6,
body.mht-dark [class*="sigma_"] h1, body.mht-dark [class*="sigma_"] h2,
body.mht-dark [class*="sigma_"] h3, body.mht-dark [class*="sigma_"] h4,
body.mht-dark [class*="sigma_"] h5, body.mht-dark [class*="sigma_"] h6,
body.mht-dark [class*="acr-"] h1, body.mht-dark [class*="acr-"] h2,
body.mht-dark [class*="acr-"] h3, body.mht-dark [class*="acr-"] h4,
body.mht-dark [class*="acr-"] h5, body.mht-dark [class*="acr-"] h6,
body.mht-dark [class*="metro_"] h1, body.mht-dark [class*="metro_"] h2,
body.mht-dark [class*="metro_"] h3, body.mht-dark [class*="metro_"] h4,
body.mht-dark [class*="metro_"] h5, body.mht-dark [class*="metro_"] h6 { color: #f0f0f0 !important; }
/* â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”
   mht DARK MODE â€” v2.2 Specificity boost + Transparency fix
â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â” */

/* â”€â”€ High-specificity body rule (beats template body rules) */
html body.mht-dark {
  background-color: #0d0d0d !important;
  color: #cccccc !important;
}

/* â”€â”€ Transparent & overlay areas: NEVER apply solid dark bg */
body.mht-dark [class*="overlay"],
body.mht-dark [class*="transparent"],
body.mht-dark [class*="bg-transparent"],
body.mht-dark .bg-transparent,
body.mht-dark [class*="no-bg"],
body.mht-dark [class*="shape"],
body.mht-dark [class*="wave"],
body.mht-dark [class*="particle"],
body.mht-dark [class*="ripple"],
body.mht-dark [class*="bubble"],
body.mht-dark [class*="circle-anim"],
body.mht-dark [class*="floating"] {
  background-color: transparent !important;
}

/* â”€â”€ Background-image areas: keep the image, don't hide it */
body.mht-dark [class*="parallax"],
body.mht-dark [class*="bg-img"],
body.mht-dark [class*="bg-image"],
body.mht-dark [class*="bg-video"],
body.mht-dark [class*="background-img"],
body.mht-dark [class*="jarallax"],
body.mht-dark [style*="background-image"],
body.mht-dark [style*="background: url"],
body.mht-dark [style*="background:url"] {
  background-color: transparent !important;
}

/* â”€â”€ Image brightness in dark mode (subtle, not too dark) */
body.mht-dark img:not([class*="logo"]):not([class*="icon"]) {
  filter: brightness(0.88) contrast(1.05);
}
body.mht-dark [class*="logo"] img,
body.mht-dark img[class*="logo"],
body.mht-dark [class*="icon"] img { filter: none; }
/* â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”
   mht DARK MODE â€” v2.3 Audit gap fixes
â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â” */

/* â”€â”€ *-bg utility classes (primary-bg, dark-bg, light-bgâ€¦) */
body.mht-dark [class*="-bg"]:not(.bg-transparent):not([class*="overlay"]) {
  background-color: #1a1a1a !important;
  color: #b0b0b0 !important;
}

/* â”€â”€ Gradient utility classes */
body.mht-dark [class*="gradient"] {
  background: #1a1a1a !important;
}

/* â”€â”€ Loop containers (faq-loop, blog-loopâ€¦) */
body.mht-dark [class*="loop"] {
  background-color: #111111 !important;
}

/* â”€â”€ Typo "secton" (cannaweed/solax template typo) */
body.mht-dark [class*="secton"] {
  background-color: #111111 !important;
}

/* â”€â”€ Aside / sidebar */
body.mht-dark [class*="-aside"],
body.mht-dark .main-aside,
body.mht-dark aside {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Section-light and section-before variants */
body.mht-dark .section-light,
body.mht-dark [class*="section-light"],
body.mht-dark .section-before,
body.mht-dark [class*="light-section"] {
  background-color: #1a1a1a !important;
}

/* â”€â”€ Custom form wrappers */
body.mht-dark [class*="-form"],
body.mht-dark .custom-form {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
}

/* â”€â”€ Bootstrap badges */
body.mht-dark .badge:not([class*="bg-"]) {
  background-color: #2a2a2a !important;
  color: #cccccc !important;
}

/* â”€â”€ Bare .post class */
body.mht-dark .post {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Testimonial / review body elements */
body.mht-dark [class*="testimonial"],
body.mht-dark [class*="-review"],
body.mht-dark [class*="review-"] {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* â”€â”€ Location / map box elements */
body.mht-dark [class*="location"],
body.mht-dark [class*="-map"] {
  background-color: #1a1a1a !important;
}

/* â”€â”€ Preloader (white flash on page load) */
body.mht-dark #preloader,
body.mht-dark .preloader,
body.mht-dark [class*="preloader"],
body.mht-dark [class*="loader"] {
  background-color: #0d0d0d !important;
}