/* ============================================
   BOCHI CILACAP - DARK MODE STYLES
   ============================================ */

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(102, 126, 234, 0.6);
  }
}

.dark-mode-toggle:hover {
  transform: scale(1.15) rotate(15deg);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
  animation: none;
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

.dark-mode-toggle i {
  font-size: 24px;
  color: white;
  transition: transform 0.3s ease;
}

.dark-mode-toggle:hover i {
  transform: rotate(20deg);
}

/* Dark Mode Body */
body.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Dark Mode Header */
body.dark-mode .main-header {
  background: rgba(30, 30, 30, 0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease,
    box-shadow 0.3s ease;
}

body.dark-mode .main-header.scrolled {
  background: rgba(30, 30, 30, 0.96);
}

body.dark-mode .main-header.nav-up {
  box-shadow: none;
}

/* Dark Mode Navigation */
body.dark-mode .desktop-nav a {
  color: #e0e0e0 !important;
  transition: color 0.3s ease;
}

body.dark-mode .desktop-nav a:hover {
  color: #8bc34a !important;
}

body.dark-mode .desktop-nav a::after {
  background: #8bc34a;
}

/* Dark Mode Text */
body.dark-mode .site-hero p,
body.dark-mode p {
  color: #b0b0b0 !important;
  transition: color 0.4s ease;
}

body.dark-mode .section-title span {
  color: #e0e0e0;
  transition: color 0.4s ease;
}

/* Dark Mode - Agency Section Special Rules */
body.dark-mode .agency .section-title span {
  color: #000000 !important;
}

body.dark-mode .agency p {
  color: #000000 !important;
}

body.dark-mode .site-hero p,
body.dark-mode .site-hero .big-title,
body.dark-mode .site-hero .small-title {
  color: #000000 !important;
}

body.dark-mode .site-hero .slides li p,
body.dark-mode .site-hero .slides li .big-title,
body.dark-mode .site-hero .slides li .small-title {
  color: #000000 !important;
}

/* Dark Mode Sections */
body.dark-mode .green-section {
  background-color: #2d5016;
  transition: background-color 0.4s ease;
}

body.dark-mode .white-section {
  background-color: #2a2a2a;
  color: #e0e0e0;
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.dark-mode .white-section:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

/* Dark Mode Footer */
body.dark-mode .main-footer {
  background-color: #1a1a1a;
  border-top: 1px solid #333;
  transition: background-color 0.4s ease;
}

/* Dark Mode Portfolio */
body.dark-mode .portfolio_item:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

body.dark-mode .portfolio_item_hover {
  background: rgba(0, 0, 0, 0.85);
}

/* Dark Mode Buttons */
body.dark-mode .btn.white {
  background: #2a2a2a;
  color: #e0e0e0;
  transition: background 0.3s ease, color 0.3s ease;
}

body.dark-mode .btn.white:hover {
  background: #3a3a3a;
}

body.dark-mode .btn:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Dark Mode Inputs */
body.dark-mode input[type="text"] {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #444;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

body.dark-mode .input_1 input[type="text"]:focus {
  box-shadow: 0 5px 15px rgba(139, 195, 74, 0.3);
}

body.dark-mode .input_1 input[type="text"]:focus + span,
body.dark-mode .input_1 input[type="text"]:not(:placeholder-shown) + span {
  background: #2a2a2a;
}

/* Dark Mode Toggle Button in Dark Mode */
body.dark-mode .dark-mode-toggle {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
}

body.dark-mode .dark-mode-toggle:hover {
  box-shadow: 0 6px 25px rgba(255, 216, 155, 0.5);
}

/* Dark Mode Social Icons */
body.dark-mode .social-icons a:hover {
  color: #8bc34a;
}

/* Dark Mode Agency Image */
body.dark-mode .agency img:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* Dark Mode Mobile Menu */
body.dark-mode .mobile-nav {
  background: #2a2a2a;
}

body.dark-mode .menu-icon .line {
  background: #e0e0e0;
}

/* Dark Mode WhatsApp Link */
body.dark-mode .whatsapp-link:hover {
  color: #25d366 !important;
}

body.dark-mode .person-info:hover .whatsapp-icon {
  color: #25d366 !important;
}

/* Dark Mode Desktop Responsive */
@media (min-width: 992px) {
  body.dark-mode .agency .light-text {
    color: #b0b0b0 !important;
  }

  body.dark-mode .agency .dark-text {
    color: #000000 !important;
  }

  body.dark-mode .agency .dark-text .light-text {
    color: #b0b0b0 !important;
  }
}