/* =====================================================
   MICRO MART COMPARE – ENTERPRISE 2.0
   Elegant • Responsive • Conversion Focused
   ===================================================== */

   :root {
    --mm-primary: #0d6efd;
    --mm-primary-dark: #0a58ca;
    --mm-accent: #f1f6ff;
    --mm-text: #1f2937;
    --mm-muted: #6b7280;
    --mm-border: #e5e7eb;
    --mm-radius-lg: 18px;
    --mm-radius-md: 12px;
    --mm-shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.05);
    --mm-shadow-hover: 0 25px 70px rgba(13, 110, 253, 0.15);
  }
  
  /* =========================
     SECTION BASE
     ========================= */
  
  .micromart-compare {
    position: relative;
    padding: 120px 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(13,110,253,0.06), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(13,110,253,0.04), transparent 40%),
      #ffffff;
    overflow: hidden;
    box-shadow: 0 60px 140px rgba(0,0,0,0.99);;
  }
  
  .micromart-compare__inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* =========================
     HEADER
     ========================= */
  
  .micromart-compare__header {
    text-align: center;
    margin-bottom: 60px;
  }
  
  .micromart-compare__eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--mm-primary);
    margin-bottom: 14px;
    display: inline-block;
  }
  
  .micromart-compare__title {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--mm-text);
    margin-bottom: 22px;
    line-height: 1.2;
  }
  
  .micromart-compare__intro {
    max-width: 820px;
    margin: 0 auto;
    color: var(--mm-muted);
    font-size: 1.08rem;
    line-height: 1.8;
  }
  
  /* =========================
     TAB TOGGLE
     ========================= */
  
  .micromart-compare__toggle {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 55px 0;
    flex-wrap: wrap;
  }
  
  .compare-tab {
    border: 1px solid var(--mm-border);
    background: #ffffff;
    color: var(--mm-text);
    padding: 14px 26px;
    font-weight: 600;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-size: 0.95rem;
  }
  
  .compare-tab:hover {
    border-color: var(--mm-primary);
    color: var(--mm-primary);
  }
  
  .compare-tab.active {
    background: linear-gradient(135deg, var(--mm-primary), var(--mm-primary-dark));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(13,110,253,0.25);
  }
  
  /* =========================
     PANELS
     ========================= */
  
  .micromart-compare__panels {
    position: relative;
    min-height: 420px;
  }
  
  .compare-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.35s ease;
    position: absolute;
    width: 100%;
  }
  
  .compare-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
  }
  
  /* =========================
     CARD DESIGN
     ========================= */
  
  .compare-card {
    background: #ffffff;
    border-radius: var(--mm-radius-lg);
    padding: 50px;
    box-shadow: var(--mm-shadow-soft);
    border: 1px solid var(--mm-border);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    transition: all 0.3s ease;
  }
  
  .compare-card:hover {
    transform: translateY(-4px);
  }
  
  .compare-card--highlight {
    background: linear-gradient(145deg, #ffffff, var(--mm-accent));
    border: 2px solid var(--mm-primary);
    box-shadow: var(--mm-shadow-hover);
  }
  
  /* Badge */
  .compare-badge {
    position: absolute;
    top: -16px;
    right: 30px;
    background: var(--mm-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(13,110,253,0.25);
  }
  
  /* Headings */
  .compare-card h3 {
    font-size: 1.6rem;
    margin-bottom: 28px;
    color: var(--mm-text);
  }
  
  /* =========================
     FEATURE LIST
     ========================= */
  
  .compare-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
  }
  
  .compare-list li {
    padding-left: 34px;
    margin-bottom: 16px;
    position: relative;
    line-height: 1.7;
    color: var(--mm-text);
  }
  
  .compare-list li::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mm-primary), var(--mm-primary-dark));
    position: absolute;
    left: 0;
    top: 6px;
    box-shadow: 0 4px 12px rgba(13,110,253,0.3);
  }
  
  .compare-summary {
    color: var(--mm-muted);
    line-height: 1.8;
    font-size: 1rem;
  }
  
  /* =========================
     CTA AREA
     ========================= */
  
  .micromart-compare__cta {
    text-align: center;
    margin-top: 70px;
  }
  
  .micromart-compare__cta p {
    font-size: 1.05rem;
    margin-bottom: 25px;
    color: var(--mm-text);
  }
  
  /* =========================
     RESPONSIVE
     ========================= */
  
  @media (max-width: 1024px) {
    .compare-card {
      padding: 40px;
    }
  }
  
  @media (max-width: 768px) {
    .micromart-compare {
      padding: 80px 20px;
    }
  
    .compare-card {
      padding: 32px;
    }
  
    .compare-badge {
      position: static;
      display: inline-block;
      margin-bottom: 18px;
    }
  
    .micromart-compare__toggle {
      gap: 8px;
    }
  
    .compare-tab {
      width: 100%;
      text-align: center;
    }
  
    .micromart-compare__panels {
      min-height: auto;
    }
  
    .compare-panel {
      position: relative;
    }
  }
  
  @media (max-width: 480px) {
    .compare-card {
      padding: 26px;
    }
  
    .micromart-compare__title {
      font-size: 1.6rem;
    }
  
    .micromart-compare__intro {
      font-size: 0.98rem;
    }
  }




  /* =====================================================
   MICRO MART COMPARE – DARK / LIGHT THEME EXTENSIONS
   Append Only
   ===================================================== */

/* -----------------------------------------------------
   LIGHT MODE (explicit clarity control)
----------------------------------------------------- */

html[data-theme="light"] .micromart-compare {
  background:
    radial-gradient(circle at 20% 30%, rgba(13,110,253,0.05), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(13,110,253,0.04), transparent 45%),
    #ffffff;
}

html[data-theme="light"] .compare-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

html[data-theme="light"] .compare-card--highlight {
  background: linear-gradient(145deg, #ffffff, #f1f6ff);
}

/* -----------------------------------------------------
   DARK MODE CORE
----------------------------------------------------- */

html[data-theme="dark"] .micromart-compare {
  background:
    radial-gradient(circle at 20% 30%, rgba(13,110,253,0.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(13,110,253,0.08), transparent 50%),
    #0f172a; /* deep slate */
}

/* Header Text */
html[data-theme="dark"] .micromart-compare__title {
  color: #f8fafc;
}

html[data-theme="dark"] .micromart-compare__intro,
html[data-theme="dark"] .compare-summary,
html[data-theme="dark"] .micromart-compare__cta p {
  color: #cbd5e1;
}

/* Tabs */
html[data-theme="dark"] .compare-tab {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

html[data-theme="dark"] .compare-tab:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

html[data-theme="dark"] .compare-tab.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 12px 35px rgba(37,99,235,0.35);
}

/* Cards */
html[data-theme="dark"] .compare-card {
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .compare-card--highlight {
  background: linear-gradient(145deg, #1e293b, #172033);
  border: 2px solid #2563eb;
  box-shadow: 0 25px 80px rgba(37,99,235,0.25);
}

/* Badge */
html[data-theme="dark"] .compare-badge {
  background: #2563eb;
  box-shadow: 0 8px 25px rgba(37,99,235,0.4);
}

/* List Items */
html[data-theme="dark"] .compare-list li {
  color: #e2e8f0;
}

html[data-theme="dark"] .compare-list li::before {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* Subtle Hover Refinement */
html[data-theme="dark"] .compare-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

/* Divider clarity if needed */
html[data-theme="dark"] .micromart-compare__toggle {
  border-color: transparent;
}

/* Smooth theme transitions */
.micromart-compare,
.compare-card,
.compare-tab,
.compare-summary,
.micromart-compare__title,
.micromart-compare__intro {
  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}