/* Dark Mode Variables and Base Styles */
html.dark-mode {
    background-color: #0b0e14;
}

.dark-mode {
    --white: #0b0e14;
    /* Deep dark background */
    --black: #ffffff;
    /* Text color */
    --black-80: #e6edf3cc;
    --white-2: #161b22;
    /* Card backgrounds */
    --ga-grey: #8b949e;

    --ga-blue-hover: #9ec0ff;
    background-color: var(--white);
    color: var(--black);
}

/* Global Hyperlinks */
.dark-mode a {
    color: var(--ga-blue-hover);
}

.dark-mode .footer-nav-wrapper a {
    color: white;
}

.dark-mode .footer-title {
    color: white;
}

.dark-mode .footer-nav-wrapper a:hover {
    color: var(--ga-blue-hover);
}

.dark-mode a.w-nav-link:hover {
    color: var(--ga-blue-hover) !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode li,
.dark-mode .body-01,
.dark-mode .body-02,
.dark-mode .sub-heading-01,
.dark-mode .sub-heading-02,
.dark-mode .sub-heading-03,
.dark-mode .sub-heading-04,
.dark-mode .sub-heading-05,
.dark-mode .sub-heading-06 {
    color: var(--black) !important;
}

.dark-mode .opacity-80 {
    color: rgba(255, 255, 255, 1) !important;
}

/* Navbar */
.dark-mode .navbar-logo-left-container {
    background-color: #0d1117 !important;
    border-bottom: none !important;
}

/* Header Logo Swap */
.dark-mode .navbar-brand img {
    content: url('../images/GoAutomate-Logo-Reversed.svg');
}

.dark-mode .navbar-logo-left-container.shadow-three {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .nav-link-2 {
    color: #e6edf3 !important;
}

.dark-mode .nav-link-2:hover {
    color: var(--blue) !important;
}

.dark-mode .w-dropdown-toggle {
    color: #e6edf3 !important;
}

/* Dropdowns */
.dark-mode .w-dropdown-list,
.dark-mode .nav-dropdown-list,
.dark-mode .w-dropdown-list.w--open,
.dark-mode .nav-dropdown-list.w--open,
.dark-mode .horizontal-dropdown-fixed-width {
    background-color: #1f242c !important;
    border: 1px solid #30363d;
}

.dark-mode .horizontal-dropdown-fixed-width {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Cards and Content Blocks */
.dark-mode .content-innerr-01-card,
.dark-mode .integration-04-card,
.dark-mode .feature-card,
.dark-mode .pricing-card,
.dark-mode .ga-template-card,
.dark-mode .ga-app-template-card {
    background-color: #161b22 !important;
    border: 1px solid #30363d;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Buttons */
.dark-mode .white-btn {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #8ab4ff !important;
}

.dark-mode .white-btn:hover {
    background-color: #30363d !important;
}

/* Inputs */
.dark-mode .w-input,
.dark-mode .footer-form-field {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #ffffff !important;
}

/* Footer */
.dark-mode .footer-light {
    background-color: #0d1117 !important;
    border-top: 1px solid #30363d;
}

.dark-mode .footer-copyright {
    color: #ffffff !important;
}

/* Other Specific overrides */
.dark-mode .ga-grey-section {
    background-color: #0d1117;
}

.dark-mode .block-qoute-box {
    background-color: #161b22;
    color: #e6edf3;
}

/* Toggles and Icons */

/* Dark Mode templates app */
.dark-mode .template-accordion {
    background-color: #161b22 !important;
}

.dark-mode .ga-accordion-item {
    background-color: #161b22 !important;
}

.dark-mode .ga-accordion-header {
    background-color: #161b22 !important;
}

.dark-mode .ga-accordion-body {
    background-color: #161b22 !important;
}

.dark-mode .ga-accordion-body-content {
    background-color: #161b22 !important;
}

.dark-mode .ga-accordion-body-content p,
.dark-mode .ga-accordion-body-content label,
.dark-mode .ga-accordion-body-content span {
    color: #ffffff !important;
}

.dark-mode .ga-template-app-pill-text {
    color: black !important;
}

.dark-mode .ga-template-detail-container {
    background-color: #161b22 !important;
}

/* Dark Mode Toggle Button Styles */
.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 10px;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .dark-mode-toggle {
    color: #ffffff;
}

.dark-mode .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode-toggle svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* List Items and Icons */
.dark-mode .list-item-5 {
    color: #ffffff !important;
}

.dark-mode img[src*="Frame.svg"] {
    filter: brightness(0) invert(1);
}

.dark-mode .svg-icon-container svg {
    filter: brightness(0) invert(1);
}

/* Fix tabs backgrounds if needed */
.dark-mode .w-tab-link {
    background-color: #21262d;
    color: #c9d1d9;
}

.dark-mode .w-tab-link.w--current {
    background-color: #30363d;
    color: #ffffff;
}

.dark-mode .w-tab-content {
    background-color: transparent;
}

/* Fix Tab Content Text */
.dark-mode .ga-app-tab-body-text,
.dark-mode .ga-app-tab-body-text p {
    color: #e6edf3 !important;
}

/* Features Accordion */
.dark-mode .features-header {
    background-color: transparent;
}

.dark-mode .features-sub-heading {
    color: #ffffff !important;
}

.dark-mode .features-accordion-body p {
    color: #ffffff !important;
}

.dark-mode .ga-accordion-arrow {
    filter: invert(1);
}

/* -------------------------------------------
   FIXES FOR USER REPORTED ISSUES START HERE 
   ------------------------------------------- */

/* 1. Navbar Dropdowns (Apps, Resources) */
/* The previous rule might have been too specific or overridden. */
.dark-mode .w-dropdown-list,
.dark-mode .nav-dropdown-list,
.dark-mode .nav-dropdown-list .w-dropdown-link {
    background-color: #1f242c !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}

.dark-mode .nav-link-2 {
    color: #e6edf3 !important;
}

.dark-mode .nav-link-2:hover {
    background-color: #30363d !important;
    color: #8ab4ff !important;
}

/* Fix for top level "Apps" and "Resources" text */
.dark-mode .text-block {
    color: #e6edf3 !important;
}

.dark-mode .w-dropdown-toggle:hover .text-block {
    color: #8ab4ff !important;
}

/* Ensure the arrows and hamburger menu icons are also light */
.dark-mode .w-icon-dropdown-toggle,
.dark-mode .w-icon-nav-menu {
    color: #e6edf3 !important;
}

/* 2. Pricing Menu Option (Inactive) */
.dark-mode .w-nav-link {
    color: #e6edf3 !important;
}



/* 3. Sections: "Quickly create forms..." (Apps pages) & "Discover our Apps" (Homepage) */
/* These often use .ga-grey-section or white backgrounds. We need to target them comprehensively. */
.dark-mode .ga-white-section,
.dark-mode .ga-grey-section,
.dark-mode .section,
.dark-mode .ga-app-tab-section,
.dark-mode section {
    background-color: #0d1117 !important;
}

.dark-mode .nav-menu-wrapper-2 {
    background-color: transparent !important;
}

/* "Discover our Apps" specifically uses .ga-light-blue-bg */
.dark-mode .ga-light-blue-bg {
    background-color: #161b22 !important;
}

/* 4. Cards within "Discover our Apps" (.ga-app-card-block) */
.dark-mode .ga-app-card-block {
    background-color: #21262d !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s;
}

.dark-mode .ga-app-card-block:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .ga-app-heading-text,
.dark-mode .ga-app-text,
.dark-mode .ga-app-list-text {
    color: #e6edf3 !important;
}

/* Icons in cards */
.dark-mode .ga-app-check-icon,
.dark-mode .check-icon {
    /* If checks are black, invert them */
    filter: invert(1) brightness(1.5);
}

/* 5. Pricing Page: Currency Dropdown */
.dark-mode .toggle-select {
    background-color: #21262d !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
}

.dark-mode .toggle-select option {
    background-color: #21262d;
    color: #e6edf3;
}

/* Pricing Toggle Buttons */
.dark-mode .toggle-btn {
    background-color: #21262d !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}

.dark-mode .toggle-btn.active {
    background-color: #58a6ff !important;
    color: #0d1117 !important;
    border-color: #58a6ff !important;
}

/* Product Tabs on Pricing */
.dark-mode .product-tab {
    background-color: #21262d !important;
    color: #8b949e !important;
}

.dark-mode .product-tab.active {
    background-color: #58a6ff !important;
    color: #0d1117 !important;
}

.dark-mode .product-tab:hover:not(.active) {
    background-color: #30363d !important;
}

/* 6. Prices on Pricing Cards */
.dark-mode .price-amount {
    color: #ffffff !important;
}

.dark-mode .price-interval {
    color: #ffffff !important;
}

.dark-mode .plan-name,
.dark-mode .plan-quota {
    color: #e6edf3 !important;
}

.dark-mode .plan-description {
    color: #ffffff !important;
}

.dark-mode .pricing-card {
    background-color: #21262d !important;
    border-color: #30363d !important;
}

.dark-mode .app-page-tab.w-tab-link,
.dark-mode .features-tab-link.w-tab-link {
    background-color: transparent !important;
}

.dark-mode .v47-wrapper {
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .v47-wrapper::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    opacity: 0.8;
}

.dark-mode .features-accordion-body-wrapper ul,
.dark-mode .features-accordion-body-wrapper ol,
.dark-mode .features-accordion-body-wrapper li {
    color: #ffffff !important;
}

/* Cookie Consent Dark Mode Overrides */
.dark-mode #cc-main {
    --cc-bg: #161a1c;
    --cc-primary-color: #ebf3f6;
    --cc-secondary-color: #aebbc5;
    --cc-btn-primary-bg: #c2d0e0;
    --cc-btn-primary-color: #161a1c;
    /* Hardcoded var(--cc-bg) value */
    --cc-btn-primary-border-color: #c2d0e0;
    --cc-btn-primary-hover-bg: #98a7b6;
    --cc-btn-primary-hover-color: #000;
    --cc-btn-primary-hover-border-color: #98a7b6;
    --cc-btn-secondary-bg: #242c31;
    --cc-btn-secondary-color: #ebf3f6;
    /* Hardcoded var(--cc-primary-color) value */
    --cc-btn-secondary-border-color: #242c31;
    --cc-btn-secondary-hover-bg: #353d43;
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: #353d43;
    --cc-separator-border-color: #222a30;
    --cc-toggle-on-bg: #c2d0e0;
    --cc-toggle-off-bg: #525f6b;
    --cc-toggle-on-knob-bg: #161a1c;
    --cc-toggle-off-knob-bg: #161a1c;
    --cc-toggle-enabled-icon-color: #161a1c;
    --cc-toggle-disabled-icon-color: #161a1c;
    --cc-toggle-readonly-bg: #343e45;
    --cc-toggle-readonly-knob-bg: #5f6b72;
    --cc-toggle-readonly-knob-icon-color: #343e45;
    --cc-section-category-border: #1e2428;
    --cc-cookie-category-block-bg: #1e2428;
    --cc-cookie-category-block-border: #1e2428;
    --cc-cookie-category-block-hover-bg: #242c31;
    --cc-cookie-category-block-hover-border: #232a2f;
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: #343e45;
    --cc-overlay-bg: rgba(0, 0, 0, 0.65);
    --cc-webkit-scrollbar-bg: #1e2428;
    --cc-webkit-scrollbar-hover-bg: #98a7b6;
    --cc-footer-bg: #0c0e0f;
    --cc-footer-color: #aebbc5;
    --cc-footer-border-color: #060809;
    color-scheme: dark;
}