@using QRRapidoApp.Services
@using Microsoft.Extensions.Localization
@inject AdDisplayService AdService
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer

@{
    ViewData["Title"] = "FAQ";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container py-5">
    <!-- Hero Section -->
    <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
            <div class="mb-5">
                <h1 class="display-5 fw-bold text-primary mb-3">
                    <i class="fas fa-question-circle me-3"></i>@Localizer["FrequentlyAskedQuestions"]
                </h1>
                <p class="lead text-muted">@Localizer["FAQSubtitle"]</p>
            </div>
        </div>
    </div>

    <!-- Search FAQ -->
    <div class="row justify-content-center mb-5">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" id="faq-search" class="form-control form-control-lg" placeholder="@Localizer["SearchFAQ"]">
                        <button class="btn btn-outline-secondary" type="button" id="clear-search" title="Limpar busca">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="d-flex justify-content-between mt-2">
                        <small class="text-muted">@Localizer["SearchFAQHint"]</small>
                        <small id="search-results" class="text-primary fw-bold" style="display: none;"></small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- FAQ Categories -->
    <div class="row">
        <div class="col-12">
            <div class="accordion" id="faqAccordion">
                
                <!-- General Questions -->
                <div class="mb-4">
                    <h3 class="text-primary mb-3">
                        <i class="fas fa-info-circle me-2"></i>@Localizer["GeneralQuestions"]
                    </h3>

                    <!-- QR Codes Expire? -->
                    <div class="accordion-item faq-item" data-search="qr code expira expiram validade tempo duracao permanente">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                <i class="fas fa-calendar-times text-warning me-2"></i>
                                <strong>@Localizer["FAQ_DoQRCodesExpire"]</strong>
                            </button>
                        </h2>
                        <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p><strong>@Localizer["FAQ_QRExpireAnswer1"]</strong></p>
                                <p>@Localizer["FAQ_QRExpireAnswer2"]</p>
                                <div class="alert alert-info">
                                    <i class="fas fa-lightbulb me-2"></i>@Localizer["FAQ_QRExpireTip"]
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Ideal Size for Printing -->
                    <div class="accordion-item faq-item" data-search="tamanho ideal impressao imprimir qualidade resolucao dpi">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                <i class="fas fa-print text-primary me-2"></i>
                                <strong>@Localizer["FAQ_IdealPrintSize"]</strong>
                            </button>
                        </h2>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>@Localizer["FAQ_PrintSizeAnswer1"]</p>
                                <ul class="mb-3">
                                    <li><strong>@Localizer["FAQ_PrintSizeSmall"]</strong> @Localizer["FAQ_PrintSizeSmallDesc"]</li>
                                    <li><strong>@Localizer["FAQ_PrintSizeMedium"]</strong> @Localizer["FAQ_PrintSizeMediumDesc"]</li>
                                    <li><strong>@Localizer["FAQ_PrintSizeLarge"]</strong> @Localizer["FAQ_PrintSizeLargeDesc"]</li>
                                </ul>
                                <div class="alert alert-success">
                                    <i class="fas fa-check me-2"></i>@Localizer["FAQ_PrintSizeTip"]
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- How to Test QR Codes -->
                    <div class="accordion-item faq-item" data-search="testar qr code funciona scanner leitor app aplicativo">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                <i class="fas fa-mobile-alt text-success me-2"></i>
                                <strong>@Localizer["FAQ_HowToTestQR"]</strong>
                            </button>
                        </h2>
                        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>@Localizer["FAQ_TestQRAnswer1"]</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6><i class="fab fa-android text-success me-2"></i>Android:</h6>
                                        <ul>
                                            <li>@Localizer["FAQ_AndroidCamera"]</li>
                                            <li>@Localizer["FAQ_AndroidGoogleLens"]</li>
                                            <li>@Localizer["FAQ_AndroidQRApps"]</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6><i class="fab fa-apple text-secondary me-2"></i>iOS:</h6>
                                        <ul>
                                            <li>@Localizer["FAQ_iOSCamera"]</li>
                                            <li>@Localizer["FAQ_iOSControlCenter"]</li>
                                            <li>@Localizer["FAQ_iOSQRApps"]</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- QR Code Security -->
                    <div class="accordion-item faq-item" data-search="seguro seguranca malware virus perigoso confiavel">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                <i class="fas fa-shield-alt text-success me-2"></i>
                                <strong>@Localizer["FAQ_QRSecurity"]</strong>
                            </button>
                        </h2>
                        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>@Localizer["FAQ_SecurityAnswer1"]</p>
                                <p>@Localizer["FAQ_SecurityAnswer2"]</p>
                                <div class="alert alert-warning">
                                    <h6><i class="fas fa-exclamation-triangle me-2"></i>@Localizer["FAQ_SecurityTips"]</h6>
                                    <ul class="mb-0">
                                        <li>@Localizer["FAQ_SecurityTip1"]</li>
                                        <li>@Localizer["FAQ_SecurityTip2"]</li>
                                        <li>@Localizer["FAQ_SecurityTip3"]</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Technical Questions -->
                <div class="mb-4">
                    <h3 class="text-primary mb-3">
                        <i class="fas fa-cogs me-2"></i>@Localizer["TechnicalQuestions"]
                    </h3>

                    <!-- Static vs Dynamic -->
                    <div class="accordion-item faq-item" data-search="estatico dinamico diferenca tracking rastreamento analytics">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
                                <i class="fas fa-exchange-alt text-primary me-2"></i>
                                <strong>@Localizer["FAQ_StaticVsDynamic"]</strong>
                            </button>
                        </h2>
                        <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6 class="text-success"><i class="fas fa-circle me-2"></i>@Localizer["FAQ_StaticQR"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_StaticFeature1"]</li>
                                            <li>@Localizer["FAQ_StaticFeature2"]</li>
                                            <li>@Localizer["FAQ_StaticFeature3"]</li>
                                            <li>@Localizer["FAQ_StaticFeature4"]</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="text-warning"><i class="fas fa-crown me-2"></i>@Localizer["FAQ_DynamicQR"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_DynamicFeature1"]</li>
                                            <li>@Localizer["FAQ_DynamicFeature2"]</li>
                                            <li>@Localizer["FAQ_DynamicFeature3"]</li>
                                            <li>@Localizer["FAQ_DynamicFeature4"]</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="alert alert-info mt-3">
                                    <i class="fas fa-info-circle me-2"></i>@Localizer["FAQ_DynamicQRNote"]
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Customization -->
                    <div class="accordion-item faq-item" data-search="personalizar cores logo design estilo customizar">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq6">
                                <i class="fas fa-palette text-warning me-2"></i>
                                <strong>@Localizer["FAQ_Customization"]</strong>
                            </button>
                        </h2>
                        <div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>@Localizer["FAQ_CustomizationAnswer1"]</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6 class="text-success"><i class="fas fa-check me-2"></i>@Localizer["FAQ_FreeCustomization"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_FreeFeature1"]</li>
                                            <li>@Localizer["FAQ_FreeFeature2"]</li>
                                            <li>@Localizer["FAQ_FreeFeature3"]</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="text-warning"><i class="fas fa-crown me-2"></i>@Localizer["FAQ_PremiumCustomization"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_PremiumFeature1"]</li>
                                            <li>@Localizer["FAQ_PremiumFeature2"]</li>
                                            <li>@Localizer["FAQ_PremiumFeature3"]</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Offline Usage -->
                    <div class="accordion-item faq-item" data-search="offline internet conexao funciona sem wifi">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq7">
                                <i class="fas fa-wifi-slash text-secondary me-2"></i>
                                <strong>@Localizer["FAQ_OfflineUsage"]</strong>
                            </button>
                        </h2>
                        <div id="faq7" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>@Localizer["FAQ_OfflineAnswer1"]</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6 class="text-success"><i class="fas fa-check me-2"></i>@Localizer["FAQ_WorksOffline"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_OfflineType1"]</li>
                                            <li>@Localizer["FAQ_OfflineType2"]</li>
                                            <li>@Localizer["FAQ_OfflineType3"]</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="text-warning"><i class="fas fa-wifi me-2"></i>@Localizer["FAQ_NeedsInternet"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_OnlineType1"]</li>
                                            <li>@Localizer["FAQ_OnlineType2"]</li>
                                            <li>@Localizer["FAQ_OnlineType3"]</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Usage Questions -->
                <div class="mb-4">
                    <h3 class="text-primary mb-3">
                        <i class="fas fa-user me-2"></i>@Localizer["UsageQuestions"]
                    </h3>

                    <!-- Color Choice -->
                    <div class="accordion-item faq-item" data-search="cores escolher melhor contraste legibilidade visibility">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq8">
                                <i class="fas fa-eye text-info me-2"></i>
                                <strong>@Localizer["FAQ_ColorChoice"]</strong>
                            </button>
                        </h2>
                        <div id="faq8" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>@Localizer["FAQ_ColorAnswer1"]</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6 class="text-success"><i class="fas fa-check me-2"></i>@Localizer["FAQ_GoodColors"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_ColorGood1"]</li>
                                            <li>@Localizer["FAQ_ColorGood2"]</li>
                                            <li>@Localizer["FAQ_ColorGood3"]</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="text-danger"><i class="fas fa-times me-2"></i>@Localizer["FAQ_AvoidColors"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_ColorBad1"]</li>
                                            <li>@Localizer["FAQ_ColorBad2"]</li>
                                            <li>@Localizer["FAQ_ColorBad3"]</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="alert alert-success">
                                    <i class="fas fa-lightbulb me-2"></i>@Localizer["FAQ_ColorTip"]
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Daily Limits -->
                    <div class="accordion-item faq-item" data-search="limite diario quantos qr codes por dia restricao premium">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq9">
                                <i class="fas fa-chart-line text-primary me-2"></i>
                                <strong>@Localizer["FAQ_DailyLimits"]</strong>
                            </button>
                        </h2>
                        <div id="faq9" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="text-center p-3 border rounded">
                                            <h6 class="text-muted">@Localizer["FAQ_AnonymousUsers"]</h6>
                                            <div class="display-6 text-secondary">@Localizer["FAQ_AnonymousLimit"]</div>
                                            <small>@Localizer["FAQ_AnonymousNote"]</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center p-3 border rounded border-primary">
                                            <h6 class="text-primary">@Localizer["FAQ_RegisteredUsers"]</h6>
                                            <div class="display-6 text-primary">@Localizer["FAQ_RegisteredLimit"]</div>
                                            <small>@Localizer["FAQ_RegisteredNote"]</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center p-3 border rounded border-warning">
                                            <h6 class="text-warning"><i class="fas fa-crown me-1"></i>Premium</h6>
                                            <div class="display-6 text-warning">∞</div>
                                            <small>@Localizer["FAQ_PremiumNote"]</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Premium Questions -->
                <div class="mb-4">
                    <h3 class="text-primary mb-3">
                        <i class="fas fa-crown me-2"></i>@Localizer["PremiumQuestions"]
                    </h3>

                    <!-- Premium Benefits -->
                    <div class="accordion-item faq-item" data-search="premium beneficios vantagens preco custo plano assinatura">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq10">
                                <i class="fas fa-star text-warning me-2"></i>
                                <strong>@Localizer["FAQ_PremiumBenefits"]</strong>
                            </button>
                        </h2>
                        <div id="faq10" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>@Localizer["FAQ_PremiumAnswer1"]</p>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6 class="text-primary"><i class="fas fa-rocket me-2"></i>@Localizer["FAQ_PerformanceBenefits"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_PremiumPerf1"]</li>
                                            <li>@Localizer["FAQ_PremiumPerf2"]</li>
                                            <li>@Localizer["FAQ_PremiumPerf3"]</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="text-warning"><i class="fas fa-magic me-2"></i>@Localizer["FAQ_FeatureBenefits"]</h6>
                                        <ul class="small">
                                            <li>@Localizer["FAQ_PremiumFeat1"]</li>
                                            <li>@Localizer["FAQ_PremiumFeat2"]</li>
                                            <li>@Localizer["FAQ_PremiumFeat3"]</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact CTA -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card bg-primary text-white">
                <div class="card-body p-4 text-center">
                    <h4 class="mb-3">@Localizer["FAQ_NotFoundAnswer"]</h4>
                    <p class="mb-4">@Localizer["FAQ_ContactUsDesc"]</p>
                    <a href="@Url.Action("Contact", "Home")" class="btn btn-light btn-lg">
                        <i class="fas fa-envelope me-2"></i>@Localizer["ContactUs"]
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Ad Space Footer (conditional) -->
@await Html.PartialAsync("_AdSpace", new { position = "footer" })

<script>
// FAQ Search functionality - Enhanced
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('faq-search');
    const clearButton = document.getElementById('clear-search');
    const searchResults = document.getElementById('search-results');
    const faqItems = document.querySelectorAll('.faq-item');
    const categoryHeaders = document.querySelectorAll('h3.text-primary');
    
    // Search functionality
    function performSearch() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        let visibleCount = 0;
        let totalItems = faqItems.length;
        
        // If search is empty, show all items
        if (searchTerm === '') {
            faqItems.forEach(item => {
                item.style.display = 'block';
                // Remove any highlight
                removeHighlight(item);
            });
            categoryHeaders.forEach(header => {
                header.style.display = 'block';
            });
            searchResults.style.display = 'none';
            clearButton.style.display = 'none';
            return;
        }
        
        // Show clear button when there's text
        clearButton.style.display = 'block';
        
        // Search through items
        faqItems.forEach(function(item) {
            const searchData = item.getAttribute('data-search')?.toLowerCase() || '';
            const questionText = item.querySelector('button strong')?.textContent.toLowerCase() || '';
            const answerText = item.querySelector('.accordion-body')?.textContent.toLowerCase() || '';
            
            // Check if search term matches
            if (searchData.includes(searchTerm) || 
                questionText.includes(searchTerm) || 
                answerText.includes(searchTerm)) {
                item.style.display = 'block';
                visibleCount++;
                // Highlight matching terms
                highlightText(item, searchTerm);
            } else {
                item.style.display = 'none';
                removeHighlight(item);
            }
        });
        
        // Update category headers visibility
        updateCategoryVisibility();
        
        // Show search results count
        if (visibleCount === 0) {
            searchResults.innerHTML = `<i class="fas fa-search me-1"></i>Nenhum resultado encontrado para "${searchTerm}"`;
            searchResults.className = 'text-warning fw-bold';
        } else if (visibleCount === totalItems) {
            searchResults.innerHTML = `<i class="fas fa-check me-1"></i>Mostrando todas as ${totalItems} perguntas`;
            searchResults.className = 'text-success fw-bold';
        } else {
            searchResults.innerHTML = `<i class="fas fa-search me-1"></i>${visibleCount} de ${totalItems} perguntas encontradas`;
            searchResults.className = 'text-primary fw-bold';
        }
        searchResults.style.display = 'block';
    }
    
    // Update category header visibility based on visible items
    function updateCategoryVisibility() {
        categoryHeaders.forEach(header => {
            const nextSibling = header.nextElementSibling;
            let hasVisibleItems = false;
            
            // Check if any FAQ items in this category are visible
            let currentElement = nextSibling;
            while (currentElement && !currentElement.querySelector('h3.text-primary')) {
                if (currentElement.classList.contains('faq-item') && 
                    currentElement.style.display !== 'none') {
                    hasVisibleItems = true;
                    break;
                }
                currentElement = currentElement.nextElementSibling;
            }
            
            header.style.display = hasVisibleItems ? 'block' : 'none';
        });
    }
    
    // Highlight search terms in text
    function highlightText(item, searchTerm) {
        const questionElement = item.querySelector('button strong');
        if (questionElement) {
            const originalText = questionElement.textContent;
            const regex = new RegExp(`(${escapeRegex(searchTerm)})`, 'gi');
            const highlightedText = originalText.replace(regex, '<mark class="bg-warning">$1</mark>');
            questionElement.innerHTML = highlightedText;
        }
    }
    
    // Remove highlights
    function removeHighlight(item) {
        const questionElement = item.querySelector('button strong');
        if (questionElement) {
            const text = questionElement.textContent;
            questionElement.innerHTML = text;
        }
    }
    
    // Escape special regex characters
    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
    
    // Clear search function
    function clearSearch() {
        searchInput.value = '';
        performSearch();
        searchInput.focus();
    }
    
    // Event listeners
    searchInput.addEventListener('input', performSearch);
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            clearSearch();
        }
    });
    
    clearButton.addEventListener('click', clearSearch);
    
    // Initialize
    clearButton.style.display = 'none';
});
</script>

<style>
.faq-item {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.faq-item:hover {
    border-left-color: var(--bs-primary);
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary);
    color: white;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--bs-primary);
}

#faq-search {
    transition: all 0.3s ease;
}

#faq-search:focus {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0,123,255,0.25);
}

/* Search highlight styles */
mark.bg-warning {
    background-color: #fff3cd !important;
    color: #856404;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* Clear button animation */
#clear-search {
    transition: all 0.3s ease;
}

#clear-search:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Search results animation */
#search-results {
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

/* Category headers fade when hidden */
h3.text-primary {
    transition: opacity 0.3s ease;
}

/* Improved FAQ item visibility transition */
.faq-item[style*="display: none"] {
    opacity: 0;
    transform: translateY(-10px);
}

.faq-item[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
}

/* Search input enhancements */
.input-group:focus-within .input-group-text {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Responsive search results */
@@media (max-width: 768px) {
    #search-results {
        font-size: 0.8rem;
        text-align: center;
        margin-top: 0.5rem;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: center;
    }
}
</style>