/**
 * FAQ Live Search - Styles
 * Updated to match main FAQ item styles
 */

/* =====================================
   Search Results Container
   ===================================== */
#faq-search-results {
    margin-top: 20px;
}

.faq-search-results-wrapper {
    animation: fadeIn 0.3s ease;
}

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

/* =====================================
   Results Count
   ===================================== */
.search-results-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--faq-text-medium, #666);
    margin-bottom: 20px;
    padding: 12px 20px;
    background: var(--faq-bg-light, #f9f9f9);
    border-left: 4px solid var(--faq-primary, #667eea);
    border-radius: 4px;
}

/* =====================================
   Search Results List
   ===================================== */
.faq-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* =====================================
   Search Result Item - Matches .faq-item
   ===================================== */
.faq-search-result-item {
    background: var(--faq-bg-white, #ffffff);
    border-radius: var(--faq-radius, 12px);
    box-shadow: var(--faq-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    overflow: hidden;
    transition: var(--faq-transition, all 0.3s ease);
}

.faq-search-result-item:hover {
    box-shadow: var(--faq-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

/* =====================================
   Search Result Header - Matches .faq-item-header
   ===================================== */
.faq-search-result-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 24px 24px;
    cursor: pointer;
    transition: var(--faq-transition, all 0.3s ease);
}

.faq-search-result-header-content {
    flex: 1;
    min-width: 0;
}

/* =====================================
   Result Category - Matches .faq-category-badge
   ===================================== */
.faq-result-category {
    margin-bottom: 8px;
}

.faq-result-category a,
.faq-result-category span {
    display: inline-block;
	color:#666;
    font-size: 12px;
    font-weight: 300;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

/* =====================================
   Result Title - Matches .faq-question-text
   ===================================== */
.faq-result-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--faq-text-dark, #1a1a1a);
    margin: 0;
    line-height: 1.4;
}

.faq-result-title a {
    color: var(--faq-text-dark, #1a1a1a);
    text-decoration: none;
}

.faq-result-title a:hover {
    color: var(--faq-primary, #667eea);
}

/* =====================================
   Result Answer Section - Matches .faq-answer
   ===================================== */
.faq-search-result-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-search-result-answer-content {
    padding: 0 24px 24px 24px;
}

/* =====================================
   Result Excerpt
   ===================================== */
.faq-result-excerpt {
    color: var(--faq-text-medium, #666);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 16px 0;
}

/* =====================================
   Read More Link - Matches .faq-btn
   ===================================== */
.faq-result-read-more {
    display: inline-block;
    padding: 2px 15px;
    background: var(--faq-primary, #667eea);
    color: white;
    text-decoration: none;
    border-radius: var(--faq-radius-sm, 8px);
    font-weight: 300;
    font-size: 15px;
    transition: var(--faq-transition, all 0.3s ease);
    border: 2px solid var(--faq-primary, #667eea);
}

.faq-result-read-more:hover {
    background: var(--faq-primary-hover, #667eeadd);
    box-shadow: var(--faq-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
	color:white;
}

/* =====================================
   No Results - Matches .faq-no-results
   ===================================== */
.faq-search-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--faq-bg-white, #ffffff);
    border-radius: var(--faq-radius, 12px);
}

.faq-no-results-icon {
    color: var(--faq-text-light, #999);
    margin-bottom: 24px;
}

.no-results-message {
    font-size: 24px;
    color: var(--faq-text-dark, #1a1a1a);
    margin: 0 0 12px 0;
}

.no-results-suggestion {
    color: var(--faq-text-medium, #666);
    font-size: 16px;
    margin: 0 0 24px 0;
}

.no-results-suggestion a {
    color: var(--faq-primary, #667eea);
    text-decoration: none;
    font-weight: 600;
}

.no-results-suggestion a:hover {
    text-decoration: underline;
}

/* =====================================
   Error Message
   ===================================== */
.faq-search-error {
    text-align: center;
    padding: 40px 20px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--faq-radius-sm, 8px);
}

.faq-search-error p {
    font-size: 15px;
    color: #856404;
    margin: 0;
}

/* =====================================
   Responsive Design
   ===================================== */
@media (max-width: 768px) {
    .faq-search-result-header {
        padding: 20px;
    }
    
    .faq-search-result-answer-content {
        padding: 0 20px 20px 20px;
    }
    
    .faq-result-title {
        font-size: 16px;
    }
    
    .faq-result-excerpt {
        font-size: 15px;
    }
}

/* =====================================
   Accessibility
   ===================================== */
.faq-result-title a:focus-visible,
.faq-result-read-more:focus-visible,
.faq-result-category a:focus-visible {
    outline: 2px solid var(--faq-primary, #667eea);
    outline-offset: 2px;
    border-radius: 2px;
}

.faq-search-result-header:focus-visible {
    outline: 2px solid var(--faq-primary, #667eea);
    outline-offset: -2px;
    border-radius: var(--faq-radius, 12px);
}