body.darkmode--activated {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.darkmode--activated * {
}


body.darkmode--activated h1,
body.darkmode--activated h2,
body.darkmode--activated h3,
body.darkmode--activated h4,
body.darkmode--activated h5,
body.darkmode--activated h6 {
    color: #ffffff !important;
}

body.darkmode--activated p,
body.darkmode--activated span,
body.darkmode--activated label {
    color: #e0e0e0 !important;
}

body.darkmode--activated .text-dark {
    color: white !important;
}

body.darkmode--activated .text-muted {
    color: #aaaaaa !important;
}

body.darkmode--activated .form-text {
    color: #aaaaaa !important;
}

/* ----- Links ----- */
body.darkmode--activated a {
    color: #64b5f6 !important;
}

body.darkmode--activated a:hover {
    color: #90caf9 !important;
}

body.darkmode--activated .nav-link {
    color: white !important;
}

/* ----- Backgrounds ----- */
body.darkmode--activated .bg-white {
    background-color: #1e1e1e !important;
}

body.darkmode--activated .bg-light {
    background-color: #2d2d2d !important;
}

body.darkmode--activated .grayBackground {
    background-color: #1e1e1e !important;
}

/* ----- Form Elements ----- */
body.darkmode--activated input[type="text"],
body.darkmode--activated input[type="email"],
body.darkmode--activated input[type="password"],
body.darkmode--activated input[type="search"],
body.darkmode--activated input[type="number"],
body.darkmode--activated input[type="tel"],
body.darkmode--activated textarea,
body.darkmode--activated select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.darkmode--activated input::placeholder,
body.darkmode--activated textarea::placeholder {
    color: #888 !important;
}

body.darkmode--activated input:focus,
body.darkmode--activated textarea:focus,
body.darkmode--activated select:focus {
    border-color: #64b5f6 !important;
    outline-color: #64b5f6 !important;
}

/* ----- Buttons ----- */
body.darkmode--activated .btn {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.darkmode--activated .btn-primary {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    color: white !important;
}

body.darkmode--activated .btn-secondary {
    background-color: #424242 !important;
    border-color: #424242 !important;
}

body.darkmode--activated .btn-outline-primary {
    color: #64b5f6 !important;
    border-color: #64b5f6 !important;
    background-color: transparent !important;
}

body.darkmode--activated .submitButton {
    background-color: #1976d2 !important;
    color: white !important;
}

/* ----- Cards & Panels ----- */
body.darkmode--activated .card {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

body.darkmode--activated .card-header {
    background-color: #2d2d2d !important;
    border-color: #333 !important;
}

body.darkmode--activated .card-body {
    background-color: #1e1e1e !important;
}

body.darkmode--activated .card-footer {
    background-color: #2d2d2d !important;
    border-color: #333 !important;
}

body.darkmode--activated .topPanel {
    background-color: #1e1e1e !important;
}

body.darkmode--activated .formPanel {
    background-color: #1e1e1e !important;
}

/* ----- Tables ----- */
body.darkmode--activated table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.darkmode--activated th {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

body.darkmode--activated td {
    border-color: #333 !important;
}

body.darkmode--activated tr:hover {
    background-color: #2d2d2d !important;
}

body.darkmode--activated .table-striped tbody tr:nth-of-type(odd) {
    background-color: #252525 !important;
}

/* ----- Dropdowns & Menus ----- */
body.darkmode--activated .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

body.darkmode--activated .dropdown-item {
    color: #e0e0e0 !important;
}

body.darkmode--activated .dropdown-item:hover {
    background-color: #3d3d3d !important;
}

body.darkmode--activated .header_menu_inner {
    background-color: #1e1e1e !important;
}

/* ----- Modals & Dialogs ----- */
body.darkmode--activated .modal-content {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

body.darkmode--activated .modal-header {
    border-color: #333 !important;
}

body.darkmode--activated .modal-footer {
    border-color: #333 !important;
}

body.darkmode--activated .rz-dialog.container {
    background: #1e1e1e !important;
}

body.darkmode--activated .rz-dialog.container * h2,
body.darkmode--activated .rz-dialog.container * h3,
body.darkmode--activated .rz-dialog.container * .blurb-text,
body.darkmode--activated .rz-dialog.container * .figure-caption,
body.darkmode--activated .rz-dialog.container * #search-arrow-back-icon,
body.darkmode--activated .rz-dialog.container * #searching-loading-container,
body.darkmode--activated .rz-dialog.container * #popular-searches-container {
    color: white !important;
}

/* ----- Footer ----- */
body.darkmode--activated .emagsFooter {
    background-color: #1e1e1e !important;
}

body.darkmode--activated .copyright {
    color: #e0e0e0 !important;
}

body.darkmode--activated .copyright_link {
    color: #e0e0e0 !important;
}

/* ----- Horizontal Rules & Borders ----- */
body.darkmode--activated hr {
    border-color: #333 !important;
}

/* ----- Lists ----- */
body.darkmode--activated .list-group-item {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

/* ----- Alerts & Notifications ----- */
body.darkmode--activated .alert {
    border-color: #333 !important;
}

body.darkmode--activated .alert-info {
    background-color: #1a3a4a !important;
    color: #90caf9 !important;
}

body.darkmode--activated .alert-success {
    background-color: #1a3a1a !important;
    color: #81c784 !important;
}

body.darkmode--activated .alert-warning {
    background-color: #4a3a1a !important;
    color: #ffb74d !important;
}

body.darkmode--activated .alert-danger {
    background-color: #4a1a1a !important;
    color: #e57373 !important;
}

/* ----- Library Install Banner ----- */
body.darkmode--activated #installMessage {
    background-color: #1e3a5f !important;
    border-color: #2f5f91 !important;
    color: #e0e0e0 !important;
}

body.darkmode--activated #installMessage .material-symbols-outlined,
body.darkmode--activated #installMessage #install-message-text {
    color: #e0e0e0 !important;
}

body.darkmode--activated #installMessage #install-message-text:hover,
body.darkmode--activated #installMessage #install-message-text:focus {
    color: #ffffff !important;
}

body.darkmode--activated #installMessage #installMessageDismissButton {
    filter: invert(1) grayscale(100%) brightness(1.5);
}

/* ----- Magazine/Issue Specific ----- */
body.darkmode--activated .title-view-more-button {
    color: white !important;
}

body.darkmode--activated .issue-label {
    color: white !important;
}

body.darkmode--activated #title-swiper-heading {
    color: white !important;
}

body.darkmode--activated .issueTitle {
    color: white !important;
}

body.darkmode--activated .downLoadIssue {
    color: white !important;
}

body.darkmode--activated #issue-download-success-message {
    color: white !important;
}

body.darkmode--activated .category-name {
    color: white !important;
}

/* ----- Swiper/Carousel ----- */
body.darkmode--activated .swiper-button-next {
    color: white !important;
}

body.darkmode--activated .swiper-button-prev {
    color: white !important;
}

/* Title swiper nav buttons keep a white circle face, so the arrow must stay dark.
   Swiper 12 fills the arrow SVG with the button's currentColor rather than
   drawing a :after glyph, so these colors have to be set on the button. */
body.darkmode--activated .swiper-button-prev-title-swiper,
body.darkmode--activated .swiper-button-next-title-swiper {
    color: #1f1f1f !important;
}

body.darkmode--activated button.swiper-button-prev-title-swiper:hover,
body.darkmode--activated button.swiper-button-next-title-swiper:hover {
    color: #fff !important;
}

/* Category carousels invert to a white circle in dark mode. */
body.darkmode--activated .category-circle .swiper-button-next,
body.darkmode--activated .category-circle .swiper-button-prev {
    color: black !important;
}

body.darkmode--activated .swiper-pagination-bullet {
    background: white !important;
}

/* ----- Search ----- */
body.darkmode--activated #search-icon-container {
    color: white !important;
}

body.darkmode--activated #search-results-container {
    background: #1e1e1e !important;
}

/* ----- Login/Auth Pages ----- */
body.darkmode--activated #login-landing-page-card,
body.darkmode--activated #login-verify-form,
body.darkmode--activated #loginForm {
    background: rgba(47, 47, 47, 0.9) !important;
    color: white !important;
}

body.darkmode--activated #login-landing-page-card * path {
    fill: white !important;
}

body.darkmode--activated #login-lock-image {
    filter: invert(1);
}

/* ----- Loading/Spinners ----- */
body.darkmode--activated #preloader {
    background: #121212 !important;
    background-color: #121212 !important;
}

body.darkmode--activated .spinner > div {
    background-color: white !important;
}

/* ----- Scrollbar (Webkit browsers) ----- */
body.darkmode--activated ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.darkmode--activated ::-webkit-scrollbar-track {
    background: #1e1e1e;
}

body.darkmode--activated ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}

body.darkmode--activated ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ----- Code/Pre blocks ----- */
body.darkmode--activated pre,
body.darkmode--activated code {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* ----- Badges ----- */
body.darkmode--activated .badge {
    background-color: #333 !important;
}

body.darkmode--activated .badge-primary {
    background-color: #1976d2 !important;
}

body.darkmode--activated .badge-secondary {
    background-color: #424242 !important;
}

/* ----- Tooltips ----- */
body.darkmode--activated .tooltip-inner {
    background-color: #333 !important;
    color: #e0e0e0 !important;
}

/* ----- Blockquotes ----- */
body.darkmode--activated blockquote {
    border-left-color: #444 !important;
    color: #aaa !important;
}

/* ----- Selection ----- */
body.darkmode--activated ::selection {
    background-color: #1976d2 !important;
    color: white !important;
}

/* ----- Images with transparency ----- */
body.darkmode--activated img.invert-in-dark {
    filter: invert(1);
}

body.darkmode--activated #header-container {
    border-bottom: none;
}

body.darkmode--activated #titleSwiperToggle {
    background: none !important;
}

body.darkmode--activated footer * li {
   color : white;
}

body.darkmode--activated .footer-container {
    color: white;
}

.darkmode-background, .darkmode-layer {
    display: none !important;
}

/* =====================================================
   DISCOVER COMPONENT STYLES
   ===================================================== */

/* ----- Discover Search Input ----- */
body.darkmode--activated #discover-search-button {
    background-color: transparent !important;
    color: #e0e0e0 !important;
    border-bottom-color: #444 !important;
}

body.darkmode--activated #discover-search-button::placeholder {
    color: #888 !important;
}

/* ----- Discover Categories List ----- */
body.darkmode--activated #categoriesList li > span {
    color: #e0e0e0 !important;
}

body.darkmode--activated #categoriesList li:hover > span {
    color: #1EA1F1 !important;
}

body.darkmode--activated .mobile-category-container {
    background-color: #121212 !important;
}

/* ----- Featured Article Scroll Container ----- */
body.darkmode--activated #featured-article-scroll-container {
    background-color: #121212 !important;
    border-color: #333 !important;
}

/* ----- Featured Article Cards ----- */
body.darkmode--activated .featured-article-row {
    color: #e0e0e0 !important;
}

body.darkmode--activated .featured-article-title {
    color: #ffffff !important;
}

body.darkmode--activated .featured-article-body {
    color: #b0b0b0 !important;
}

/* ----- Discover Content Columns (White backgrounds in light mode) ----- */
body.darkmode--activated .discover-column-1 {
    background-color: #2a2a2a !important;
}

body.darkmode--activated .discover-content {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* Portrait article links with white background */
body.darkmode--activated .featured-article-row[style*="background-color: white"],
body.darkmode--activated a.featured-article-row {
    background-color: #2a2a2a !important;
}

/* ----- Border Classes (Bootstrap) ----- */
body.darkmode--activated .border-start {
    border-left-color: #333 !important;
}

body.darkmode--activated .border-end {
    border-right-color: #333 !important;
}

body.darkmode--activated .border {
    border-color: #333 !important;
}

/* ----- Preloader Inner ----- */
body.darkmode--activated #preloader-inner {
    background-color: #121212 !important;
}

/* ----- Thin Scrollbar ----- */
body.darkmode--activated .thin-scrollbar {
    scrollbar-color: #555 transparent;
}

body.darkmode--activated .thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: #555 !important;
}

body.darkmode--activated .thin-scrollbar::-webkit-scrollbar-track {
    background-color: transparent !important;
}

/* ----- View More Button ----- */
body.darkmode--activated #discover-view-more-button {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* =====================================================
   SETTINGS PAGE STYLES
   ===================================================== */

body.darkmode--activated .settings-card {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
}

body.darkmode--activated .btn-outline-secondary {
    color: #aaaaaa !important;
    border-color: #555 !important;
    background-color: transparent !important;
}

body.darkmode--activated .btn-outline-secondary:hover {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #666 !important;
}

body.darkmode--activated .btn-outline-danger {
    color: #e57373 !important;
    border-color: #e57373 !important;
    background-color: transparent !important;
}

body.darkmode--activated .btn-outline-danger:hover {
    background-color: #4a1a1a !important;
    color: #ef9a9a !important;
    border-color: #ef9a9a !important;
}

body.darkmode--activated .text-secondary {
    color: #aaaaaa !important;
}

/* =====================================================
   MANAGE SUBSCRIPTIONS COMPONENT STYLES
   ===================================================== */

body.darkmode--activated .spinner-border {
    color: #64b5f6 !important;
}

body.darkmode--activated .badge.bg-success {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
}

body.darkmode--activated .badge.bg-warning {
    background-color: #f57f17 !important;
    color: #000000 !important;
}

body.darkmode--activated .badge.bg-danger {
    background-color: #b71c1c !important;
    color: #ffffff !important;
}

body.darkmode--activated .badge.bg-secondary {
    background-color: #424242 !important;
    color: #e0e0e0 !important;
}

body.darkmode--activated #discover-view-more-button:hover {
    background-color: #444 !important;
}

/* ----- Featured Article Image Container ----- */
body.darkmode--activated .featured-article-col {
    background-color: transparent !important;
}

body.darkmode--activated .preview-link {
    background-color: transparent !important;
}

/* ----- Inline style overrides for Discover component ----- */
body.darkmode--activated [style*="background-color: white"] {
    background-color: #2a2a2a !important;
}

body.darkmode--activated [style*="color: #403b37"] {
    color: #ffffff !important;
}

/* ----- Loading Splash ----- */
body.darkmode--activated #page-splash {
    background: #121212 !important;
}

body.darkmode--activated #page-splash .spinner-border {
    color: #64b5f6 !important;
}

/* ----- Search History & Popular Searches ----- */
body.darkmode--activated .search-suggestions-bar {
    background: #1e1e1e !important;
    border-color: #333 !important;
}

body.darkmode--activated #search-history-container .search-row-label-icon,
body.darkmode--activated #search-history-container .search-row-label-text,
body.darkmode--activated #popular-searches-container .search-row-label-icon,
body.darkmode--activated #popular-searches-container .search-row-label-text {
    color: #aaaaaa !important;
}

body.darkmode--activated #search-history-container .search-row-divider,
body.darkmode--activated #popular-searches-container .search-row-divider {
    background: #444 !important;
}

body.darkmode--activated #search-history-container .search-pill,
body.darkmode--activated #popular-searches-container .search-pill {
    color: #e0e0e0 !important;
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

body.darkmode--activated #search-history-container .search-pill:hover,
body.darkmode--activated #search-history-container .search-pill:focus,
body.darkmode--activated #popular-searches-container .search-pill:hover,
body.darkmode--activated #popular-searches-container .search-pill:focus {
    color: #ffffff !important;
    background-color: #1a3a4a !important;
    border-color: #64b5f6 !important;
}

body.darkmode--activated #search-history-container .search-pill:active,
body.darkmode--activated #popular-searches-container .search-pill:active {
    color: #ffffff !important;
    background-color: #14304a !important;
    border-color: #64b5f6 !important;
}

body.darkmode--activated #search-history-container .search-row-clear-btn {
    color: #9ca3af !important;
    background: none !important;
    border: none !important;
}

body.darkmode--activated #search-history-container .search-row-clear-btn:hover,
body.darkmode--activated #search-history-container .search-row-clear-btn:focus {
    color: #ef5350 !important;
}

/* ----- Search Result Cards ----- */
body.darkmode--activated .search-result-card {
    background: #1e1e1e !important;
    border-color: #333 !important;
}

body.darkmode--activated .search-result-card:hover {
    border-color: #444 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

body.darkmode--activated .search-result-cover-img {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

body.darkmode--activated .search-result-source {
    color: #aaaaaa !important;
}

body.darkmode--activated .search-result-issue-title {
    color: #ffffff !important;
}

body.darkmode--activated .search-result-badge {
    color: #d0d0d0 !important;
    background: #2d2d2d !important;
}

body.darkmode--activated .search-match-item {
    border-top-color: #333 !important;
}

body.darkmode--activated .search-match-title {
    color: #64b5f6 !important;
}

body.darkmode--activated .search-match-title:hover {
    color: #90caf9 !important;
}

body.darkmode--activated .search-match-page {
    color: #888888 !important;
}

body.darkmode--activated .search-match-blurb {
    color: #c7c7c7 !important;
}

body.darkmode--activated .search-match-thumb-img {
    border-color: #333 !important;
}

body.darkmode--activated .search-result-expand-btn {
    color: #64b5f6 !important;
    background: none !important;
}

body.darkmode--activated .search-result-expand-btn:hover {
    color: #90caf9 !important;
}

/* ----- QuickGrid Pagination ----- */
body.darkmode--activated .search-pagination-container {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

body.darkmode--activated .paginator,
body.darkmode--activated .paginator .summary,
body.darkmode--activated .paginator .pagination-text,
body.darkmode--activated .paginator strong {
    color: #e0e0e0 !important;
}

body.darkmode--activated .paginator nav button {
    background-color: transparent !important;
    border-color: #444 !important;
    filter: invert(1) brightness(1.2);
}

body.darkmode--activated .paginator nav button:disabled {
    opacity: 0.4 !important;
}

/* ----- Select Dropdowns (Bootstrap caret) ----- */
body.darkmode--activated .form-select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

body.darkmode--activated .form-select option {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}