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

/* ======================================
   DARK MODE TOGGLE - NAVBAR (DESKTOP)
   Styled to match navbar menu items
   ====================================== */
.dark-mode-nav-item {
  float: left;
  list-style: none;
  margin-left: 20px;
  position: relative;
  display: flex;
  align-items: center;
  height: 100px;
}

.dark-mode-toggle-nav {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.dark-mode-toggle-nav:hover {
  background: rgba(151, 193, 192, 0.15);
}

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

.dark-mode-toggle-nav .dark-mode-icon {
  font-size: 18px;
  line-height: 1;
  transition: all 0.3s ease;
}

.dark-mode-toggle-nav:hover .dark-mode-icon {
  transform: rotate(15deg);
}

/* Dark mode - no need for color changes with emoji */

body.dark-mode .dark-mode-toggle-nav::after {
  background-color: #b5d4d3;
}

/* ======================================
   DARK MODE TOGGLE - MOBILE (NEXT TO HAMBURGER)
   ====================================== */
.dark-mode-toggle-mobile {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid #60606e;
  border-radius: 8px;
  cursor: pointer;
  display: none; /* Hidden on desktop */
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-right: 15px;
}

.dark-mode-toggle-mobile:hover {
  border-color: #97c1c0;
  background: rgba(151, 193, 192, 0.1);
}

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

.dark-mode-toggle-mobile .dark-mode-icon {
  font-size: 16px;
  line-height: 1;
  transition: all 0.3s ease;
}

/* Dark mode - mobile toggle */
body.dark-mode .dark-mode-toggle-mobile {
  border-color: #e0e0e0;
}

body.dark-mode .dark-mode-toggle-mobile:hover {
  border-color: #b5d4d3;
  background: rgba(151, 193, 192, 0.1);
}

/* Show mobile toggle, hide desktop toggle on mobile */
@media (max-width: 991px) {
  .dark-mode-toggle-mobile {
    display: flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-width: 1.5px;
  }

  .dark-mode-toggle-mobile i {
    font-size: 16px;
  }

  .dark-mode-nav-item {
    display: none !important;
  }
}

/* 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: #b5d4d3 !important;
}

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

/* 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: #4a7a79;
  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(151, 193, 192, 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, #fbbd4c 0%, #92aec6 100%);
}

body.dark-mode .dark-mode-toggle:hover {
  box-shadow: 0 6px 25px rgba(251, 189, 76, 0.5);
}

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

/* 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;
  }
}