/**
 * Dark Mode CSS
 * Path: public_html/css/dark-mode.css
 * Version: 2.7.0
 *
 * Changelog v2.6.0:
 * - Added dark mode overrides for contact page redesign (two-column layout,
 *   info cards, reasons list, form panel, notice, focus states)
 * 
 * Changelog v2.4.0:
 * - Added dark mode styles for no-results state (.no-results, .no-results-title, .search-term)
 * 
 * Changelog v2.3.3:
 * - Added color property to .dark-mode-toggle button (#1f2937) for currentColor inheritance
 * - Sun icon in dark mode now also uses currentColor for consistency
 * 
 * Changelog v2.3.2:
 * - Made moon icon more visible in light mode (darker #1f2937 fill)
 * 
 * Changelog v2.3.1:
 * - Fixed Contact link visibility with higher specificity selector and !important
 * 
 * Changelog v2.3.0:
 * - Added explicit desktop visibility for dark mode toggle
 * - Ensured Contact link and other non-dropdown nav items are visible in dark mode
 * 
 * Changelog v2.2.0:
 * - Fixed mobile touch issues: wrapped card hover effects in @media (hover: hover)
 *   to prevent sticky hover and double-tap behavior on touch devices
 * 
 * Changelog v2.1.2:
 * - Removed mobile search mic button dark mode styles
 * 
 * Changelog v2.1.1:
 * - Added mobile search mic button dark mode styles
 * 
 * Changelog v2.1.0:
 * - Added mobile search overlay dark mode styles
 * 
 * Dark mode theme for Automate & Tweak
 * IMPORTANT: This file only applies dark styles when [data-theme="dark"] is set
 * Light mode uses existing site styles - nothing is changed
 */

/* ====================================================================
   DARK MODE TOGGLE BUTTON - Light Mode (Default)
   ==================================================================== */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: #1f2937; /* Dark color for moon icon via currentColor */
}

.dark-mode-toggle:hover {
    background-color: #f0f0f0;
    border-color: #007bff;
}

.dark-mode-toggle svg {
    width: 20px;
    height: 20px;
}

/* Moon icon styling (filled path) - visible dark gray in light mode */
.dark-mode-toggle .icon-moon {
    display: block;
    fill: currentColor;
    stroke: none;
}

/* Sun icon styling (uses lines/strokes) */
.dark-mode-toggle .icon-sun {
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dark-mode-toggle .icon-sun circle {
    fill: currentColor;
    stroke: currentColor;
}

/* Mobile menu dark mode toggle - Light Mode */
.mobile-dark-mode-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: #333;
    font-size: 1rem;
    border-bottom: 1px solid #eee;
}

.mobile-dark-mode-toggle:hover {
    background-color: #f5f5f5;
}

.mobile-dark-mode-toggle svg {
    width: 20px;
    height: 20px;
}

.mobile-dark-mode-toggle .icon-moon {
    display: block;
    fill: #333;
}

.mobile-dark-mode-toggle .icon-sun {
    display: none;
    fill: none;
    stroke: #333;
    stroke-width: 2;
    stroke-linecap: round;
}

.mobile-dark-mode-toggle .icon-sun circle {
    fill: #333;
    stroke: #333;
}

.mobile-dark-mode-toggle .toggle-text-dark {
    display: none;
}

.mobile-dark-mode-toggle .toggle-text-light {
    display: inline;
}

/* ====================================================================
   DARK MODE STYLES - Applied ONLY when [data-theme="dark"] is set
   ==================================================================== */

/* Toggle button in dark mode */
[data-theme="dark"] .dark-mode-toggle {
    border-color: #555;
    background-color: #2d2d2d;
    color: #f0f0f0; /* Light color for sun icon via currentColor */
}

[data-theme="dark"] .dark-mode-toggle:hover {
    background-color: #3d3d3d;
    border-color: #6db3f2;
}

[data-theme="dark"] .dark-mode-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .icon-sun {
    display: block;
    fill: none;
    stroke: currentColor;
}

[data-theme="dark"] .dark-mode-toggle .icon-sun circle {
    fill: currentColor;
    stroke: currentColor;
}

/* Mobile toggle in dark mode */
[data-theme="dark"] .mobile-dark-mode-toggle {
    color: #e4e4e4;
    border-bottom-color: #444;
}

[data-theme="dark"] .mobile-dark-mode-toggle:hover {
    background-color: #2d2d2d;
}

[data-theme="dark"] .mobile-dark-mode-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .mobile-dark-mode-toggle .icon-sun {
    display: block;
    stroke: #e4e4e4;
}

[data-theme="dark"] .mobile-dark-mode-toggle .icon-sun circle {
    fill: #e4e4e4;
    stroke: #e4e4e4;
}

[data-theme="dark"] .mobile-dark-mode-toggle .toggle-text-light {
    display: none;
}

[data-theme="dark"] .mobile-dark-mode-toggle .toggle-text-dark {
    display: inline;
}

/* ====================================================================
   BODY - DARK MODE
   ==================================================================== */
[data-theme="dark"] body {
    background: #121212;
    color: #e4e4e4;
}

/* ====================================================================
   HEADER - DARK MODE
   ==================================================================== */
[data-theme="dark"] header {
    background-color: #1e1e1e;
    color: #e4e4e4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] header .logo span {
    color: #f0f0f0;
}

/* Header search bar */
[data-theme="dark"] .header-search-form {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .header-search-input {
    color: #e4e4e4;
}

[data-theme="dark"] .header-search-input::placeholder {
    color: #aaa;
}

[data-theme="dark"] .header-search-form:focus-within {
    border-color: #6db3f2;
    box-shadow: 0 0 0 3px rgba(109, 179, 242, 0.25);
}

/* Mobile Search Overlay - Dark Mode */
[data-theme="dark"] .mobile-search-overlay {
    background: #1e1e1e;
}

[data-theme="dark"] .mobile-search-header {
    border-bottom-color: #444;
}

[data-theme="dark"] .mobile-search-back {
    color: #e4e4e4;
}

[data-theme="dark"] .mobile-search-back:hover,
[data-theme="dark"] .mobile-search-back:focus {
    background: #2d2d2d;
}

[data-theme="dark"] .mobile-search-overlay .mobile-search-input {
    background: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] .mobile-search-overlay .mobile-search-input:focus {
    border-color: #6db3f2;
    background: #333;
}

[data-theme="dark"] .mobile-search-overlay .mobile-search-input::placeholder {
    color: #aaa;
}

/* ====================================================================
   NAVIGATION - DARK MODE
   ==================================================================== */

/* All nav links including Contact (non-dropdown items) */
[data-theme="dark"] .desktop-nav ul li a {
    color: #e4e4e4;
}

[data-theme="dark"] .desktop-nav ul li a:hover {
    color: #6db3f2;
}

/* Explicit styling for non-dropdown nav items (Contact, etc.) - higher specificity */
[data-theme="dark"] nav.desktop-nav ul li:not(.dropdown-menu-item) a {
    color: #e4e4e4 !important;
}

[data-theme="dark"] nav.desktop-nav ul li:not(.dropdown-menu-item) a:hover {
    color: #6db3f2 !important;
}

[data-theme="dark"] .dropdown-toggle {
    color: #e4e4e4;
}

/* ====================================================================
   DROPDOWNS - DARK MODE
   ==================================================================== */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-options {
    background-color: #2d2d2d;
    border-color: #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dropdown-item {
    color: #e4e4e4;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: #3d3d3d;
}

[data-theme="dark"] .dropdown-divider {
    border-color: #444;
}

[data-theme="dark"] .category-name,
[data-theme="dark"] .tag-name,
[data-theme="dark"] .browse-all-text,
[data-theme="dark"] .new-tools-text,
[data-theme="dark"] .view-all-text {
    color: #e4e4e4;
}

[data-theme="dark"] .count {
    color: #aaa;
}

/* ====================================================================
   LANGUAGE SWITCHER - DARK MODE
   ==================================================================== */
[data-theme="dark"] .custom-language-switcher .selected-option {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] .custom-language-switcher .selected-option .lang-text {
    color: #e4e4e4;
}

[data-theme="dark"] .custom-language-switcher .arrow {
    color: #e4e4e4;
}

[data-theme="dark"] .language-option {
    color: #e4e4e4;
}

[data-theme="dark"] .language-option:hover {
    background-color: #3d3d3d;
}

/* ====================================================================
   SUBMIT TOOL BUTTON - DARK MODE
   ==================================================================== */
[data-theme="dark"] .submit-tool-btn {
    background-color: #3b82f6;
    color: #ffffff;
}

[data-theme="dark"] .submit-tool-btn:hover {
    background-color: #2563eb;
}

/* ====================================================================
   MAIN CONTENT SEARCH - DARK MODE
   ==================================================================== */
[data-theme="dark"] .search-input,
[data-theme="dark"] .content-area .search-input,
[data-theme="dark"] input.search-input {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] .search-input::placeholder {
    color: #aaa;
}

[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .content-area .search-input:focus {
    border-color: #6db3f2;
    box-shadow: 0 0 0 3px rgba(109, 179, 242, 0.25);
}

/* ====================================================================
   FILTER SIDEBAR - DARK MODE
   ==================================================================== */
[data-theme="dark"] .filter-sidebar,
[data-theme="dark"] .desktop-filters .filters,
[data-theme="dark"] .filter-container {
    background-color: #1e1e1e;
}

[data-theme="dark"] .filter-sidebar .filter-column h2,
[data-theme="dark"] .filter-section h3,
[data-theme="dark"] .filter-title {
    color: #e4e4e4;
    border-bottom-color: #444;
}

[data-theme="dark"] .filter-option label,
[data-theme="dark"] .checkbox-label {
    color: #e4e4e4;
}

[data-theme="dark"] .filter-count {
    color: #aaa;
}

/* ====================================================================
   TOP BAR (Reset Filters, Counter, Sort) - DARK MODE
   ==================================================================== */
[data-theme="dark"] .top-bar {
    background: #1e1e1e;
}

[data-theme="dark"] .counter-container {
    color: #b0b0b0;
}

[data-theme="dark"] .reset-button,
[data-theme="dark"] .reset-filters-btn {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] .reset-button:hover,
[data-theme="dark"] .reset-filters-btn:hover {
    background-color: #3d3d3d;
}

/* Sort dropdown */
[data-theme="dark"] .sort-container select,
[data-theme="dark"] select {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] .sort-container select option {
    background-color: #2d2d2d;
    color: #e4e4e4;
}

/* ====================================================================
   CARDS - DARK MODE
   ==================================================================== */
[data-theme="dark"] .taxonomy-card,
[data-theme="dark"] .tool-card {
    background: #252525;
    border-color: #3d3d3d;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Card hover effects only for devices with hover capability (desktop) */
@media (hover: hover) {
    [data-theme="dark"] .taxonomy-card:hover,
    [data-theme="dark"] .tool-card:hover {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
        border-color: #6db3f2;
    }
}

[data-theme="dark"] .taxonomy-card h3,
[data-theme="dark"] .tool-card h2,
[data-theme="dark"] .tool-card h3 {
    color: #e4e4e4;
}

[data-theme="dark"] .taxonomy-card p,
[data-theme="dark"] .tool-card p {
    color: #b0b0b0;
}

[data-theme="dark"] .tool-logo {
    background: #2d2d2d;
}

[data-theme="dark"] .tool-card-content {
    color: #e4e4e4;
}

/* ====================================================================
   MOBILE MENU - DARK MODE
   ==================================================================== */
[data-theme="dark"] .mobile-menu-overlay {
    background-color: #1e1e1e;
}

[data-theme="dark"] .mobile-menu-header {
    border-bottom-color: #3d3d3d;
    background-color: #1e1e1e;
}

[data-theme="dark"] .mobile-menu-title {
    color: #e4e4e4;
}

[data-theme="dark"] .mobile-menu-close {
    color: #e4e4e4;
}

[data-theme="dark"] .mobile-menu-close:hover {
    background-color: #333;
}

[data-theme="dark"] .mobile-menu-content {
    background-color: #1e1e1e;
}

[data-theme="dark"] .mobile-menu-section {
    background-color: #1e1e1e;
}

[data-theme="dark"] .mobile-menu-section-title {
    color: #aaa;
}

[data-theme="dark"] .mobile-menu-section-link {
    color: #aaa;
}

[data-theme="dark"] .mobile-menu-section-link:hover {
    color: #6db3f2;
}

[data-theme="dark"] .mobile-menu-item {
    color: #e4e4e4;
    border-bottom-color: #333;
}

[data-theme="dark"] .mobile-menu-item:hover {
    background-color: #2d2d2d;
    color: #fff;
}

[data-theme="dark"] .mobile-menu-item span {
    color: #e4e4e4;
}

[data-theme="dark"] .mobile-menu-count {
    color: #e4e4e4;
    background-color: #3d3d3d;
}

[data-theme="dark"] .mobile-menu-icon {
    color: #e4e4e4;
}

[data-theme="dark"] .mobile-menu-arrow {
    color: #aaa;
}

[data-theme="dark"] .mobile-menu-view-all {
    color: #6db3f2;
}

[data-theme="dark"] .mobile-menu-highlight {
    background-color: #2d2d2d;
}

[data-theme="dark"] .hamburger span {
    background-color: #e4e4e4;
}

/* ====================================================================
   MOBILE SEARCH BAR - DARK MODE
   ==================================================================== */
[data-theme="dark"] .mobile-search-bar {
    background: #1e1e1e;
    border-bottom-color: #3d3d3d;
}

[data-theme="dark"] .mobile-search-input {
    background: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] .mobile-search-input::placeholder {
    color: #aaa;
}

/* ====================================================================
   FOOTER - DARK MODE
   ==================================================================== */
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
    background-color: #1a1a1a;
    color: #e4e4e4;
}

[data-theme="dark"] .footer-placeholder {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .footer-columns {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .footer-column {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-center {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-center nav {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-left {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-right {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-column p {
    color: #b0b0b0;
}

[data-theme="dark"] .footer-column h2 {
    color: #e4e4e4;
}

[data-theme="dark"] .footer-links a,
[data-theme="dark"] footer .footer-center .footer-links a,
[data-theme="dark"] footer .footer-center nav .footer-links a {
    color: #b0b0b0 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] footer .footer-center .footer-links a:hover {
    color: #6db3f2 !important;
}

[data-theme="dark"] .footer-center,
[data-theme="dark"] .footer-center nav,
[data-theme="dark"] .footer-center .footer-links,
[data-theme="dark"] .footer-column {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-links {
    background-color: transparent !important;
}

[data-theme="dark"] ul.footer-links {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-links li {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-center ul {
    background-color: transparent !important;
}

[data-theme="dark"] .footer-center ul li {
    background-color: transparent !important;
}

[data-theme="dark"] footer nav {
    background-color: transparent !important;
}

[data-theme="dark"] footer nav ul li {
    background-color: transparent !important;
}

/* Aggressive footer dark mode override for mobile */
[data-theme="dark"] .footer-links,
[data-theme="dark"] .footer-links *,
[data-theme="dark"] .footer-center *,
[data-theme="dark"] footer nav * {
    background-color: transparent !important;
    background: transparent !important;
}

[data-theme="dark"] .footer-divider {
    border-color: #3d3d3d;
}

[data-theme="dark"] .footer-notices,
[data-theme="dark"] .footer-notices p {
    color: #777;
    background-color: #151515;
}

/* Newsletter form */
[data-theme="dark"] #newsletter-form input[type="email"] {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] #newsletter-form input[type="email"]::placeholder {
    color: #aaa;
}

[data-theme="dark"] #newsletter-form button {
    background-color: #3b82f6;
    color: #fff;
}

[data-theme="dark"] #newsletter-form button:hover {
    background-color: #2563eb;
}

/* Social icons */
[data-theme="dark"] .social-icon {
    background-color: #2d2d2d;
}

[data-theme="dark"] .social-icon:hover {
    background-color: #3d3d3d;
}

[data-theme="dark"] .social-svg {
    fill: #e4e4e4;
}

/* ====================================================================
   GENERAL LINKS - DARK MODE
   ==================================================================== */
[data-theme="dark"] a {
    color: #6db3f2;
}

[data-theme="dark"] a:hover {
    color: #8ec5f5;
}

/* ====================================================================
   BREADCRUMBS - DARK MODE
   ==================================================================== */
[data-theme="dark"] .breadcrumbs {
    background: #1e1e1e;
    border-bottom-color: #3d3d3d;
    color: #aaa;
}

[data-theme="dark"] .breadcrumbs a {
    color: #6db3f2;
}

[data-theme="dark"] .breadcrumbs span {
    color: #aaa;
}

/* ====================================================================
   RESULTS INFO - DARK MODE
   ==================================================================== */
[data-theme="dark"] .results-info {
    background: #1e1e1e;
}

[data-theme="dark"] .results-info p {
    color: #b0b0b0;
}

/* ====================================================================
   CONTENT TITLES - DARK MODE
   ==================================================================== */
[data-theme="dark"] .content h1 {
    color: #e4e4e4;
}

/* ====================================================================
   BADGES - DARK MODE
   ==================================================================== */
[data-theme="dark"] .badge,
[data-theme="dark"] .tag-badge,
[data-theme="dark"] .category-badge {
    background-color: #1e3a5f;
    color: #6db3f2;
}

/* ====================================================================
   BACK TO TOP BUTTON - DARK MODE
   ==================================================================== */
[data-theme="dark"] .back-to-top {
    background-color: #3b82f6;
}

[data-theme="dark"] .back-to-top:hover {
    background-color: #2563eb;
}

/* ====================================================================
   COOKIE BANNER - DARK MODE
   ==================================================================== */
[data-theme="dark"] .cookie-banner {
    background-color: #1e1e1e;
    border-color: #3d3d3d;
    color: #e4e4e4;
}

/* ====================================================================
   SHOW MORE BUTTON - DARK MODE
   ==================================================================== */
[data-theme="dark"] #showMoreBtn {
    background: #3b82f6;
}

[data-theme="dark"] #showMoreBtn:hover {
    background: #2563eb;
}

[data-theme="dark"] #showMoreBtn:disabled {
    background: #555;
}

/* ====================================================================
   TOOL PAGE - DARK MODE
   ==================================================================== */

/* Tool header/info card (left sidebar) */
[data-theme="dark"] .tool-header {
    background-color: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .tool-header h1 {
    color: #e4e4e4;
}

[data-theme="dark"] .tool-header .tool-subtitle,
[data-theme="dark"] .tool-header p {
    color: #b0b0b0;
}

[data-theme="dark"] .tool-title-section {
    background-color: #252525;
    border-color: #3d3d3d;
}

/* Info sections (Category, Tags, Pricing) */
[data-theme="dark"] .tool-info-sections {
    background-color: #252525;
}

[data-theme="dark"] .info-section {
    background-color: #1e1e1e;
    border-color: #3d3d3d;
}

[data-theme="dark"] .info-section-label,
[data-theme="dark"] .tool-info-label {
    color: #aaa;
}

[data-theme="dark"] .info-section a {
    color: #6db3f2;
}

/* Tag chips in tool sidebar */
[data-theme="dark"] .tag-chip {
    background: #2d2d2d;
    border-color: #444;
    color: #e4e4e4;
}

[data-theme="dark"] .tag-chip:hover {
    border-color: #6db3f2;
    color: #6db3f2;
}

/* NSFW tag chip (Issue #151) */
[data-theme="dark"] .tag-chip.nsfw-tag {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

[data-theme="dark"] .tag-chip.nsfw-tag:hover {
    background: rgba(220, 38, 38, 0.25);
    border-color: #f87171;
}

/* Left column container */
[data-theme="dark"] .left-column {
    background-color: transparent;
}

/* Main content area */
[data-theme="dark"] .main-content {
    background-color: transparent;
}

[data-theme="dark"] .content-section {
    background-color: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .content-section h2,
[data-theme="dark"] .content-section h3 {
    color: #e4e4e4;
}

[data-theme="dark"] .content-section p,
[data-theme="dark"] .main-content p {
    color: #b0b0b0;
}

[data-theme="dark"] .content-section ul li,
[data-theme="dark"] .content-section ol li {
    color: #b0b0b0;
}

[data-theme="dark"] .content-section a {
    color: #6db3f2;
}

/* Right sidebar */
[data-theme="dark"] .sidebar {
    background-color: transparent;
}

[data-theme="dark"] .sidebar-box {
    background-color: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .sidebar-box h3 {
    color: #e4e4e4;
}

[data-theme="dark"] .sidebar-box ul li {
    border-color: #3d3d3d;
}

[data-theme="dark"] .sidebar-box ul li a {
    color: #6db3f2;
}

[data-theme="dark"] .sidebar-box ul li a:hover {
    color: #8ec5f5;
}

/* Follow form section */
[data-theme="dark"] .follow-tool-cta {
    background-color: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .follow-tool-cta h2,
[data-theme="dark"] .follow-tool-cta h3 {
    color: #e4e4e4;
}

[data-theme="dark"] .follow-tool-cta p {
    color: #b0b0b0;
}

[data-theme="dark"] .follow-section,
[data-theme="dark"] .follow-box {
    background-color: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .follow-section h3,
[data-theme="dark"] .follow-box h3 {
    color: #e4e4e4;
}

[data-theme="dark"] .follow-section p,
[data-theme="dark"] .follow-box p {
    color: #b0b0b0;
}

[data-theme="dark"] .follow-form input[type="email"] {
    background-color: #1e1e1e;
    border-color: #3d3d3d;
    color: #e4e4e4;
}

[data-theme="dark"] .follow-form input[type="email"]::placeholder {
    color: #aaa;
}

/* Feedback widget */
[data-theme="dark"] .feedback-widget,
[data-theme="dark"] .feedback-box {
    background-color: #252525 !important;
    border-color: #3d3d3d;
}

[data-theme="dark"] .feedback-widget h3,
[data-theme="dark"] .feedback-box h3,
[data-theme="dark"] .feedback-widget p,
[data-theme="dark"] .feedback-box p {
    color: #e4e4e4;
}

[data-theme="dark"] .feedback-section {
    background-color: #252525;
}

[data-theme="dark"] .feedback-label {
    color: #e4e4e4;
}

[data-theme="dark"] .feedback-section legend {
    color: #e4e4e4;
}

[data-theme="dark"] .feedback-widget textarea {
    background-color: #1e1e1e;
    border-color: #3d3d3d;
    color: #e4e4e4;
}

[data-theme="dark"] .feedback-widget textarea::placeholder {
    color: #aaa;
}

[data-theme="dark"] .star {
    color: #aaa;
}

[data-theme="dark"] .star.selected {
    color: #ffc107;
}

[data-theme="dark"] .star:hover {
    color: #ffc107;
}

[data-theme="dark"] .radio-option input[type="radio"] {
    color-scheme: dark;
    accent-color: #28a745;
}

[data-theme="dark"] .radio-option {
    color: #e4e4e4;
}

/* AI tools full width container */
[data-theme="dark"] .ai-tools-full-width {
    background-color: transparent;
}

[data-theme="dark"] .ai-tools-full-width .container {
    background-color: transparent;
}

/* Tool page body background */
[data-theme="dark"] body.tool-page,
[data-theme="dark"] .tool-page {
    background-color: #121212;
}

/* Screenshot modal */
[data-theme="dark"] .screenshot-modal-content {
    background-color: #252525;
    border-color: #3d3d3d;
}

/* Coupon modal */
[data-theme="dark"] .coupon-modal-content {
    background-color: #252525;
    border-color: #3d3d3d;
    color: #e4e4e4;
}

/* FAQ sections */
[data-theme="dark"] .faq {
    background-color: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .faq h2 {
    color: #e4e4e4;
}

[data-theme="dark"] .faq-item {
    background-color: #1e1e1e;
    border-color: #3d3d3d;
}

[data-theme="dark"] .faq-item h3 {
    color: #e4e4e4;
}

[data-theme="dark"] .faq-item p {
    color: #b0b0b0;
}

/* ====================================================================
   NEW TOOLS WIDGET (Sidebar) - DARK MODE
   ==================================================================== */
[data-theme="dark"] .new-tools-widget {
    background-color: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .new-tools-widget-header h2 {
    color: #e4e4e4;
}

[data-theme="dark"] .new-tools-widget-header p {
    color: #b0b0b0;
}

[data-theme="dark"] .new-tool-card-wrapper {
    background-color: #1e1e1e;
    border-color: #3d3d3d;
}

/* New tools widget hover effects only for devices with hover capability (desktop) */
@media (hover: hover) {
    [data-theme="dark"] .new-tool-card-wrapper:hover {
        border-color: #6db3f2;
    }

    [data-theme="dark"] .new-tool-card:hover .tool-card-title,
    [data-theme="dark"] .new-tool-card:hover h3 {
        color: #6db3f2;
    }
}

[data-theme="dark"] .new-tool-card .tool-card-title,
[data-theme="dark"] .new-tool-card h3 {
    color: #e4e4e4;
}

[data-theme="dark"] .new-tool-card .tool-card-subtitle,
[data-theme="dark"] .new-tool-card p {
    color: #b0b0b0;
}

[data-theme="dark"] .new-tool-labels {
    background: rgba(30, 30, 30, 0.8);
    border-top-color: #3d3d3d;
}

[data-theme="dark"] .new-tool-screenshot {
    background-color: #1e1e1e;
}

/* Media gallery box on tool detail page */
[data-theme="dark"] .media-gallery {
    background: #252525;
}

/* Single screenshot frame on tool detail page */
[data-theme="dark"] .media-gallery-content.single-item .media-main-preview {
    background: #1a1a1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .new-tools-widget-footer {
    border-top-color: #3d3d3d;
}


/* Fix for dropdown toggle text in nav menu */
[data-theme="dark"] .dropdown-text {
    color: #e4e4e4;
}

/* Type dropdown items */
[data-theme="dark"] .type-name {
    color: #e4e4e4;
}

[data-theme="dark"] .type-emoji {
    opacity: 1;
}
/* ====================================================================
   NO RESULTS STATE WITH AI CTA
   ==================================================================== */

[data-theme="dark"] .no-results {
    background: #2d2d2d;
}

[data-theme="dark"] .no-results-title {
    color: #e4e4e4;
}

[data-theme="dark"] .search-term {
    background: #3d3d3d;
    color: #e4e4e4;
}

/* ====================================================================
   CONTACT PAGE — DARK MODE
   ==================================================================== */

/* Info Panel */
[data-theme="dark"] .contact-info-panel {
    background: #1e1e1e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .contact-info-panel h1 {
    color: #e4e4e4;
}

[data-theme="dark"] .contact-intro {
    color: #b0b0b0;
}

/* Info Cards */
[data-theme="dark"] .contact-info-card {
    background: #252525;
    border-color: #3d3d3d;
}

[data-theme="dark"] .contact-info-icon {
    background: #1e3a5f;
    color: #6db3f2;
}

[data-theme="dark"] .contact-info-text strong {
    color: #e4e4e4;
}

[data-theme="dark"] .contact-info-text span {
    color: #b0b0b0;
}

[data-theme="dark"] .contact-info-text a {
    color: #6db3f2;
}

/* Reasons Section */
[data-theme="dark"] .contact-reasons h2 {
    color: #e4e4e4;
}

[data-theme="dark"] .contact-reasons-list li {
    color: #b0b0b0;
}

[data-theme="dark"] .contact-reasons-list li::before {
    background: #6db3f2;
}

/* Form Panel */
[data-theme="dark"] .contact-form-panel {
    background: #1e1e1e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .contact-form-heading {
    color: #e4e4e4;
}

[data-theme="dark"] .form-group label {
    color: #b0b0b0;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
    background: #252525;
    border-color: #3d3d3d;
    color: #e4e4e4;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: #aaa;
}

[data-theme="dark"] .form-group select option {
    background: #252525;
    color: #e4e4e4;
}

/* Focus states — dark mode */
[data-theme="dark"] .form-group input:focus-visible,
[data-theme="dark"] .form-group textarea:focus-visible,
[data-theme="dark"] .form-group select:focus-visible {
    outline-color: #60a5fa;
    border-color: #60a5fa;
}

/* Send Button — dark mode */
[data-theme="dark"] .send-button {
    background: #3b82f6;
}

[data-theme="dark"] .send-button:hover {
    background: #2563eb;
}

[data-theme="dark"] .send-button:focus-visible {
    outline-color: #60a5fa;
}

[data-theme="dark"] .send-button:disabled {
    background: #555;
}

/* Notice — dark mode */
[data-theme="dark"] .contact-notice.success {
    background-color: #1a3a2a;
    color: #75d99a;
    border-color: #2d5a3e;
}

[data-theme="dark"] .contact-notice.error {
    background-color: #3a1a1a;
    color: #f5a0a0;
    border-color: #5a2d2d;
}

/* Mobile: dark border between panels */
@media screen and (max-width: 768px) {
    [data-theme="dark"] .contact-info-panel,
    [data-theme="dark"] .contact-form-panel {
        border-bottom-color: #3d3d3d;
    }
}

/* Page Content — dark mode (about, privacy, cookie) */
[data-theme="dark"] .page-content {
    background: #1e1e1e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-content h1,
[data-theme="dark"] .page-content h2 {
    color: #e4e4e4;
}

[data-theme="dark"] .page-content p {
    color: #b0b0b0;
}

[data-theme="dark"] .page-content ul {
    color: #b0b0b0;
}

[data-theme="dark"] .page-content a {
    color: #6db3f2;
}

/* ====================================================================
   RESPONSIVE ADJUSTMENTS
   ==================================================================== */

/* Desktop: Ensure dark mode toggle is visible */
@media (min-width: 769px) {
    .dark-mode-toggle {
        display: flex !important;
    }
}

/* Hide desktop dark mode toggle on mobile - use mobile menu toggle instead */
@media (max-width: 768px) {
    .dark-mode-toggle {
        display: none !important;
    }
}