/* ============================================
   DARK MODE - CONSOLIDATED STYLESHEET
   ============================================ */

/* Override CSS Variables */
body.active-dark-mode {
  --color-heading: white !important;
  --color-body: white !important;
  --color-primary: #0099FF !important;
  --color-secondary: #4FA3DD !important;
  --color-white: white !important;
  --color-darker: #1a1f3a !important;
  --color-dark: #252d47 !important;
  --color-black: white !important;
  --color-blackest: white !important;
}

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

body.active-dark-mode {
  background: #1a1f3a !important;
  color: white !important;
}

body.active-dark-mode * {
  color: white !important;
  background-color: inherit !important;
}

/* ============================================
   LINKS - BLUE COLOR
   ============================================ */

body.active-dark-mode a {
  color: #0099FF !important;
}

body.active-dark-mode a * {
  color: #0099FF !important;
}

body.active-dark-mode a:hover {
  color: #4FA3DD !important;
}

body.active-dark-mode a:hover * {
  color: #4FA3DD !important;
}

/* ============================================
   BACKGROUNDS
   ============================================ */

body.active-dark-mode .rbt-service-area,
body.active-dark-mode .rbt-event-area,
body.active-dark-mode .rbt-footer,
body.active-dark-mode .rbt-header {
  background: #1a1f3a !important;
  background-color: #1a1f3a !important;
}

body.active-dark-mode .rbt-card,
body.active-dark-mode .rbt-flipbox,
body.active-dark-mode .rbt-service,
body.active-dark-mode .rbt-service-1,
body.active-dark-mode .program-card-bg,
body.active-dark-mode .rbt-flipbox-front,
body.active-dark-mode .rbt-flipbox-back,
body.active-dark-mode .rbt-flipbox-front .inner,
body.active-dark-mode .rbt-flipbox-back .inner,
body.active-dark-mode .modal-content,
body.active-dark-mode .modal-body,
body.active-dark-mode .modal-footer {
  background: #252d47 !important;
  background-color: #252d47 !important;
}

/* ============================================
   TEXT ELEMENTS - ALL WHITE
   ============================================ */

body.active-dark-mode h1,
body.active-dark-mode h2,
body.active-dark-mode h3,
body.active-dark-mode h4,
body.active-dark-mode h5,
body.active-dark-mode h6,
body.active-dark-mode p,
body.active-dark-mode span,
body.active-dark-mode div,
body.active-dark-mode li,
body.active-dark-mode label,
body.active-dark-mode button,
body.active-dark-mode input,
body.active-dark-mode textarea,
body.active-dark-mode select,
body.active-dark-mode option,
body.active-dark-mode .title,
body.active-dark-mode .description,
body.active-dark-mode .content,
body.active-dark-mode .text {
  color: white !important;
}

/* ============================================
   TITLE CLASS OVERRIDE
   ============================================ */

.title {
  color: white !important;
}

body.active-dark-mode .title {
  color: white !important;
}

body.active-dark-mode .title a {
  color: white !important;
}

body.active-dark-mode .title:hover {
  color: white !important;
}

/* ============================================
   CARD SPECIFIC STYLES
   ============================================ */

body.active-dark-mode .rbt-flipbox-front .content,
body.active-dark-mode .rbt-flipbox-back .content {
  color: white !important;
}

body.active-dark-mode .rbt-flipbox-front .content h5,
body.active-dark-mode .rbt-flipbox-back .content h5,
body.active-dark-mode .rbt-flipbox-front .content p,
body.active-dark-mode .rbt-flipbox-back .content p,
body.active-dark-mode .program-card-bg .title,
body.active-dark-mode .program-card-bg p {
  color: white !important;
}

/* ============================================
   LINKS IN CARDS - BLUE
   ============================================ */

body.active-dark-mode .rbt-flipbox-front .content a,
body.active-dark-mode .rbt-flipbox-back .content a,
body.active-dark-mode .rbt-service .content a,
body.active-dark-mode .program-card-bg a,
body.active-dark-mode .rbt-btn-link {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-flipbox-front .content a:hover,
body.active-dark-mode .rbt-flipbox-back .content a:hover,
body.active-dark-mode .rbt-service .content a:hover,
body.active-dark-mode .program-card-bg a:hover,
body.active-dark-mode .rbt-btn-link:hover {
  color: #4FA3DD !important;
}

body.active-dark-mode .rbt-btn-link i {
  color: #0099FF !important;
}

/* ============================================
   SECTION TITLES
   ============================================ */

body.active-dark-mode .section-title h2,
body.active-dark-mode .section-title .title,
body.active-dark-mode .section-title .description,
body.active-dark-mode .section-title p,
body.active-dark-mode .registration-lines,
body.active-dark-mode .registration-lines span,
body.active-dark-mode .line-badge,
body.active-dark-mode .line-separator {
  color: white !important;
}

/* ============================================
   MODAL STYLES
   ============================================ */

body.active-dark-mode .modal-header {
  background: linear-gradient(135deg, #0099FF 0%, #4FA3DD 100%) !important;
  background-color: linear-gradient(135deg, #0099FF 0%, #4FA3DD 100%) !important;
  border: none !important;
}

body.active-dark-mode .modal-title {
  color: white !important;
}

body.active-dark-mode .modal-body h6 {
  color: #0099FF !important;
}

body.active-dark-mode .modal-body p {
  color: white !important;
}

body.active-dark-mode .modal-footer .btn {
  color: white !important;
}

body.active-dark-mode .btn-close {
  filter: brightness(0) invert(1) !important;
}

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

body.active-dark-mode .footer-widget .ft-title,
body.active-dark-mode .footer-widget .description,
body.active-dark-mode .footer-widget .ft-link a {
  color: white !important;
}

body.active-dark-mode .footer-widget .ft-link a:hover {
  color: #0099FF !important;
}

/* ============================================
   HEADER STYLES
   ============================================ */

body.active-dark-mode .mainmenu a {
  color: white !important;
}

body.active-dark-mode .mainmenu a:hover {
  color: #0099FF !important;
}

/* ============================================
   BUTTON STYLES FOR DARK MODE
   ============================================ */

body.active-dark-mode .rbt-btn {
  border-color: #0099FF !important;
  color: #0099FF !important;
}

body.active-dark-mode .rbt-btn:hover {
  border-color: #4FA3DD !important;
  color: #4FA3DD !important;
}

body.active-dark-mode .btn-border {
  border: 2px solid #0099FF !important;
  color: #0099FF !important;
  background: transparent !important;
}

body.active-dark-mode .btn-border:hover {
  border-color: #4FA3DD !important;
  color: #4FA3DD !important;
  background: transparent !important;
}

body.active-dark-mode .rbt-btn.btn-border.hover-icon-reverse {
  border: 2px solid #0099FF !important;
  color: #0099FF !important;
}

body.active-dark-mode .rbt-btn.btn-border.hover-icon-reverse:hover {
  border-color: #4FA3DD !important;
  color: #4FA3DD !important;
}

body.active-dark-mode .rbt-btn .btn-text {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-btn:hover .btn-text {
  color: #4FA3DD !important;
}

body.active-dark-mode .rbt-btn .btn-icon {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-btn:hover .btn-icon {
  color: #4FA3DD !important;
}

/* Gradient buttons */
body.active-dark-mode .btn-gradient {
  background: linear-gradient(135deg, #0099FF 0%, #4FA3DD 100%) !important;
  border: none !important;
  color: white !important;
}

body.active-dark-mode .btn-gradient:hover {
  background: linear-gradient(135deg, #0077CC 0%, #3591C7 100%) !important;
  color: white !important;
}

/* Border gradient buttons */
body.active-dark-mode .btn-border-gradient {
  border: 2px solid #0099FF !important;
  color: #0099FF !important;
  background: transparent !important;
}

body.active-dark-mode .btn-border-gradient:hover {
  border-color: #4FA3DD !important;
  color: #4FA3DD !important;
  background: transparent !important;
}

/* Contact button - Hubungi Kami */
body.active-dark-mode .contact-btn .rbt-btn {
  border: 2px solid #0099FF !important;
  color: #0099FF !important;
  background: transparent !important;
}

body.active-dark-mode .contact-btn .rbt-btn:hover {
  border-color: #4FA3DD !important;
  color: #4FA3DD !important;
  background: transparent !important;
}

body.active-dark-mode .contact-btn .rbt-btn .btn-text {
  color: #0099FF !important;
}

body.active-dark-mode .contact-btn .rbt-btn:hover .btn-text {
  color: #4FA3DD !important;
}

body.active-dark-mode .contact-btn .rbt-btn .btn-icon {
  color: #0099FF !important;
}

body.active-dark-mode .contact-btn .rbt-btn:hover .btn-icon {
  color: #4FA3DD !important;
}

/* All button text and icons */
body.active-dark-mode button,
body.active-dark-mode .btn {
  color: #0099FF !important;
}

body.active-dark-mode button:hover,
body.active-dark-mode .btn:hover {
  color: #4FA3DD !important;
}

body.active-dark-mode .rbt-btn span,
body.active-dark-mode button span,
body.active-dark-mode .btn span {
  color: inherit !important;
}

/* ============================================
   BANNER SECTION - REMOVE OVERLAY ONLY
   ============================================ */

body.active-dark-mode .rbt-banner-5 {
  background-color: transparent !important;
}

body.active-dark-mode .rbt-banner-5::before,
body.active-dark-mode .rbt-banner-5::after {
  background: transparent !important;
  opacity: 0 !important;
}

body.active-dark-mode .rbt-banner-5 .title,
body.active-dark-mode .rbt-banner-5 h2 {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 .description,
body.active-dark-mode .rbt-banner-5 p {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 a {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-banner-5 a:hover {
  color: #4FA3DD !important;
}

body.active-dark-mode .rbt-banner-5 .inner {
  background: transparent !important;
  background-color: transparent !important;
}

body.active-dark-mode .rbt-banner-5 .container {
  background: transparent !important;
}

/* ============================================
   BANNER LINK TEXT - WHITE
   ============================================ */

body.active-dark-mode .rbt-banner-5 .slider-btn a,
body.active-dark-mode .rbt-banner-5 .rbt-btn-link {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 .slider-btn a:hover,
body.active-dark-mode .rbt-banner-5 .rbt-btn-link:hover {
  color: white !important;
}

body.active-dark-mode .color-white {
  color: white !important;
}

body.active-dark-mode .color-white:hover {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 .color-white {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 .color-white:hover {
  color: white !important;
}

/* ============================================
   BANNER LINK ICONS - WHITE
   ============================================ */

body.active-dark-mode .rbt-banner-5 .slider-btn a i,
body.active-dark-mode .rbt-banner-5 .rbt-btn-link i {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 .slider-btn a:hover i,
body.active-dark-mode .rbt-banner-5 .rbt-btn-link:hover i {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 .feather-arrow-right {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 .feather-arrow-right:hover {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 i {
  color: white !important;
}

body.active-dark-mode .rbt-banner-5 i:hover {
  color: white !important;
}

/* ============================================
   OVERRIDE INLINE STYLES
   ============================================ */

body.active-dark-mode [style] {
  color: white !important;
}

body.active-dark-mode a[style] {
  color: #0099FF !important;
}

body.active-dark-mode [style*="color: var(--color-blackest)"] {
  color: white !important;
}

body.active-dark-mode [style*="color: #"] {
  color: white !important;
}

body.active-dark-mode a[style*="color: #"] {
  color: #0099FF !important;
}

/* ============================================
   PRESERVE PRIMARY COLORS
   ============================================ */

body.active-dark-mode .text-primary {
  color: #0099FF !important;
}

body.active-dark-mode .btn-primary {
  color: white !important;
}

/* ============================================
   FINAL CATCH-ALL
   ============================================ */

body.active-dark-mode {
  color: white !important;
}

body.active-dark-mode * {
  color: white !important;
}

body.active-dark-mode a,
body.active-dark-mode a * {
  color: #0099FF !important;
}

body.active-dark-mode a:hover,
body.active-dark-mode a:hover * {
  color: #4FA3DD !important;
}


/* ============================================
   MODAL BACKDROP - TRANSPARENT
   ============================================ */

body.active-dark-mode .modal-backdrop {
  background-color: transparent !important;
  opacity: 0 !important;
}

body.active-dark-mode .modal-backdrop.show {
  opacity: 0 !important;
}

body.active-dark-mode .modal-backdrop.fade {
  opacity: 0 !important;
}


/* ============================================
   HEADER TOP SOCIAL ICONS - VISIBLE IN DARK MODE
   ============================================ */

body.active-dark-mode .rbt-header-top .social-share-transparent {
  display: flex !important;
}

body.active-dark-mode .rbt-header-top .social-share-transparent li {
  display: list-item !important;
}

body.active-dark-mode .rbt-header-top .social-share-transparent li a {
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.active-dark-mode .rbt-header-top .social-share-transparent li a:hover {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-header-top .social-share-transparent li a i {
  color: white !important;
}

body.active-dark-mode .rbt-header-top .social-share-transparent li a:hover i {
  color: #0099FF !important;
}

/* Ensure social icons are visible */
body.active-dark-mode .social-share-transparent {
  visibility: visible !important;
  opacity: 1 !important;
}

body.active-dark-mode .social-share-transparent li {
  visibility: visible !important;
  opacity: 1 !important;
}

body.active-dark-mode .social-share-transparent li a {
  visibility: visible !important;
  opacity: 1 !important;
}


/* ============================================
   EVENT AREA - LIGHTER BACKGROUND IN DARK MODE
   ============================================ */

body.active-dark-mode .rbt-event-area {
  background: linear-gradient(135deg, #1e2a4a 0%, #2a3a5a 100%) !important;
  background-color: #2a3a5a !important;
}

body.active-dark-mode .rbt-event-area.event-style-2 {
  background: linear-gradient(135deg, #1e2a4a 0%, #2a3a5a 100%) !important;
}

body.active-dark-mode .rbt-event-area.bg-gradient-7 {
  background: linear-gradient(135deg, #1e2a4a 0%, #2a3a5a 100%) !important;
}

/* Ensure text remains white */
body.active-dark-mode .rbt-event-area .section-title h2,
body.active-dark-mode .rbt-event-area .section-title .title {
  color: white !important;
}

body.active-dark-mode .rbt-event-area .section-title .subtitle,
body.active-dark-mode .rbt-event-area .section-title p {
  color: white !important;
}

/* Card backgrounds in event area */
body.active-dark-mode .rbt-event-area .rbt-card {
  background: #252d47 !important;
}

/* Links in event area */
body.active-dark-mode .rbt-event-area a {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-event-area a:hover {
  color: #4FA3DD !important;
}


/* ============================================
   SWIPER PAGINATION - DARK MODE
   ============================================ */

body.active-dark-mode .rbt-swiper-pagination .swiper-pagination-bullet {
  background: white !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 5px white !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

body.active-dark-mode .rbt-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px white !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

body.active-dark-mode .bg-gradient-7 .rbt-swiper-pagination .swiper-pagination-bullet {
  box-shadow: inset 0 0 0 5px white !important;
  background: white !important;
  border-radius: 50% !important;
  width: 6px !important;
  height: 6px !important;
}

body.active-dark-mode .bg-gradient-7 .rbt-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  box-shadow: inset 0 0 0 1px white !important;
  background: transparent !important;
  border-radius: 50% !important;
  width: 6px !important;
  height: 6px !important;
}

/* Force circular shape */
body.active-dark-mode .swiper-pagination-bullet {
  border-radius: 50% !important;
}

body.active-dark-mode .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-radius: 50% !important;
}

/* Swiper navigation arrows */
body.active-dark-mode .swiper-button-next,
body.active-dark-mode .swiper-button-prev {
  color: #0077CC !important;
}

body.active-dark-mode .swiper-button-next:hover,
body.active-dark-mode .swiper-button-prev:hover {
  color: #0099FF !important;
}

body.active-dark-mode .swiper-button-next::after,
body.active-dark-mode .swiper-button-prev::after {
  color: #0077CC !important;
}

/* Custom swiper arrows */
body.active-dark-mode .rbt-swiper-arrow {
  color: #0077CC !important;
}

body.active-dark-mode .rbt-swiper-arrow:hover {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-swiper-arrow i {
  color: #0077CC !important;
}

body.active-dark-mode .rbt-swiper-arrow:hover i {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-arrow-left,
body.active-dark-mode .rbt-arrow-right {
  color: #0077CC !important;
}

body.active-dark-mode .rbt-arrow-left:hover,
body.active-dark-mode .rbt-arrow-right:hover {
  color: #0099FF !important;
}

body.active-dark-mode .rbt-arrow-left i,
body.active-dark-mode .rbt-arrow-right i {
  color: #0077CC !important;
}

body.active-dark-mode .rbt-arrow-left:hover i,
body.active-dark-mode .rbt-arrow-right:hover i {
  color: #0099FF !important;
}


/* ============================================
   DARK MODE SWITCHER - PERFECT CIRCLE
   ============================================ */

body.active-dark-mode .my_switcher ul {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.active-dark-mode .my_switcher {
  background: transparent !important;
  background-color: transparent !important;
}

body.active-dark-mode .my_switcher ul li {
  background: transparent !important;
  background-color: transparent !important;
}

body.active-dark-mode .my_switcher ul li a,
body.active-dark-mode .my_switcher ul li button {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 100px !important;
}

body.active-dark-mode .my_switcher ul li a img,
body.active-dark-mode .my_switcher ul li button img {
  background: transparent !important;
  background-color: transparent !important;
}