/*
 *  @author Just Wonderful Things
 *  @website justwonderfulthings.com
 *  @file /wfassets/css/wonderfulfaqs.css
 *  @description This file provides the main stylesheet for the WonderfulFAQs system, defining
 *               the visual appearance of all components, and including support for dark mode and responsive layouts.
 *  @copyright 2024 Just Wonderful Things. All rights reserved.
 *  @features
 *      - Dynamic CSS variable usage for extensive customization.
 *      - Responsive design using media queries.
 *      - Detailed styles for FAQ cards, modals, and search components.
 *      - Theme support including dark and high contrast modes.
 *      - Animations for modal and dynamic elements.
 *      - Styles for interactive components like the theme switch and load more button.
 *      - Select2 and tag stylings
 *      - Accessibility enhancements including focus management
 *  @license Proprietary. Unauthorized use, modification, or distribution is strictly prohibited.
 */

:root {
    /* -------------------- */
    /* Root-Level Variables */
    /* -------------------- */
    
    /* Base Colors */
    --wf-color-primary: #3498db;
    --wf-color-secondary: #2ecc71;
    --wf-color-background: #ffffff;
    --wf-color-text: #2c3e50;
    --wf-color-accent: #e74c3c;
    --wf-color-overlay: rgba(0, 0, 0, 0.7);
    --wf-color-border: #e4e4e4;
    --medium-gray: #888888;

    /* Dark Mode Colors */
    --wf-dark-color-background: #121212;
    --wf-dark-color-text: #e0e0e0;
    --wf-dark-color-primary: #4ecdc4;
    --wf-dark-color-accent: #ff6b6b;

    /* Typography */
    --wf-font-family: 'Inter', Arial, sans-serif;
    --wf-font-size-base: 16px;
    --wf-line-height: 1.6;

    /* Spacing */
    --wf-spacing-xs: 0.5rem;
    --wf-spacing-sm: 1rem;
    --wf-spacing-md: 1.5rem;
    --wf-spacing-lg: 2rem;

    /* Border Radius */
    --wf-border-radius: 8px;

    /* Transitions */
    --wf-transition-speed: 0.3s ease-in-out;

    /* ---------------------------------- */
    /* UI Customization Variables         */
    /* (Settable via JavaScript if needed)*/
    /* ---------------------------------- */

    /* Global Font Family */
    --faq-global-font-family: var(--wf-font-family);

    /* Container Customizations */
    --faq-container-max-width: 1200px;
    --faq-container-padding: 1.5rem;
    --faq-container-margin: 0 auto;
    --faq-container-background-color: #ffffff;
    --faq-container-border-radius: 8px;
    --faq-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Search Box Customizations */
    --faq-search-border-color: #000000;
    --faq-search-border-width: 2px;
    --faq-search-border-style: solid;
    --faq-search-border-radius: 8px;
    --faq-search-height: 80px;
    --faq-search-placeholder-font-size: 16px;
    --faq-search-placeholder-text-color: #888;
    --faq-search-color: #000000;
    --faq-search-font-family: var(--faq-global-font-family);
    --faq-search-padding: 8px;
    --faq-search-margin: 20px;
    --faq-search-background: #ffffff;
    --faq-search-focus-border-color: #e74c3c;
    --faq-search-focus-box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
    --faq-search-focus-border-width: 2px;
    --faq-search-border-color-dark: #000000;
    --faq-search-placeholder-text-color-dark: #888;
    --faq-search-color-dark: #000000;
    --faq-search-background-dark: #ffffff;
    --faq-search-focus-border-color-dark: #e74c3c;
    --faq-search-focus-box-shadow-dark: 0 0 5px rgba(231, 76, 60, 0.3);

    /* Heading Customizations */
    --faq-heading-font-size: 20px;
    --faq-heading-line-height: 1.5;
    --faq-heading-font-weight: 700;
    --faq-heading-font-family: inherit;
    --faq-heading-text-align: left;
    --faq-heading-letter-spacing: normal;
    --faq-heading-text-color: inherit;

    /* FAQ Card Customizations */
    --faq-card-font-size: 20px;
    --faq-card-line-height: 1.5;
    --faq-card-font-weight: 700;
    --faq-card-font-family: var(--faq-global-font-family);
    --faq-card-text-align: left;
    --faq-card-letter-spacing: normal;
    --faq-card-text-color: inherit;
    --faq-card-border-color: #ddd;
    --faq-card-border-width: 1px;
    --faq-card-border-style: solid;
    --faq-card-border-radius: 8px;
    --faq-card-background-color: #fff;
    --faq-card-shadow: 0 4px 6px rgba(0,0,0,0.1);
    --faq-card-hover-background-color: #f9f9f9;
    --faq-card-hover-border-color: #ccc;
    --faq-card-padding: 20px;
    --faq-card-margin: 10px;
    --faq-card-shadow-hover: 0 8px 12px rgba(0, 0, 0, 0.2);
    --faq-card-transform-hover: translateY(-5px);
    --faq-card-text-color-dark: #ffffff;
    --faq-card-background-color-dark: #2c2c2c;
    --faq-card-border-color-dark: #ddd;
    --faq-card-shadow-dark: 0 4px 6px rgba(0,0,0,0.1);
    --faq-card-hover-background-color-dark: #444444;
    --faq-card-hover-border-color-dark: #ccc;
    --faq-card-shadow-hover-dark: 0 8px 12px rgba(0, 0, 0, 0.2);

    /* Modal Customizations */
     --faq-modal-content-font-family: var(--faq-global-font-family);
    --faq-typing-container-font-family: var(--faq-global-font-family);
    --faq-modal-question-font-family: var(--faq-global-font-family);
    --faq-modal-answer-font-family: var(--faq-global-font-family);
    --faq-modal-padding: 20px;
    --faq-modal-question-font-size: 20px;
    --faq-modal-answer-font-size: 18px;
    --faq-modal-answer-font-family: var(--faq-global-font-family);
    --faq-modal-line-height: 1.6;
    --faq-modal-font-weight-question: bold;
    --faq-modal-font-weight-answer: normal;
    --faq-modal-bg: #000000;
    --faq-modal-text-color: #f5f5f5;
    --faq-modal-border-color: #fff500;
    --faq-modal-border-width: 2px;
    --faq-modal-border-style: solid; /* Added border-style */
    --faq-modal-border: var(--faq-modal-border-width) var(--faq-modal-border-style) var(--faq-modal-border-color);
    --faq-modal-open-animation: modalOpen 0.4s ease;
    --faq-modal-close-animation: modalClose 0.4s ease;
    --faq-modal-close-width: 2rem;
    --faq-modal-close-height: 2rem;
    --faq-modal-close-line-height: 2rem;
    --faq-modal-close-icon-hover-color: #ff6b6b;
    --faq-modal-close-icon-background-color: #e74c3c;
    --faq-modal-close-icon-hover-background-color: #ff6b6b;
    --faq-modal-question-text-color: #f5f5f5;
    --faq-modal-answer-text-color: #f5f5f5;

    /* Layout / Grid Customizations */
    --faq-grid-gap: 20px;
    --faq-max-width: 1200px;

    /* Button Customizations */
    --faq-button-background-color: #3498db;
    --faq-button-hover-background-color: #2980b9;
    --faq-button-border-color: #2980b9;
    --faq-button-border-style: solid;
    --faq-button-border-width: 2px;
    --faq-button-border-radius: 4px;
    --faq-button-font-size: 16px;
    --faq-button-padding: 10px 20px;
    --faq-button-margin: 20px auto 0;
    --faq-button-text-color: #fff;
    --faq-button-text-transform: uppercase;
    --faq-button-border: var(--faq-button-border-width) var(--faq-button-border-style) var(--faq-button-border-color);

    /* Accessibility Customizations */
    --faq-focus-outline-color: #e74c3c;
    --faq-focus-outline-width: 2px;

    /* Theme Switch Customization */
    --faq-theme-toggle-icon-color: #ffffff;
    --faq-theme-toggle-background-color: #3498db;
    --faq-theme-toggle-hover-icon-color: #ffffff;
    --faq-theme-toggle-hover-background-color: #2980b9;
    --faq-theme-toggle-border-color: #2980b9;
    --faq-theme-toggle-border-radius: 50%;
    --faq-theme-toggle-size: 2rem;
    --faq-theme-toggle-border-color: #2980b9;

    /* Load More Button Customizations */
    --faq-load-more-text-color: #ffffff;
    --faq-load-more-background-color: #000000;
    --faq-load-more-hover-background-color: #555555;
    --faq-load-more-hover-text-color: #ffffff;
    --faq-load-more-border-radius: 4px;
    --faq-load-more-text-transform: uppercase;
    --faq-load-more-border-width: 2px;
    --faq-load-more-border-style: solid;
    --faq-load-more-border-color: #000000;
    --faq-load-more-hover-border-color: #000000;
    --faq-load-more-border: var(--faq-load-more-border-width) var(--faq-load-more-border-style) var(--faq-load-more-border-color);
    --faq-load-more-spinner-color: #ffffff;
    --faq-load-more-spinner-size: 1rem;
    --faq-load-more-spinner-speed: 1s;
    --faq-load-more-delay: 500ms;
    --faq-load-more-background-color-dark: #2980b9;
    --faq-load-more-border-color-dark: #2980b9;
    --faq-load-more-text-color-dark: #ffffff;
    --faq-load-more-hover-background-color-dark: #1c5980;
    --faq-load-more-hover-text-color-dark: #ffffff;
    --faq-load-more-hover-border-color-dark: #ffffff;
    --faq-load-more-font-family-dark: Tahoma, sans-serif;
    --faq-load-more-font-weight-dark: 600;

    /* Suggestions Box Customizations */
    --faq-suggestions-border-color: #000;
    --faq-suggestions-border-width: 2px;
    --faq-suggestions-border-style: solid;
    --faq-suggestions-border-radius: 8px;
    --faq-suggestions-background-color: #ffffff;
    --faq-suggestions-text-color: #333333;
    --faq-suggestions-font-size: 19px;
    --faq-suggestions-font-weight: normal;
    --faq-suggestions-message-text-align: center;
    --faq-suggestions-message-padding: 1rem 0;
    --faq-suggestions-message-text-color: #999999;
    --faq-suggestions-message-font-size: 14px;
    --faq-suggestions-message-font-weight: normal;
    --faq-suggestions-no-suggestions-text: 'No suggestions found.';
    --faq-suggestions-border-visible: true;
    
    /* Highlight Customization for Search Matches */
    --search-highlight-background-color: #ffeb3b;
    --search-highlight-text-color: #000000;
     --search-highlight-hover-background-color: #ffeb3b;
    --search-highlight-hover-text-color: #000000;
    --search-highlight-border-radius: 4px;
    --search-highlight-font-weight: bold;
    --search-highlight-background-color-dark: #000;
    --search-highlight-text-color-dark: #000000;
    --search-highlight-hover-background-color-dark: #000;
    --search-highlight-hover-text-color-dark: #ffffff;
    --search-highlight-font-weight-dark: bold;

    /* Tags Customizations */
    --faq-tag-background-color: #000000;
    --faq-tag-text-color: #ffffff;
    --faq-tag-hover-background-color: #c0392b;
    --faq-tag-hover-text-color: #ffffff;
    --faq-tag-border-radius: 4px;
    --faq-tag-font-size: 0.8rem;
    --faq-tag-padding: 0.5rem 0.75rem;
    --faq-tag-margin-right: 0.3rem;
    --faq-tag-margin-bottom: 0.3rem;
     --faq-tag-font-family: var(--faq-global-font-family);
    --faq-tag-font-weight: normal;
    --faq-tag-background-color-dark: #000000;
    --faq-tag-text-color-dark: #ffffff;
    --faq-tag-hover-background-color-dark: #c0392b;
    --faq-tag-hover-text-color-dark: #ffffff;

    /* Related FAQs Customization */
    --faq-related-heading-color: #e74c3c;
    --faq-related-heading-font-size: 1.2rem;
    --faq-related-link-font-size: 17px;
     --faq-related-list-style-type: disc;
    --faq-related-list-padding-left: 1.5rem;
     --faq-related-link-color: #3498db;
     --faq-related-link-hover-color: #2980b9;
    --faq-related-max-items: 3;
    --faq-related-heading-font-family: var(--faq-global-font-family);
    --faq-related-links-font-family: var(--faq-global-font-family);
     --faq-related-heading-font-weight: 700;
     --faq-related-links-font-weight: normal;
    --faq-related-border-top-width: 1px;
     --faq-related-border-top-style: solid;
    --faq-related-border-top-color: #ddd;

    /* Select2 Customization Variables */
    /* Container */
    --select2-container-height: 48px;
    --select2-container-padding: 0.5rem 0.75rem;
    --select2-container-font-family: inherit;
    --select2-container-font-size: 16px;
    --select2-container-text-color: #333333;
    --select2-container-background-color: #f1f2f5;
    --select2-container-border-color: #000000;
    --select2-container-border-width: 2px;
    --select2-container-border-style: solid;
    --select2-container-border-radius: 4px;
    
    /* Dropdown */
     --select2-dropdown-background-color: #ffffff;
    --select2-dropdown-border-color: #000000;
   --select2-dropdown-border-width: 2px;
    --select2-dropdown-border-style: solid;
    --select2-dropdown-border-radius: 4px;
    --select2-dropdown-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --select2-dropdown-spacing: 8px;
   --select2-dropdown-z-index: 9999;

    /* Options */
   --select2-option-background-color: #ffffff;
    --select2-option-text-color: #000000;
     --select2-option-font-family: inherit;
     --select2-option-font-size: 14px;
   --select2-option-hover-background-color: #f1f1f1;
     --select2-option-hover-text-color: #000000;

    /* Selection */
    --select2-selection-text-color: #000000;
    --select2-selection-background-color: #eeeeee;
   --select2-selection-border-color: #cccccc;
    --select2-selection-border-width: 2px;
   --select2-selection-border-style: solid;
    --select2-selection-border-radius: 14px;
    --select2-selection-font-family: inherit;
    --select2-selection-font-size: 16px;
    --select2-selection-focus-border-color: #e74c3c;
    --select2-selection-focus-box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
    --select2-selection-text-color-dark: #ffffff;
    --select2-selection-background-color-dark: #333333;
    --select2-selection-border-color-dark: #888888;
    --select2-selection-border-width-dark: 2px;
    --select2-selection-border-style-dark: solid;
    --select2-selection-border-radius-dark: 14px;
    --select2-selection-font-family-dark: inherit;
    --select2-selection-font-size-dark: 16px;
    --select2-selection-focus-border-color-dark: #e74c3c;
    --select2-selection-focus-box-shadow-dark: 0 0 5px rgba(231, 76, 60, 0.3);
    
    /* Select2 clear button size */
    --select2-clear-button-size: 0.8em;
    --select2-clear-button-line-height: 1em;
    --select2-clear-button-color: #000;  /* Default color */
    --select2-clear-button-hover-color: #333;  /* Default hover color */
    --select2-clear-button-color-dark: #ddd;  /* Added default color for dark theme */
    --select2-clear-button-hover-color-dark: #fff; /* Added default hover 

     /* Load More Button Spinner */
    --faq-load-more-spinner-color: #ffffff;
    --faq-load-more-spinner-size: 1rem;
     --faq-load-more-spinner-speed: 1s;

     /* Dark mode variables */
      --faq-suggestions-hover-background-color-dark: #444444;
     --faq-suggestions-hover-text-color-dark: #ffffff;
}
    /* Animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

     @keyframes fadeInLeft {
       from {
            opacity: 0;
            transform: translateX(-20px);
       }
        to {
           opacity: 1;
            transform: translateX(0);
       }
     }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
   }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
       40% { transform: translateY(-10px); }
       60% { transform: translateY(-5px); }
    }

    /* -------------------- */
    /* Base Reset           */
    /* -------------------- */
    .wonderful-faqs-container * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* -------------------- */
    /* Main Container       */
    /* -------------------- */
    .wonderful-faqs-container {
        font-family: var(--faq-global-font-family);
        font-size: var(--wf-font-size-base);
        line-height: var(--wf-line-height);
       color: var(--wf-color-text);
        background-color: var(--faq-container-background-color);
        padding: var(--faq-container-padding);
       border-radius: var(--faq-container-border-radius);
        box-shadow: var(--faq-container-box-shadow);
        max-width: var(--faq-container-max-width);
        margin: var(--faq-container-margin);
        transition: background-color var(--wf-transition-speed), color var(--wf-transition-speed);
       position: relative; /* For positioning the theme switch button if needed */
    }

    /* Dark Mode Container */
   .wonderful-faqs-container.theme-dark {
       background-color: var(--wf-dark-color-background);
       color: var(--wf-dark-color-text);
    }

    .wonderful-faqs-container.theme-dark .faq-card {
       background-color: var(--faq-card-background-color-dark);
       border-color: var(--faq-card-border-color-dark);
       color: var(--faq-card-text-color-dark);
   }

    .wonderful-faqs-container.theme-dark .faq-card:hover {
        background-color: var(--faq-card-hover-background-color-dark);
        border-color: var(--faq-card-hover-border-color-dark);
        box-shadow: var(--faq-card-shadow-hover-dark);
    }

    /* -------------------- */
    /* Search Container     */
    /* -------------------- */
    .wonderful-faqs-container .faq-search-container {
        position: relative;
        margin-bottom: var(--faq-search-margin);
    }

    .wonderful-faqs-container .faq-search-input {
        width: 100%;
        padding: var(--faq-search-padding);
        border: var(--faq-search-border-width) var(--faq-search-border-style) var(--faq-search-border-color);
        border-radius: var(--faq-search-border-radius);
        font-size: var(--faq-search-placeholder-font-size);
        font-family: var(--faq-search-font-family);
        background-color: var(--faq-search-background);
        transition: border-color var(--wf-transition-speed), box-shadow var(--wf-transition-speed);
        height: var(--faq-search-height);
        color: var(--faq-search-color);
    }

    .wonderful-faqs-container .faq-search-input::placeholder {
        color: var(--faq-search-placeholder-text-color) !important;
        font-size: var(--faq-search-placeholder-font-size);
    }

    .wonderful-faqs-container .faq-search-input:focus {
        outline: none;
        border-color: var(--faq-search-focus-border-color);
        box-shadow: var(--faq-search-focus-box-shadow);
        border-width: var(--faq-search-focus-border-width);
    }
    
    /* Dark mode styles */
    .theme-dark .wonderful-faqs-container .faq-search-input {
        width: 100%;
        padding: var(--faq-search-padding);
        border: var(--faq-search-border-width) var(--faq-search-border-style) var(--faq-search-border-color-dark) !important;
        border-radius: var(--faq-search-border-radius);
        font-size: var(--faq-search-placeholder-font-size);
        font-family: var(--faq-search-font-family);
        background-color: var(--faq-search-background-dark);
        transition: border-color var(--wf-transition-speed), box-shadow var(--wf-transition-speed);
        height: var(--faq-search-height);
        color: var(--faq-search-color-dark);
    }

    .theme-dark .wonderful-faqs-container .faq-search-input::placeholder {
        color: var(--faq-search-placeholder-text-color-dark) !important;
        font-size: var(--faq-search-placeholder-font-size);
    }

    .theme-dark .wonderful-faqs-container .faq-search-input:focus {
        outline: none;
        border-color: var(--faq-search-focus-border-color-dark);
        box-shadow: var(--faq-search-focus-box-shadow-dark);
        border-width: var(--faq-search-focus-border-width);
    }

    /* Suggestions Dropdown */
    .faq-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--faq-suggestions-background-color);
        border-radius: var(--faq-suggestions-border-radius);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 100; /* Increased z-index to prevent interference */
        max-height: 200px;
        overflow-y: auto;
        display: none;  /* Hidden by default */
         border: none;   /* Remove default border */
         pointer-events: auto; /* Ensure it can receive pointer events */
    }

   .faq-suggestions.active {
       display: block;
       border: var(--faq-suggestions-border-width) var(--faq-suggestions-border-style) var(--faq-suggestions-border-color);
    }

    .faq-suggestions .faq-suggestion {
        padding: var(--wf-spacing-sm);
        cursor: pointer;
        transition: background-color var(--wf-transition-speed);
        color: var(--faq-suggestions-text-color);
        font-size: var(--faq-suggestions-font-size);
        font-weight: var(--faq-suggestions-font-weight);
    }

    .faq-suggestions .faq-suggestion:hover {
        background-color: var(--faq-suggestions-hover-background-color);
        color: var(--faq-suggestions-hover-text-color);
    }

    .faq-suggestions .faq-suggestion.no-suggestions {
        color: var(--faq-suggestions-message-text-color);
       font-size: var(--faq-suggestions-message-font-size);
        text-align: var(--faq-suggestions-message-text-align);
        padding: var(--faq-suggestions-message-padding);
       font-weight: var(--faq-suggestions-message-font-weight);
        cursor: default;
   }
    
    .theme-dark .faq-suggestion:hover {
        background-color: var(--faq-suggestions-hover-background-color-dark);
        color: var(--faq-suggestions-hover-text-color-dark);
    }

    /* -------------------- */
    /* FAQ Grid             */
    /* -------------------- */
    .faq-grid {
        display: grid;
        gap: var(--faq-grid-gap);
        /* By default for wide screens we want 3 columns, but we’ll override in media queries below */
       grid-template-columns: repeat(var(--faq-grid-desktop-columns), 1fr);
        width: 100%;
   }

    /* Mobile breakpoint: max-width: 576px => 1 column !important */
    @media (max-width: 576px) {
        .faq-grid {
            grid-template-columns: repeat(var(--faq-grid-mobile-columns), 1fr) !important;
       }
    }

    /* Tablet breakpoint: 577px to 768px => 2 columns !important */
    @media (min-width: 577px) and (max-width: 768px) {
       .faq-grid {
            grid-template-columns: repeat(var(--faq-grid-tablet-columns), 1fr) !important;
       }
    }

     /* Between tablet & desktop: 769px to 992px => 2 columns !important */
    @media (min-width: 769px) and (max-width: 992px) {
        .faq-grid {
            grid-template-columns: repeat(var(--faq-grid-tablet-columns), 1fr) !important;
        }
    }


    /* Larger desktops: min-width: 993px => repeat(var(--faq-grid-desktop-columns), 1fr) !important */
   @media (min-width: 993px) {
        .faq-grid {
            grid-template-columns: repeat(var(--faq-grid-desktop-columns), 1fr) !important;
       }
   }

    /* FAQ Card */
    .faq-card {
       padding: var(--faq-card-padding);
       background-color: var(--faq-card-background-color);
       border: var(--faq-card-border-width) var(--faq-card-border-style) var(--faq-card-border-color);
       border-radius: var(--faq-card-border-radius);
        box-shadow: var(--faq-card-shadow);
        cursor: pointer;
        transition: transform var(--wf-transition-speed),
                     box-shadow var(--wf-transition-speed),
                    background-color var(--wf-transition-speed),
                    border-color var(--wf-transition-speed);
       word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        margin: var(--faq-card-margin);
   }

    .faq-card:hover {
        transform: var(--faq-card-transform-hover);
        box-shadow: var(--faq-card-shadow-hover) !important;
        background-color: var(--faq-card-hover-background-color) !important;
        border-color: var(--faq-card-hover-border-color) !important;
   }

    /* FAQ Card Heading */
    .faq-card h3 {
        font-size: var(--faq-card-font-size);
        line-height: var(--faq-card-line-height);
        font-weight: var(--faq-card-font-weight);
        font-family: var(--faq-card-font-family);
        text-align: var(--faq-card-text-align);
        letter-spacing: var(--faq-card-letter-spacing);
        color: var(--faq-card-text-color);
        margin-bottom: var(--wf-spacing-sm);
   }
   
    /* FAQ Card Dark Mode */
    .theme-dark .faq-card {
        padding: var(--faq-card-padding);
        color: var(--faq-card-text-color-dark);
        background-color: var(--faq-card-background-color-dark);
        border: var(--faq-card-border-width) var(--faq-card-border-style) var(--faq-card-border-color-dark);
        border-radius: var(--faq-card-border-radius);
        box-shadow: var(--faq-card-shadow-dark);
        cursor: pointer;
        transition: transform var(--wf-transition-speed),
                     box-shadow var(--wf-transition-speed),
                    background-color var(--wf-transition-speed),
                    border-color var(--wf-transition-speed);
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        margin: var(--faq-card-margin);
   }

    .theme-dark .faq-card:hover {
        color: var(--faq-card-hover-text-color-dark);
        transform: var(--faq-card-transform-hover);
        box-shadow: var(--faq-card-shadow-hover-dark);
        background-color: var(--faq-card-hover-background-color-dark);
        border-color: var(--faq-card-hover-border-color-dark);
   }

    /* FAQ Card Heading */
    .theme-dark .faq-card h3 {
        font-size: var(--faq-heading-font-size);
        line-height: var(--faq-heading-line-height);
        font-weight: var(--faq-heading-font-weight);
        font-family: var(--faq-heading-font-family);
        text-align: var(--faq-heading-text-align);
        letter-spacing: var(--faq-heading-letter-spacing);
        color: var(--faq-card-text-color-dark);
        margin-bottom: var(--wf-spacing-sm);
   }

   /* -------------------- */
   /* Load More Button     */
   /* -------------------- */
    .faq-load-more {
        display: block;
        margin: var(--faq-load-more-margin, var(--faq-button-margin));
        padding: var(--faq-load-more-padding, var(--faq-button-padding));
       font-size: var(--faq-button-font-size);
        color: var(--faq-load-more-text-color);
       background-color: var(--faq-load-more-background-color);
        border: var(--faq-load-more-border);
       border-radius: var(--faq-load-more-border-radius);
        cursor: pointer;
        transition: background-color var(--wf-transition-speed),
                     color var(--wf-transition-speed),
                    transform var(--wf-transition-speed);
       text-align: center;
       text-transform: var(--faq-load-more-text-transform);
        position: relative;
       overflow: hidden;
        display: flex;
       align-items: center;
       justify-content: center;
        font-family: var(--faq-load-more-font-family, inherit);
        font-weight: var(--faq-load-more-font-weight, 600);
       padding: 12px 24px;
   }

    .faq-load-more::after {
        content: '';
        position: absolute;
        top: 50%;
       left: -100%;
       width: 100%;
       height: 100%;
       background: rgba(255, 255, 255, 0.2);
        transform: translateY(-50%);
        transition: left 0.3s;
   }

    .faq-load-more:hover::after {
       left: 100%;
   }

    .faq-load-more:hover {
        background-color: var(--faq-load-more-hover-background-color);
        color: var(--faq-load-more-hover-text-color);
       transform: scale(1.05);
   }

   .faq-load-more.loading {
        pointer-events: none;
        opacity: 0.7;
    }

    .faq-load-more.loading::after {
        content: '';
       display: inline-block;
        width: var(--faq-load-more-spinner-size);
        height: var(--faq-load-more-spinner-size);
        border: 2px solid var(--faq-load-more-spinner-color);
       border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin var(--faq-load-more-spinner-speed) linear infinite;
       margin-left: 10px;
   }

   /* Spin Animation for Load More */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* -------------------- */
   /* Modal Styles         */
   /* -------------------- */
    .faq-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--wf-color-overlay);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(5px);
   }

    .faq-modal-overlay.closing {
        animation: overlayFadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }


    .faq-modal-overlay.fade-out {
       animation: var(--faq-modal-close-animation);
    }


   .faq-modal {
       background-color: var(--faq-modal-bg);
       border-radius: var(--wf-border-radius);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
       max-width: 600px;
        width: 90%;
       position: relative;
        animation: var(--faq-modal-open-animation);
   }

    .faq-modal-content {
        padding: var(--faq-modal-padding);
        line-height: var(--faq-modal-line-height);
       border-radius: var(--wf-border-radius);
       background-color: var(--faq-modal-bg);
        position: relative;
        border: var(--faq-modal-border);
       font-family: var(--faq-modal-content-font-family);
       padding-right: 3rem; /* Prevent content overlap with close button */
    }

    /* Updated Close Button Styles */
   .faq-modal-close {
        width: var(--faq-modal-close-width); /* Increased width */
        height: var(--faq-modal-close-height); /* Increased height */
        line-height: var(--faq-modal-close-line-height); /* Updated line-height to match size */
        text-align: center;
        border-radius: 50%;
        background-color: var(--faq-modal-close-icon-background-color);
        color: var(--faq-modal-close-icon-color);
        font-size: var(--faq-modal-close-icon-size);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: var(--wf-spacing-xs);
        right: var(--wf-spacing-xs);
        cursor: pointer;
        transition: background-color var(--wf-transition-speed), transform 0.2s;
        z-index: 1001; /* Ensure it's above other modal content */
   }

    /* Added animation for closing the modal */
   .faq-modal-close.animate-close {
        animation: closeButtonAnimation 0.3s forwards;
    }

    /* Close Button Hover */
    .faq-modal-close:hover {
       background-color: var(--faq-modal-close-icon-hover-background-color);
       color: var(--faq-modal-close-icon-hover-color);
       transform: rotate(90deg) scale(1.1);
   }

   /* Animation for Close Button */
    @keyframes closeButtonAnimation {
        from {
            transform: rotate(0deg) scale(1);
        }
       to {
           transform: rotate(90deg) scale(1.1);
        }
    }


    /* Modal Close Animation */
   .faq-modal.closing {
       animation: modalCloseAnimation 0.4s forwards;
   }

    @keyframes modalCloseAnimation {
        from {
           opacity: 1;
            transform: scale(1) translateY(0);
        }
        to {
            opacity: 0;
            transform: scale(0.95) translateY(20px);
       }
    }

    .faq-modal-content .faq-typing-container {
        margin-top: var(--wf-spacing-sm);
        margin-right: var(--wf-spacing-lg); /* Prevent content overlap with close button */
        font-size: var(--faq-modal-answer-font-size);
        font-family: var(--faq-modal-answer-font-family);
    }

   /* FAQ Modal Heading */
   .faq-modal-content h3 {
        font-size: var(--faq-modal-question-font-size);
        color: var(--faq-modal-question-text-color);
        line-height: var(--faq-modal-line-height);
        font-weight: var(--faq-modal-font-weight-question);
        margin-bottom: var(--wf-spacing-sm);
    }

   /* -------------------- */
    /* Theme Switch         */
   /* -------------------- */
    /* FAQ Controls */
   .faq-controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: var(--wf-spacing-md);
    }

   .faq-control-group {
       display: flex;
        flex-direction: column;
        width: 48%; /* side-by-side on large screens */
   }

    .faq-language-label,
   .faq-category-label {
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .faq-language-selector,
   .faq-category-filter {
        padding: 0.5rem 0.75rem;
        border: var(--select2-selection-border-width) solid var(--select2-selection-border-color);
        border-radius: var(--select2-selection-border-radius);
        font-size: var(--select2-selection-border-radius);
       background-color: var(--select2-selection-background-color);
        color: var(--select2-selection-text-color);
       transition: border-color var(--wf-transition-speed), box-shadow var(--wf-transition-speed);
        width: 100%;
    }

   .faq-language-selector:focus,
    .faq-category-filter:focus {
        outline: none;
        border-color: var(--select2-selection-focus-border-color);
       box-shadow: var(--select2-selection-focus-box-shadow);
       border-width: var(--select2-selection-border-width);
   }

    /* Stacking for screens <= 768px (tablet) */
    @media (max-width: 768px) {
       .faq-controls {
            flex-direction: column;
       }
        .faq-control-group {
           width: 100% !important;
        }
    }

    /* Theme Switch Container */
   .faq-theme-switch {
        z-index: 1001;
        margin-bottom: var(--wf-spacing-sm);
        display: flex;
        align-items: center;
    }

     .faq-theme-switch--top-left {
        justify-content: flex-start;
   }

   .faq-theme-switch--top-center {
       justify-content: center;
       width: 100%;
    }

    .faq-theme-switch--top-right {
       justify-content: flex-end;
        width: 100%;
   }

    /* Theme Toggle Button */
   .faq-theme-toggle {
        color: var(--faq-theme-toggle-icon-color);
       background-color: var(--faq-theme-toggle-background-color);
        border: 2px solid var(--faq-theme-toggle-border-color);
       border-radius: var(--faq-theme-toggle-border-radius);
        width: var(--faq-theme-toggle-size);
       height: var(--faq-theme-toggle-size);
        font-size: calc(var(--faq-theme-toggle-size) / 1.5);
        cursor: pointer;
        transition: color var(--wf-transition-speed),
                   background-color var(--wf-transition-speed),
                    border-color var(--wf-transition-speed);
        display: flex;
        align-items: center;
        justify-content: center;
    }

   .faq-theme-toggle:hover {
        color: var(--faq-theme-toggle-hover-icon-color);
        background-color: var(--faq-theme-toggle-hover-background-color);
        border-color: var(--faq-theme-toggle-hover-border-color);
    }

    .faq-theme-toggle i {
        pointer-events: none; /* Prevent icon from capturing click events */
    }

   /* -------------------- */
    /* Marked Text in Modal */
    /* -------------------- */
    .wonderful-faqs-container .faq-typing-container mark {
        background-color: var(--search-highlight-background-color);
        color: var(--search-highlight-text-color);
        font-weight: var(--search-highlight-font-weight);
        border-radius: var(--faq-tag-border-radius, 4px);
        padding: 0 0.2rem;
    }

     /* Dark mode styles */
    .theme-dark .wonderful-faqs-container .faq-typing-container mark {
        background-color: var(--search-highlight-background-color-dark);
        color: var(--search-highlight-text-color-dark);
        font-weight: var(--search-highlight-font-weight-dark);
   }

    /* -------------------- */
   /* Related FAQs in Modal*/
   /* -------------------- */
    .faq-related-faqs {
       margin-top: var(--wf-spacing-md);
        padding-top: var(--wf-spacing-md);
       border-top: var(--faq-related-border-top-width) var(--faq-related-border-top-style) var(--faq-related-border-top-color);
   }

   .faq-related-faqs h4 {
       font-size: var(--faq-related-heading-font-size);
        margin-bottom: var(--wf-spacing-sm);
        color: var(--faq-related-heading-color);
        font-family: var(--faq-related-heading-font-family);
       font-weight: var(--faq-related-heading-font-weight);
   }

    .faq-related-faqs ul {
        list-style: var(--faq-related-list-style-type);
       padding-left: var(--faq-related-list-padding-left);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

   .faq-related-faqs li {
        background: linear-gradient(
            to right,
           rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.1)
        );
        border-left: var(--faq-related-border-left-width) var(--faq-related-border-left-color) solid;
        border-radius: var(--faq-related-border-radius);
       transition: all var(--wf-transition-speed);
        position: relative;
       overflow: hidden;
    }

   .faq-related-faqs li::before {
       content: '';
        position: absolute;
       top: 0;
        left: 0;
       width: 100%;
        height: 100%;
        background: linear-gradient(
            to right,
            var(--faq-related-list-item-before-bg-color1),
           var(--faq-related-list-item-before-bg-color2)
       );
        transform: translateX(-100%);
        transition: transform 0.3s ease;
   }

    .faq-related-faqs li:hover {
        transform: translateX(8px);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

     .faq-related-faqs li:hover::before {
       transform: translateX(0);
    }

   .faq-related-faqs a.faq-related-link {
        color: var(--faq-related-link-color);
        text-decoration: none;
        padding: 1rem 1.25rem;
       display: block;
        position: relative;
        font-size:  var(--faq-related-link-font-size);
       display: flex;
        align-items: center;
       gap: 0.75rem;
        font-family: var(--faq-related-links-font-family);
       font-weight: var(--faq-related-links-font-weight);
       transition: color 0.3s;
   }

     .faq-related-faqs a.faq-related-link::before {
       content: '→';
        font-family: system-ui;
        opacity: 0;
       transform: translateX(-10px);
        transition: all 0.3s ease;
    }

    .faq-related-faqs li:hover a.faq-related-link::before {
        opacity: 1;
        transform: translateX(0);
    }

    .faq-related-faqs a.faq-related-link:hover {
       color: var(--faq-related-link-hover-color);
    }


     /* 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);
   }

   /* -------------------- */
    /* Tags within FAQ Cards*/
   /* -------------------- */
   .faq-card .faq-tags {
       margin-top: var(--wf-spacing-xs);
        display: flex;
       flex-wrap: wrap;
    }

     .faq-card .faq-tag {
        background-color: var(--faq-tag-background-color);
        color: var(--faq-tag-text-color);
        border-radius: var(--faq-tag-border-radius);
        font-size: var(--faq-tag-font-size);
        padding: var(--faq-tag-padding);
        margin-right: var(--faq-tag-margin-right);
        margin-bottom: var(--faq-tag-margin-bottom);
        transition: background-color var(--wf-transition-speed), color var(--wf-transition-speed);
        font-family: var(--faq-tag-font-family);
        font-weight: var(--faq-tag-font-weight);
    }

    .faq-card .faq-tag:hover {
        background-color: var(--faq-tag-hover-background-color);
        color: var(--faq-tag-hover-text-color);
        cursor: default;
    }
    
    .theme-dark .faq-card .faq-tags {
       margin-top: var(--wf-spacing-xs);
        display: flex;
       flex-wrap: wrap;
    }

    .theme-dark .faq-card .faq-tag {
        background-color: var(--faq-tag-background-color-dark);
        color: var(--faq-tag-text-color-dark);
        border-radius: var(--faq-tag-border-radius);
        font-size: var(--faq-tag-font-size);
        padding: var(--faq-tag-padding);
        margin-right: var(--faq-tag-margin-right);
        margin-bottom: var(--faq-tag-margin-bottom);
        transition: background-color var(--wf-transition-speed), color var(--wf-transition-speed);
        font-family: var(--faq-tag-font-family);
        font-weight: var(--faq-tag-font-weight);
    }

    .theme-dark .faq-card .faq-tag:hover {
        background-color: var(--faq-tag-hover-background-color-dark);
        color: var(--faq-tag-hover-text-color-dark);
        cursor: default;
    }

    /* -------------------- */
    /* Select2 Customizations */
    /* -------------------- */

    /* Select2 Container */
   .select2-container {
        width: 100% !important;
        font-family: var(--select2-container-font-family) !important;
    }

    /* Select2 Selection */
   .select2-selection {
        display: flex !important; /* Added for vertical centering */
        align-items: center !important; /* Vertically centers the text */
        justify-content: space-between;
        height: var(--select2-container-height) !important;
        padding: var(--select2-container-padding) !important;
        font-size: var(--select2-container-font-size) !important;
        color: var(--select2-container-text-color) !important;
        background-color: var(--select2-container-background-color) !important;
        border: var(--select2-container-border-width) var(--select2-container-border-style) var(--select2-container-border-color) !important;
        border-radius: var(--select2-container-border-radius) !important;
        transition: border-color var(--wf-transition-speed), box-shadow var(--wf-transition-speed);
    }

   .select2-selection__rendered {
       color: var(--select2-selection-text-color) !important;
       /* Removed line-height to prevent conflict with Flexbox */
        white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
    }

    .select2-selection__arrow {
       height: var(--select2-container-height) !important;
        display: flex;
       align-items: center;
        justify-content: center;
    }

    /* added css for handling clear button visibility based on the config  */
    .select2-container--default .select2-selection__clear {
        display: block !important; /* Added to make sure that clear button is displayed when the config is true */
    }

    .select2-container--default.no-clear-button .select2-selection__clear {
        display: none !important;  /* Added to make sure that the clear button is not displayed when the config is false */
    }
    
    .select2-container--default .select2-selection__clear {
        font-size: var(--select2-clear-button-size) !important;
        line-height: var(--select2-clear-button-line-height) !important;
        width: var(--select2-clear-button-size) !important;
        height: var(--select2-clear-button-size) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--select2-clear-button-color); /* Added to control text color */
        opacity: 0.7;
        transition: opacity 0.3s, color 0.3s; /* Added transition to color as well */
        cursor: pointer;
    }
    
    .select2-container--default .select2-selection__clear:hover {
        color: var(--select2-clear-button-hover-color); /* Added to control hover text color */
        opacity: 1;
    }
    
    .theme-dark .select2-container--default .select2-selection__clear {
        color: var(--select2-clear-button-color-dark) !important; /* Added to control color in dark theme */
    }
    
    .theme-dark .select2-container--default .select2-selection__clear:hover {
      color: var(--select2-clear-button-hover-color-dark) !important; /* Added to control hover color in dark theme */
    }
    
    /* Select2 Dropdown */
    .select2-dropdown {
        background-color: var(--select2-dropdown-background-color) !important;
        border: var(--select2-dropdown-border-width) var(--select2-dropdown-border-style) var(--select2-dropdown-border-color) !important;
       border-radius: var(--select2-dropdown-border-radius) !important;
        box-shadow: var(--select2-dropdown-shadow) !important;
        padding: var(--select2-dropdown-spacing) !important;
        z-index: var(--select2-dropdown-z-index) !important;
   }

    /* Select2 Results */
   .select2-results__option {
        background-color: var(--select2-option-background-color) !important;
        color: var(--select2-option-text-color) !important;
       font-family: var(--select2-option-font-family) !important;
        font-size: var(--select2-option-font-size) !important;
        display: flex;
       align-items: center; /* Vertically centers the text */
    }

    .select2-results__option--highlighted {
        background-color: var(--select2-option-hover-background-color) !important;
        color: var(--select2-option-hover-text-color) !important;
   }

    /* Select2 Search Box Styles */
   .select2-search__field {
        width: 100% !important;
        padding: 0.5rem 0.75rem !important;
        border: 1px solid var(--faq-search-border-color) !important;
       border-radius: var(--wf-border-radius) !important;
        font-size: var(--faq-search-placeholder-font-size) !important;
        font-family: var(--faq-search-font-family) !important;
       background-color: var(--faq-search-background) !important;
        color: var(--faq-search-color) !important;
        transition: border-color var(--wf-transition-speed), box-shadow var(--wf-transition-speed);
        box-sizing: border-box;
   }

    .select2-search__field::placeholder {
       color: var(--faq-search-placeholder-text-color) !important;
       font-size: var(--faq-search-placeholder-font-size) !important;
   }

   .select2-search__field:focus {
        outline: none !important;
        border-color: var(--faq-search-focus-border-color) !important;
        box-shadow: var(--faq-search-focus-box-shadow) !important;
        border-width: var(--faq-search-focus-border-width) !important;
    }

     /* Select2 Theme Adjustments for Dark Mode */
   .theme-dark .select2-container--default .select2-selection--single {
        background-color: var(--select2-selection-background-color-dark) !important;
        color: var(--select2-selection-text-color-dark) !important;
        border-color: var(--select2-selection-border-color-dark) !important;
   }
   
   .theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: var(--select2-selection-text-color-dark) !important;
    }

    .theme-dark .select2-container--default .select2-selection--single:hover {
        background-color: var(--select2-selection-background-color-dark) !important;
        color: var(--select2-selection-text-color-dark) !important;
        border-color: var(--select2-selection-border-color-dark) !important;
   }

    .theme-dark .select2-container--default .select2-results__option--highlighted {
        background-color: var(--wf-dark-color-accent) !important;
        color: #ffffff !important;
    }

   .theme-dark .select2-dropdown {
        background-color: #2c2c2c !important;
        color: #ffffff !important;
   }

    .theme-dark .select2-results__option {
        background-color: #2c2c2c !important;
        color: #ffffff !important;
   }

   .theme-dark .select2-results__option--highlighted {
        background-color: var(--wf-dark-color-accent) !important;
        color: #ffffff !important;
    }

     /* -------------------- */
    /* Additional Styles     */
   /* -------------------- */

    /* Overlay Fade Animations */
    @keyframes overlayFadeIn {
       from {
            opacity: 0;
        }
        to {
            opacity: 1;
       }
    }

   @keyframes overlayFadeOut {
       from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
   }

    /* -------------------- */
   /* Responsive Adjustments */
    /* -------------------- */

    /* Ensure Select2 text remains centered vertically */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
       display: flex !important;
        align-items: center !important;
       height: 100% !important;
        padding-left: 0.75rem !important;
    }

   /* Ensuring Select2 arrow is vertically centered */
   .select2-container--default .select2-selection--single .select2-selection__arrow {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
       padding-right: 0.75rem !important;
    }

    /* -------------------- */
    /* Theme-Specific Styles */
    /* -------------------- */

    /* Dark Mode Adjustments */
    .theme-dark {
        --faq-container-background-color: var(--wf-dark-color-background);
        --faq-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        --faq-search-background: #1e1e1e;
        --faq-search-color: #e0e0e0;
        --faq-search-border-color: #4ecdc4;
        --faq-search-focus-border-color: #ff6b6b;
        --faq-search-focus-box-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
        --faq-card-background-color: #1e1e1e;
        --faq-card-border-color: #ddd;
        --faq-card-hover-background-color: #333333;
        --faq-card-hover-border-color: #ddd;
        --faq-tag-background-color: #c0392b;
        --faq-suggestions-background-color: #333333;
        --faq-suggestions-hover-background-color: #f0f0f0;
        --faq-suggestions-hover-text-color: #333333;
        --faq-suggestions-text-color: #ffffff;
        --faq-suggestions-hover-background-color: #555555;
        --faq-related-link-color: #3498db;
        --faq-related-link-hover-color: #2980b9;
    }

   /* High Contrast Mode Adjustments */
    .theme-highContrast {
        --wf-color-text: #000000;
        --wf-color-background: #ffff00;
        --wf-color-accent: #ff0000;
        --wf-color-border: #000000;
        --faq-suggestions-text-color: #000000;
        --faq-suggestions-background-color: #ffff00;
        --search-highlight-background-color: #ff0000;
        --search-highlight-text-color: #000000;
        --search-highlight-font-weight: bold;
   }

    /* Gold Theme Adjustments */
   .theme-gold {
        --wf-color-primary: #d4af37;
        --wf-color-secondary: #b8860b;
        --wf-color-background: #fdf8e1;
        --wf-color-text: #333333;
        --wf-color-accent: #8b4513;
        --faq-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        --faq-search-border-color: #d4af37;
        --faq-search-focus-border-color: #8b4513;
        --faq-card-border-color: #b8860b;
        --faq-card-hover-border-color: #8b4513;
        --faq-tag-background-color: #b8860b;
        --faq-related-link-color: #8b4513;
        --faq-related-link-hover-color: #d4af37;
        --search-highlight-background-color: #d4af37;
        --search-highlight-text-color: #333333;
        --search-highlight-font-weight: bold;
    }

    /* -------------------- */
   /* Select2 Related Styles */
   /* -------------------- */

   /* Highlighted option */
    .select2-results__option--highlighted {
        background-color: var(--select2-option-hover-background-color) !important;
        color: var(--select2-option-hover-text-color) !important;
   }

    /* Selected option */
   .select2-selection__rendered {
        color: var(--select2-selection-text-color) !important;
    }

   /* -------------------- */
    /* Media Queries for Responsiveness */
    /* -------------------- */

    /* Mobile Devices */
    @media (max-width: 576px) {
        .faq-grid {
           grid-template-columns: repeat(var(--faq-grid-mobile-columns), 1fr) !important;
       }
    }

    /* Tablet Devices */
   @media (min-width: 577px) and (max-width: 768px) {
        .faq-grid {
            grid-template-columns: repeat(var(--faq-grid-tablet-columns), 1fr) !important;
       }
    }

    /* Desktop Devices */
   @media (min-width: 769px) and (max-width: 992px) {
        .faq-grid {
            grid-template-columns: repeat(var(--faq-grid-tablet-columns), 1fr) !important;
       }
   }

    /* Large Desktop Devices */
    @media (min-width: 993px) {
        .faq-grid {
           grid-template-columns: repeat(var(--faq-grid-desktop-columns), 1fr) !important;
        }
   }

   /* Animation Classes for Load More Button */
    .fade-in {
        animation: fadeIn 0.5s forwards;
    }

    .slide-in {
       animation: slideIn 0.5s forwards;
    }

    .bounce-in {
        animation: bounceIn 0.5s forwards;
    }

 /* -------------------- */
    /* Base Styles Outside :root */
    /* -------------------- */

/* Ensure that mark elements are styled correctly outside of theme classes */
.faq-suggestions .faq-suggestion mark {
    background-color: var(--search-highlight-background-color);
    color: var(--search-highlight-text-color);
    font-weight: var(--search-highlight-font-weight);
    border-radius: 4px;
    padding: 0 0.2rem;
}

.faq-suggestions .faq-suggestion:hover mark {
    background-color: var(--search-highlight-hover-background-color);
    color: var(--search-highlight-hover-text-color);
}


.theme-dark .faq-suggestions .faq-suggestion mark {
    background-color: var(--search-highlight-background-color-dark);
    color: var(--search-highlight-text-color-dark);
    font-weight: var(--search-highlight-font-weight-dark);
}
    
.theme-dark .faq-suggestions .faq-suggestion:hover mark {
    background-color: var(--search-highlight-hover-background-color-dark);
    color: var(--search-highlight-hover-text-color-dark);
}


@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes modalOpen {
    from { opacity: 0; transform: scale(0.95) translateY(20px) rotateX(2deg); }
    to { opacity: 1; transform: scale(1) translateY(0) rotateX(0deg); }
}

@keyframes modalClose {
    from { opacity: 1; transform: scale(1) translateY(0) rotateX(0deg); }
    to { opacity: 0; transform: scale(0.95) translateY(20px) rotateX(-2deg); }
}

/* Example CSS for .fade-in, .slide-in, .bounce-in classes */
.fade-in {
    animation: fadeIn 0.5s forwards;
}

.slide-in {
    animation: slideIn 0.5s forwards;
}

.bounce-in {
    animation: bounceIn 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: translateY(20px); }
    50% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}