/*
 *  @author Just Wonderful Things
 *  @website justwonderfulthings.com
 *  @file /wfassets/css/theme-dark.css
 *  @description This file provides the dark theme styles for the WonderfulFAQs system, 
 *               overriding variables defined in theme-default.css for a darker color scheme and provides comprehensive dark styles for all components.
 *  @copyright 2024 Just Wonderful Things. All rights reserved.
 *  @features
 *      - Overrides default theme variables for a dark color scheme.
 *      - Provides complete styles for all components to ensure a consistent dark mode.
 *      - Adjusts colors, shadows, borders, and text styles for a dark look and feel.
 *      - Includes specific overrides for Select2 dropdowns, load more buttons, and other elements
 *      - Ensures complete compatibility with the WonderfulFAQs dark theme.
 *  @license Proprietary. Unauthorized use, modification, or distribution is strictly prohibited.
 */

.theme-dark {
    /* -------------------- */
    /* Root-Level Variables Overrides */
    /* -------------------- */
    
    /* Base Colors */
    --wf-color-background: #121212;
    --wf-color-text: #e0e0e0;
    --wf-color-primary: #4ecdc4;
    --wf-color-accent: #ff6b6b;
    --wf-color-overlay: rgba(0, 0, 0, 0.8); /* Darker overlay */
    --wf-color-border: #444444;  /* Dark border */

    /* Container Customizations */
     --faq-container-background-color: #1e1e1e;
    --faq-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    /* Search Box Customizations */
    --faq-search-background: #333;
    --faq-search-color: #fff;
    --faq-search-border-color: #666;
    --faq-search-focus-border-color: #ff8b8b;
    --faq-search-focus-box-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
      --faq-search-placeholder-text-color: #ccc;


    /* FAQ Card Customizations */
    --faq-card-background-color: #2c2c2c;
    --faq-card-border-color: #666;
    --faq-card-hover-background-color: #444444;
    --faq-card-hover-border-color: #888;
    --faq-card-shadow-dark: 0 4px 6px rgba(255,255,255,0.1);
    --faq-card-shadow-hover-dark: 0 8px 12px rgba(255,255,255,0.2);
    --faq-card-text-color: #ffffff;

     /* Modal Customizations */
      --faq-modal-bg: #1e1e1e;
    --faq-modal-text-color: #f5f5f5;
        --faq-modal-border-color: #ff6b6b;
      --faq-modal-question-text-color: #ffffff;
    --faq-modal-answer-text-color: #ffffff;
    --faq-modal-close-icon-background-color: #ff6b6b;
    --faq-modal-close-icon-color: #ffffff;
    --faq-modal-close-icon-hover-background-color: #ff4c4c;
     --faq-modal-close-icon-hover-color: #ffffff;

     /* Button Customizations */
    --faq-button-background-color: #2c3e50;
    --faq-button-hover-background-color: #34495e;
    --faq-button-border-color: #34495e;
    --faq-button-text-color: #fff;
    
    /* Load More Button Customizations */
    --faq-load-more-background-color: #2980b9;
     --faq-load-more-hover-background-color: #1c5980;
     --faq-load-more-text-color: #ffffff;
    --faq-load-more-hover-text-color: #ffffff;
        --faq-load-more-spinner-color: #ffffff;
    --faq-load-more-border-color: #1c5980;
   
      /* Suggestions Box Customizations */
        --faq-suggestions-background-color: #2c2c2c;
      --faq-suggestions-text-color: #ffffff;
        --faq-suggestions-hover-background-color: #444444;
        --faq-suggestions-hover-text-color: #ffffff;
    

    /* Highlight Customization for Search Matches */
   --search-highlight-background-color-dark: #000;
    --search-highlight-text-color-dark: #ffffff;
    --search-highlight-font-weight-dark: bold;

  /* Tags Customizations */
    --faq-tag-background-color: #c0392b;
    --faq-tag-text-color: #ffffff;
        --faq-tag-hover-background-color: #444;
     --faq-tag-hover-text-color: #fff;

    /* Related FAQs Customization */
    --faq-related-link-color: #4ecdc4;
     --faq-related-link-hover-color: #2596be;
       --faq-related-border-top-color: #666666;
       --faq-related-heading-color: #ffffff;

        /* Theme Switch Customization */
   --faq-theme-toggle-background-color: #000000;
      --faq-theme-toggle-icon-color: #ffffff;
        --faq-theme-toggle-hover-background-color: #444444;
       --faq-theme-toggle-hover-icon-color: #ffffff;
        --faq-theme-toggle-border-color: #666666;

        /* Select2 Customization Variables */
    /* Selection */
    --select2-selection-text-color: #ffffff;
        --select2-selection-background-color: #333333;
        --select2-selection-border-color: #888888;

    /* Options */
   --select2-option-background-color: #2c2c2c;
   --select2-option-text-color: #ffffff;
       --select2-option-hover-background-color: #444;
       --select2-option-hover-text-color: #fff;
        --select2-clear-button-color: #ffffff; /* Added to control color in dark theme */
    --select2-clear-button-hover-color: #ddd; /* Added to control hover color in dark theme */


     /* Dark mode specific styles for Enhanced Related Qs */
    .theme-dark .faq-related-faqs li {
        background: linear-gradient(
           to right,
            rgba(255, 255, 255, 0.03),
           rgba(255, 255, 255, 0.07)
        );
    }

    .theme-dark .faq-related-faqs li:hover {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.05),
           rgba(255, 255, 255, 0.1)
        );
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }
}