#ai-content-generator-section {
        padding: 5rem 1rem;
        position: relative;
        overflow: hidden;
        color: #ffffff;
        border-radius: 1.5rem;
        margin: 2.5rem auto;
        max-width: 1140px; /* Match container width */
        border: 1px solid rgba(13, 110, 253, 0.2);
        
        /* Animated Gradient Background */
        background: linear-gradient(270deg, #0f0c29, #302b63, #24243e, #0d6efd);
        background-size: 400% 400%;
        animation: gradient-flow-youtube 15s ease infinite;

        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    @keyframes gradient-flow-youtube {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    #ai-content-generator-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(48, 43, 99, 0.3);
    }
    
    #ai-content-generator-section .content-wrapper {
        position: relative;
        z-index: 2;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    #ai-content-generator-section .section-badge {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        padding: 0.5rem 1.25rem;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.9rem;
    }

    #ai-content-generator-section .use-cases-grid {
        max-width: 900px;
    }

    #ai-content-generator-section .use-case-item {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 0.75rem;
        padding: 0.75rem 1rem;
        font-weight: 500;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    #ai-content-generator-section .use-case-item:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(1.03);
    }

    #ai-content-generator-section .use-case-item i {
        color: #ffc107; /* Gold color */
        font-size: 1.1em;
        width: 20px;
        text-align: center;
    }

    /* Modal Styling */
    #aiGeneratorModal .modal-content {
        border-radius: 1rem;
        overflow: hidden;
        border: none;
    }
    #aiGeneratorModal .modal-header {
        background: linear-gradient(135deg, var(--bs-primary), var(--bs-indigo, #6610f2));
        color: white;
    }
    #aiGeneratorModal .form-control, #aiGeneratorModal .form-select {
        background-color: var(--bs-gray-100);
    }
    #aiGeneratorModal .form-control:focus, #aiGeneratorModal .form-select:focus {
        background-color: white;
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    }

    /* Locked overlay for the form */
    #generator-form-wrapper {
        position: relative;
    }
    #generator-lock-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(248, 249, 250, 0.85); /* Semi-transparent light background */
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 0.5rem;
        padding: 2rem;
    }
</style>


<style>
    
    
    .btn-premium-voices {
    background: linear-gradient(135deg, #8a2be2, #c048f0);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0 16px;
    height: 28px;
    font-size: 0.6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-shrink: 0;
}

.btn-premium-voices:hover,
.btn-premium-voices:focus {
    color: white;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

.btn-premium-voices .fa-gem {
    animation: sparkle 2.5s infinite ease-in-out;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

/* Main Modal Content */
.pro-hub-modal-content {
    background-color: #1a1d24;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e2e5;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Modal Header */
.pro-hub-modal-header {
    background: linear-gradient(135deg, rgba(40, 44, 52, 0.8), rgba(26, 29, 36, 0.9)), 
                url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDIwIDIwIj48ZyBmaWxsPSIjM2YzYjQ3Ij48Y2lyY2xlIHI9IjEiIGN4PSIzIiBjeT0iMyI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgdmFsdWVzPSIwOzE7MCIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48Y2lyY2xlIHI9IjEiIGN4PSI3IiBjeT0iMyI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgdmFsdWVzPSIwOzE7MCIgZHVyPSIzLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgYXR0cmlidXRlTmFtZT0iciIgZHVyPSIzcyIgdmFsdWVzPSIwOzE7MCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHI9IjEiIGN4PSIxMSIgY3k9IjMiLz48Y2lyY2xlIHI9IjEiIGN4PSIxNSIgY3k9IjMiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIGR1cj0iMy41cyIgdmFsdWVzPSIwOzE7MCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48Y2lyY2xlIHI9IjEiIGN4PSIxOSIgY3k9IjMiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIGR1cj0iNHMiIHZhbHVlcz0iMDsxOzAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PC9nPjwvc3ZnPg==');
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pro-hub-modal-header .header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pro-hub-modal-header .header-icon-wrapper {
    background-color: rgba(138, 43, 226, 0.2);
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: #c048f0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.pro-hub-modal-header .modal-title {
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.pro-hub-modal-header .modal-subtitle {
    font-size: 0.9rem;
    color: #a0a8b4;
    margin: 0;
}
.pro-hub-modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
}

/* Modal Body */
.pro-hub-modal-body {
    padding: 1.5rem;
    max-height: 75vh;
    overflow-y: auto;
}

/* Premium Banner */
.premium-banner {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.premium-banner .banner-text {
    font-weight: 500;
    color: #e0e2e5;
}
.premium-banner .banner-text .fa-star-of-life {
    color: #c048f0;
    margin-right: 0.5rem;
    animation: spin-slow 5s linear infinite;
}
.btn-subscribe-banner {
    background: linear-gradient(135deg, #c048f0, #8a2be2);
    color: white;
    border: none;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
}
.btn-subscribe-banner:hover {
    color: white;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(192, 72, 240, 0.5);
}

/* Hub Tabs */
.hub-tabs {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hub-tabs .nav-item {
    margin-bottom: -1px; /* Overlap the border */
}
.hub-tabs .nav-link {
    color: #a0a8b4;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.hub-tabs .nav-link:hover {
    color: #fff;
}
.hub-tabs .nav-link.active {
    color: #c048f0;
    background-color: transparent;
    border-bottom-color: #c048f0;
}
.hub-tabs .nav-link i {
    margin-left: 8px;
}

/* Voice Card */
.voice-hub-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    transition: all 0.3s ease;
}
.voice-hub-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(192, 72, 240, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.voice-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}
.voice-details {
    flex-grow: 1;
}
.voice-name {
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}
.voice-description {
    font-size: 0.85rem;
    color: #a0a8b4;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.voice-tags {
    display: flex;
    gap: 0.5rem;
}
.dialect-badge, .style-badge {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.2em 0.6em;
    border-radius: 50px;
}
.dialect-badge {
    background-color: rgba(138, 43, 226, 0.2);
    color: #c048f0;
}
.style-badge {
    background-color: rgba(23, 162, 184, 0.2);
    color: #17a2b8;
}

/* Mini Player */
.voice-player-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.mini-player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.play-pause-btn {
    background-color: #343a40;
    border: 1px solid #495057;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.play-pause-btn:hover {
    background-color: #c048f0;
    border-color: #c048f0;
}
.waveform {
    display: flex;
    align-items: center;
    height: 24px;
    gap: 2px;
}
.waveform span {
    background-color: #495057;
    width: 3px;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.mini-player.playing .waveform span {
    background-color: #c048f0;
    animation: wave-dance 1.2s infinite ease-in-out;
}
.mini-player.playing .waveform span:nth-child(2) { animation-delay: -1.0s; }
.mini-player.playing .waveform span:nth-child(3) { animation-delay: -0.8s; }
.mini-player.playing .waveform span:nth-child(4) { animation-delay: -0.6s; }
.mini-player.playing .waveform span:nth-child(5) { animation-delay: -0.4s; }

@keyframes wave-dance {
    0%, 100% { height: 4px; }
    50% { height: 24px; }
}
.btn-use-voice {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    cursor: not-allowed;
    opacity: 0.5;
}

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



</style>

    <!-- Inline Styles (Original large block - ideally this should be in style.css) -->
   <style>
       /* --- Add these styles --- */
       /* Styling for voice avatar images */
       .voice-card-icon {
           display: flex;
           align-items: center;
           justify-content: center;
           margin-bottom: 8px; /* Give space below avatar in slider */
           height: 40px; /* Fixed height for consistent layout */
           width: 40px; /* Fixed width for consistent layout */
           overflow: hidden; /* Ensure image stays within bounds */
       }

       .voice-avatar-slider {
           width: 100%; /* Fill the icon container */
           height: 100%;
           border-radius: 50%; /* Make it circular */
           object-fit: cover; /* Crop image nicely */
           border: 1px solid #dee2e6; /* Optional subtle border */
           background-color: #f8f9fa; /* Light background for loading/fallback */
       }

       .voice-avatar-modal {
           width: 35px; /* Size for modal list */
           height: 35px;
           border-radius: 50%;
           object-fit: cover;
           margin-left: 10px; /* Space between image and text in modal (RTL) */
           vertical-align: middle; /* Align with text */
           display: inline-block;
           border: 1px solid #dee2e6;
           background-color: #f8f9fa;
       }

       .voice-info {
           display: flex;
           align-items: center;
           flex-grow: 1; /* Take available space */
       }

       /* --- Pricing Toggle Styles --- */
       .pricing-toggle-container { /* Optional: Add more spacing if needed */ }
       .pricing-toggle-switch .form-check-input {
           width: 3.5em; height: 1.75em; cursor: pointer;
           background-color: #dee2e6; border-color: #ced4da;
           background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c757d'/%3e%3c/svg%3e");
           background-position: right center;
           transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
           margin-top: 0;
       }
       .pricing-toggle-switch .form-check-input:checked {
           background-position: left center; background-color: #0d6efd; border-color: #0a58ca;
           background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
       }
       .pricing-toggle-label { font-size: 0.95rem; color: #495057; transition: color 0.15s ease-in-out; }
       .pricing-toggle-container.showing-yearly .pricing-toggle-label.me-2 { color: #6c757d; }
       .pricing-toggle-container.showing-monthly .pricing-toggle-label.ms-2 { color: #6c757d; }
       .plan-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
       .plan-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }

       /* Textarea Action Buttons Positioning Fix */
textarea.form-control { 
    padding-top: 50px !important; 
    padding-right: 1.5rem; 
    padding-left: 1.5rem; 
    padding-bottom: 50px !important; /* <-- THIS IS THE KEY CHANGE */
}
.text-actions {
    position: absolute;
    top: 12px;
    right: 15px;
    left: 15px; /* Make it span the full width */
    display: flex;
    justify-content: space-between; /* This is the key change */
    align-items: center;
    gap: 0.4rem;
    z-index: 2;
}
       .text-action-btn { width: 28px; height: 28px; font-size: 0.8rem; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
       .text-action-btn:hover { transform: scale(1.1); }
       .word-counter { bottom: 1px; left: 1px; right: auto; z-index: 2; background-color: rgba(241, 245, 249, 0.8); backdrop-filter: blur(2px); }

       /* Circular Floating WhatsApp Button */
       #whatsapp-float {
           position: fixed; bottom: 30px; left: 20px; z-index: 1050;
           background-color: #25D366; color: white; width: 40px; height: 40px;
           border-radius: 50%; display: flex; align-items: center; justify-content: center;
           text-decoration: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           animation: glow-whatsapp 2s infinite ease-in-out;
       }
       #whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); animation-play-state: paused; }
       #whatsapp-float i { font-size: 1.3em; line-height: 1; }
       #whatsapp-float span { display: none; }
       @keyframes glow-whatsapp {
           0%, 100% { box-shadow: 0 0 8px rgba(37, 211, 102, 0.7), 0 4px 8px rgba(0, 0, 0, 0.2); }
           50% { box-shadow: 0 0 16px rgba(37, 211, 102, 1), 0 6px 12px rgba(0, 0, 0, 0.3); }
       }
       @media (max-width: 767px) {
           #whatsapp-float { bottom: 15px; left: 15px; width: 50px; height: 50px; }
           #whatsapp-float i { font-size: 1.7em; }
       }

       /* Voice Card Control Button */
       .voice-card-control-btn {
           position: absolute; top: 6px; z-index: 5;
           background-color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(0,0,0,0.08);
           border-radius: 50%; width: 26px; height: 26px; padding: 0;
           display: flex; align-items: center; justify-content: center;
           font-size: 0.75rem; color: #4a5568; cursor: pointer;
           transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); backdrop-filter: blur(2px);
       }
       .voice-card-control-btn:hover, .voice-card-control-btn:focus-visible {
           background-color: rgba(237, 242, 247, 0.85); color: var(--bs-primary, #0d6efd);
           transform: scale(1.15);
           box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.1);
           outline: none;
       }
       html[dir="rtl"] .voice-card-control-btn { left: auto; right: 6px; }

       /* Voice Control Feature Modal Enhancements */
       #voiceControlFeatureModal .modal-content { border-radius: 0.5rem; }
       #voiceControlFeatureModal .modal-header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
       #voiceControlFeatureModal .modal-title { color: #2d3748; }
       #voiceControlFeatureModal .list-unstyled li strong { color: #1a202c; }
       #voiceControlFeatureModal .list-unstyled em.small { color: #718096; }
       @keyframes pulseSlow {
           0%, 100% { transform: scale(1); opacity: 0.7; }
           50% { transform: scale(1.1); opacity: 1; }
       }
       #voiceControlFeatureModal .fa-stack-1x.animate__pulse { animation-name: pulseSlow; animation-duration: 3s; }

       /* "More Voices" card styles */
       .voice-card.voice-card-more {
           flex-direction: column; justify-content: center; align-items: center; cursor: pointer;
           border: 1.5px dashed var(--bs-primary, #0d6efd);
           background-color: var(--bs-gray-100, #f8f9fa);
           color: var(--bs-primary, #0d6efd);
           transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
       }
       .voice-card.voice-card-more:hover, .voice-card.voice-card-more:focus-visible {
           background-color: var(--bs-gray-200, #e9ecef);
           border-color: var(--bs-primary-dark, #0a58ca);
           color: var(--bs-primary-dark, #0a58ca); outline: none;
           box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
       }
       .voice-card.voice-card-more .voice-card-icon { width: auto; height: auto; margin-bottom: 0.5rem; }
       .voice-card.voice-card-more .voice-card-icon i { font-size: 1.75em; }
       .voice-card.voice-card-more .voice-card-details { text-align: center; }
       .voice-card.voice-card-more .voice-card-name { font-size: 0.4rem; font-weight: 400; line-height: 1.2; }
       .voice-card.voice-card-more .voice-card-selected-indicator { display: none !important; }
       .voice-card { position: relative; }

       /* Voice Control Feature Modal (existing one) detailed styling */
       #voiceControlFeatureModal .modal-body { line-height: 1.7; }
       #voiceControlFeatureModal .features-explanation-section .list-unstyled li {
           transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
       }
       #voiceControlFeatureModal .features-explanation-section .list-unstyled li:hover {
           transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
       }
       #voiceControlFeatureModal .features-explanation-section .list-unstyled li strong {
           color: var(--bs-primary, #0d6efd);
       }
       #voiceControlFeatureModal .alert-warning { color: #664d03; }
       #voiceControlFeatureModal .alert-warning .alert-heading { color: #523e02; }
       #voiceControlFeatureModal .features-explanation-section .list-unstyled em.small { color: #555; font-style: italic; }

       /* START: CSS for New Voices Control Showcase Section & Examples Modal */
       #voices-control-showcase {
           border-bottom: 1px solid #e9ecef; /* Subtle separator */
           background-color: #ffffff; /* Ensure white background for contrast if needed */
       }
       #voices-control-showcase .section-title i.fa-magic { /* Specific to this section's icon */
           font-size: 0.8em;
           vertical-align: middle;
           margin-bottom: 0.1em; /* Fine-tune alignment */
       }
        #voices-control-showcase .img-fluid {
            border: 5px solid #f8f9fa; /* Light border for the image */
        }

       .voice-example-card .card-title {
           color: var(--bs-primary, #0d6efd); /* Use theme primary color */
           margin-bottom: 0.75rem;
       }
       .voice-example-card .prompt-text {
           font-size: 0.875rem; /* Make prompt text slightly smaller */
           line-height: 1.65;
           background-color: #f8f9fa !important; /* Ensure bg color for contrast */
           border: 1px solid #dee2e6 !important;
           padding: 0.75rem 1rem;
           margin-bottom: 0.75rem; /* Space before audio player */
       }
       .voice-example-card .prompt-text strong.d-block {
           color: #212529; /* Darker color for "الأمر النصي:" */
           font-weight: 700; /* Bolder */
       }
       .voice-example-card .prompt-text code {
           font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Ensure good Arabic font */
           color: #0056b3; /* A slightly different color for the prompt itself */
           font-size: 1em; /* Relative to parent p */
           word-break: break-word; /* Allow long prompts to wrap */
           background-color: transparent; /* No background for code inside styled p */
           padding: 0;
       }
       .voice-example-card audio {
           border-radius: 5px;
           /* border: 1px solid #ced4da; */ /* Optional border */
           width: 100%; /* Ensure audio player takes full width */
       }
       /* Subtle hover effect for example cards */
       .voice-example-card {
           transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
           border: 0; /* Remove default card border if any for cleaner look */
       }
       .voice-example-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; /* Softer shadow on hover */
       }
       #voiceControlExamplesModal .modal-header {
           border-bottom: 1px solid #dee2e6;
       }
       #voiceControlExamplesModal .modal-title i {
            color: var(--bs-primary);
       }
       #voiceControlExamplesModal .lead {
           font-weight: 400;
           color: #495057;
       }
        /* END: CSS for New Voices Control Showcase Section & Examples Modal */
        
        
               .cta-button.samples-cta {
            background: linear-gradient(135deg, #28a745, #17a2b8); /* Green to Teal gradient */
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); /* Shadow based on green */
            transition: all 0.3s ease;
            padding: 0.6rem 1.2rem; /* Adjust padding to match other cta-buttons if needed */
            font-size: 0.95rem;    /* Adjust font size if needed */
            border-radius: 50px; /* More rounded */
        }

        .cta-button.samples-cta:hover,
        .cta-button.samples-cta:focus {
            background: linear-gradient(135deg, #17a2b8, #28a745); /* Reverse gradient on hover */
            box-shadow: 0 6px 20px rgba(23, 162, 184, 0.5); /* Shadow based on teal */
            transform: translateY(-2px) scale(1.03);
            color: white;
        }

        .cta-button.samples-cta i {
            /* Optional: If you want a specific animation for the icon */
            /* animation: icon-shake 2s infinite ease-in-out 1s; */
            margin-left: 5px; /* RTL support: if icon is before text */
        }
        /* Example for icon animation (optional) */
        /*
        @keyframes icon-shake {
            0%, 100% { transform: rotate(0deg); }
            10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
            20%, 40%, 60%, 80% { transform: rotate(5deg); }
        }
        */
        
        #voiceControlFilterBadges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center badges */
    gap: 0.5rem; /* Space between badges */
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef; /* Optional separator */
}

.filter-badge {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 50px; /* Pill shape */
    background-color: #e9ecef; /* Light grey background */
    color: #495057; /* Dark grey text */
    border: 1px solid #dee2e6; /* Subtle border */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap; /* Prevent badges from breaking into multiple lines */
}

.filter-badge:hover {
    background-color: #ced4da; /* Darker grey on hover */
    color: #212529;
    border-color: #adb5bd;
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.filter-badge.active {
    background-color: var(--bs-primary, #0d6efd); /* Primary color for active */
    color: white;
    border-color: var(--bs-primary, #0d6efd);
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.4);
}

/* Make sure cards that are hidden don't take up space */
.voice-example-card.hidden-by-filter {
    display: none !important;
}

/* Inside your <style> tag */
.human-simulation-toggle-container.premium-feature-locked {
    opacity: 0.85; /* Example: Slightly dim if locked */
}
.human-simulation-toggle-container.premium-feature-locked .form-check-input {
    cursor: not-allowed; /* Though JS will handle the click, this gives a visual cue */
}


#voiceCloneModal .modal-content {
    border-radius: 0.75rem; 
}
#voiceCloneModal .modal-header {
    border-bottom: none; 
    padding: 1rem 1.5rem;
}
#voiceCloneModal .modal-header .modal-title {
    font-weight: 600;
}
#voiceCloneModal .modal-body {
    padding: 1.5rem 2rem; 
}
#voiceCloneModal .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #495057;
}
#voiceCloneModal .form-control,
#voiceCloneModal .form-select {
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    border-radius: 0.3rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#voiceCloneModal .form-control:focus,
#voiceCloneModal .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
#voiceCloneModal .form-text {
    font-size: 0.8rem;
    color: #6c757d;
}
#voiceCloneModal .invalid-feedback {
    font-size: 0.8rem;
    font-weight: 500;
}
#voiceCloneModal .alert-info { /* For tips section */
    background-color: #e0f3ff; 
    border-color: #b3e0ff;
    color: #004085;
}
#voiceCloneModal .alert-info .alert-heading {
    color: #002752;
}
#voiceCloneModal .alert-info ul {
    font-size: 0.875rem;
    line-height: 1.6;
}
#voiceCloneModal #cloneLoadingIndicator .spinner-border {
    color: var(--bs-primary) !important;
}
#voiceCloneModal #clonedAudioPlayer {
    border: 1px solid #dee2e6;
    border-radius: 5px;
}
#voiceCloneModal .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}
#voiceCloneModal .modal-footer .btn {
    font-weight: 500;
}
#voiceCloneModal .modal-footer .btn-primary {
    box-shadow: 0 2px 5px rgba(var(--bs-primary-rgb), 0.3);
}
#voiceCloneModal .modal-footer .btn-primary:hover {
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.4);
}

/* Styling for the "Clone Voice" card in the slider (uses existing .voice-card-more) */
/* Ensure icon size matches other action cards if .voice-card-more doesn't cover it */
.voice-card.voice-card-more .voice-card-icon i.fa-microphone-plus {
    font-size: 1.75em; /* Match other action card icons like in .voice-card-more */
    /* color is already handled by .voice-card-more text color */
}
/* Ensure text style matches "More Voices" card name */
.voice-card.voice-card-more .voice-card-details .voice-card-name {
     font-size: 0.6rem; 
     font-weight: 400; 
     line-height: 1.2; 
     text-align: center;
}

/* Hide the small clone button on individual voice cards */
.voice-card .voice-card-clone-btn {
    display: none !important;
}


.pro-modal-content {
    border-radius: 1rem !important; /* More rounded */
    border: none !important;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    overflow: hidden; /* Important for header background */
}

.pro-modal-header {
    color: var(--bs-white);
    padding: 1.5rem 2rem;
    border-bottom: none;
    display: flex;
    align-items: center;
}
.pro-modal-header-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.25rem; /* RTL: margin-left */
    flex-shrink: 0;
}
.pro-modal-header-icon {
    font-size: 1.5rem;
    color: var(--bs-white);
}
.pro-modal-header-text {
    flex-grow: 1;
}
.pro-modal-header .modal-title {
    font-size: 1.35rem;
    font-weight: 700 !important;
    margin-bottom: 0.2rem;
}
.pro-modal-subtitle {
    font-size: 0.9rem;
    opacity: 0.85;
    font-weight: 400;
}
.pro-modal-btn-close {
    font-size: 0.8rem;
    margin-inline-start: auto; /* Positions to the start (left in LTR, right in RTL) */
    padding: 0.75rem;
}
.pro-modal-btn-close:hover {
    opacity: 1;
}

.pro-modal-body {
    background-color: var(--bs-body-bg); /* Use body background for a seamless look if preferred */
}

.pro-modal-step {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}
.pro-modal-step.active { /* Just a marker, styling comes from display none/block */
    /* You can add specific active styles if needed, e.g. border-color */
}

.pro-modal-step-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.pro-modal-step-number {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    margin-left: 1rem; /* RTL: margin-left */
    flex-shrink: 0;
}
.pro-modal-step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
    margin-bottom: 0;
}
.pro-modal-step-description {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1.25rem;
    line-height: 1.7;
}
.pro-modal-link {
    font-weight: 500;
    text-decoration: none;
    color: var(--bs-primary);
}
.pro-modal-link:hover {
    text-decoration: underline;
}
.pro-modal-form-label {
    font-weight: 500;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--bs-emphasis-color);
}
.pro-modal-form-control,
.pro-modal-form-select {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg); /* Match step body or modal body */
}
.pro-modal-form-control:focus,
.pro-modal-form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
/* Fix for select arrow position in RTL */
html[dir="rtl"] .pro-modal-form-select {
    background-position: left 0.75rem center;
    padding-left: 2.25rem; /* Ensure space for arrow */
    padding-right: 0.75rem;
}
.pro-modal-form-text {
    font-size: 0.8rem;
    color: var(--bs-tertiary-color);
}
.pro-modal-field-error {
    font-size: 0.8rem;
    color: var(--bs-danger-text-emphasis);
    margin-top: 0.25rem;
    font-weight: 500;
}
.file-upload-wrapper {
    position: relative;
    border: 2px dashed var(--bs-border-color-translucent);
    border-radius: 0.5rem;
    padding: 1.5rem; /* Reduced padding */
    text-align: center;
    cursor: pointer;
    background-color: var(--bs-tertiary-bg);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.file-upload-wrapper:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}
.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bs-secondary-color);
}
.file-upload-label i {
    color: var(--bs-primary);
}
.file-upload-text {
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.file-upload-selected-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--bs-primary-text-emphasis);
    margin-top: 0.5rem;
    word-break: break-all;
}
.pro-modal-progress {
    height: 10px !important;
    border-radius: 5px;
    background-color: var(--bs-tertiary-bg);
}
.pro-modal-progress .progress-bar {
    background-color: var(--bs-success);
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

/* Custom Spinner for Loading Indicator */
.pro-modal-spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.pro-modal-spinner div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 7px solid var(--bs-primary);
  border-radius: 50%;
  animation: pro-modal-spinner-anim 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--bs-primary) transparent transparent transparent;
}
.pro-modal-spinner div:nth-child(1) { animation-delay: -0.45s; }
.pro-modal-spinner div:nth-child(2) { animation-delay: -0.3s; }
.pro-modal-spinner div:nth-child(3) { animation-delay: -0.15s; }
@keyframes pro-modal-spinner-anim {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pro-modal-success-icon {
    animation: pro-modal-success-pop 0.5s ease-out forwards;
}
@keyframes pro-modal-success-pop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.pro-modal-audio-player {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}
.pro-modal-premium-notice {
    border-radius: 0.5rem;
}

#cloneGlobalErrorArea {
    border-radius: 0.5rem;
    padding: 1rem 1.25rem !important; /* Ensure padding */
}
#cloneGlobalErrorArea .fa-times-circle {
    color: var(--bs-danger-text-emphasis);
}

.pro-modal-footer {
    padding: 1.25rem 2rem;
    background-color: var(--bs-body-tertiary); /* Light footer */
    border-top: 1px solid var(--bs-border-color-translucent);
    display: flex;
    justify-content: space-between; /* Align buttons */
}
.pro-modal-btn {
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    border-radius: 50px; /* Pill shape */
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.pro-modal-btn-prev i {
    margin-left: 0; margin-right: 0.35rem; /* RTL fix */
}
html[dir="rtl"] .pro-modal-btn-prev i {
    margin-right: 0; margin-left: 0.35rem;
}
.pro-modal-btn-next i {
    margin-right: 0; margin-left: 0.35rem; /* RTL fix */
}
html[dir="rtl"] .pro-modal-btn-next i {
    margin-left: 0; margin-right: 0.35rem;
}

.pro-modal-btn-submit, .pro-modal-btn-next {
    min-width: 150px; /* Give them some base width */
}
.pro-modal-btn-spinner {
    vertical-align: text-bottom;
}

#aiCloningSuperiorityNotice i.fa-award {
    color: var(--bs-success-text-emphasis, #0a3622); /* لون متناسق مع نص alert-success */
    /* يمكنك إضافة font-size: 0.9em; أو ما شابه إذا أردت تصغيرها أكثر */
}

/* للحفاظ على الإطار الأيسر المميز (إذا كنت تستخدمه) */
#aiCloningSuperiorityNotice.alert-success {
    border-left: 4px solid var(--bs-success, #198754); /* قللت سمك الإطار قليلاً */
    border-radius: 0.5rem;
}


.dialect-flag-btn .fi {
    font-size: 1.3em; /* Adjust this value to make flags larger or smaller */
                      /* 1em usually makes the flag height equal to the button's font-size */
                      /* 1.3em might be a good starting point for a 28px button height */
    line-height: 1;   /* Helps ensure consistent vertical alignment if needed */
    /* The flag-icons library handles aspect ratio, so they might not be perfectly square */
    /* If you want square flags, you can use 'fis' class like <span class="fi fis fi-sa"></span> */
    /* and then you might need to adjust width/height of the span or font-size accordingly */
}



#voiceCloneModal .pro-modal-content {
    border-radius: 1rem !important;
    border: none !important;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    overflow: hidden;
}

#voiceCloneModal .pro-modal-header {
    background: linear-gradient(135deg, var(--bs-primary, #0d6efd), var(--bs-primary-dark, #0a58ca));
    color: var(--bs-white, #fff);
    padding: 1.5rem 2rem;
    border-bottom: none;
    display: flex;
    align-items: center;
}

#voiceCloneModal .pro-modal-header-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.25rem;
    flex-shrink: 0;
}

#voiceCloneModal .pro-modal-header-icon {
    font-size: 1.5rem;
    color: var(--bs-white, #fff);
}
#voiceCloneModal .pro-modal-header-text {
    flex-grow: 1;
}

#voiceCloneModal .pro-modal-header .modal-title {
    font-size: 1.35rem;
    font-weight: 700 !important;
    margin-bottom: 0.2rem;
}

#voiceCloneModal .pro-modal-subtitle {
    font-size: 0.9rem;
    opacity: 0.85;
    font-weight: 400;
}

#voiceCloneModal .pro-modal-btn-close {
    filter: brightness(0) invert(1);
    font-size: 0.8rem;
    margin-inline-start: auto;
    padding: 0.75rem;
}
#voiceCloneModal .pro-modal-btn-close:hover {
    opacity: 1;
}

#voiceCloneModal .pro-modal-body {
    background-color: var(--bs-body-bg, #fff);
}

#voiceCloneModal .pro-modal-step {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.1));
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}
#voiceCloneModal .pro-modal-step.active {
}

#voiceCloneModal .pro-modal-step-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.075));
}

#voiceCloneModal .pro-modal-step-number {
    background-color: var(--bs-primary, #0d6efd);
    color: var(--bs-white, #fff);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    margin-left: 1rem;
    flex-shrink: 0;
}

#voiceCloneModal .pro-modal-step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis, #052c65);
    margin-bottom: 0;
}

#voiceCloneModal .pro-modal-step-description {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 1.25rem;
    line-height: 1.7;
}
#voiceCloneModal .pro-modal-link {
    font-weight: 500;
    text-decoration: none;
    color: var(--bs-primary);
}
#voiceCloneModal .pro-modal-link:hover {
    text-decoration: underline;
}

#voiceCloneModal .pro-modal-form-label {
    font-weight: 500;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--bs-emphasis-color, #343a40);
}

#voiceCloneModal .pro-modal-form-control,
#voiceCloneModal .pro-modal-form-select {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    background-color: var(--bs-body-bg);
}

#voiceCloneModal .pro-modal-form-control:focus,
#voiceCloneModal .pro-modal-form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
html[dir="rtl"] #voiceCloneModal .pro-modal-form-select {
    background-position: left 0.75rem center;
    padding-left: 2.25rem;
    padding-right: 0.75rem;
}

#voiceCloneModal .pro-modal-form-text {
    font-size: 0.8rem;
    color: var(--bs-tertiary-color, #6c757d);
}
#voiceCloneModal .pro-modal-field-error {
    font-size: 0.8rem;
    color: var(--bs-danger-text-emphasis, #842029);
    margin-top: 0.25rem;
    font-weight: 500;
}

#voiceCloneModal .file-upload-wrapper {
    position: relative;
    border: 2px dashed var(--bs-border-color-translucent, rgba(0,0,0,0.15));
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#voiceCloneModal .file-upload-wrapper:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
}
#voiceCloneModal .file-upload-input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
#voiceCloneModal .file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bs-secondary-color);
}
#voiceCloneModal .file-upload-label i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--bs-primary);
}
#voiceCloneModal .file-upload-text {
    font-weight: 500;
    margin-bottom: 0.25rem;
}
#voiceCloneModal .file-upload-subtext {
    font-size: 0.8rem;
    color: var(--bs-tertiary-color);
}
#voiceCloneModal .file-upload-selected-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--bs-primary-text-emphasis);
    margin-top: 0.5rem;
    word-break: break-all;
}

#voiceCloneModal .pro-modal-progress {
    height: 10px !important;
    border-radius: 5px;
    background-color: var(--bs-tertiary-bg, #e9ecef);
}
#voiceCloneModal .pro-modal-progress .progress-bar {
    background-color: var(--bs-success);
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

#voiceCloneModal #cloneLoadingIndicator {
}
#voiceCloneModal .pro-modal-spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
#voiceCloneModal .pro-modal-spinner div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 7px solid var(--bs-primary);
  border-radius: 50%;
  animation: pro-modal-spinner-anim 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--bs-primary) transparent transparent transparent;
}
#voiceCloneModal .pro-modal-spinner div:nth-child(1) { animation-delay: -0.45s; }
#voiceCloneModal .pro-modal-spinner div:nth-child(2) { animation-delay: -0.3s; }
#voiceCloneModal .pro-modal-spinner div:nth-child(3) { animation-delay: -0.15s; }
@keyframes pro-modal-spinner-anim {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#voiceCloneModal .pro-modal-success-icon {
    animation: pro-modal-success-pop 0.5s ease-out forwards;
}
@keyframes pro-modal-success-pop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
#voiceCloneModal .pro-modal-audio-player {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
}
#voiceCloneModal .pro-modal-premium-notice {
    border-radius: 0.5rem;
}

#voiceCloneModal #cloneGlobalErrorArea {
    border-radius: 0.5rem;
    padding: 1rem 1.25rem !important;
}
#voiceCloneModal #cloneGlobalErrorArea .fa-times-circle {
    color: var(--bs-danger-text-emphasis);
}

#voiceCloneModal .pro-modal-footer {
    padding: 1.25rem 2rem;
    background-color: var(--bs-body-tertiary, #f8f9fa);
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.1));
    display: flex;
    justify-content: space-between;
}

#voiceCloneModal .pro-modal-btn {
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

#voiceCloneModal .pro-modal-btn-prev i {
    margin-left: 0; margin-right: 0.35rem;
}
html[dir="rtl"] #voiceCloneModal .pro-modal-btn-prev i {
    margin-right: 0; margin-left: 0.35rem;
}
#voiceCloneModal .pro-modal-btn-next i {
    margin-right: 0; margin-left: 0.35rem;
}
html[dir="rtl"] #voiceCloneModal .pro-modal-btn-next i {
    margin-left: 0; margin-right: 0.35rem;
}

#voiceCloneModal .pro-modal-btn-submit,
#voiceCloneModal .pro-modal-btn-next {
    min-width: 150px;
}

#voiceCloneModal .pro-modal-btn-spinner {
    vertical-align: text-bottom;
}

#aiCloningSuperiorityNotice {
    border-left-width: 4px !important;
    border-radius: 0.5rem;
}
#aiCloningSuperiorityNotice i.fa-award {
    color: var(--bs-success-text-emphasis, #0a3622);
}


#voiceCloneModal .pro-modal-content {
    border-radius: 1rem !important; /* More rounded corners */
    border: none !important; /* Remove any default border */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; /* Stronger, more prominent shadow */
    overflow: hidden; /* Important for header background to respect border-radius */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transition for modal content */
}

#voiceCloneModal .pro-modal-header {
    background: linear-gradient(135deg, var(--bs-primary, #0d6efd), var(--bs-primary-dark, #0a58ca)); /* Primary gradient for header */
    color: var(--bs-white, #fff);
    padding: 1.5rem 2rem; /* Increased padding */
    border-bottom: none; /* No separator line below header */
    display: flex;
    align-items: center;
}

#voiceCloneModal .pro-modal-header-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly transparent white background */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.25rem; /* Space between icon and text (RTL: margin-left) */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

#voiceCloneModal .pro-modal-header-icon {
    font-size: 1.5rem; /* Good size for the icon */
    color: var(--bs-white, #fff);
}

#voiceCloneModal .pro-modal-header-text {
    flex-grow: 1; /* Allow text to take available space */
}

#voiceCloneModal .pro-modal-header .modal-title {
    font-size: 1.35rem; /* Main title size */
    font-weight: 700 !important; /* Bolder title */
    margin-bottom: 0.2rem;
}

#voiceCloneModal .pro-modal-subtitle {
    font-size: 0.9rem; /* Smaller, descriptive subtitle */
    opacity: 0.85; /* Slightly faded */
    font-weight: 400;
}

#voiceCloneModal .pro-modal-btn-close {
    filter: brightness(0) invert(1); /* Makes the close icon white */
    font-size: 0.8rem;
    margin-inline-start: auto; /* Positions to the start (left in LTR, right in RTL) */
    padding: 0.75rem;
    opacity: 0.9; /* Slightly less opaque for better contrast */
    transition: opacity 0.2s ease, transform 0.2s ease; /* Smooth transition */
}
#voiceCloneModal .pro-modal-btn-close:hover {
    opacity: 1;
    transform: scale(1.1); /* Subtle hover effect */
}

#voiceCloneModal .pro-modal-body {
    background-color: var(--bs-body-bg, #fff); /* Use body background for a seamless look */
    padding: 2.5rem 3rem !important; /* More generous padding for content */
}

#voiceCloneModal .pro-modal-step {
    background-color: var(--bs-white); /* Ensure step background is white */
    padding: 1.75rem; /* Slightly more padding for each step */
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    border: 1px solid var(--bs-gray-300); /* Stronger, more defined border for steps */
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.075); /* Softer, slightly larger shadow */
    transition: all 0.2s ease; /* Smooth transition for steps */
}
/* No specific active styles needed if steps are hidden/shown by JS */

#voiceCloneModal .pro-modal-step-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* More space below header */
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-gray-200) !important; /* Lighter separator */
}

#voiceCloneModal .pro-modal-step-number {
    background-color: var(--bs-primary, #0d6efd);
    color: var(--bs-white, #fff);
    width: 38px; /* Slightly larger number circle */
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem; /* Larger font for number */
    margin-left: 1.25rem; /* RTL: margin-left */
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb), 0.3); /* Subtle shadow for depth */
}

#voiceCloneModal .pro-modal-step-title {
    font-size: 1.2rem; /* Larger title for steps */
    font-weight: 600;
    color: var(--bs-primary-text-emphasis, #052c65);
    margin-bottom: 0;
}

#voiceCloneModal .pro-modal-step-description {
    font-size: 0.95rem; /* Slightly larger description text */
    color: var(--bs-gray-700); /* Darker text for readability */
    margin-bottom: 1.5rem; /* More space below description */
    line-height: 1.7;
}
#voiceCloneModal .pro-modal-link {
    font-weight: 600; /* Bolder link text */
    text-decoration: none;
    color: var(--bs-primary);
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
#voiceCloneModal .pro-modal-link:hover {
    text-decoration: underline;
    color: var(--bs-primary-dark, #0a58ca);
}

#voiceCloneModal .pro-modal-form-label {
    font-weight: 600; /* Bolder labels */
    margin-bottom: 0.5rem; /* More space below label */
    font-size: 0.95rem; /* Slightly larger label font */
    color: var(--bs-gray-800); /* Darker label color */
}

#voiceCloneModal .pro-modal-form-control,
#voiceCloneModal .pro-modal-form-select {
    padding: 0.75rem 1.25rem; /* More padding for inputs */
    font-size: 1rem; /* Larger font for input text */
    border-radius: 0.5rem; /* Slightly more rounded inputs */
    border: 1px solid var(--bs-gray-400); /* More defined border */
    background-color: var(--bs-gray-100); /* Light background for inputs */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

#voiceCloneModal .pro-modal-form-control:focus,
#voiceCloneModal .pro-modal-form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2); /* Softer, slightly larger focus ring */
    background-color: var(--bs-white); /* White background on focus */
}
html[dir="rtl"] #voiceCloneModal .pro-modal-form-select {
    background-position: left 0.75rem center;
    padding-left: 2.5rem; /* Ensure space for arrow in RTL */
    padding-right: 1.25rem; /* Keep consistent with LTR padding */
}

#voiceCloneModal .pro-modal-form-text {
    font-size: 0.85rem; /* Slightly larger helper text */
    color: var(--bs-gray-600); /* More visible color */
}
#voiceCloneModal .pro-modal-field-error {
    font-size: 0.85rem; /* Slightly larger error text */
    color: var(--bs-danger-text-emphasis, #842029);
    margin-top: 0.5rem; /* More space above error message */
    font-weight: 500;
}

#voiceCloneModal .file-upload-wrapper {
    position: relative;
    border: 3px dashed var(--bs-gray-400); /* Thicker dashed border */
    border-radius: 0.75rem; /* More rounded */
    padding: 2rem; /* More padding */
    text-align: center;
    cursor: pointer;
    background-color: var(--bs-gray-100); /* Light background */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#voiceCloneModal .file-upload-wrapper:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.1); /* Subtle hover shadow */
}
#voiceCloneModal .file-upload-input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
#voiceCloneModal .file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bs-gray-700);
}
#voiceCloneModal .file-upload-label i {
    font-size: 3.5rem; /* Significantly larger icon */
    margin-bottom: 1rem; /* More space below icon */
    color: var(--bs-primary);
    transition: transform 0.3s ease; /* Smooth icon movement on hover */
}
#voiceCloneModal .file-upload-wrapper:hover .file-upload-label i {
    transform: translateY(-5px); /* Subtle lift on hover */
}
#voiceCloneModal .file-upload-text {
    font-weight: 600; /* Bolder text */
    margin-bottom: 0.25rem;
    font-size: 1.1rem; /* Larger text */
}
#voiceCloneModal .file-upload-subtext {
    font-size: 0.9rem; /* Slightly larger subtext */
    color: var(--bs-gray-600);
}
#voiceCloneModal .file-upload-selected-name {
    font-size: 0.95rem; /* Larger font for selected file name */
    font-weight: bold;
    color: var(--bs-primary-dark); /* More prominent color */
    margin-top: 0.75rem; /* More space */
    word-break: break-all;
}

#voiceCloneModal .pro-modal-progress {
    height: 12px !important; /* Slightly thicker progress bar */
    border-radius: 6px;
    background-color: var(--bs-gray-200);
}
#voiceCloneModal .pro-modal-progress .progress-bar {
    background-color: var(--bs-success);
    border-radius: 6px;
    transition: width 0.3s ease-in-out;
}

#voiceCloneModal #cloneLoadingIndicator {
    display: flex; /* Ensure flex for centering spinner and text */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px; /* Give loading area vertical space */
    padding: 2rem 0;
}
#voiceCloneModal .pro-modal-spinner {
    width: 90px; /* Larger spinner */
    height: 90px;
}
#voiceCloneModal .pro-modal-spinner div {
    border-width: 8px; /* Thicker spinner lines */
    border-color: var(--bs-primary) transparent transparent transparent;
}
#voiceCloneModal #cloneLoadingIndicator h5 {
    font-size: 1.25rem; /* Larger loading message */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--bs-primary-dark); /* Darker primary color */
    font-weight: 600;
}
#voiceCloneModal #cloneLoadingIndicator p {
    font-size: 0.95rem; /* Slightly larger subtext */
    color: var(--bs-gray-600);
}

#voiceCloneModal .pro-modal-success-icon {
    font-size: 5rem !important; /* Large, impactful success icon */
    color: var(--bs-success); /* Use Bootstrap success color */
    animation: pro-modal-success-pop 0.6s ease-out forwards; /* Slightly longer animation */
}
@keyframes pro-modal-success-pop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.15); opacity: 1; } /* Slightly larger bounce */
    100% { transform: scale(1); opacity: 1; }
}
#voiceCloneModal #cloneResultArea h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-success-text-emphasis);
}
#voiceCloneModal #cloneResultArea p {
    font-size: 1rem;
    color: var(--bs-gray-700);
}
#voiceCloneModal .pro-modal-audio-player {
    border: 2px solid var(--bs-gray-300); /* Thicker border */
    border-radius: 0.75rem; /* More rounded */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Subtle shadow for the player */
}
#voiceCloneModal .pro-modal-premium-notice {
    border-radius: 0.75rem; /* Consistent border-radius */
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
    padding: 1.5rem !important; /* More padding */
}
#voiceCloneModal .pro-modal-premium-notice .fa-crown {
    font-size: 2rem !important; /* Larger icon for warning */
    color: var(--bs-warning); /* Use standard warning color */
    margin-left: 0.75rem; /* More space for icon */
}
#voiceCloneModal .pro-modal-premium-notice strong {
    color: var(--bs-warning-text-emphasis);
}
#voiceCloneModal .pro-modal-premium-notice a {
    color: var(--bs-primary) !important; /* Link should be primary */
    font-weight: 700 !important;
    text-decoration: underline;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
#voiceCloneModal .pro-modal-premium-notice a:hover {
    color: var(--bs-primary-dark);
}


#voiceCloneModal #cloneGlobalErrorArea {
    border-radius: 0.75rem; /* Consistent border-radius */
    padding: 1.5rem 2rem !important; /* More padding */
    border-left: 5px solid var(--bs-danger) !important; /* Stronger left border */
    background-color: var(--bs-danger-bg-subtle) !important;
    color: var(--bs-danger-text-emphasis) !important;
    box-shadow: 0 2px 8px rgba(var(--bs-danger-rgb), 0.1); /* Subtle shadow */
}
#voiceCloneModal #cloneGlobalErrorArea .fa-times-circle {
    font-size: 1.5rem; /* Larger error icon */
    color: var(--bs-danger); /* Use standard danger color */
    margin-left: 0.75rem; /* Space between icon and text */
}
#voiceCloneModal #cloneGlobalErrorArea span {
    font-size: 1rem; /* Clearer error text */
    font-weight: 500;
}

#voiceCloneModal .pro-modal-footer {
    padding: 1.5rem 3rem; /* Generous padding */
    background-color: var(--bs-gray-100); /* Light background for footer */
    border-top: 1px solid var(--bs-gray-200); /* Subtle top border */
    display: flex;
    justify-content: space-between; /* Align buttons */
}

#voiceCloneModal .pro-modal-btn {
    font-weight: 500;
    padding: 0.75rem 2rem; /* Larger buttons */
    border-radius: 50px; /* Pill shape */
    font-size: 1rem; /* Larger font */
    transition: all 0.2s ease; /* Smooth transition for all button states */
    box-shadow: 0 3px 8px rgba(0,0,0,0.1); /* Subtle shadow on all buttons */
}

#voiceCloneModal .pro-modal-btn:hover {
    transform: translateY(-2px); /* Lift effect on hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
}

/* Specific button colors and states */
#voiceCloneModal .pro-modal-btn-prev {
    color: var(--bs-gray-700);
    border-color: var(--bs-gray-400);
    background-color: var(--bs-white);
}
#voiceCloneModal .pro-modal-btn-prev:hover {
    color: var(--bs-gray-900);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-500);
}

#voiceCloneModal .pro-modal-btn-next {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}
#voiceCloneModal .pro-modal-btn-next:hover {
    background-color: blue;
    border-color: black;
}

#voiceCloneModal .pro-modal-btn-submit {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: var(--bs-white);
    font-weight: 700; /* Bolder for submit action */
}
#voiceCloneModal .pro-modal-btn-submit:hover {
    background-color: var(--bs-success-dark, #157347); /* Darker green on hover */
    border-color: var(--bs-success-dark, #157347);
}

#voiceCloneModal .pro-modal-btn-spinner {
    vertical-align: middle; /* Better alignment for spinner */
}

#voiceCloneModal .pro-modal-btn-prev i {
    margin-left: 0; margin-right: 0.35rem; /* Default for LTR, icon before text */
}
html[dir="rtl"] #voiceCloneModal .pro-modal-btn-prev i {
    margin-right: 0; margin-left: 0.35rem; /* RTL: icon after text */
}
#voiceCloneModal .pro-modal-btn-next i {
    margin-right: 0; margin-left: 0.35rem; /* Default for LTR, icon after text */
}
html[dir="rtl"] #voiceCloneModal .pro-modal-btn-next i {
    margin-left: 0; margin-right: 0.35rem; /* RTL: icon before text */
}
#voiceCloneModal .pro-modal-btn-submit i {
    margin-left: 0; margin-right: 0.5rem; /* Default for the submit button icon */
}
html[dir="rtl"] #voiceCloneModal .pro-modal-btn-submit i {
    margin-right: 0; margin-left: 0.5rem; /* Consistent RTL for submit button icon */
}

/* Specific styling for the AI cloning superiority notice */
#voiceCloneModal #aiCloningSuperiorityNotice {
    border-left-width: 5px !important; /* Thicker left border */
    border-radius: 0.75rem; /* Consistent border-radius */
    background-color: var(--bs-success-bg-subtle) !important;
    color: var(--bs-success-text-emphasis) !important;
    padding: 1.5rem !important; /* More generous padding */
    box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-success-rgb), 0.1); /* Subtle shadow */
}
#voiceCloneModal #aiCloningSuperiorityNotice i.fa-award {
    font-size: 2rem; /* Larger icon */
    color: var(--bs-success); /* Base success color for icon */
    margin-left: 0.75rem; /* Space between icon and text */
}
#voiceCloneModal #aiCloningSuperiorityNotice h6 {
    font-size: 1.15rem; /* Larger heading */
    color: var(--bs-success-text-emphasis);
}
#voiceCloneModal #aiCloningSuperiorityNotice div:last-child {
    font-size: 0.95rem; /* Slightly larger text */
    line-height: 1.6;
}

/* General Bootstrap Modal Transition Enhancement */
/* This will apply to all Bootstrap modals, making them slide in slightly */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -30px); /* Start slightly higher */
}
.modal.fade.show .modal-dialog {
    transform: translate(0, 0); /* Slide down to original position */
}



.modal-title2 {

    color: #0aca71;
}



.limited-time-offer-banner {
    background: linear-gradient(135deg, #ffc107, #ff9800); /* Yellow-Orange Gradient */
    color: #333; /* Darker text for contrast on yellow */
    padding: 12px 15px;
    border-radius: 8px; /* More rounded */
    border: 2px solid #ff8f00; /* Darker orange border */
    font-size: 0.9rem;
    text-align: center;
    margin: 10px auto; /* Spacing */
    max-width: 95%;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3); /* Soft shadow */
    position: relative; /* For badge positioning */
    overflow: hidden; /* For any potential overflow from animated elements */
}

.limited-time-offer-banner .offer-badge {
    background-color: #dc3545; /* Red badge */
    color: white;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px; /* Pill shape */
    display: inline-block;
    margin-bottom: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.limited-time-offer-banner .offer-badge i {
    margin-left: 5px; /* RTL: Icon on the right of text */
}
html[dir="rtl"] .limited-time-offer-banner .offer-badge i {
    margin-right: 5px; /* LTR: Icon on the left of text */
    margin-left: 0;
}

.limited-time-offer-banner .offer-text {
    font-weight: 500;
    line-height: 1.4;
}
.limited-time-offer-banner .offer-text strong {
    color: #c62828; /* Darker red for emphasis within the text */
}

.limited-time-offer-banner .offer-countdown {
    font-weight: bold;
    color: #424242; /* Slightly darker grey */
    background-color: rgba(255, 255, 255, 0.2); /* Subtle bg for countdown */
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 5px;
}
.limited-time-offer-banner .offer-countdown #yearlyPlanOfferCountdown {
    color: #d32f2f; /* Red countdown text */
    font-family: 'Poppins', 'Tajawal', sans-serif; /* More digital look for numbers */
}

/* Optional: Add a subtle animation to the badge */
@keyframes pulse-badge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}



:root {
    --bs-success-soft: rgba(25, 135, 84, 0.1);
    --bs-warning-soft: rgba(255, 193, 7, 0.15);
    --bs-info-soft: rgba(13, 202, 240, 0.12);
    --bs-primary-soft: rgba(13, 110, 253, 0.1);
}
.bg-success-soft { background-color: var(--bs-success-soft) !important; border-color: rgba(25, 135, 84, 0.2) !important; }
.bg-warning-soft { background-color: var(--bs-warning-soft) !important; border-color: rgba(255, 193, 7, 0.3) !important; }
.bg-info-soft { background-color: var(--bs-info-soft) !important; border-color: rgba(13, 202, 240, 0.3) !important; }

/* Main card container */
.pro-feature-card {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem; /* Softer radius */
    border: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-body-bg);
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pro-feature-card:hover {
    box-shadow: 0 7px 20px -4px rgba(0, 0, 0, 0.07);
    border-color: var(--bs-primary-border-subtle);
    transform: translateY(-2px);
}

/* Locked state (applies when user is not subscribed/has no trials) */
/* This `.feature-locked` class is toggled by your existing JavaScript */
.pro-feature-card.feature-locked {
    background-color: var(--bs-tertiary-bg);
}
.pro-feature-card.feature-locked .pro-feature-toggle-switch .form-check-input {
    cursor: pointer; /* Allows clicking to trigger subscribe modal */
    background-color: var(--bs-secondary-bg);
}
.pro-feature-card.feature-locked .pro-feature-title,
.pro-feature-card.feature-locked .pro-feature-icon {
    opacity: 0.7;
}

/* Icon styles */
.pro-feature-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 1.15rem; /* RTL */
    background: linear-gradient(145deg, var(--bs-primary-bg-subtle), var(--bs-body-bg));
    border: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-primary);
}
.pro-feature-icon {
    font-size: 1.4rem;
}

/* Text content styles */
.pro-feature-content {
    flex-grow: 1;
    text-align: right;
}
.pro-feature-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bs-body-color);
}

/* Badge styles */
.badge.pro-badge {
    font-size: 0.65rem;
    padding: 0.3em 0.7em;
    font-weight: 700;
    vertical-align: middle;
    border: 1px solid transparent;
    line-height: 1;
    border-radius: 50px;
}
.pro-badge.bg-success-soft { color: #146c43 !important; }
.pro-badge.bg-warning-soft { color: #997404 !important; }
.pro-badge.bg-info-soft { color: #087990 !important; }


/* Description styles */
.pro-feature-description {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    display: block;
    line-height: 1.6;
}
.pro-feature-description a {
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--bs-primary);
    transition: color 0.2s ease;
}
.pro-feature-description a:hover {
    color: var(--bs-primary-dark);
    border-bottom-style: solid;
}

/* Toggle switch styles */
.pro-feature-toggle-switch .form-check-input {
    width: 3.75em;
    height: 1.9em;
    cursor: pointer;
    background-size: 55%;
    border: 1px solid var(--bs-border-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/%3e%3c/svg%3e");
    transition: background-position 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.pro-feature-toggle-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.pro-feature-toggle-switch .form-check-input:disabled {
    opacity: 0.5;
    background-color: var(--bs-secondary-bg);
}



/* START: Voice Style Modal Cards CSS */
.voice-style-card {
    border-radius: 0.75rem;
    border: 2px solid transparent;
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
    box-shadow: 0 4px 15px -2px rgba(0,0,0,0.1);
}

.voice-style-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.voice-style-card .card-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    opacity: 0.8;
}

.voice-style-card .card-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.voice-style-card .card-description {
    font-size: 0.8rem;
    opacity: 0.9;
    line-height: 1.4;
    flex-grow: 1;
}

.voice-style-card.selected {
    border-color: #fff;
    box-shadow: 0 0 0 4px var(--bs-primary), 0 8px 25px rgba(var(--bs-primary-rgb), 0.4);
    transform: translateY(-2px) scale(1.01);
}

.voice-style-card .selected-checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.25rem;
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.voice-style-card.selected .selected-checkmark {
    display: inline-flex;
    animation: checkmark-pop 0.3s ease-out;
}

@keyframes checkmark-pop {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
/* END: Voice Style Modal Cards CSS */



#voiceStyleModal .pro-modal-header {
    background: #8A91A0 !important;
    color: #fff !important;
}

/* This specifically targets the title and subtitle text inside to ensure they are white */
#voiceStyleModal .pro-modal-header .modal-title,
#voiceStyleModal .pro-modal-header .pro-modal-subtitle {
    color: #fff !important;
}

/* This makes sure the icon in the colored circle is also white */
#voiceStyleModal .pro-modal-header .pro-modal-header-icon {
    color: #fff !important;
}

/* This makes sure the 'X' close button is white */
#voiceStyleModal .pro-modal-header .pro-modal-btn-close {
    filter: brightness(0) invert(1) !important;
}



/* --- START: Pro Voiceover Feature & Modal CSS --- */

/* Main Feature Card on the page */
.pro-feature-card-main {
    background: #f8f9fa; /* Light background */
}
.pro-feature-card-main .card-title {
    color: var(--bs-primary-text-emphasis);
}

/* Modal Content Styling */
.pro-voiceover-modal-content {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175);
    overflow: hidden;
}
.pro-voiceover-modal-header {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-dark));
    color: white;
    padding: 1.25rem 1.5rem;
    border-bottom: none;
}
.pro-voiceover-modal-subtitle {
    opacity: 0.85;
    font-size: 0.9rem;
}
.pro-voiceover-btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}
.pro-voiceover-btn-close:hover {
    opacity: 1;
}
.pro-voiceover-modal-body {
    padding: 0;
}

/* Chat Simulation Specific Styles */
.chat-container {
    height: 60vh;
    max-height: 450px;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
}
.chat-log {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}
.chat-message {
    padding: 0.75rem 1.1rem;
    border-radius: 1.25rem;
    max-width: 80%;
    line-height: 1.5;
    animation: fadeIn 0.4s ease-out;
}
.chat-message.bot {
    background-color: #e9ecef;
    color: #212529;
    border-bottom-right-radius: 0.25rem;
    align-self: flex-end; /* RTL: Aligned to the right */
    text-align: right;
}
.chat-message.user {
    background-color: var(--bs-primary);
    color: white;
    border-bottom-left-radius: 0.25rem;
    align-self: flex-start; /* RTL: Aligned to the left */
    text-align: right;
}
.chat-controls-container {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    background-color: #f8f9fa;
}
.chat-input-area {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.chat-input-area textarea {
    resize: none;
}
.chat-input-area button {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.action-buttons-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}
.action-buttons-area .btn {
    font-size: 0.85rem;
}

/* Fake Audio Player in Chat */
.sim-audio-player {
    border: 1px solid #dee2e6;
    border-radius: 50px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    margin-top: 8px;
}
.sim-audio-player .play-btn {
    background-color: var(--bs-success);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sim-audio-player .progress-bar-container {
    flex-grow: 1;
    height: 5px;
    background-color: #e9ecef;
    border-radius: 5px;
}

/* Typing Indicator */
.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: #6c757d;
    border-radius: 50%;
    display: inline-block;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-of-type(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-of-type(2) { animation-delay: -0.16s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

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



#simUserInput[readonly] {
    background-color: #f8f9fa; /* A slightly off-white color */
    cursor: default; /* Use the default cursor, not the text-input cursor */
}




.plan-card.highlighted-legendary {
    border: 2px solid #8a2be2; /* A majestic purple */
    transform: scale(1.05);
    z-index: 2;
}
.highlight-badge.legendary-badge {
    background: linear-gradient(135deg, #8a2be2, #4b0082); /* Purple gradient */
    color: white;
}
.btn-legendary {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
}
.btn-legendary:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.5);
}



  .pro-feature-card:not(.feature-locked) {
        position: relative; /* For positioning pseudo-elements */
        overflow: hidden;   /* Keep all effects contained */
        background-color: #f7faff; /* A very clean, slightly cool off-white */
        border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
        /* A subtle outer glow to make it feel energized */
        box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.1);
        /* Smooth transitions for all properties, especially for the hover effect */
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                    box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                    border-color 0.3s ease;
    }

    /* --- 2. The "Aurora" Glow (using ::before) --- */
    /* This creates a soft, static light effect at the top of the card. */
    .pro-feature-card:not(.feature-locked)::before {
        content: '';
        position: absolute;
        z-index: 0; /* Behind the card content */
        top: 0;
        left: 0;
        right: 0;
        height: 150%; /* Tall enough to scale on hover without showing an edge */
        
        /* The radial gradient creates the soft aurora */
        background: radial-gradient(
            circle at 50% -20%, /* Position the gradient's center above the card */
            rgba(var(--bs-primary-rgb), 0.15),
            transparent 60%
        );
        
        opacity: 0.8;
        transform: scale(1);
        /* Smooth transition for the hover effect on the glow itself */
        transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    }

    /* --- 3. Enhanced Hover Effect --- */
    .pro-feature-card:not(.feature-locked):hover {
        transform: translateY(-4px); /* A subtle lift */
        border-color: rgba(var(--bs-primary-rgb), 0.5);
        /* A more pronounced shadow to emphasize the lift */
        box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), 0.15);
    }
    
    /* On hover, make the aurora glow "bloom" outward and become brighter */
    .pro-feature-card:not(.feature-locked):hover::before {
        opacity: 1;
        transform: scale(1.2); /* Makes the glow expand */
    }

    /* --- 4. Clean Styling for the Locked State --- */
    /* This section removes all special effects for the locked card */
    .pro-feature-card.feature-locked {
        background-color: var(--bs-tertiary-bg, #f8f9fa);
        border-color: var(--bs-border-color-translucent);
        box-shadow: none; /* No glow for the locked state */
    }

    .pro-feature-card.feature-locked::before {
        display: none; /* Hide the aurora glow pseudo-element */
    }
    
    
    .word-counter { 
    z-index: 2; 
    background-color: rgba(241, 245, 249, 0.8); 
    backdrop-filter: blur(2px);
    /* Add some padding and make it a pill shape to match the badge */
    padding: 4px 6px;
    border-radius: 20px;
    font-size: 0.6rem;
}



@media (max-width: 767px) {

    /* Target the ENTIRE modal for more compact padding on mobile */
    #voiceStyleModal .pro-modal-body {
        padding: 1.25rem 1rem !important; /* Reduce horizontal and vertical padding */
    }

    #voiceStyleModal .pro-modal-header {
        padding: 1rem 1.25rem; /* Reduce header padding */
    }
    
    #voiceStyleModal .pro-modal-header .modal-title {
        font-size: 1.1rem; /* Slightly smaller title font on mobile */
    }

    #voiceStyleModal .pro-modal-header .pro-modal-subtitle {
        font-size: 0.8rem; /* Smaller subtitle font */
    }

    #voiceStyleModal .pro-modal-footer {
        padding: 0.75rem 1rem; /* Reduce footer padding */
        flex-direction: column;  /* Stack buttons vertically */
        gap: 0.75rem;            /* Add space between stacked buttons */
    }
    
    #voiceStyleModal .pro-modal-footer .pro-modal-btn {
        width: 100%; /* Make buttons full-width for easier tapping */
        font-size: 0.9rem; /* Slightly smaller button font */
    }
    
    /* Make style cards themselves a bit more compact */
    #voiceStyleModal .voice-style-card {
        padding: 1rem 0.75rem;
        min-height: 110px; /* Slightly shorter */
    }
    
    #voiceStyleModal .voice-style-card .card-title {
        font-size: 0.9rem;
    }
    
    #voiceStyleModal .voice-style-card .card-description {
        font-size: 0.75rem;
    }
}


.textarea-footer-actions {
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    display: flex;
    flex-wrap: wrap;            /*  <-- ADD THIS LINE to allow wrapping on small screens */
    align-items: center;        /*  This correctly handles vertical alignment */
    justify-content: space-between;
    gap: 8px;                   /*  <-- ADD THIS LINE to ensure spacing */
    z-index: 2;
    pointer-events: none;
}

.textarea-footer-actions > * {
    pointer-events: auto; /* You should already have this from the last fix */
    margin-top: auto;     /* Add this */
    margin-bottom: auto;  /* Add this */
}


/* 2. Make sure the items inside are clickable */
.textarea-footer-actions .word-counter,
.textarea-footer-actions #voiceStyleBadge {
    pointer-events: auto;
}

/* 3. New "noticeable" and responsive style for the badge */
#voiceStyleBadge {
    font-weight: 600 !important;
    color: var(--bs-primary, #0d6efd) !important;
    background-color: var(--bs-primary-bg-subtle, #cfe2ff) !important;
    border: 1px solid var(--bs-primary-border-subtle, #9ec5fe) !important;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pulse-badge-glow 3s infinite ease-in-out;
}

#voiceStyleBadge:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
    background-color: var(--bs-primary, #0d6efd) !important;
    color: white !important;
}

/* 4. Keyframe animation for the subtle glow effect */
@keyframes pulse-badge-glow {
    0% {
        box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
    }
    50% {
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.3);
    }
    100% {
        box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
    }
}





/* --- START: Enhanced AI Voiceover Generator Section CSS --- */

#pro-voiceover-feature.enhanced-voiceover {
    padding: 5rem 1rem; /* Generous padding */
    position: relative;
    overflow: hidden; /* Important for pseudo-elements */
    color: #ffffff;
    border-radius: 1.5rem; /* Rounded corners for the section */
    margin: 2.5rem auto; /* Give it space from other sections */
    max-width: 1140px; /* Match container width */
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* The Animated Gradient Background */
    background: linear-gradient(260deg, #1a0b3a, #4a1c6f, #8e2b80, #0d6efd);
    background-size: 400% 400%;
    animation: gradient-flow 18s ease infinite;
}

/* The animation that moves the gradient */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Add a subtle glow and lift on hover */
#pro-voiceover-feature.enhanced-voiceover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(46, 17, 72, 0.4);
}

/* A pseudo-element for a subtle star/particle effect in the background */
#pro-voiceover-feature.enhanced-voiceover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.12"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-4v-1h4v-4h1v4zM4 95h4v1H4v4H3v-4H0v-1h3v-4h1v4zM96 5h4v1h-4v4h-1V5h-4V4h4V0h1v4zM4 5h4v1H4v4H3V5H0V4h3V0h1v4z"/></g></g></svg>');
    animation: pan-background 60s linear infinite;
    z-index: 1;
}

@keyframes pan-background {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, -50%); }
}

/* Ensure the main content is on top of the background effect */
.voiceover-content-wrapper {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Improves text readability */
}

/* Styling for the "Legendary Feature" badge */
.legendary-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}

/* Feature highlights list styling */
.voiceover-features-list {
    list-style: none;
    padding: 0;
    max-width: 800px; /* Control the width of the list */
}

.voiceover-features-list li {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.voiceover-features-list li:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.03);
}

.voiceover-features-list li i {
    color: #ffc107; /* A nice gold color for icons */
    width: 25px; /* Consistent icon spacing */
}

/* Styling for the main call-to-action button inside the section */
.voiceover-cta-button {
    transition: all 0.3s ease;
    border: none;
}
.voiceover-cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
}

/* --- END: Enhanced AI Voiceover Generator Section CSS --- */


#voices-control-showcase.enhanced-section {
    padding: 5rem 1rem; /* More vertical space */
    position: relative;
    overflow: hidden; /* Important for pseudo-elements */
    color: #ffffff; /* White text for contrast */
    border-radius: 1.5rem; /* Rounded corners */
    margin: 2.5rem auto; /* Space from other sections */
    max-width: 1140px; /* Match container width */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* The Animated Gradient Background */
    /* A professional mix of deep blue, purple, and a hint of the site's primary blue */
    background: linear-gradient(250deg, #0d1a2e, #1a2c5e, #3d2b80, #0d6efd);
    background-size: 400% 400%;
    animation: enhanced-gradient-flow 15s ease infinite;
}

/* The animation that moves the gradient */
@keyframes enhanced-gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* A subtle glow and lift on hover for interactivity */
#voices-control-showcase.enhanced-section:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(26, 44, 94, 0.35);
}

/* A pseudo-element for a subtle star/particle effect in the background */
#voices-control-showcase.enhanced-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* Make it larger to pan */
    height: 200%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.1"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-4v-1h4v-4h1v4zM4 95h4v1H4v4H3v-4H0v-1h3v-4h1v4zM96 5h4v1h-4v4h-1V5h-4V4h4V0h1v4zM4 5h4v1H4v4H3V5H0V4h3V0h1v4z"/></g></g></svg>');
    animation: enhanced-pan-background 80s linear infinite;
    z-index: 1; /* Behind the content */
    opacity: 0.5;
}

@keyframes enhanced-pan-background {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, -50%); }
}

/* Ensure the main content is on top of the background effect */
#voices-control-showcase.enhanced-section .container {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* Improves text readability */
}

/* Styling for the "Pro Feature" badge */
#voices-control-showcase.enhanced-section .pro-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    display: inline-block; /* To allow margin */
}

/* Big, bold headline */
#voices-control-showcase.enhanced-section .display-5 {
    font-weight: 800; /* Bolder */
}

/* Feature highlights list styling - Glassmorphism style */
#voices-control-showcase.enhanced-section .features-list {
    list-style: none;
    padding: 0;
    max-width: 850px; /* Control the width of the list */
}

#voices-control-showcase.enhanced-section .features-list li {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 1.05rem; /* Slightly larger font */
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-align: right;
}

#voices-control-showcase.enhanced-section .features-list li:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.02);
}

#voices-control-showcase.enhanced-section .features-list li i {
    color: #ffc107; /* A nice gold color for icons */
    width: 28px; /* Consistent icon spacing */
    font-size: 1.1em;
    vertical-align: middle;
}

/* Styling for the call-to-action buttons */
#voices-control-showcase.enhanced-section .btn {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
#voices-control-showcase.enhanced-section .btn-light {
    color: #0d6efd; /* Use primary color for text */
    font-weight: 700;
}
#voices-control-showcase.enhanced-section .btn-outline-light:hover,
#voices-control-showcase.enhanced-section .btn-light:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
}


.pro-feature-card .pro-feature-content,
.pro-feature-card .pro-feature-toggle-switch {
    position: relative; /* Establishes a new stacking context */
    z-index: 1;         /* Places it above the ::before pseudo-element (which has z-index: 0) */
}


@media (max-width: 420px) {
    .textarea-footer-actions {
        justify-content: center; /* Center items instead of spreading them apart */
    }
}




/* --- START: Premium User Badge CSS --- */
.premium-user-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin-left: 1rem; /* Space between badge and other buttons */
    border-radius: 50px; /* Pill shape */
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden; /* For the shimmer effect */
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* A majestic, premium gradient */
    background: linear-gradient(135deg, #8a2be2, #4b0082, #8a2be2); /* Majestic Purple/Indigo */
    background-size: 200% 200%;

    /* A subtle but rich shadow */
    box-shadow: 0 4px 15px rgba(75, 0, 130, 0.3), 0 0 5px rgba(255, 255, 255, 0.5) inset;
    
    /* Animation for the gradient flow and a subtle pulse */
    animation: gradient-flow 4s ease infinite, pulse-glow 2.5s infinite ease-in-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.premium-user-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(75, 0, 130, 0.4);
    text-decoration: none;
    color: #fff;
}

.premium-user-badge .badge-icon {
    margin-left: 8px; /* For RTL */
    font-size: 1.1em;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8)); /* Gold-like glow */
    color: #ffd700; /* Gold color */
}

.premium-user-badge .badge-plan-name {
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Shimmer effect on hover (optional but very pro) */
.premium-user-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(30deg);
    transition: left 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

.premium-user-badge:hover::after {
    left: 130%; /* Move the shimmer across the badge */
}

/* The subtle animated glow keyframes */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(75, 0, 130, 0.3), 0 0 5px rgba(255, 255, 255, 0.5) inset;
    }
    50% {
        box-shadow: 0 6px 20px rgba(75, 0, 130, 0.45), 0 0 10px rgba(255, 255, 255, 0.7) inset;
    }
}

/* The animated gradient background keyframes */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* --- END: Premium User Badge CSS --- */



.auth-buttons {
    display: flex;         /* This makes the items line up horizontally */
    align-items: center;   /* This aligns them vertically in the middle */
    justify-content: flex-end; /* Keeps the group to the right */
    gap: 0.75rem;          /* Adds a nice space between the items */
}



.points-display {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    padding: 2px 4px 2px 12px; /* Asymmetrical padding for RTL */
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    transition: background-color 0.3s ease;
}

.premium-user-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #8a2be2, #4b0082, #8a2be2);
    background-size: 200% 200%;
    box-shadow: 0 4px 15px rgba(75, 0, 130, 0.3), 0 0 5px rgba(255, 255, 255, 0.5) inset;
    animation: gradient-flow 4s ease infinite, pulse-glow 2.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.premium-user-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(75, 0, 130, 0.4);
    text-decoration: none;
    color: #fff;
}

.premium-user-badge .badge-icon {
    margin-left: 8px; /* For RTL */
    font-size: 1.1em;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
    color: #ffd700;
}

.premium-user-badge .badge-plan-name {
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.premium-user-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(30deg);
    transition: left 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

.premium-user-badge:hover::after {
    left: 130%;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(75, 0, 130, 0.3), 0 0 5px rgba(255, 255, 255, 0.5) inset; }
    50% { box-shadow: 0 6px 20px rgba(75, 0, 130, 0.45), 0 0 10px rgba(255, 255, 255, 0.7) inset; }
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Mobile Specific Adjustments (The important part for your request) --- */
@media (max-width: 767px) {
    /* Hide the plan name text on mobile */
    .premium-user-badge .badge-plan-name {
        display: none;
    }

    /* Transform the badge into a small, icon-only circle */
    .premium-user-badge {
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center; /* Center the icon */
        margin-right: -10px; /* Pull it slightly over the points display edge */
        z-index: 2; /* Ensure it sits on top */
    }

    /* Reset the icon's margin */
    .premium-user-badge .badge-icon {
        margin-left: 0;
        font-size: 0.9em;
    }
}

.auth-actions-left {
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 10;
    display: flex;         /* This aligns the items horizontally */
    align-items: center;   /* This aligns them vertically in the middle */
    gap: 0.10rem;          /* This adds a nice space between the badge and button */
}




#voiceStyleModal .modal-body {
    background-color: #1F222B; /* Dark background from reference image */
    color: #E0E2E5; /* Light text color */
}

/* Style for the section headers like "المشاعر" and "المؤثرات" */
.style-section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #8A91A0; /* Muted text color for headers */
    text-transform: uppercase;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #3A3F4B;
}
.style-section-header:first-of-type {
    margin-top: 0;
}

/* The main style for the selectable cards */
.style-tag-card {
    background-color: #3A3F4B;
    color: #E0E2E5;
    border: 1px solid #3A3F4B;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    user-select: none; /* Prevents text selection on rapid clicks */
}

/* Hover effect for the cards */
.style-tag-card:hover {
    background-color: #4C515C;
    transform: translateY(-2px);
}

/* Style for a card when it is selected */
.style-tag-card.selected {
    background-color: #5841D9; /* A purple color similar to the reference */
    border-color: #7e6ce6;
    color: #FFFFFF;
    font-weight: 600;
}

/* Styling for the custom input section */
.custom-style-section {
    background-color: #2c303a; /* Slightly different dark shade */
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.custom-style-section label {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: block;
}

.custom-style-input-group {
    display: flex;
    gap: 0.75rem;
}

.custom-style-input-group input {
    flex-grow: 1;
    background-color: #1F222B;
    border: 1px solid #3A3F4B;
    color: #E0E2E5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}
.custom-style-input-group input::placeholder {
    color: #8A91A0;
}
.custom-style-input-group input:focus {
    background-color: #1F222B;
    color: #E0E2E5;
    border-color: #5841D9;
    box-shadow: 0 0 0 0.2rem rgba(88, 65, 217, 0.25);
}

.custom-style-input-group button {
    background-color: #5841D9;
    color: #FFFFFF;
    border: none;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s ease;
}
.custom-style-input-group button:hover {
    background-color: #4a37b6;
    color: #FFFFFF;
}

/* Ensure modal footer has a dark background as well to match */
#voiceStyleModal .pro-modal-footer {
    background-color: #1F222B;
    border-top: 1px solid #3A3F4B;
}



#audio-samples-section {
    scroll-margin-top: 80px; /* Ensures the section title isn't hidden by a sticky header when scrolling */
}

/* Ensure the cards inside the new section still get their hover effect and look clean */
#audio-samples-section .voice-example-card {
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: var(--bs-card-box-shadow);
}
#audio-samples-section .voice-example-card:hover {
    box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Making the filtering badges fit the new context */
#audio-samples-section #voiceControlFilterBadges {
    border-bottom: none; /* The modal version had a border, we don't need it here */
    padding-bottom: 0.5rem; /* Reduce padding slightly */
}

.sample-card-hidden {
    display: none;
}
.hero-dialects-wrapper {
    margin-top: 2.25rem; /* 36px */
    margin-bottom: 2.5rem; /* 40px */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 1.2s, 
                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 1.2s;
    /* The 1.2s delay is added directly here */
}

.hero-dialects-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-dialects-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.1rem;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hero-dialects-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

/* The wrapper for each individual flag icon */
.hero-dialect-icon {
    position: relative;
    width: 46px; /* A good, balanced size */
    height: 46px;
    border-radius: 50%;
    
    /* --- The Glassmorphism Effect --- */
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    /* --- End Glassmorphism Effect --- */

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* Overlapping effect */
    margin-left: -14px;
    
    /* The super-smooth transition for hover effects */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
html[dir="rtl"] .hero-dialect-icon {
    margin-left: 0;
    margin-right: -14px;
}
.hero-dialect-icon:first-child {
    margin: 0;
}

/* --- THE HOVER INTERACTION --- */
/* Spread icons apart on hover over the entire list */
.hero-dialects-list:hover .hero-dialect-icon {
    margin-left: -5px;
}
html[dir="rtl"] .hero-dialects-list:hover .hero-dialect-icon {
    margin-left: 0;
    margin-right: -5px;
}

/* Lift and highlight the specific icon being hovered */
.hero-dialect-icon:hover {
    transform: translateY(-12px) scale(1.1);
    z-index: 10;
    border-color: rgba(255, 255, 255, 0.7);
}

/* The flag icon itself */
.hero-dialect-icon .fi {
    font-size: 3.5rem;
    line-height: 1;
}

/* Special styling for the "+ More" icon */
.hero-dialect-icon.more-dialects {
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.5);
}

.hero-dialect-icon.more-dialects:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.9);
}


#aiModelSelectionContainer .form-select {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    font-weight: 500;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
#aiModelSelectionContainer .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}
#aiModelSelectionContainer .form-label {
    color: #343a40;
}
/* This makes the premium options stand out in the dropdown list */
#aiModelSelectionContainer option[value="saudi_pro"],
#aiModelSelectionContainer option[value="ultra_realistic"] {
    font-weight: bold;
    background-color: #e9ecef;
}


@media (max-width: 767px) {
    /* Hide the text inside the "Pro Voices" button to save space */
    .btn-premium-voices span {
        display: none;
    }

    /* Adjust the button to be a smaller circle, focusing on the icon */
    .btn-premium-voices {
        padding: 0;
        width: 28px; /* Match the button's height to make it a circle */
        justify-content: center; /* Center the icon horizontally */
    }
}


@media (max-width: 767px) {
    /* --- Pro Voices Hub Modal Fixes for Mobile --- */

    /* Make the modal body padding a bit more compact on small screens */
    #proVoicesHubModal .pro-hub-modal-body {
        padding: 1rem;
    }

    /* Make the horizontal tabs scrollable instead of wrapping */
    #proVoicesHubModal .hub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-bottom: 0.5rem; /* Space for the scrollbar */
    }
    #proVoicesHubModal .hub-tabs .nav-item {
        flex-shrink: 0; /* Prevent tabs from shrinking */
    }

    /* THE KEY FIX: Change voice card layout from row to column */
    #proVoicesHubModal .voice-hub-card {
        flex-direction: column; /* Stack items vertically */
        align-items: center;      /* Center the stacked items */
        text-align: center;         /* Center the text within the details section */
        gap: 1rem;                /* Add space between avatar, details, and player */
    }
    
    /* Adjust the description to look better when centered */
    #proVoicesHubModal .voice-description {
        margin-bottom: 1rem;
    }

    /* Make the mini-player controls a bit more compact */
    #proVoicesHubModal .voice-player-controls {
        width: 100%;
        max-width: 280px; /* Prevent it from being too wide */
    }
    
    /* Make the subscription banner stack its content vertically */
    #proVoicesHubModal .premium-banner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}



.disclaimer-notice {
    text-align: center; /* توسيط النص */
    padding: 8px 12px; /* هوامش داخلية */
    font-size: 0.75rem; /* حجم خط صغير */
    color: #6c757d; /* لون نص ثانوي خافت */
    background-color: #f8f9fa; /* خلفية رمادية فاتحة جداً */
    border-radius: 6px; /* حواف دائرية */
    border: 1px solid #e9ecef; /* إطار خفيف جداً */
    line-height: 1.5; /* تحسين قابلية القراءة */
}

.disclaimer-notice i {
    color: #0d6efd; /* لون الأيقونة باللون الأساسي للموقع */
    margin-left: 5px; /* مسافة بين الأيقونة والنص */
}

.disclaimer-notice a {
    color: #495057; /* لون أغمق قليلاً للرابط */
    font-weight: 500;
    text-decoration: underline;
    text-decoration-style: dotted; /* تسطير منقط ليكون أقل إزعاجاً */
}

.disclaimer-notice a:hover {
    color: #0d6efd; /* تغيير لون الرابط عند مرور الفأرة */
    text-decoration-style: solid;
}



   </style>
   
   
   <style>
       
       /* --- 1. The "Energized" Active State --- */
.pro-feature-card:not(.feature-locked) {
    position: relative; /* For positioning pseudo-elements */
    overflow: hidden;   /* Keep all effects contained */
    background-color: #f7faff; /* A very clean, slightly cool off-white */
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    /* A subtle outer glow to make it feel energized */
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.1);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.3s ease;
}

/* --- 2. The "Aurora" Glow (using ::before) --- */
.pro-feature-card:not(.feature-locked)::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 150%;
    background: radial-gradient(
        circle at 50% -20%, /* Position the gradient's center above the card */
        rgba(var(--bs-primary-rgb), 0.15),
        transparent 60%
    );
    opacity: 0.8;
    transform: scale(1);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    z-index: 0; /* IMPORTANT: Behind the content */
}

/* Ensure content is on top of the glow */
.pro-feature-card .pro-feature-content,
.pro-feature-card .pro-feature-toggle-switch {
    position: relative;
    z-index: 1;
}

/* --- 3. Enhanced Hover Effect --- */
.pro-feature-card:not(.feature-locked):hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), 0.15);
}
.pro-feature-card:not(.feature-locked):hover::before {
    opacity: 1;
    transform: scale(1.2); /* Makes the glow expand */
}

/* --- 4. Clean Styling for the Locked State --- */
.pro-feature-card.feature-locked {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-color: var(--bs-border-color-translucent);
    box-shadow: none; /* No glow for the locked state */
}
.pro-feature-card.feature-locked::before {
    display: none; /* Hide the aurora glow pseudo-element */
}



#voiceStyleBadge {
    font-weight: 600 !important;
    color: var(--bs-primary, #0d6efd) !important;
    background-color: var(--bs-primary-bg-subtle, #cfe2ff) !important;
    border: 1px solid var(--bs-primary-border-subtle, #9ec5fe) !important;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pulse-badge-glow 3s infinite ease-in-out;
}
#voiceStyleBadge:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
    background-color: var(--bs-primary, #0d6efd) !important;
    color: white !important;
}
@keyframes pulse-badge-glow {
    0% { box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15); }
    50% { box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.3); }
    100% { box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15); }
}



    .cta-container {
        /* Adding gap to the container to space out buttons naturally */
        gap: 0.75rem;
    }
    
    .cta-button.cta-button-video {
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }
    
    .cta-button.cta-button-video:hover,
    .cta-button.cta-button-video:focus {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        color: #fff;
    }
    
    .cta-button.cta-button-video .fa-youtube {
        color: #FF0000;
        animation: pulse-red 2.5s infinite ease-in-out;
    }
    
    @keyframes pulse-red {
        0%, 100% { transform: scale(1); text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
        50% { transform: scale(1.1); text-shadow: 0 0 15px rgba(255, 0, 0, 1); }
    }
    
    #videoModal .modal-content {
        background-color: transparent;
        border: none;
    }
    
    #videoModal .modal-header {
        border-bottom: none;
        position: absolute;
        top: -45px; /* Position it above the modal content */
        right: -15px; /* Adjust for better placement */
        z-index: 10;
    }
    
    #videoModal .modal-header .btn-close {
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        padding: 0.75rem;
        filter: invert(1) grayscale(100%) brightness(200%); /* Make it white */
        opacity: 0.8;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        transition: all 0.2s ease;
    }
    #videoModal .modal-header .btn-close:hover {
        opacity: 1;
        transform: scale(1.1);
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    
    #videoModal .modal-body {
        padding: 0;
    }
    
    /* Aspect ratio wrapper for responsive video */
    .video-responsive-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
        border-radius: 0.75rem; /* Match modern card styles */
        box-shadow: 0 1rem 3rem rgba(0,0,0,0.3);
        background-color: #000; /* Black background for loading */
    }
    
    .video-responsive-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    
    
    .sticky-error-message {
    position: fixed;
    top: 80px; /* Adjust this value if it overlaps with your header */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    padding: 1rem 1.5rem;
    background-color: #f8d7da; /* Bootstrap danger background */
    color: #842029; /* Bootstrap danger text */
    border: 1px solid #f5c2c7; /* Bootstrap danger border */
    border-radius: 0.5rem;
    z-index: 1060; /* Higher than most elements, just below modals */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideDownFadeIn 0.5s ease-out;
}

.sticky-error-message .btn-close {
    filter: none;
    opacity: 0.7;
}

.sticky-error-message .btn-close:hover {
    opacity: 1;
}

@keyframes slideDownFadeIn {
    from {
        top: 20px;
        opacity: 0;
    }
    to {
        top: 80px;
        opacity: 1;
    }
}


#mobile-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1040;
    
    /* Layout for the new elements */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Space between voice selector and button */
    padding: 0.75rem 1rem;
    
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #e9ecef;
    
    /* Hide it by default and prepare for transitions */
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    display: none; /* Initially hidden to prevent flash of content */
}

/* The class that makes the bar visible */
#mobile-action-bar.visible {
    transform: translateY(0);
}

/* --- Quick Voice Selector Styles --- */
#mobile-quick-voices {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto; /* Allow horizontal scrolling */
    padding-bottom: 8px; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Firefox scrollbar style */
}
/* Hide scrollbar visually on Webkit browsers (Chrome, Safari) */
#mobile-quick-voices::-webkit-scrollbar {
    height: 4px;
}
#mobile-quick-voices::-webkit-scrollbar-track {
    background: transparent;
}
#mobile-quick-voices::-webkit-scrollbar-thumb {
    background-color: #ced4da;
    border-radius: 20px;
}

.quick-voice-item {
    flex-shrink: 0; /* Prevent items from shrinking */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    transition: all 0.2s ease-in-out;
    min-width: 65px; /* Ensure items have a minimum width */
    text-align: center;
}

.quick-voice-item.selected {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    transform: scale(1.05);
}

.quick-voice-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
}

.quick-voice-name {
    font-size: 0.65rem;
    font-weight: 500;
    color: #495057;
    line-height: 1.2;
    white-space: nowrap; /* Prevent name from wrapping */
}

/* Media query to apply changes ONLY on mobile */
@media (max-width: 767px) {
    /* 1. Hide the ORIGINAL button's container on mobile */
    .tts-card form .d-grid {
        display: none !important;
    }

    /* 2. Add padding to the bottom of the card body */
    .tts-card .card-body {
        /* Increased padding to accommodate the taller bar */
        padding-bottom: 160px !important; 
    }
    
    /* 3. Show our new bar container on mobile */
    #mobile-action-bar {
        display: flex; /* Changed from block to flex */
    }
}


.voice-cloning-section {
    position: relative;
    overflow: hidden;
}

.cloning-feature-text .badge {
    background-color: var(--bs-primary-bg-subtle) !important;
    border: 1px solid var(--bs-primary-border-subtle) !important;
}

.audio-comparison-wrapper {
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
    border: 1px solid var(--bs-border-color-translucent);
}

.audio-comparison-card {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    background-color: #f8f9fa;
    transition: all 0.2s ease-in-out;
}

.audio-comparison-card.cloned {
    border-color: var(--bs-primary);
    border-width: 2px;
    background-color: var(--bs-primary-bg-subtle);
}

.audio-comparison-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1.25rem;
}

.audio-comparison-card .card-body {
    padding: 1rem 1.25rem;
}

.audio-comparison-card audio {
    border-radius: 50px;
}

 
 
 
 #whatsapp-assistant-section {
    background-color: #f8f9fa; /* A clean, light grey background */
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.feature-description-content .feature-badge {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    border: 1px solid var(--bs-primary-border-subtle, #9ec5fe);
    border-radius: 50px;
}

.feature-description-content .section-title-pro {
    font-weight: 800;
    color: var(--bs-body-color);
    margin-bottom: 1rem;
}

.feature-benefits-list li {
    padding: 0.5rem 0;
    font-size: 1.05rem;
    display: flex;
    align-items: flex-start;
}
.feature-benefits-list i {
    margin-left: 0.75rem; /* For RTL */
    margin-top: 5px;
    font-size: 1.1rem;
}

.btn-pro-feature {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-pro-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--bs-warning-rgb), 0.3);
}

/* Chat Demo Styling */
.chat-demo-container {
    background: #ffffff;
    border-radius: 1.25rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
    overflow: hidden;
}

.chat-demo-header {
    background-color: #f1f1f1;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #e0e0e0;
}
.chat-demo-header .fa-whatsapp {
    color: #25D366;
    font-size: 1.2rem;
    margin-left: 8px;
}

.chat-demo-log {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 500px;
    overflow-y: auto;
}

.chat-interaction .client-message {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
}
.chat-interaction .business-reply {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.chat-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.user-avatar { background-color: #6c757d; }
.business-avatar { background-color: var(--bs-primary); }

.message-bubble {
    padding: 0.75rem 1.1rem;
    border-radius: 1.25rem;
    max-width: 85%;
    line-height: 1.5;
}

.client-message .message-bubble {
    background-color: #e9ecef;
    color: #212529;
    border-bottom-left-radius: 0.25rem;
}
.business-reply .message-bubble {
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-body-color);
    border-bottom-right-radius: 0.25rem;
}

.business-reply audio {
    border-radius: 50px;
    border: 1px solid #ced4da;
    height: 45px;
}


.introjs-aurora-theme .introjs-tooltip {
    background-color: rgba(255, 255, 255, 0.92); /* Clean, semi-transparent white */
    color: #212529; /* Dark, readable text */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-family: 'Tajawal', sans-serif;
    box-shadow: 0 8px 32px rgba(13, 110, 253, 0.15); /* Soft glow using your primary blue */
    backdrop-filter: blur(10px); /* The key to the frosted glass effect */
    -webkit-backdrop-filter: blur(10px);
    max-width: 350px;
}

/* Style the tooltip text */
.introjs-aurora-theme .introjs-tooltiptext {
    font-size: 1rem;
    line-height: 1.7;
    padding: 20px;
}

/* Style the step number */
.introjs-aurora-theme .introjs-stepnumber {
    font-size: 0.9rem;
    font-weight: bold;
    background: var(--bs-primary, #0d6efd); /* Your brand's primary blue */
    color: white;
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.3);
}

/* General button styling */
.introjs-aurora-theme .introjs-button {
    border: none;
    border-radius: 50px; /* Modern pill shape */
    padding: 10px 20px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.25s ease;
}
.introjs-aurora-theme .introjs-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Specific button styles */
.introjs-aurora-theme .introjs-nextbutton {
    background-color: var(--bs-primary, #0d6efd); /* Primary action */
    color: white;
}
.introjs-aurora-theme .introjs-prevbutton,
.introjs-aurora-theme .introjs-skipbutton {
    background-color: #f1f3f5; /* Secondary, less intrusive */
    color: #495057;
}
.introjs-aurora-theme .introjs-donebutton {
    background-color: #198754; /* Success green for completion */
    color: white;
}

/* Style the arrow to match the tooltip background */
.introjs-aurora-theme .introjs-arrow.top { border-bottom-color: rgba(255, 255, 255, 0.92); }
.introjs-aurora-theme .introjs-arrow.bottom { border-top-color: rgba(255, 255, 255, 0.92); }
.introjs-aurora-theme .introjs-arrow.left { border-right-color: rgba(255, 255, 255, 0.92); }
.introjs-aurora-theme .introjs-arrow.right { border-left-color: rgba(255, 255, 255, 0.92); }