/* ============================================
   MSTAR CORP - DARK MODE
   Toggle: body.dark-mode
   ============================================ */

/* --- Dark Mode Toggle Button --- */
.mstar-theme-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--mstar-primary, #09783E);
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  padding: 0;
  outline: none;
}

.mstar-theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.mstar-theme-toggle .icon-sun,
.mstar-theme-toggle .icon-moon {
  width: 22px;
  height: 22px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
}

.mstar-theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

.mstar-theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

body.dark-mode .mstar-theme-toggle {
  background: #1E293B;
  border-color: var(--mstar-accent, #61CE70);
}

body.dark-mode .mstar-theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

body.dark-mode .mstar-theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

/* --- Transition for all elements --- */
body,
body *:not(.mstar-theme-toggle):not(.mstar-theme-toggle *) {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================
   DARK MODE STYLES
   ============================ */

/* --- Body & Main Background --- */
body.dark-mode {
  background-color: #0F172A !important;
  color: #E2E8F0 !important;
}

body.dark-mode #wrapper-container,
body.dark-mode .content-area,
body.dark-mode .site-content,
body.dark-mode .main-content {
  background-color: #0F172A !important;
}

/* --- Header --- */
body.dark-mode .site-header,
body.dark-mode .site-header .affix {
  background-color: #1E293B !important;
  border-bottom: 1px solid #334155;
}

body.dark-mode .site-header .navigation .width-navigation .inner-navigation > ul > li > a {
  color: #E2E8F0 !important;
}

body.dark-mode .site-header .navigation .width-navigation .inner-navigation > ul > li > a:hover,
body.dark-mode .site-header .navigation .width-navigation .inner-navigation > ul > li.current-menu-item > a {
  color: var(--mstar-accent, #61CE70) !important;
}

/* Sticky header dark */
body.dark-mode .affix,
body.dark-mode .site-header.affix,
body.dark-mode .site-header.headroom--not-top {
  background-color: #1E293B !important;
}

body.dark-mode .affix .navigation .width-navigation .inner-navigation > ul > li > a,
body.dark-mode .headroom--not-top .navigation .width-navigation .inner-navigation > ul > li > a {
  color: #E2E8F0 !important;
}

/* --- Sub Menu / Dropdown --- */
body.dark-mode .site-header .navigation .width-navigation .inner-navigation ul li ul,
body.dark-mode .sub-menu {
  background-color: #1E293B !important;
  border: 1px solid #334155;
}

body.dark-mode .sub-menu li a {
  color: #94A3B8 !important;
}

body.dark-mode .sub-menu li a:hover {
  color: var(--mstar-accent, #61CE70) !important;
  background-color: #334155 !important;
}

/* --- Page Heading / Breadcrumbs --- */
body.dark-mode .top_heading,
body.dark-mode .thim-page-title,
body.dark-mode .heading__secondary {
  background-color: #1E293B !important;
}

/* --- Content Sections --- */
body.dark-mode section,
body.dark-mode .elementor-section,
body.dark-mode .elementor-top-section {
  background-color: transparent !important;
}

body.dark-mode .elementor-section[data-settings*="background_background"] {
  /* Keep sections with explicit backgrounds */
}

body.dark-mode .elementor-section.elementor-section-boxed > .elementor-container {
  background-color: transparent !important;
}

/* White background sections -> dark */
body.dark-mode .elementor-section[style*="background-color: rgb(255"],
body.dark-mode .elementor-section[style*="background-color:#fff"],
body.dark-mode .elementor-section[style*="background-color: #fff"],
body.dark-mode .elementor-section[style*="background-color:#FFF"],
body.dark-mode .elementor-section[style*="background-color: #FFF"] {
  background-color: #0F172A !important;
}

/* --- Text Colors --- */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: #F1F5F9 !important;
}

body.dark-mode p,
body.dark-mode span:not(.elementor-icon):not([class*="price"]),
body.dark-mode li,
body.dark-mode label,
body.dark-mode .elementor-widget-text-editor {
  color: #CBD5E1 !important;
}

body.dark-mode a {
  color: var(--mstar-accent, #61CE70);
}

body.dark-mode a:hover {
  color: #86EFAC !important;
}

body.dark-mode .thim-color {
  color: var(--mstar-accent, #61CE70) !important;
}

/* --- Widgets & Boxes --- */
body.dark-mode .elementor-widget-container,
body.dark-mode .thim-widget-icon-box .wrapper-box-icon {
  color: #CBD5E1;
}

body.dark-mode .elementor-icon-box-title,
body.dark-mode .elementor-icon-box-description {
  color: #E2E8F0 !important;
}

/* --- Cards & Course Items --- */
body.dark-mode .thim-course-grid .course-item,
body.dark-mode .thim-course-list .course-item,
body.dark-mode .thim-course-content,
body.dark-mode .course-content {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .thim-course-grid .course-item:hover,
body.dark-mode .thim-course-list .course-item:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

body.dark-mode .course-title a,
body.dark-mode .thim-course-content .course-title a {
  color: #F1F5F9 !important;
}

body.dark-mode .course-title a:hover,
body.dark-mode .thim-course-content .course-title a:hover {
  color: var(--mstar-accent, #61CE70) !important;
}

body.dark-mode .course-meta,
body.dark-mode .course-meta .course-meta-field {
  color: #94A3B8 !important;
}

body.dark-mode .course-meta .course-meta-field .value {
  color: var(--mstar-accent, #61CE70) !important;
}

/* --- Sidebar & Widgets --- */
body.dark-mode .sidebar,
body.dark-mode .widget,
body.dark-mode #secondary {
  background-color: #0F172A !important;
  color: #CBD5E1 !important;
}

body.dark-mode .widget-title,
body.dark-mode .widget h4 {
  color: #F1F5F9 !important;
}

body.dark-mode .widget a {
  color: #94A3B8 !important;
}

body.dark-mode .widget a:hover {
  color: var(--mstar-accent, #61CE70) !important;
}

/* --- Forms --- */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748B !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="search"]:focus,
body.dark-mode textarea:focus {
  border-color: var(--mstar-accent, #61CE70) !important;
  box-shadow: 0 0 0 2px rgba(97, 206, 112, 0.2) !important;
}

/* --- Search Bar --- */
body.dark-mode form.search-courses,
body.dark-mode .thim-search-course-form {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

/* --- Tables --- */
body.dark-mode table {
  border-color: #334155 !important;
}

body.dark-mode table th {
  background-color: #1E293B !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}

body.dark-mode table td {
  background-color: #0F172A !important;
  color: #CBD5E1 !important;
  border-color: #334155 !important;
}

body.dark-mode table tr:hover td {
  background-color: #1E293B !important;
}

/* --- Buttons (keep brand colors, adjust for dark context) --- */
body.dark-mode .thim-sc-button .thim-button,
body.dark-mode .lp-button,
body.dark-mode input[type="submit"],
body.dark-mode .elementor-button,
body.dark-mode button.button {
  background-color: var(--mstar-primary, #09783E) !important;
  color: #ffffff !important;
}

/* --- LearnPress Course Page --- */
body.dark-mode .lp-single-course,
body.dark-mode .learn-press-content,
body.dark-mode #learn-press-course-tabs,
body.dark-mode .course-summary {
  background-color: #0F172A !important;
  color: #CBD5E1 !important;
}

body.dark-mode .learn-press-nav-tabs .course-nav a,
body.dark-mode #learn-press-course-tabs .course-nav a {
  color: #94A3B8 !important;
}

body.dark-mode .learn-press-nav-tabs .course-nav.active a,
body.dark-mode #learn-press-course-tabs .course-nav.active a {
  color: var(--mstar-accent, #61CE70) !important;
  border-bottom-color: var(--mstar-accent, #61CE70) !important;
}

body.dark-mode .section-header,
body.dark-mode .course-curriculum .section-header {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .course-curriculum .section-content .course-item {
  background-color: #0F172A !important;
  border-color: #334155 !important;
}

body.dark-mode .course-curriculum .section-content .course-item:hover {
  background-color: #1E293B !important;
}

/* --- Progress Bar --- */
body.dark-mode .learn-press-progress .progress-bg,
body.dark-mode .lp-course-progress .progress-bg {
  background-color: #334155 !important;
}

/* --- Footer (already dark, minimal changes) --- */
body.dark-mode .footer-area {
  background-color: #0A0F1A !important;
  border-top: 1px solid #1E293B;
}

body.dark-mode .copyright-area {
  background-color: #060A12 !important;
  border-top-color: #1E293B !important;
}

/* --- Blog / Posts --- */
body.dark-mode .post-item,
body.dark-mode article.post,
body.dark-mode .blog-content {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  border-radius: 8px;
}

body.dark-mode .entry-title a {
  color: #F1F5F9 !important;
}

body.dark-mode .entry-title a:hover {
  color: var(--mstar-accent, #61CE70) !important;
}

body.dark-mode .entry-meta,
body.dark-mode .entry-meta a {
  color: #64748B !important;
}

/* --- Pagination --- */
body.dark-mode .navigation.pagination .page-numbers,
body.dark-mode .learn-press-pagination ul li .page-numbers {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

body.dark-mode .navigation.pagination .page-numbers:hover,
body.dark-mode .learn-press-pagination ul li .page-numbers:hover {
  background-color: #334155 !important;
  color: #F1F5F9 !important;
}

/* --- WooCommerce --- */
body.dark-mode .woocommerce .product,
body.dark-mode .woocommerce ul.products li.product {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .woocommerce .product .price,
body.dark-mode .woocommerce ul.products li.product .price {
  color: var(--mstar-accent, #61CE70) !important;
}

/* --- Elementor Specific Overrides --- */
body.dark-mode .elementor-widget-heading .elementor-heading-title {
  color: #F1F5F9 !important;
}

body.dark-mode .elementor-widget-text-editor p,
body.dark-mode .elementor-widget-text-editor {
  color: #CBD5E1 !important;
}

body.dark-mode .elementor-counter .elementor-counter-number-wrapper {
  color: var(--mstar-accent, #61CE70) !important;
}

body.dark-mode .elementor-counter .elementor-counter-title {
  color: #94A3B8 !important;
}

body.dark-mode .elementor-divider .elementor-divider-separator {
  border-color: #334155 !important;
}

body.dark-mode .elementor-tabs .elementor-tab-title {
  color: #94A3B8 !important;
}

body.dark-mode .elementor-tabs .elementor-tab-title.elementor-active {
  color: var(--mstar-accent, #61CE70) !important;
}

body.dark-mode .elementor-tabs .elementor-tab-content {
  background-color: #1E293B !important;
  color: #CBD5E1 !important;
  border-color: #334155 !important;
}

body.dark-mode .elementor-accordion .elementor-accordion-item {
  border-color: #334155 !important;
}

body.dark-mode .elementor-accordion .elementor-tab-title {
  background-color: #1E293B !important;
}

body.dark-mode .elementor-accordion .elementor-tab-content {
  background-color: #0F172A !important;
  color: #CBD5E1 !important;
}

/* --- Images: slight brightness boost in dark mode --- */
body.dark-mode img {
  opacity: 0.92;
}

body.dark-mode img:hover {
  opacity: 1;
}

/* --- Scrollbar Dark --- */
body.dark-mode::-webkit-scrollbar-track {
  background: #1E293B;
}

body.dark-mode::-webkit-scrollbar-thumb {
  background: #334155;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
  background: var(--mstar-accent, #61CE70);
}

/* --- Selection Dark --- */
body.dark-mode ::selection {
  background-color: var(--mstar-accent, #61CE70);
  color: #0F172A;
}

/* --- Mobile Menu --- */
body.dark-mode .menu-mobile-effect,
body.dark-mode .mobile-menu-container {
  background-color: #1E293B !important;
}

body.dark-mode .mobile-menu-container a {
  color: #E2E8F0 !important;
  border-color: #334155 !important;
}

body.dark-mode .mobile-menu-container a:hover {
  color: var(--mstar-accent, #61CE70) !important;
}

/* --- Tooltip text for toggle --- */
.mstar-theme-toggle::after {
  content: "Chế độ tối";
  position: absolute;
  left: 58px;
  background: #1E293B;
  color: #E2E8F0;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-family: "Plus Jakarta Sans", sans-serif;
}

body.dark-mode .mstar-theme-toggle::after {
  content: "Chế độ sáng";
  background: #334155;
}

.mstar-theme-toggle:hover::after {
  opacity: 1;
}

/* --- Back to Top coexist --- */
body.dark-mode #back-to-top {
  background-color: #334155 !important;
  border: 1px solid #475569;
}

body.dark-mode #back-to-top:hover {
  background-color: var(--mstar-accent, #61CE70) !important;
}

/* --- Print: always light mode --- */
@media print {
  body.dark-mode {
    background-color: #fff !important;
    color: #000 !important;
  }
  .mstar-theme-toggle {
    display: none !important;
  }
}

/* ============================================
   DARK MODE: Home Page CSS Variables Override
   (page-home-redesign.php uses --g-* vars)
   ============================================ */
body.dark-mode {
  --g-dark: #F1F5F9;
  --g-text: #CBD5E1;
  --g-text-light: #94A3B8;
  --g-text-muted: #64748B;
  --g-surface: #1E293B;
  --g-surface-dim: #162032;
  --g-surface-container: #1E293B;
  --g-border: #334155;
  --g-border-light: #1E293B;
  --g-accent-light: rgba(52, 168, 83, 0.15);
}

/* Nav blur in dark mode */
body.dark-mode .mh-nav {
  background: rgba(15, 23, 42, 0.85) !important;
  border-bottom-color: #334155 !important;
}

body.dark-mode .mh-nav-links a {
  color: #CBD5E1 !important;
}

body.dark-mode .mh-nav-links a:hover,
body.dark-mode .mh-nav-links a.active {
  color: #61CE70 !important;
}

/* Hero card */
body.dark-mode .mh-hero-card {
  background: #1E293B !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 1px #334155 !important;
}

body.dark-mode .mh-hero-card-img {
  background: linear-gradient(135deg, #1a3a2a, #1a2a3a, #2a2a1a) !important;
}

/* Floating info cards */
body.dark-mode .mh-float-card {
  background: #1E293B !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

body.dark-mode .mh-float-card span,
body.dark-mode .mh-float-card p {
  color: #94A3B8 !important;
}

/* Trust badge */
body.dark-mode .mh-trust-badge {
  background: rgba(52, 168, 83, 0.1) !important;
  border-color: rgba(52, 168, 83, 0.2) !important;
}

/* Stats */
body.dark-mode .mh-hero-stats {
  border-top-color: #334155 !important;
}

/* Section backgrounds */
body.dark-mode .mh-section-alt,
body.dark-mode [class*="mh-section"] {
  background-color: #0F172A !important;
}

body.dark-mode .mh-section-alt {
  background-color: #162032 !important;
}

/* Cards in sections */
body.dark-mode .mh-feature-card,
body.dark-mode .mh-course-card,
body.dark-mode .mh-value-card,
body.dark-mode .mh-step-card,
body.dark-mode .mh-testimonial-card,
body.dark-mode .mh-cta-card,
body.dark-mode [class*="mh-card"] {
  background: #1E293B !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}

body.dark-mode .mh-feature-card:hover,
body.dark-mode .mh-course-card:hover,
body.dark-mode [class*="mh-card"]:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
  border-color: #475569 !important;
}

/* Metric boxes */
body.dark-mode .mh-metric {
  color: #F1F5F9 !important;
}

body.dark-mode .mh-metric span {
  color: #94A3B8 !important;
}

/* CTA section */
body.dark-mode .mh-cta-section {
  background: linear-gradient(135deg, #065C2E, #0F172A) !important;
}

/* Footer in home */
body.dark-mode .mh-footer {
  background: #0A0F1A !important;
  border-top-color: #1E293B !important;
}

body.dark-mode .mh-footer-links a {
  color: #94A3B8 !important;
}

body.dark-mode .mh-footer-links a:hover {
  color: #61CE70 !important;
}

/* Icon backgrounds */
body.dark-mode .mh-icon-wrap,
body.dark-mode [class*="mh-icon"] {
  background: rgba(52, 168, 83, 0.1) !important;
}

/* Buttons keep brand colors */
body.dark-mode .mh-btn-ghost {
  border-color: #475569 !important;
  color: #CBD5E1 !important;
}

body.dark-mode .mh-btn-ghost:hover {
  background: #334155 !important;
  color: #F1F5F9 !important;
}

/* Search bar */
body.dark-mode .mh-search-bar,
body.dark-mode [class*="mh-search"] {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

/* Check marks */
body.dark-mode .mh-check {
  color: #61CE70 !important;
}

/* Progress bars */
body.dark-mode .mh-progress-bg {
  background: #334155 !important;
}

/* ============================================
   DARK MODE v2: Eduma Header + Font Sync
   ============================================ */

/* Eduma header dark */
body.dark-mode .site-header,
body.dark-mode .site-header .affix,
body.dark-mode .site-header.headroom--not-top {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #334155 !important;
}

/* Eduma page heading banner dark */
body.dark-mode .top_heading,
body.dark-mode .thim-page-title {
  background: linear-gradient(135deg, #0A1628 0%, #065C2E 100%) !important;
}

/* Eduma footer match home dark */
body.dark-mode .footer-area {
  background-color: #0A0F1A !important;
}

body.dark-mode .copyright-area {
  background-color: #060A12 !important;
}

/* Course cards in dark - consistent card bg */
body.dark-mode .thim-course-grid .course-item .thim-course-content,
body.dark-mode .thim-course-list .course-item .thim-course-content,
body.dark-mode .course-content,
body.dark-mode .thim-course-content {
  background: #1E293B !important;
}

body.dark-mode .course-item .course-price .free-course,
body.dark-mode .course-item .course-price .price {
  color: var(--mstar-accent, #61CE70) !important;
}

/* Sidebar categories dark */
body.dark-mode .sidebar .widget,
body.dark-mode #secondary .widget {
  background: transparent !important;
}

body.dark-mode .sidebar .widget a,
body.dark-mode #secondary .widget a {
  color: #94A3B8 !important;
}

body.dark-mode .sidebar .widget-title,
body.dark-mode #secondary .widget-title {
  color: #F1F5F9 !important;
}

/* Breadcrumbs dark */
body.dark-mode .breadcrumbs span a { color: #64748B !important; }
body.dark-mode .breadcrumbs span a:hover { color: var(--mstar-accent) !important; }
body.dark-mode .breadcrumbs span.current { color: #E2E8F0 !important; }

/* Sort/filter toolbar dark */
body.dark-mode .courses-sorting,
body.dark-mode .courses-sorting select,
body.dark-mode form.search-courses input {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

/* Pagination dark */
body.dark-mode .learn-press-pagination ul li .page-numbers,
body.dark-mode .navigation.pagination .page-numbers {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

body.dark-mode .learn-press-pagination ul li .page-numbers.current,
body.dark-mode .navigation.pagination .page-numbers.current {
  background: var(--mstar-primary) !important;
  border-color: var(--mstar-primary) !important;
  color: #fff !important;
}

/* Author name dark */
body.dark-mode .course-author,
body.dark-mode .thim-course-content .course-author {
  color: #64748B !important;
}

/* Footer dark */
body.dark-mode .footer-area a:hover {
  color: var(--mstar-accent) !important;
}

body.dark-mode .copyright-area,
body.dark-mode .copyright-area a {
  color: #475569 !important;
}