/* Styles for dark mode toggle button */
.dark-mode-toggle {
    position: sticky;
    bottom: 20px;
    right: 20px;
    padding: 16px;
    border: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    z-index: 99999;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transition effect */
}

/* Styles for the icons */
.dark-mode-toggle .icon img {
    width: 50px;
    height: 50px;
    transition: background-color 0.3s ease; /* Transition effect */
}

/* Dark mode toggle */
.dark-mode-toggle {
    width: 60px !important;
    height: 60px !important;
    display: flex;
    align-items: center;
}

/* Color mode switcher */
.color-mode-switcher {
    position: fixed;
    z-index: 999999;
    bottom: 50px;
    right: 50px;
}

/* 767px and smaller screen sizes */
@media (max-width: 767px) {
    /* Color mode switcher */
    .color-mode-switcher {
        bottom: 25px;
        right: 25px;
    }
}

/* Styles For New Crypto Currencies Dark Mode Begin */

:root {
    --dark: #152401;
    --alt-dark: #e9fbdf;
    --grey-white: #cccccc;
    --main-branding: #A3FF00;
    --light-branding: #D4FF87;
    --bg-dark: #051403;
}

/* Add smooth transitions for all elements */
h1, h2, h3, h4, h5, p, a, li a,
.small-cards,
.darkmode-bg,
.darkmode-btn,
.darkmode-text,
.post-meta .separator,
.post-meta .item,
.form-group input,
.form-group textarea,
.form-group label,
.form-group select,
body {
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Dark Mode Typography */
.darkmode--activated h1,
.darkmode--activated h2,
.darkmode--activated h3,
.darkmode--activated h4,
.darkmode--activated h5,
.darkmode--activated p,
.darkmode--activated a,
.darkmode--activated li a {
    color: var(--alt-dark);
}

/* Dark Intent Styling */
.darkmode--activated .dark-intent a {
    color: var(--dark) !important;
}

.darkmode--activated .dark-intent a:hover {
    text-decoration: underline;
}

.darkmode--activated .dark-intent span {
    color: var(--dark) !important;
}

.darkmode--activated .dark-intent {
    color: var(--dark);
}

/* Dark Cards Styling */
.darkmode--activated .small-cards {
    background-color: var(--dark) !important;
}

.darkmode--activated .darkmode-reverse a {
    color: var(--alt-dark);
}

.darkmode--activated .darkmode-reverse a:hover {
    text-decoration: underline;
}

.darkmode--activated .darkmode-reverse span {
    color: var(--alt-dark) !important;
}

/* Dark Mode BG */
.darkmode--activated .darkmode-bg {
    background-color: var(--dark) !important;
}

/* Dark Mode Button Global */
.darkmode--activated .darkmode-btn {
    background-color: var(--light-branding) !important;
    color: var(--dark) !important;
}

.darkmode--activated .darkmode-btn:hover {
    background-color: var(--main-branding) !important;
    color: #fff !important;
}

/* Dark Mode Text Global */
.darkmode--activated .darkmode-text {
    color: var(--alt-dark) !important;
}

/* Post Meta Separator */
.darkmode--activated .post-meta .separator {
    color: var(--alt-dark);
}

/* Dark Post Date */
.darkmode--activated .post-meta .item {
    color: var(--alt-dark);
}

/* Dark Post Grid Title */
.darkmode--activated .bricks-layout-wrapper .repeater-item .bricks-layout-inner .content-wrapper .dynamic a {
    color: var(--alt-dark);
}

/* Dark Post Grid Post Date */
.darkmode--activated .repeater-item .dynamic {
    color: var(--alt-dark) !important;
}

/* Global Link Text Color */
.darkmode--activated p a {
    color: var(--alt-dark);
}

/* Dark Mode Form Inputs */
.darkmode--activated .form-group input {
    color: var(--alt-dark);
    background-color: var(--dark) !important;
}

.darkmode--activated .form-group textarea {
    color: var(--alt-dark);
    background-color: var(--dark) !important;
}

/* Global Form Labels */
.darkmode--activated .form-group label {
    color: var(--alt-dark);
}

/* Upload File Dialog Global */
.darkmode--activated .file-result span {
    color: var(--alt-dark);
}

/* Select Form Field Dark Global */
.darkmode--activated .form-group select {
    background-color: var(--dark) !important;
    color: var(--alt-dark);
}

/* Bricks Text Basic Elements */
.darkmode--activated .brxe-text-basic {
    color: var(--alt-dark);
}

/* Post info dark mode styles */
.darkmode--activated .post-info,
.darkmode--activated .post-info .post-date,
.darkmode--activated .post-info .post-category,
.darkmode--activated .post-info a {
    color: var(--alt-dark);
}

.darkmode--activated .post-info a:hover {
    color: var(--alt-dark);
}

/* Invert darkg background color in dark mode */
.darkmode--activated .invert-darkbg {
background-color: var(--bg-dark)!important;
	
}

/* Invert or Add Border Color in dark mode */
.darkmode--activated .invert-dark-borders {
border-color: var(--alt-dark)!important;
border: 1px solid;
	
}

/* Invert SVG color in dark mode */
.darkmode--activated .light-svg path,
.darkmode--activated .light-svg svg {
  fill: var(--alt-dark) !important;
}

/* Logo swap for dark mode - handled by JavaScript */