/* Variables CSS pour un contrôle fin du thème clair/sombre */
        :root {
            /* Light mode */
            --bs-body-bg: #f8f9fa;
            --bs-body-color: #343a40;
            --bs-navbar-bg: rgba(255, 255, 255, 0.9);
            --bs-navbar-border-color: rgba(0, 0, 0, 0.1);
            --bs-hero-gradient-start: #007bff;
            --bs-hero-gradient-end: #0056b3;
            --bs-hero-color: white;
            --bs-section-bg-light: #ffffff;
            --bs-section-bg-dark: #f0f2f5;
            --bs-card-bg: #ffffff;
            --bs-card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            --bs-btn-primary-bg: #007bff;
            --bs-btn-primary-border: #007bff;
            --bs-btn-primary-hover-bg: #0056b3;
            --bs-btn-secondary-bg: #6c757d;
            --bs-btn-secondary-border: #6c757d;
            --bs-btn-secondary-hover-bg: #5a6268;
            --bs-btn-success-bg: #28a745;
            --bs-btn-success-border: #28a745;
            --bs-btn-success-hover-bg: #218838;
            --bs-feature-icon-color: #007bff;
            --bs-footer-bg: #343a40;
            --bs-footer-color: #e9ecef;
            --bs-link-color: #007bff;
            --bs-link-hover-color: #0056b3;
            --bs-track-bg: #e9ecef;
            --bs-track-text-color: #343a40;
            --bs-bottom-nav-bg: rgba(255, 255, 255, 0.95);
            --bs-bottom-nav-color: #495057;
            --bs-bottom-nav-active-color: #007bff;
            --bs-chat-bg: #ffffff;
            --bs-chat-header-bg: #007bff;
            --bs-chat-header-color: white;
            --bs-chat-message-bg-user: #e0f2ff;
            /* Light blue for user */
            --bs-chat-message-bg-llm: #f0f0f0;
            /* Light grey for LLM */
            --bs-chat-input-bg: #f8f9fa;
            --bs-chat-border-color: #dee2e6;
            --bs-spinner-color: #007bff;
            /* Spinner color */
            --bs-spinner-overlay-bg: rgba(255, 255, 255, 0.7);
            /* Spinner overlay background */

            /* Light Mode */
            --treperd-primary-brand: #3b82f6; /* blue-500, used for primary btn hover from original */
            --treperd-primary-brand-dark: #2563eb; /* blue-600, used for primary btn from original */
            
            --treperd-bg-body: #f9fafb; /* gray-50 */
            --treperd-text-body: #374151; /* gray-700 */
            --treperd-text-body-emphasis: #1f2937; /* gray-900 */
            --treperd-text-body-secondary: #6b7280; /* gray-500 */
            
            --treperd-bg-card: #ffffff; /* white */
            --treperd-border-card: #e5e7eb; /* gray-200 */
            --treperd-bg-navbar: rgba(255, 255, 255, 0.9); /* white with 90% opacity */

            --treperd-bg-success-badge: #22c55e; /* green-500 */
            --treperd-bg-danger-badge: #ef4444; /* red-500 */
            
            --treperd-bg-success-btn: #16a34a; /* green-600 */
            --treperd-bg-success-btn-hover: #15803d; /* green-700 */
            --treperd-bg-danger-btn: #dc2626; /* red-600 */
            --treperd-bg-danger-btn-hover: #b91c1c; /* red-700 */
            --treperd-bg-primary-btn: #2563eb; /* blue-600 */
            --treperd-bg-primary-btn-hover: #1d4ed8; /* blue-700 */
            
            --treperd-primary-link: #2563eb; /* blue-600 */
            
            --treperd-text-pink: #db2777; /* pink-600 */
            --treperd-bg-pink-light: #fce7f3; /* pink-100 */
            
            --treperd-spinner-color: #2563eb; /* blue-600 */
            --treperd-spinner-overlay-bg: rgba(255, 255, 255, 0.7);
        }

        [data-bs-theme="dark"] {
            /* Dark mode */
            --bs-body-bg: #212529;
            --bs-body-color: #e2e6ea;
            --bs-navbar-bg: rgba(33, 37, 41, 0.9);
            --bs-navbar-border-color: rgba(255, 255, 255, 0.1);
            --bs-hero-gradient-start: #003d80;
            --bs-hero-gradient-end: #002b66;
            --bs-hero-color: #e2e6ea;
            --bs-section-bg-light: #2c3034;
            --bs-section-bg-dark: #343a40;
            --bs-card-bg: #3a4046;
            --bs-card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
            --bs-btn-primary-bg: #0d6efd;
            --bs-btn-primary-border: #0d6efd;
            --bs-btn-primary-hover-bg: #0a58ca;
            --bs-btn-secondary-bg: #5a6268;
            --bs-btn-secondary-border: #5a6268;
            --bs-btn-secondary-hover-bg: #495057;
            --bs-btn-success-bg: #1e7e34;
            --bs-btn-success-border: #1e7e34;
            --bs-btn-success-hover-bg: #155724;
            --bs-feature-icon-color: #6daff7;
            --bs-footer-bg: #1a1e21;
            --bs-footer-color: #adb5bd;
            --bs-link-color: #6daff7;
            --bs-link-hover-color: #9ec5fe;
            --bs-track-bg: #2c3034;
            --bs-track-text-color: #e2e6ea;
            --bs-bottom-nav-bg: rgba(33, 37, 41, 0.95);
            --bs-bottom-nav-color: #adb5bd;
            --bs-bottom-nav-active-color: #6daff7;
            --bs-chat-bg: #2c3034;
            --bs-chat-header-bg: #0d6efd;
            --bs-chat-header-color: #e2e6ea;
            --bs-chat-message-bg-user: #004085;
            /* Darker blue for user */
            --bs-chat-message-bg-llm: #3a4046;
            /* Darker grey for LLM */
            --bs-chat-input-bg: #343a40;
            --bs-chat-border-color: #495057;
            --bs-spinner-color: #6daff7;
            /* Spinner color in dark mode */
            --bs-spinner-overlay-bg: rgba(0, 0, 0, 0.7);
            /* Spinner overlay background in dark mode */

            /* Dark Mode */
            --treperd-primary-brand: #60a5fa; /* blue-400 */
            --treperd-primary-brand-dark: #3b82f6; /* blue-500 */
            
            --treperd-bg-body: #111827; /* gray-900 */
            --treperd-text-body: #d1d5db; /* gray-300 */
            --treperd-text-body-emphasis: #f9fafb; /* gray-50 */
            --treperd-text-body-secondary: #9ca3af; /* gray-400 */
            
            --treperd-bg-card: #1f2937; /* gray-800 */
            --treperd-border-card: #374151; /* gray-700 */
            --treperd-bg-navbar: rgba(31, 41, 55, 0.9); /* gray-800 with opacity */

            --treperd-bg-success-badge: #16a34a; /* green-600 */
            --treperd-bg-danger-badge: #b91c1c; /* red-700 */
            
            --treperd-bg-success-btn: #15803d; /* green-700 */
            --treperd-bg-success-btn-hover: #14532d; /* green-900 */
            --treperd-bg-danger-btn: #b91c1c; /* red-700 */
            --treperd-bg-danger-btn-hover: #7f1d1d; /* red-900 */
            --treperd-bg-primary-btn: #1d4ed8; /* blue-700 */
            --treperd-bg-primary-btn-hover: #1e40af; /* blue-800 */
            
            --treperd-primary-link: #60a5fa; /* blue-400 */
            
            --treperd-text-pink: #f472b6; /* pink-400 */
            --treperd-bg-pink-light: #831843; /* pink-900 for dark mode bg-pink-100 */
            
            --treperd-spinner-color: #60a5fa; /* blue-400 */
            --treperd-spinner-overlay-bg: rgba(0, 0, 0, 0.7);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .navbar {
            background-color: var(--bs-navbar-bg);
            border-bottom: 1px solid var(--bs-navbar-border-color);
            transition: background-color 0.3s ease, border-color 0.3s ease;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        .navbar-brand {
            font-weight: 800;
            font-size: 1.75rem;
            color: var(--bs-hero-gradient-start);
            transition: color 0.3s ease;
        }

        .nav-link {
            font-weight: 500;
            color: var(--bs-body-color) !important;
            transition: color 0.3s ease;
        }

        .nav-link:hover {
            color: var(--bs-link-hover-color) !important;
        }

        .btn-theme-toggle {
            background: none;
            border: none;
            color: var(--bs-body-color);
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .btn-theme-toggle:hover {
            color: var(--bs-link-hover-color);
        }

        .hero-section {
            background: linear-gradient(135deg, var(--bs-hero-gradient-start) 0%, var(--bs-hero-gradient-end) 100%);
            color: var(--bs-hero-color);
            padding: 8rem 0;
            text-align: center;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;
            box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }

        .hero-section h1 {
            font-size: 3.8rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            min-height: 4.5rem;
            /* Reserve space for the typing text */
        }

        .hero-section p {
            font-size: 1.5rem;
            max-width: 800px;
            margin: 0 auto 3rem auto;
            opacity: 0.9;
            min-height: 4.5rem;
            /* Reserve space for the typing text */
        }

        /* Typing effect specific styles */
        .typing-text {
            display: inline-block;
            /* Essential for caret positioning and sizing */
            vertical-align: top;
            /* Align cursor with text top */
            color: inherit;
            /* Ensure text color is inherited from parent */
            min-width: 1ch;
            /* Give it a minimal width even when empty */
        }

        .typing-text::after {
            content: '|';
            display: inline-block;
            animation: blink-caret .75s step-end infinite;
            vertical-align: top;
            margin-left: 0.1em;
        }

        /* Blinking caret animation */
        @keyframes blink-caret {

            from,
            to {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        /* Hide cursor when typing is finished */
        .typing-text.finished::after {
            display: none;
        }


        .hero-button-group .btn {
            font-size: 1.25rem;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            margin: 0 0.75rem;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hero-button-group .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .hero-button-group .btn-light {
            color: var(--bs-hero-gradient-end);
        }

        .hero-button-group .btn-outline-light {
            border-width: 2px;
        }

        .section-padding {
            padding: 5rem 0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 3rem;
            text-align: center;
            color: var(--bs-body-color);
        }

        .feature-card {
            background-color: var(--bs-card-bg);
            border-radius: 15px;
            padding: 2.5rem;
            text-align: center;
            box-shadow: var(--bs-card-shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            /* Ensure equal height */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
        }

        .feature-card .feature-icon {
            font-size: 3.5rem;
            color: var(--bs-feature-icon-color);
            margin-bottom: 1.5rem;
            animation: bounceIn 0.8s ease-out;
        }

        .feature-card h3 {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--bs-body-color);
        }

        .feature-card p {
            font-size: 1.1rem;
            color: var(--bs-body-color);
            opacity: 0.85;
        }

        .tracking-section {
            background-color: var(--bs-track-bg);
            padding: 4rem 0;
            text-align: center;
            border-radius: 20px;
            margin-top: 3rem;
            margin-bottom: 3rem;
            color: var(--bs-track-text-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .tracking-section .form-control {
            border-radius: 50px;
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
            height: auto;
            /* Override default Bootstrap height */
        }

        .tracking-section .btn {
            border-radius: 50px;
            padding: 0.75rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .testimonial-card {
            background-color: var(--bs-card-bg);
            border-radius: 15px;
            padding: 2.5rem;
            box-shadow: var(--bs-card-shadow);
            margin-bottom: 1.5rem;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .testimonial-card .quote-icon {
            font-size: 2.5rem;
            color: var(--bs-primary);
            margin-bottom: 1rem;
            opacity: 0.7;
        }

        .testimonial-card p {
            font-style: italic;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .testimonial-card .author {
            font-weight: 600;
            color: var(--bs-body-color);
        }

        .testimonial-card .role {
            font-size: 0.9rem;
            color: var(--bs-secondary);
        }

        .footer {
            background-color: var(--bs-footer-bg);
            color: var(--bs-footer-color);
            padding: 3rem 0;
            font-size: 0.9rem;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .footer a {
            color: var(--bs-footer-color);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .footer a:hover {
            color: var(--bs-primary);
        }

        .footer .social-icons a {
            font-size: 1.5rem;
            margin: 0 0.75rem;
            color: var(--bs-footer-color);
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .footer .social-icons a:hover {
            color: var(--bs-primary);
            transform: translateY(-3px);
        }

        /* Hero Section for Centres Page */
        .page-hero-section {
            background: linear-gradient(135deg, var(--bs-hero-gradient-start) 0%, var(--bs-hero-gradient-end) 100%);
            color: var(--bs-hero-color);
            padding: 6rem 0;
            text-align: center;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;
            box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.15);
        }

        .page-hero-section h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .page-hero-section p {
            font-size: 1.25rem;
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.9;
        }

        /* Dark mode toggle button */
        .theme-toggle-button {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: var(--bs-secondary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transition: background-color 0.3s, transform 0.2s;
        }

        .theme-toggle-button:hover {
            background-color: var(--bs-btn-secondary-hover-bg);
            transform: scale(1.05);
        }

        /* Chat toggle button */
        .chat-toggle-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            /* Positioned on the right for the chat button */
            background-color: var(--bs-primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transition: background-color 0.3s, transform 0.2s;
        }

        .chat-toggle-button:hover {
            background-color: var(--bs-btn-primary-hover-bg);
            transform: scale(1.05);
        }


        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }

            50% {
                opacity: 1;
                transform: scale(1.05);
            }

            70% {
                transform: scale(0.9);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Styles for the new sections */
        .category-card,
        .impact-card,
        .security-feature-card,
        .app-download-card,
        .faq-item,
        .recovery-center-card {
            background-color: var(--bs-card-bg);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: var(--bs-card-shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .category-card:hover,
        .impact-card:hover,
        .security-feature-card:hover,
        .app-download-card:hover,
        .recovery-center-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
        }

        .category-icon,
        .security-icon,
        .recovery-center-icon {
            font-size: 3rem;
            color: var(--bs-feature-icon-color);
            margin-bottom: 1rem;
        }

        .app-screenshot {
            max-width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .app-screenshot:hover {
            transform: scale(1.02);
        }

        .app-store-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
            color: #fff;
            padding: 0.8rem 1.5rem;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .app-store-btn:hover {
            background-color: #333;
        }

        .app-store-btn i {
            font-size: 1.5rem;
            margin-right: 0.75rem;
        }

        [data-bs-theme="dark"] .app-store-btn {
            background-color: #eee;
            color: #212529;
        }

        [data-bs-theme="dark"] .app-store-btn:hover {
            background-color: #fff;
        }

        .faq-item .accordion-button {
            font-weight: 600;
            color: var(--bs-body-color);
            background-color: var(--bs-card-bg);
            border-radius: 15px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .faq-item .accordion-button:not(.collapsed) {
            color: var(--bs-primary);
            background-color: var(--bs-section-bg-dark);
            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
        }

        .faq-item .accordion-body {
            background-color: var(--bs-section-bg-dark);
            color: var(--bs-body-color);
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        [data-bs-theme="dark"] .faq-item .accordion-button:not(.collapsed) {
            background-color: var(--bs-section-bg-light);
        }

        [data-bs-theme="dark"] .faq-item .accordion-body {
            background-color: var(--bs-section-bg-light);
        }

        /* Styles for the bottom navigation bar */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: var(--bs-bottom-nav-bg);
            border-top: 1px solid var(--bs-navbar-border-color);
            box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            z-index: 1030;
            /* Above most content, below modals */
            display: flex;
            justify-content: space-around;
            padding: 0.5rem 0;
        }

        .bottom-nav-item {
            flex: 1;
            text-align: center;
            padding: 0.5rem 0;
            color: var(--bs-bottom-nav-color);
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.3s ease, background-color 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
        }

        .bottom-nav-item:hover,
        .bottom-nav-item.active {
            color: var(--bs-bottom-nav-active-color);
            background-color: rgba(0, 123, 255, 0.1);
            /* Light blue background on hover/active */
        }

        .bottom-nav-item i {
            font-size: 1.2rem;
            margin-bottom: 0.25rem;
        }

        /* Adjust body padding for fixed bottom nav */
        body {
            padding-bottom: 70px;
            /* Adjust based on bottom nav height */
        }

        /* Modal styles for dark mode */
        [data-bs-theme="dark"] .modal-content {
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
        }

        [data-bs-theme="dark"] .modal-header {
            border-bottom-color: var(--bs-navbar-border-color);
        }

        [data-bs-theme="dark"] .modal-footer {
            border-top-color: var(--bs-navbar-border-color);
        }

        /* Chat Window Styles */
        .chat-window {
            position: fixed;
            bottom: 80px;
            /* Above the chat toggle button */
            right: 20px;
            width: 350px;
            height: 450px;
            background-color: var(--bs-chat-bg);
            border-radius: 15px;
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 1020;
            /* Below toggle button, above main content */
            transition: all 0.3s ease-in-out;
            transform: translateY(100%);
            opacity: 0;
            visibility: hidden;
        }

        .chat-window.show {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        .chat-header {
            background-color: var(--bs-chat-header-bg);
            color: var(--bs-chat-header-color);
            padding: 1rem;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }

        .chat-header .btn-close {
            filter: invert(1);
            /* Ensure close button is visible on dark background */
        }

        .chat-messages {
            flex-grow: 1;
            padding: 1rem;
            overflow-y: auto;
            background-color: var(--bs-body-bg);
            /* Use body bg for messages area */
            border-bottom: 1px solid var(--bs-chat-border-color);
        }

        .chat-message {
            margin-bottom: 0.75rem;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            max-width: 85%;
            word-wrap: break-word;
        }

        .chat-message.user {
            background-color: var(--bs-chat-message-bg-user);
            margin-left: auto;
            text-align: right;
            color: var(--bs-body-color);
        }

        .chat-message.llm {
            background-color: var(--bs-chat-message-bg-llm);
            margin-right: auto;
            text-align: left;
            color: var(--bs-body-color);
        }

        .chat-input-area {
            display: flex;
            padding: 1rem;
            border-top: 1px solid var(--bs-chat-border-color);
            background-color: var(--bs-chat-input-bg);
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .chat-input-area input {
            flex-grow: 1;
            border-radius: 20px;
            padding: 0.75rem 1rem;
            border: 1px solid var(--bs-chat-border-color);
            background-color: var(--bs-card-bg);
            /* Input background */
            color: var(--bs-body-color);
        }

        .chat-input-area button {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin-left: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .chat-loading {
            text-align: center;
            padding: 0.5rem;
            font-style: italic;
            color: var(--bs-secondary);
        }

        /* Responsive adjustments for chat window */
        @media (max-width: 576px) {
            .chat-window {
                width: calc(100% - 40px);
                /* Full width minus margin */
                height: 70vh;
                /* Make it taller on small screens */
                bottom: 80px;
                /* Adjust for bottom nav */
                right: 20px;
                left: 20px;
            }
        }

        /* Spinner Overlay Styles */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bs-spinner-overlay-bg);
            /* Semi-transparent white/black */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            /* High z-index to be on top */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .loading-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .spinner-border {
            color: var(--bs-spinner-color) !important;
            width: 3rem;
            height: 3rem;
        }

        .auth-container {
            flex-grow: 1;
            /* Allow content to grow and push footer down */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 0;
            /* Add some vertical padding */
        }

        .center-card {
            background-color: var(--bs-card-bg);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: var(--bs-card-shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .center-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
        }

        .center-card h3 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--bs-body-color);
        }

        .center-card p {
            font-size: 1.1rem;
            color: var(--bs-body-color);
            opacity: 0.85;
            margin-bottom: 0.5rem;
        }

        .center-card .icon-text {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
            font-size: 1.05rem;
        }

        .center-card .icon-text i {
            color: var(--bs-feature-icon-color);
            margin-right: 0.75rem;
            font-size: 1.25rem;
            width: 25px; /* Fixed width for icons to align text */
            text-align: center;
        }

        .center-card .btn {
            margin-top: auto; /* Push button to the bottom */
            font-weight: 600;
            border-radius: 50px;
        }

        .card-auth {
            background-color: var(--bs-card-bg);
            border-radius: 15px;
            box-shadow: var(--bs-card-shadow);
            padding: 2.5rem;
            max-width: 500px;
            /* Max width for form card */
            width: 100%;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .card-auth h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            text-align: center;
            color: var(--bs-body-color);
        }

        /* Page Hero Section for Documentation */
        .doc-hero-section {
            background: linear-gradient(135deg, var(--bs-hero-gradient-start) 0%, var(--bs-hero-gradient-end) 100%);
            color: var(--bs-hero-color);
            padding: 4rem 0;
            text-align: center;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;
            box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.15);
        }

        .doc-hero-section h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .doc-hero-section p {
            font-size: 1.25rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
        }

                .doc-section {
            background-color: var(--bs-card-bg);
            border-radius: 15px;
            padding: 2.5rem;
            box-shadow: var(--bs-card-shadow);
            margin-bottom: 3rem;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .doc-section h3 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--bs-body-color);
            border-bottom: 2px solid var(--bs-navbar-border-color);
            padding-bottom: 0.75rem;
        }

        .doc-section p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 1rem;
            color: var(--bs-body-color);
        }

        .doc-section ul {
            list-style-type: none;
            padding-left: 0;
        }

        .doc-section ul li {
            margin-bottom: 0.75rem;
            display: flex;
            align-items: flex-start;
            font-size: 1.1rem;
            color: var(--bs-body-color);
        }

        .doc-section ul li i {
            margin-right: 1rem;
            color: var(--bs-feature-icon-color);
            font-size: 1.2rem;
            line-height: 1.8;
        }

        .form-control {
            border-radius: 10px;
            padding: 0.85rem 1rem;
            background-color: var(--bs-input-bg, #fff);
            /* Use Bootstrap input bg var, fallback */
            color: var(--bs-body-color);
            border-color: var(--bs-border-color, #dee2e6);
            /* Use Bootstrap border color var, fallback */
        }

        /* Styles for password toggle icon */
        .password-input-container {
            position: relative;
            width: 100%;
        }

        .password-toggle-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--bs-secondary);
            /* Icon color */
            font-size: 1.1rem;
            z-index: 10;
            /* Ensure icon is above input */
        }

        [data-bs-theme="dark"] .password-toggle-icon {
            color: var(--bs-body-color);
            /* Adjust icon color for dark mode */
        }