/* ========================================
   HOME PAGE DARK MODE STYLES
   ======================================== */

/* Test rule - if this works, CSS is loaded */
html.dark-mode {
  background: #0f0f23 !important;
  background-color: #0f0f23 !important;
}

/* Root/HTML Dark Mode */
html.dark-mode,
html.dark-mode * {
  box-sizing: border-box;
}

html.dark-mode {
  background-color: #0f0f23 !important;
  color: #ffffff !important;
  min-height: 100vh !important;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Body Dark Mode - Super Strong Selectors */
body.dark-mode,
html.dark-mode body,
html.dark-mode > body {
  background: #0f0f23 !important;
  background-color: #0f0f23 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

/* Content Wrapper */
html.dark-mode .content-wrapper {
  background-color: #0f0f23 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.content-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

/* Header Background */
html.dark-mode header.wrapper.bg-soft-primary {
  background-color: #1a1a2e !important;
  margin: 0 !important;
  padding: 0 !important;
}

header.wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Navbar */
html.dark-mode .navbar {
  background-color: #1a1a2e !important;
}

html.dark-mode .navbar-light .navbar-nav .nav-link {
  color: #ffffff !important;
}

html.dark-mode .navbar-light .navbar-nav .nav-link:hover,
html.dark-mode .navbar-light .navbar-nav .nav-link:focus {
  color: #a78bfa !important;
}

/* Mobile Menu (Offcanvas) */
html.dark-mode .offcanvas {
  background-color: #1a1a2e !important;
}

html.dark-mode .offcanvas-body {
  background-color: #1a1a2e !important;
}

html.dark-mode .offcanvas-header {
  background-color: #1a1a2e !important;
}

html.dark-mode .offcanvas-footer {
  background-color: #1a1a2e !important;
  color: #ffffff !important;
}

/* ========================================
   BUTTONS
   ======================================== */

/* Primary Buttons - Purple Gradient */
html.dark-mode .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: #764ba2 !important;
  color: #ffffff !important;
}

html.dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
  border-color: #667eea !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4) !important;
}

/* Green Buttons - Darker Green */
html.dark-mode .btn-green {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
}

html.dark-mode .btn-green:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  border-color: #059669 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(5, 150, 105, 0.4) !important;
}

/* ========================================
   SECTIONS & BACKGROUNDS
   ======================================== */

/* Primary Background Sections */
html.dark-mode section.wrapper.bg-soft-primary,
html.dark-mode .wrapper.bg-soft-primary,
html.dark-mode .bg-soft-primary {
  background-color: #1a1a2e !important;
}

/* Light Background Sections */
html.dark-mode section.wrapper.bg-light,
html.dark-mode .wrapper.bg-light,
html.dark-mode .bg-light {
  background-color: #16213e !important;
}

/* ========================================
   CARDS
   ======================================== */

html.dark-mode .card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark-mode .card-body {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

html.dark-mode .card:hover {
  background-color: #252f3f !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3) !important;
}

/* ========================================
   ACCORDION/FAQ
   ======================================== */

html.dark-mode .accordion-wrapper .card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .accordion-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .card-header button {
  color: #ffffff !important;
  background-color: #1e293b !important;
}

html.dark-mode .card-header button:hover {
  color: #a78bfa !important;
}

html.dark-mode .card-header button[aria-expanded="true"] {
  color: #a78bfa !important;
  background-color: #252f3f !important;
}

/* ========================================
   TEXT & TYPOGRAPHY
   ======================================== */

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .h1,
html.dark-mode .h2,
html.dark-mode .h3,
html.dark-mode .h4,
html.dark-mode .h5,
html.dark-mode .h6 {
  color: #ffffff !important;
}

html.dark-mode p,
html.dark-mode span:not(.badge),
html.dark-mode div:not(.alert):not(.btn),
html.dark-mode li,
html.dark-mode a:not(.btn) {
  color: #e2e8f0 !important;
}

html.dark-mode .lead {
  color: #cbd5e1 !important;
}

html.dark-mode .text-muted {
  color: #94a3b8 !important;
}

/* Links */
html.dark-mode a:not(.btn) {
  color: #a78bfa !important;
}

html.dark-mode a:not(.btn):hover {
  color: #c4b5fd !important;
}

/* ========================================
   BLOCKQUOTES & TESTIMONIALS
   ======================================== */

html.dark-mode blockquote {
  color: #ffffff !important;
  border-left-color: #a78bfa !important;
}

html.dark-mode .blockquote-details {
  color: #cbd5e1 !important;
}

html.dark-mode .blockquote-details .info p {
  color: #e2e8f0 !important;
}

/* ========================================
   BADGES
   ======================================== */

html.dark-mode .badge {
  background-color: #6366f1 !important;
  color: #ffffff !important;
}

html.dark-mode .badge.bg-white {
  background-color: #ffffff !important;
  color: #1a1a2e !important;
}

/* ========================================
   FOOTER
   ======================================== */

html.dark-mode footer {
  background-color: #0f0f23 !important;
  color: #ffffff !important;
  border-top: 1px solid #334155;
}

html.dark-mode footer p,
html.dark-mode footer h5,
html.dark-mode footer address {
  color: #e2e8f0 !important;
}

html.dark-mode footer .widget {
  color: #ffffff !important;
}

html.dark-mode footer .icon {
  color: #a78bfa !important;
}

html.dark-mode footer hr {
  border-color: #334155 !important;
}

/* Footer Social Links */
html.dark-mode .social a {
  color: #cbd5e1 !important;
  transition: color 0.3s ease;
}

html.dark-mode .social a:hover {
  color: #a78bfa !important;
}

/* Footer Menu Links */
html.dark-mode .menu-link {
  color: #cbd5e1 !important;
}

html.dark-mode .menu-link:hover {
  color: #a78bfa !important;
}

/* ========================================
   ICONS & SVG
   ======================================== */

/* Feature Icons */
html.dark-mode .icon-svg {
  filter: brightness(1.2) !important;
}

/* Icon colors in dark mode */
html.dark-mode .icon-svg.text-aqua {
  fill: #06b6d4 !important;
}

html.dark-mode .icon-svg.text-yellow {
  fill: #fbbf24 !important;
}

html.dark-mode .icon-svg.text-red {
  fill: #ef4444 !important;
}

html.dark-mode .icon-svg.text-pink {
  fill: #ec4899 !important;
}

html.dark-mode .icon-svg.text-green {
  fill: #10b981 !important;
}

html.dark-mode .icon-svg.text-purple {
  fill: #a78bfa !important;
}

html.dark-mode .icon-svg.text-primary {
  fill: #6366f1 !important;
}

/* ========================================
   RATINGS & STARS
   ======================================== */

html.dark-mode .ratings {
  filter: brightness(1.2) !important;
}

/* ========================================
   SWIPER/CAROUSEL
   ======================================== */

html.dark-mode .swiper {
  background-color: transparent !important;
}

html.dark-mode .swiper-slide {
  background-color: transparent !important;
}

html.dark-mode .item-inner {
  background-color: transparent !important;
}

/* Swiper Pagination */
html.dark-mode .swiper-pagination-bullet {
  background-color: #cbd5e1 !important;
}

html.dark-mode .swiper-pagination-bullet-active {
  background-color: #a78bfa !important;
}

/* ========================================
   IMAGES
   ======================================== */

/* Slightly reduce brightness of images in dark mode */
html.dark-mode img {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

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

/* Logo - Keep full brightness */
html.dark-mode .navbar-brand img,
html.dark-mode footer img {
  opacity: 1 !important;
  filter: brightness(1.1) !important;
}

/* ========================================
   PROGRESS WRAP (Scroll to Top)
   ======================================== */

html.dark-mode .progress-wrap {
  background-color: #1e293b !important;
  border-color: #a78bfa !important;
}

html.dark-mode .progress-wrap:hover {
  background-color: #7c3aed !important;
}

html.dark-mode .progress-wrap svg path {
  stroke: #a78bfa !important;
}

/* ========================================
   ALERTS
   ======================================== */

/* Instagram Gradient Alert (Top Banner) */
html.dark-mode .alert.instagram-gradient {
  background: linear-gradient(90deg, #833AB4 0%, #FD1D1D 50%, #FCAF45 100%) !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 !important;
}

.alert.instagram-gradient {
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 !important;
}

html.dark-mode .alert.instagram-gradient .badge {
  background-color: #ffffff !important;
  color: #833AB4 !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  background-color: #252f3f !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.25) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #94a3b8 !important;
}

/* ========================================
   BORDERS & DIVIDERS
   ======================================== */

html.dark-mode hr {
  border-color: #334155 !important;
  opacity: 0.5;
}

html.dark-mode .border {
  border-color: #334155 !important;
}

/* ========================================
   ANIMATIONS & TRANSITIONS
   ======================================== */

html.dark-mode * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ========================================
   HAMBURGER MENU
   ======================================== */

html.dark-mode .hamburger span,
html.dark-mode .hamburger span:before,
html.dark-mode .hamburger span:after {
  background-color: #ffffff !important;
}

/* ========================================
   CLOSE BUTTONS
   ======================================== */

html.dark-mode .btn-close,
html.dark-mode .btn-close-white {
  filter: invert(1) brightness(2) !important;
}

/* ========================================
   SPECIFIC SECTION FIXES
   ======================================== */

/* How It Works Section */
html.dark-mode #how-it-work {
  background-color: #16213e !important;
}

/* FAQ Section */
html.dark-mode #faq {
  background-color: #1a1a2e !important;
}

/* Comments/Testimonials Section */
html.dark-mode #comments {
  background-color: #16213e !important;
}

/* Contact Section */
html.dark-mode #contact {
  background-color: #0f0f23 !important;
}

/* ========================================
   FEATURE BOXES
   ======================================== */

html.dark-mode .d-flex.flex-row {
  color: #ffffff !important;
}

html.dark-mode .d-flex.flex-row h4 {
  color: #ffffff !important;
}

html.dark-mode .d-flex.flex-row p {
  color: #cbd5e1 !important;
}

/* ========================================
   MOBILE RESPONSIVE DARK MODE
   ======================================== */

@media (max-width: 991.98px) {
  html.dark-mode .offcanvas {
    background-color: #1a1a2e !important;
  }
  
  html.dark-mode .offcanvas-header,
  html.dark-mode .offcanvas-body,
  html.dark-mode .offcanvas-footer {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
  }
  
  html.dark-mode .navbar-nav .nav-link {
    color: #ffffff !important;
  }
}

/* ========================================
   DARK MODE TOGGLE BUTTON
   ======================================== */

#darkModeToggleHome {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

#darkModeToggleHome:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
  transform: rotate(15deg) scale(1.1) !important;
}

#darkModeToggleHome:active {
  transform: scale(0.95) !important;
}

/* Emoji Icon Styles */
#moonIconHome,
#sunIconHome {
  font-size: 22px !important;
  line-height: 1 !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* ========================================
   FAKE NOTIFICATION (SweetAlert2 Toast)
   ======================================== */

/* Dark mode for SweetAlert2 notifications */
html.dark-mode .swal2-popup.swal2-toast {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .swal2-popup.swal2-toast .swal2-title {
  color: #ffffff !important;
}

html.dark-mode .swal2-popup.swal2-toast .swal2-html-container {
  color: #e2e8f0 !important;
}

/* Info icon in dark mode */
html.dark-mode .swal2-popup.swal2-toast .swal2-icon.swal2-info {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

html.dark-mode .swal2-popup.swal2-toast .swal2-icon.swal2-info [class^='swal2-icon-content'] {
  color: #3b82f6 !important;
}

/* Timer progress bar */
html.dark-mode .swal2-popup.swal2-toast .swal2-timer-progress-bar {
  background-color: #a78bfa !important;
}

/* Close button */
html.dark-mode .swal2-popup.swal2-toast .swal2-close {
  color: #cbd5e1 !important;
}

html.dark-mode .swal2-popup.swal2-toast .swal2-close:hover {
  color: #ffffff !important;
}

/* ========================================
   TOP BANNER - Fixed Position
   ======================================== */

/* New top banner is position: fixed with inline styles */
/* Old bootstrap alert styles removed */

#topBanner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* ========================================
   SMOOTH TRANSITIONS
   ======================================== */

html,
body,
.content-wrapper,
section,
.card,
.btn,
.navbar,
footer {
  transition: background-color 0.4s ease, color 0.4s ease !important;
}