/* Dark Mode Variables */
:root {
    /* Light Theme Variables */
    --bg-primary: #ffffff;
    --bg-secondary: #141414;
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --link-color: #007bff;
    --header-bg: #ffffff;
    --topbar-bg: #f7f9fb;
    --menu-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #ffffff;
    --input-text: #2c3e50;
    --input-border: #ced4da;
    --input-placeholder: #6c757d;
    --btn-light-bg: #141414;
    --box-shadow: rgba(0, 0, 0, 0.1);
    --bg-light-dark: #141414;  /* Light mode'da light background */
    --bg-grey-dark: #141414;   /* Light mode'da grey background */
    --footer-bg: #141414;
    --copyright-bg: #242424;
    --p-dropdown-bg: #ffffff;
    --p-dropdown-border: #dee2e6;
    --p-dropdown-shadow: rgba(0, 0, 0, 0.1);
    --nav-link-color: #2c3e50;
    --nav-link-hover: #007bff;
    --topbar-link-color: #2c3e50;
    --topbar-link-hover: #007bff;
}

/* Global transition for all elements */
* {
    transition: background-color 0.25s ease-out,
                color 0.25s ease-out,
                border-color 0.25s ease-out,
                box-shadow 0.25s ease-out !important;
}

[data-theme="dark"] {
    /* Dark Theme Variables */
    --bg-primary: #242424;
    --bg-secondary: #242424;
    --text-primary: #e7e4dd;
    --text-secondary: #e7e4dd;
    --border-color: #404040;
    --link-color: #e7e4dd;
    --header-bg: #141414;
    --topbar-bg: #242424;
    --menu-bg: #242424;
    --dropdown-bg: #242424;
    --input-bg: #242424;
    --input-text: #e7e4dd;
    --input-border: #404040;
    --input-placeholder: #999999;
    --btn-light-bg: #242424;
    --box-shadow: rgba(0, 0, 0, 0.3);
    --bg-light-dark: #141414;
    --bg-grey-dark: #1B1B1B;
    --footer-bg: #141414;
    --copyright-bg: #242424;
    --p-dropdown-bg: #242424;
    --p-dropdown-border: #404040;
    --p-dropdown-shadow: rgba(0, 0, 0, 0.3);
    --nav-link-color: #e7e4dd;
    --nav-link-hover: #ffffff;
    --topbar-link-color: #e7e4dd;
    --topbar-link-hover: #ffffff;
}

/* Dark Mode Override Styles */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #header {
    background-color: #141414 !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] #header .header-inner {
    background-color: #141414 !important;
}

[data-theme="dark"] #topbar {
    background-color: #242424 !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .box,
[data-theme="dark"] .tabs,
[data-theme="dark"] .panel,
[data-theme="dark"] .pricing-table,
[data-theme="dark"] .pricing-box {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .pricing-table .plan-header,
[data-theme="dark"] .pricing-box .plan-header,
[data-theme="dark"] #hotspot3 .pricing-table .plan-header,
[data-theme="dark"] #hotspot3 .pricing-box .plan-header,
[data-theme="dark"] #hotspot3 .plan .plan-header {
    background-color: var(--bg-grey-dark) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .pricing-table .plan-price,
[data-theme="dark"] .pricing-box .plan-price,
[data-theme="dark"] #hotspot3 .pricing-table .plan-price,
[data-theme="dark"] #hotspot3 .pricing-box .plan-price,
[data-theme="dark"] #hotspot3 .plan .plan-price {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .pricing-table .plan-list,
[data-theme="dark"] .pricing-box .plan-list,
[data-theme="dark"] #hotspot3 .pricing-table .plan-list,
[data-theme="dark"] #hotspot3 .pricing-box .plan-list,
[data-theme="dark"] #hotspot3 .plan .plan-list {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .pricing-table .plan-list li,
[data-theme="dark"] .pricing-box .plan-list li,
[data-theme="dark"] #hotspot3 .pricing-table .plan-list li,
[data-theme="dark"] #hotspot3 .pricing-box .plan-list li,
[data-theme="dark"] #hotspot3 .plan .plan-list li {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #mainMenu {
    background-color: var(--menu-bg) !important;
}

[data-theme="dark"] #mainMenu nav > ul > li > a {
    color: var(--nav-link-color) !important;
}

[data-theme="dark"] #mainMenu nav > ul > li:hover > a,
[data-theme="dark"] #mainMenu nav > ul > li.hover > a,
[data-theme="dark"] #mainMenu nav > ul > li.current > a {
    color: var(--nav-link-hover) !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--border-color) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-menu > li:hover > a {
    background-color: var(--bg-grey-dark) !important;
    color: var(--nav-link-hover) !important;
}

[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] .dropdown-menu .dropdown-divider,
[data-theme="dark"] #topbar .dropdown-menu .dropdown-divider {
    border-color: #404040 !important;
    opacity: 1 !important;
}

[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-grey-dark) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-text,
[data-theme="dark"] .form-label,
[data-theme="dark"] .col-form-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-check-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--link-color) !important;
    border-color: var(--link-color) !important;
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary) !important;
}

/* Form validation states */
[data-theme="dark"] .was-validated .form-control:valid,
[data-theme="dark"] .form-control.is-valid {
    border-color: #198754 !important;
    background-color: var(--input-bg) !important;
}

[data-theme="dark"] .was-validated .form-control:invalid,
[data-theme="dark"] .form-control.is-invalid {
    border-color: #dc3545 !important;
    background-color: var(--input-bg) !important;
}

[data-theme="dark"] .btn-light {
    background-color: var(--btn-light-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] .table tbody,
[data-theme="dark"] .table thead,
[data-theme="dark"] .table tr,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(231, 228, 221, 0.05) !important;
}

[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid rgba(64, 64, 64, 0.8) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    border-bottom: 1px solid rgba(64, 64, 64, 0.8) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-secondary) !important;
    border-color: #e7e4dd !important;
    border-bottom: 2px solid #e7e4dd !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
    border-color: rgba(64, 64, 64, 0.8) !important;
    border-bottom: 1px solid rgba(231, 228, 221, 0.3) !important;
}

/* Vertical tabs için özel stiller */
[data-theme="dark"] .nav-tabs.flex-column,
[data-theme="dark"] .nav.flex-column {
    border: none !important;
}

[data-theme="dark"] .nav-tabs.flex-column .nav-link,
[data-theme="dark"] .nav.flex-column .nav-link {
    border: none !important;
    border-bottom: none !important;
    margin-bottom: 5px !important;
}

[data-theme="dark"] .nav-tabs.flex-column .nav-link.active,
[data-theme="dark"] .nav.flex-column .nav-link.active {
    background-color: var(--bg-secondary) !important;
    border: none !important;
    color: #e7e4dd !important;
}

[data-theme="dark"] .nav-tabs.flex-column .nav-link:hover:not(.active),
[data-theme="dark"] .nav.flex-column .nav-link:hover:not(.active) {
    border: none !important;
    color: rgba(231, 228, 221, 0.8) !important;
}

[data-theme="dark"] a {
    color: var(--link-color) !important;
}

[data-theme="dark"] a:hover {
    color: var(--text-primary) !important;
    opacity: 0.8;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .shadow {
    box-shadow: 0 0.5rem 1rem var(--box-shadow) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .background-grey,
[data-theme="dark"] [class*="background-light"],
[data-theme="dark"] .section-grey,
[data-theme="dark"] .section-light,
[data-theme="dark"] section.grey,
[data-theme="dark"] section.light {
    background-color: var(--bg-light-dark) !important;
}

[data-theme="dark"] .background-grey,
[data-theme="dark"] .section-grey,
[data-theme="dark"] section.grey,
[data-theme="dark"] [class*="bg-grey-"] {
    background-color: var(--bg-grey-dark) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Container ve Section stilleri için dark mode */
[data-theme="dark"] .container-fluid,
[data-theme="dark"] section,
[data-theme="dark"] .section {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] [class*="bg-light-"],
[data-theme="dark"] [class*="bg-grey-"] {
    background-color: var(--bg-light-dark) !important;
}

/* Dark mode toggle button styles */
.dark-mode-toggle {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

#darkModeToggle {
    color: inherit;
    text-decoration: none;
}

#darkModeToggle:hover {
    opacity: 0.8;
}

#topbar .dark-mode-toggle {
    margin-top: -2px;
}

/* Light Theme Override Styles */
.bg-light,
.background-light,
[class*="bg-light-"],
.section-light,
section.light {
    background-color: #ffffff !important;
}

.bg-grey,
.background-grey,
[class*="bg-grey-"],
.section-grey,
section.grey {
    background-color: #f7f9fb !important;
}

/* Footer Styles */
[data-theme="dark"] footer {
    background-color: var(--footer-bg) !important;
}

[data-theme="dark"] .copyright-content,
[data-theme="dark"] .footer-copyright {
    background-color: var(--copyright-bg) !important;
}

[data-theme="dark"] footer.footer {
    background-color: var(--footer-bg) !important;
}

[data-theme="dark"] .footer-content {
    background-color: var(--footer-bg) !important;
}

/* Footer Help Dropdown Styles - Maximum Specificity */
body[data-theme="dark"] footer .dropdown-menu,
body[data-theme="dark"] footer.footer .dropdown-menu,
body[data-theme="dark"] .footer .dropdown-menu,
body[data-theme="dark"] .footer-content .dropdown-menu,
body[data-theme="dark"] #footer .dropdown-menu,
body[data-theme="dark"] #footer-content .dropdown-menu,
body[data-theme="dark"] footer[class*="footer"] .dropdown-menu,
body[data-theme="dark"] div[class*="footer"] .dropdown-menu {
    background: #242424 !important;
    background-color: #242424 !important;
    border: 1px solid #404040 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    --bs-dropdown-bg: #242424 !important;
    --bs-dropdown-border-color: #404040 !important;
    --bs-dropdown-link-hover-bg: #1B1B1B !important;
}

body[data-theme="dark"] footer .dropdown-menu *,
body[data-theme="dark"] footer.footer .dropdown-menu *,
body[data-theme="dark"] .footer .dropdown-menu *,
body[data-theme="dark"] .footer-content .dropdown-menu *,
body[data-theme="dark"] #footer .dropdown-menu *,
body[data-theme="dark"] #footer-content .dropdown-menu *,
body[data-theme="dark"] footer[class*="footer"] .dropdown-menu *,
body[data-theme="dark"] div[class*="footer"] .dropdown-menu * {
    background-color: #242424 !important;
    color: #e7e4dd !important;
}

body[data-theme="dark"] footer .dropdown-menu .dropdown-item,
body[data-theme="dark"] footer.footer .dropdown-menu .dropdown-item,
body[data-theme="dark"] .footer .dropdown-menu .dropdown-item,
body[data-theme="dark"] .footer-content .dropdown-menu .dropdown-item,
body[data-theme="dark"] #footer .dropdown-menu .dropdown-item,
body[data-theme="dark"] #footer-content .dropdown-menu .dropdown-item,
body[data-theme="dark"] footer[class*="footer"] .dropdown-menu .dropdown-item,
body[data-theme="dark"] div[class*="footer"] .dropdown-menu .dropdown-item {
    background: #242424 !important;
    background-color: #242424 !important;
    color: #e7e4dd !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body[data-theme="dark"] footer .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] footer.footer .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] .footer .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] .footer-content .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] #footer .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] #footer-content .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] footer[class*="footer"] .dropdown-menu .dropdown-item:hover,
body[data-theme="dark"] div[class*="footer"] .dropdown-menu .dropdown-item:hover {
    background: #1B1B1B !important;
    background-color: #1B1B1B !important;
    color: #e7e4dd !important;
}

/* Bootstrap Dropdown Override with !important */
.dropdown-menu[data-bs-popper],
.dropdown-menu.show,
.dropdown .dropdown-menu,
footer .dropdown .dropdown-menu {
    --bs-dropdown-bg: inherit !important;
    --bs-dropdown-color: inherit !important;
    --bs-dropdown-border-color: inherit !important;
    --bs-dropdown-link-color: inherit !important;
    --bs-dropdown-link-hover-color: inherit !important;
    --bs-dropdown-link-hover-bg: inherit !important;
}

/* Footer Help Dropdown Styles */
.p-dropdown .p-dropdown-content {
    background-color: var(--p-dropdown-bg) !important;
    border: 1px solid var(--p-dropdown-border) !important;
    box-shadow: 0 0.5rem 1rem var(--p-dropdown-shadow) !important;
}

.p-dropdown .p-dropdown-content li a {
    color: var(--text-primary) !important;
    background-color: var(--p-dropdown-bg) !important;
    transition: all 0.3s ease-in-out;
}

.p-dropdown .p-dropdown-content li a:hover {
    background-color: var(--bg-grey-dark) !important;
    color: var(--text-primary) !important;
    opacity: 0.9;
}

.p-dropdown .p-dropdown-content li a i {
    color: var(--text-primary) !important;
}

/* Override any Bootstrap dropdown styles */
.p-dropdown .p-dropdown-content.show,
.p-dropdown .p-dropdown-content[style*="display: block"] {
    background-color: var(--p-dropdown-bg) !important;
    border-color: var(--p-dropdown-border) !important;
}

/* Navbar Dark Mode Styles */
[data-theme="dark"] #header {
    background-color: #141414 !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #header .header-inner {
    background-color: #141414 !important;
}

[data-theme="dark"] #mainMenu nav > ul > li > a {
    color: var(--nav-link-color) !important;
}

[data-theme="dark"] #mainMenu nav > ul > li:hover > a,
[data-theme="dark"] #mainMenu nav > ul > li.hover > a,
[data-theme="dark"] #mainMenu nav > ul > li.current > a {
    color: var(--nav-link-hover) !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--border-color) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-menu > li:hover > a {
    background-color: var(--bg-grey-dark) !important;
    color: var(--nav-link-hover) !important;
}

/* Topbar Dark Mode Styles */
[data-theme="dark"] #topbar {
    background-color: #242424 !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #topbar a {
    color: var(--topbar-link-color) !important;
}

[data-theme="dark"] #topbar a:hover {
    color: var(--topbar-link-hover) !important;
}

[data-theme="dark"] .topbar-dropdown .dropdown-list {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .topbar-dropdown .list-entry {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .topbar-dropdown .list-entry:hover {
    background-color: var(--bg-grey-dark) !important;
    color: var(--nav-link-hover) !important;
}

[data-theme="dark"] #mainMenu-trigger a span,
[data-theme="dark"] #mainMenu-trigger a span:before,
[data-theme="dark"] #mainMenu-trigger a span:after {
    background-color: var(--text-primary) !important;
}

[data-theme="dark"] .lines-button.close span {
    background: transparent !important;
}

[data-theme="dark"] #logo .logo-default {
    display: none !important;
}

[data-theme="dark"] #logo .logo-dark {
    display: inline-block !important;
}

#logo .logo-default {
    display: inline-block !important;
}

#logo .logo-dark {
    display: none !important;
}

[data-theme="dark"] .heading-text.heading-section .logo-default {
    display: none !important;
}

[data-theme="dark"] .heading-text.heading-section .logo-dark {
    display: inline-block !important;
}

.heading-text.heading-section .logo-default {
    display: inline-block !important;
}

.heading-text.heading-section .logo-dark {
    display: none !important;
}

[data-theme="dark"] .slide-captions .logo-default {
    display: none !important;
}

[data-theme="dark"] .slide-captions .logo-dark {
    display: inline-block !important;
}

.slide-captions .logo-default {
    display: inline-block !important;
}

.slide-captions .logo-dark {
    display: none !important;
}

/* Slider Styles */
.slide.background-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide.background-image .dark-mode {
    position: absolute;
    top: 0;
    left: 0;
        width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
}

[data-theme="dark"] .slide.background-image .dark-mode {
    opacity: 1;
}

[data-theme="dark"] .slide.background-image.light-mode {
    background-image: none !important;
}

[data-theme="dark"] .slide-captions {
    position: relative;
    z-index: 2;
}

/* Logo visibility */
[data-theme="dark"] .slide-captions .logo-default {
    display: none !important;
}

[data-theme="dark"] .slide-captions .logo-dark {
    display: inline-block !important;
}

.slide-captions .logo-default {
    display: inline-block !important;
}

.slide-captions .logo-dark {
    display: none !important;
}

/* Dark mode background image handling */
[data-theme="dark"] .slide.background-image {
    transition: background-image 0.3s ease-in-out !important;
}

.slide.background-image[data-bg-light] {
    --bg-light: url(attr(data-bg-light));
    --bg-dark: url(attr(data-bg-dark));
}

[data-theme="dark"] .btn.btn-dark {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15) !important;
    transition: all 0.15s ease;
}

[data-theme="dark"] .btn.btn-dark:hover,
[data-theme="dark"] .btn.btn-dark:focus,
[data-theme="dark"] .btn.btn-dark:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn.btn-dark:not(:disabled):not(.disabled).active {
    transform: translateY(-1px);
    box-shadow: 4px 8px 16px rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .fa,
[data-theme="dark"] .fas,
[data-theme="dark"] .far,
[data-theme="dark"] .fal,
[data-theme="dark"] .fab,
[data-theme="dark"] [class*="fa-"] {
    color: var(--text-primary) !important;
}

/* Button içindeki ikonlar için özel stil */
[data-theme="dark"] .btn:not(.btn-dark) .fa,
[data-theme="dark"] .btn:not(.btn-dark) .fas,
[data-theme="dark"] .btn:not(.btn-dark) .far,
[data-theme="dark"] .btn:not(.btn-dark) .fal,
[data-theme="dark"] .btn:not(.btn-dark) .fab,
[data-theme="dark"] .btn:not(.btn-dark) [class*="fa-"] {
    color: inherit !important;
}

[data-theme="dark"] .icon-box.effect.medium.color {
    background-color: transparent !important;
}

[data-theme="dark"] .icon-box.effect.medium.color .icon i {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .icon-box.effect.medium.color .icon i:after {
    box-shadow: 0 0 0 2px var(--text-primary) !important;
}

[data-theme="dark"] .icon-box.effect.medium.color:hover .icon i {
    background-color: var(--text-primary) !important;
    color: var(--bg-primary) !important;
}

[data-theme="dark"] .icon-box.effect.medium.color:hover .icon i:after {
    box-shadow: 0 0 0 2px var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-dark {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] img[src*="ACS_ico_b250.png"] {
    content: url("/images/logos/ACS_ico_b250_dark.png") !important;
}

[data-theme="dark"] img[src*="AI_ico_b250.png"] {
    content: url("/images/logos/AI_ico_b250_dark.png") !important;
}

[data-theme="dark"] img[src*="ACS_h_b.png"] {
    content: url("/images/logos/ACS_h_b_dark.png") !important;
}

[data-theme="dark"] img.light-mode-img {
    display: none !important;
}

[data-theme="dark"] img.dark-mode-img {
    display: inline-block !important;
}

img.light-mode-img {
    display: inline-block !important;
}

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

[data-theme="dark"] .btn.btn-light.btn-shadow.btn-xs {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15) !important;
    transition: all 0.15s ease;
}

[data-theme="dark"] .btn.btn-light.btn-shadow.btn-xs:hover,
[data-theme="dark"] .btn.btn-light.btn-shadow.btn-xs:focus,
[data-theme="dark"] .btn.btn-light.btn-shadow.btn-xs:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn.btn-light.btn-shadow.btn-xs:not(:disabled):not(.disabled).active {
    transform: translateY(-1px);
    box-shadow: 4px 8px 16px rgba(255, 255, 255, 0.2) !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] #hotspot3 .plan,
[data-theme="dark"] #hotspot3 .plan-box,
[data-theme="dark"] #hotspot3 .pricing-box,
[data-theme="dark"] #hotspot3 .pricing-table,
[data-theme="dark"] #hotspot3 .box,
[data-theme="dark"] #hotspot3 .card,
[data-theme="dark"] #hotspot3 .card-body,
[data-theme="dark"] #hotspot3 .card-header,
[data-theme="dark"] #hotspot3 .card-footer,
[data-theme="dark"] #hotspot3 div[class*="col-"] > div {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #hotspot3 .plan *,
[data-theme="dark"] #hotspot3 .plan-box *,
[data-theme="dark"] #hotspot3 .pricing-box *,
[data-theme="dark"] #hotspot3 .pricing-table *,
[data-theme="dark"] #hotspot3 .box *,
[data-theme="dark"] #hotspot3 .card *,
[data-theme="dark"] #hotspot3 div[class*="col-"] > div * {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #hotspot3 .plan-header,
[data-theme="dark"] #hotspot3 .card-header,
[data-theme="dark"] #hotspot3 div[class*="col-"] > div > div:first-child {
    background-color: var(--bg-grey-dark) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #hotspot3 .plan-price,
[data-theme="dark"] #hotspot3 .price,
[data-theme="dark"] #hotspot3 .amount {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #hotspot3 .list-group,
[data-theme="dark"] #hotspot3 .list-group-item,
[data-theme="dark"] #hotspot3 ul,
[data-theme="dark"] #hotspot3 li {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #hotspot3 .text-dark,
[data-theme="dark"] #hotspot3 .text-body,
[data-theme="dark"] #hotspot3 .text-default {
    color: var(--text-primary) !important;
}

/* Tab alignment override */
.nav-tabs.tabs-left {
    justify-content: flex-start !important;
}

[data-theme="dark"] .nav-tabs.tabs-left {
    justify-content: flex-start !important;
}