{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block styles %}
<style>
    /* Estilos para la tarjeta de resultados de ahorro */
    .savings-result-section {
        padding: 48px 0;
    }
    .savings-card {
        max-width: 720px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        padding: 40px;
        position: relative;
    }
    @media (max-width: 767px) {
        .savings-card {
            max-width: 480px;
            padding: 24px;
        }
    }
    /* Cabecera de ahorro */
    .client-info {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    .client-cups {
        font-size: 0.85rem;
        color: #6B7280;
        font-family: monospace;
        letter-spacing: 1px;
    }
    .savings-header {
        text-align: center;
        margin-bottom: 32px;
    }
    .savings-label {
        font-size: 1.1em;
        color: #555;
        margin-bottom: 5px;
        display: block;
        font-weight: 500;
    }
    .savings-amount {
        font-size: 84px;
        color: #c206dc;
        font-weight: 600;
        display: block;
        line-height: 1;
    }
    .savings-percent {
        font-size: 50px;
        color: #c206dc;
        font-weight: 500;
    }
    .savings-title {
        font-size: 32px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: #111;
        margin: 16px 0;
    }
    /* Peaje detectado */
    .tariff-badge {
        display: inline-block;
        background-color: #f5f5f5;
        color: #555;
        border-radius: 12px;
        padding: 6px 12px;
        font-size: 0.85rem;
        margin-top: 8px;
    }
</style>
{% endblock %}

{% block content %}
<div class="section savings-result-section">
    <div class="container">
        <div class="savings-card">
            <!-- Información del cliente -->
            <div class="client-info">
                <h4>Resultado estimado de tu estudio</h4>
                
                <!-- Datos confirmados del cliente/factura -->
                {% if client_name or supply_address or provider_name or lead.cups %}
                <div class="invoice-details">
                    <style>
                        .invoice-details {
                            margin-top: 15px;
                        }
                        .detail-item {
                            display: flex;
                            margin-bottom: 6px;
                            font-size: 13px;
                            color: #555;
                        }
                        .detail-item i {
                            width: 18px;
                            margin-right: 8px;
                            color: #777;
                        }
                        .detail-label {
                            font-weight: 500;
                            margin-right: 6px;
                            min-width: 80px;
                        }
                    </style>
                    
                    {% if client_name %}
                    <div class="detail-item">
                        <i class="fas fa-user"></i>
                        <span class="detail-label">Cliente:</span>
                        <span>{{ client_name }}</span>
                    </div>
                    {% endif %}
                    
                    {% if lead and lead.cups %}
                    <div class="detail-item">
                        <i class="fas fa-plug"></i>
                        <span class="detail-label">CUPS:</span>
                        <span>{{ lead.cups }}</span>
                    </div>
                    {% endif %}
                    
                    {% if supply_address %}
                    <div class="detail-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span class="detail-label">Dirección:</span>
                        <span>{{ supply_address }}</span>
                    </div>
                    {% endif %}
                    
                    {% if provider_name %}
                    <div class="detail-item">
                        <i class="fas fa-building"></i>
                        <span class="detail-label">Comercializadora:</span>
                        <span>{{ provider_name }}</span>
                    </div>
                    {% endif %}
                    
                    {% if billing_period %}
                    <div class="detail-item">
                        <i class="fas fa-calendar"></i>
                        <span class="detail-label">Periodo:</span>
                        <span>{{ billing_period }} ({{ billing_days }} días)</span>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            
            <!-- Cabecera de ahorro -->
            <div class="savings-header">
                <span class="savings-label">Tu ahorro anual estimado</span>
                {% if yearly_savings is defined and yearly_savings > 0 %}
                <div id="savings-counter" class="savings-amount">{{ yearly_savings|round|int }} €</div>
                <span class="savings-percent">({{ savings_percentage|round|int }}%)</span>
                
                <style>
                    .monthly-savings {
                        margin-top: 10px;
                        font-size: 20px;
                        color: #6B7280;
                        font-weight: 500;
                    }
                    .monthly-savings strong {
                        color: #c206dc;
                    }
                    .insufficient-info {
                        margin-top: 10px;
                        font-size: 24px;
                        color: #6B7280;
                        font-weight: 500;
                    }
                </style>
                <div class="monthly-savings">
                    <span>Equivale a <strong>{{ monthly_savings|round|int }} €</strong> mensuales</span>
                </div>
                {% else %}
                <div class="insufficient-info">La información aportada es insuficiente</div>
                {% endif %}
                
                <h2 class="savings-title">¡Podemos ayudarte a ahorrar!</h2>
                <p>Con una tarifa adaptada a tu consumo</p>
                
                <div class="tariff-badge">
                    <i class="fas fa-tag"></i> Tarifa {{ tariff_type }}
                </div>
                    
            <!-- Desglose rápido (two-column mini grid) -->
            <style>
                .cost-breakdown {
                    display: flex;
                    margin: 32px 0;
                    border: 1px solid #E5E7EB;
                    border-radius: 12px;
                    overflow: hidden;
                }
                .cost-column {
                    flex: 1;
                    padding: 20px;
                    position: relative;
                    
                }
                .cost-column:first-child::after {
                    content: "";
                    position: absolute;
                    top: 20%;
                    right: 0;
                    height: 60%;
                    width: 1px;
                    background-color: #E5E7EB;
                }
                .cost-label {
                    display: block;
                    color: #6B7280;
                    font-size: 18px;
                    margin-bottom: 6px;
                }
                .cost-value {
                    font-size: 32px;
                    font-weight: 600;
                    color: #c206dc;
                }
                /* Nuevos estilos para diferenciar los valores de coste */
                .cost-value.current {
                    color: #000000;
                }
                .cost-value.savings {
                    font-size: 38px;
                }
                /* Indicador de fiabilidad */
                .reliability-indicator {
                    display: flex;
                    align-items: center;
                    margin: 24px 0;
                    padding: 12px;
                    background-color: #f8f9fa;
                    border-radius: 8px;
                }
                .reliability-icon {
                    margin-right: 12px;
                    color: #c206dc;
                    font-size: 30px;
                }
                .reliability-text {
                    font-size: 13px;
                    color: #6B7280;
                }
                .reliability-badge {
                    display: inline-block;
                    padding: 3px 8px;
                    border-radius: 12px;
                    font-size: 11px;
                    font-weight: 600;
                    margin-right: 8px;
                }
                .reliability-badge.official {
                    background-color: #dcf5e7;
                    color: #c206dc;
                }
                .reliability-badge.estimated {
                    background-color: #c206dc;
                    color: #000000;
                }
            </style>
            
            <div class="cost-breakdown">
                <div class="cost-column">
                    <span class="cost-label">Coste mensual actual</span>
                    <span class="cost-value current">{{ current_cost|round|int }} €/mes</span>
                </div>
                <div class="cost-column">
                    <span class="cost-label">Coste mensual propuesto</span>
                    <span class="cost-value savings">{% if ole_cost <= current_cost %}{{ ole_cost|round|int }} €/mes{% else %}-{% endif %}</span>
                </div>
            </div>
            
            <!-- Indicador de fiabilidad -->
            <div class="reliability-indicator">
                <div class="reliability-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div class="reliability-text">
                    <span class="reliability-badge {% if reliability == 'Oficial' %}official{% else %}estimated{% endif %}">
                        {{ reliability }}
                    </span>
                    Cálculos basados en precios oficiales y referenciales que pueden estar sujetos a cambios.
                    <div class="calculation-note">
                        <i class="fas fa-info-circle"></i> Este cálculo considera únicamente los términos de potencia y energía. No incluye impuestos, alquileres de equipos u otros conceptos para ofrecer una comparación simplificada.
                    </div>
                    {% if demo_mode %}
                    <div class="demo-badge">
                        <i class="fas fa-info-circle"></i> Este es un cálculo aproximado basado en perfiles estándar para tu tipo de tarifa. 
                        Para un cálculo más preciso, un asesor validará todos los datos de tu factura.
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <style>
                .demo-badge, .calculation-note {
                    margin-top: 8px;
                    padding: 8px 10px;
                    border-radius: 4px;
                    font-size: 12px;
                    font-weight: 500;
                }
                .demo-badge {
                    background-color: #FEF3C7;
                    border-left: 3px solid #F59E0B;
                    color: #92400E;
                }
                .calculation-note {
                    background-color: #E0F2FE;
                    border-left: 3px solid #0EA5E9;
                    color: #0C4A6E;
                }
                .demo-badge i, .calculation-note i {
                    margin-right: 5px;
                }
            </style>
            
            <!-- Sección de Mejoras Detectadas -->
            <style>
                .improvements-section {
                    margin-top: 32px;
                    padding-top: 20px;
                    border-top: 1px solid #E5E7EB;
                }
                .improvements-title {
                    font-size: 24px;
                    font-weight: 600;
                    color: #111;
                    margin-bottom: 20px;
                    text-align: center;
                }
                .improvements-cards {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 20px;
                }
                @media (max-width: 767px) {
                    .improvements-cards {
                        grid-template-columns: 1fr;
                    }
                }
                .improvement-card {
                    background-color: #ffffff;
                    border: 1px solid #E5E7EB;
                    border-radius: 12px;
                    padding: 20px;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                }
                .improvement-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
                }
                .improvement-icon {
                    margin-bottom: 16px;
                    font-size: 24px;
                    color: #c206dc;
                }
                .improvement-title {
                    font-size: 18px;
                    font-weight: 600;
                    color: #333;
                    margin-bottom: 10px;
                }
                .improvement-desc {
                    font-size: 14px;
                    color: #4B5563;
                    margin-bottom: 15px;
                }
                .improvement-saving {
                    font-size: 16px;
                    font-weight: 600;
                    color: #c206dc;
                }
                .improvement-card.inactive {
                    border: 1px dashed #E5E7EB;
                    background-color: #f9fafb;
                }
                .improvement-card.inactive .improvement-icon {
                    color: #9CA3AF;
                }
            </style>
            
            <div class="improvements-section">
                <h3 class="improvements-title">Mejoras detectadas</h3>
                <div class="improvements-cards">
                    <!-- Card 1: Energía Reactiva -->
                    {% if reactive_energy_penalty is defined %}
                        {% if reactive_energy_penalty > 0 %}
                        <div class="improvement-card">
                            <div class="improvement-icon">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <h4 class="improvement-title">Energía Reactiva detectada</h4>
                            <p class="improvement-desc">Puedes ahorrar y optimizar tu consumo instalando una batería de condensadores</p>
                            <div class="improvement-saving">Ahorro estimado de {{ (reactive_energy_penalty * 7)|int }} € anuales</div>
                        </div>
                        {% else %}
                        <div class="improvement-card inactive">
                            <div class="improvement-icon">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <h4 class="improvement-title">Energía Reactiva no detectada</h4>
                            <p class="improvement-desc">No se ha detectado penalización por energía reactiva en tu factura actual.</p>
                        </div>
                        {% endif %}
                    {% else %}
                    <div class="improvement-card inactive">
                        <div class="improvement-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <h4 class="improvement-title">Energía Reactiva no definida</h4>
                        <p class="improvement-desc">No se ha podido determinar si existe penalización por energía reactiva.</p>
                    </div>
                    {% endif %}
                    
                    <!-- Card 2: Exceso de Potencia -->
                    {% if power_excess_penalty and power_excess_penalty > 0 %}
                    <div class="improvement-card">
                        <div class="improvement-icon">
                            <i class="fas fa-tachometer-alt"></i>
                        </div>
                        <h4 class="improvement-title">Exceso de potencia detectado</h4>
                        <p class="improvement-desc">Puedes ahorrar optimizando tu potencia contratada</p>
                        <div class="improvement-saving">Ahorro estimado de {{ (power_excess_penalty * 7)|round|int }} € al año</div>
                    </div>
                    {% else %}
                    <div class="improvement-card inactive">
                        <div class="improvement-icon">
                            <i class="fas fa-tachometer-alt"></i>
                        </div>
                        <h4 class="improvement-title">Exceso de potencia no detectado</h4>
                        <p class="improvement-desc">No se han detectado penalizaciones por exceso de potencia en tu factura.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Separador para la oferta -->
            <hr style="border-color: #E5E7EB; margin: 24px 0;">
                        
            <!-- Oferta destacada -->
            <style>
                /* Estilos para la oferta destacada */
                .offer-section {
                    text-align: center;
                    margin-bottom: 32px;
                }
                .offer-headline {
                    font-size: 30px;
                    font-weight: 600;
                    color: #c206dc;
                    margin-bottom: 12px;
                }
                .offer-description {
                    color: #4B5563;
                    margin-bottom: 24px;
                }
                .insufficient-offer-headline {
                    font-size: 26px;
                    font-weight: 600;
                    color: #4B5563;
                    margin-bottom: 12px;
                }
                /* Estilos para los botones CTA */
                .action-buttons {
                    display: flex;
                    gap: 12px;
                    justify-content: center;
                    margin-bottom: 24px;
                }
                @media (max-width: 576px) {
                    .action-buttons {
                        flex-direction: column;
                    }
                }
                .cta-button {
                    border-radius: 8px;
                    padding: 12px 24px;
                    font-weight: 500;
                    transition: all 0.3s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .cta-button.primary {
                    background-color: #c206dc;
                    color: white;
                    border: none;
                }
                .cta-button.primary:hover {
                    background-color: #c206dc;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 10px rgba(40, 199, 111, 0.2);
                }
                .cta-button.secondary {
                    background-color: white;
                    color: #c206dc;
                    border: 1px solid #c206dc;
                }
                .cta-button.secondary:hover {
                    background-color: #f9fffc;
                    color: #c206dc;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 10px rgba(40, 199, 111, 0.1);
                }
                .cta-button i {
                    margin-right: 8px;
                }
                /* Legal disclaimer */
                .legal-disclaimer {
                    display: flex;
                    align-items: flex-start;
                    background-color: #f9fafb;
                    border-radius: 8px;
                    padding: 12px;
                    margin-top: 16px;
                    font-size: 12px;
                    color: #6B7280;
                }
                .legal-disclaimer i {
                    color: #9CA3AF;
                    margin-right: 8px;
                    margin-top: 2px;
                }
                /* Notificación de éxito */
                #callRequestSuccess {
                    display: none;
                    padding: 12px;
                    background-color: #dcf5e7;
                    color: #c206dc;
                    border-radius: 8px;
                    margin-top: 16px;
                    text-align: center;
                    font-weight: 500;
                    animation: fadeIn 0.5s ease;
                }
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(-10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                /* Para tarifas complejas */
                .complex-tariff-note {
                    margin-top: 24px;
                    border-top: 1px solid #E5E7EB;
                    padding-top: 24px;
                    display: flex;
                    align-items: flex-start;
                }
                .complex-tariff-note .note-icon {
                    margin-right: 16px;
                    color: #FF9F43;
                    font-size: 24px;
                }
            </style>
            
            <div class="offer-section">
                {% if yearly_savings > 0 %}
                <h3 class="offer-headline">¿Quieres ahorrar hasta {{ yearly_savings|round|int }} € al año?</h3>
                <p class="offer-description">Con la nueva tarifa adaptada podemos ayudarte a optimizar tu factura eléctrica y reducir costes hasta un {{ savings_percentage|round|int }}%.</p>
                {% else %}
                <h3 class="offer-headline">La información aportada es insuficiente</h3>
                <p class="offer-description">Un gestor especializado se pondrá en contacto para analizar tu caso y ofrecerte la mejor solución personalizada.</p>
                {% endif %}
                
                <!-- Botones de CTA -->
                <div class="action-buttons">
                    <button type="button" class="cta-button primary" id="requestCallBtn">
                        <i class="fas fa-phone-alt"></i> ¿Te llamamos?
                    </button>
                    <a href="tel:+34900123456" class="cta-button secondary">
                        <i class="fas fa-headset"></i> Llamar ahora
                    </a>
                </div>
                
                <div id="callRequestSuccess">
                    ¡Genial! Te llamaremos en breve para explicarte los detalles del ahorro.
                </div>
                
                <!-- Aviso legal -->
                <div class="legal-disclaimer">
                    <i class="fas fa-info-circle"></i>
                    <div>
                        Los cálculos son estimaciones basadas en los datos de tu factura y precios vigentes. El ahorro final puede variar según el consumo y las condiciones del mercado. Sin compromiso.
                    </div>
                </div>
            </div>
            
            <!-- Consulta personalizada para peajes complejos -->
            {% if tariff_type in ['3.0TD', '6.1TD'] %}
            <div class="complex-tariff-note">
                <div class="note-icon">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <div class="note-content">
                    <h4>Para {{ tariff_type }} se requiere consulta personalizada</h4>
                    <p>
                        Las tarifas de potencias superiores a 15kW necesitan un análisis más detallado.
                        Nuestros especialistas pueden ofrecerte un estudio completo y la mejor solución.
                    </p>
                </div>
            </div>
            {% endif %}

            {% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Animación del contador de ahorro
        const animateSavingsCounter = () => {
            const counter = document.getElementById('savings-counter');
            if (!counter) return;
            
            const finalValue = parseFloat(counter.innerText);
            let startValue = 0;
            const duration = 1800;
            const startTime = performance.now();
            
            const updateCounter = (currentTime) => {
                const elapsedTime = currentTime - startTime;
                const progress = Math.min(elapsedTime / duration, 1);
                
                // Función de ease-out para una desaceleración suave
                const easeOutCubic = (x) => 1 - Math.pow(1 - x, 3);
                const easedProgress = easeOutCubic(progress);
                
                const currentValue = Math.floor(easedProgress * finalValue);
                counter.innerText = `${currentValue} €`;
                
                if (progress < 1) {
                    requestAnimationFrame(updateCounter);
                } else {
                    counter.innerText = `${finalValue} €`;
                }
            };
            
            requestAnimationFrame(updateCounter);
        };
        
        // Animación de elementos cuando entran en viewport
        const animateOnScroll = () => {
            const fadeInElements = document.querySelectorAll('.tariff-badge');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeIn 0.5s ease forwards';
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.3 });
            
            fadeInElements.forEach(el => {
                el.style.opacity = '0';
                observer.observe(el);
            });
        };
        
        // Manejar el botón de solicitar llamada
        const setupCallButton = () => {
            const requestCallBtn = document.getElementById('requestCallBtn');
            const callSuccessMsg = document.getElementById('callRequestSuccess');
            
            if (requestCallBtn) {
                // Añadir efecto de pulso al botón
                setInterval(() => {
                    requestCallBtn.classList.add('pulse-animation');
                    setTimeout(() => {
                        requestCallBtn.classList.remove('pulse-animation');
                    }, 1000);
                }, 5000);
                
                requestCallBtn.addEventListener('click', function() {
                    // Cambiar estado del botón
                    requestCallBtn.disabled = true;
                    requestCallBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Procesando...';
                    
                    // Enviar solicitud AJAX
                    fetch('{{ url_for("invoice.request_call") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({
                            savings: '{{ yearly_savings|round|int }}',
                            percentage: '{{ savings_percentage|round|int }}',
                            tariff_type: '{{ tariff_type }}'
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        // Ocultar botón
                        requestCallBtn.style.display = 'none';
                        
                        // Mostrar mensaje según respuesta
                        if (data.success) {
                            callSuccessMsg.style.display = 'block';
                        } else {
                            // Crear mensaje de error si no existe
                            if (!document.getElementById('callRequestError')) {
                                const errorMsg = document.createElement('div');
                                errorMsg.id = 'callRequestError';
                                errorMsg.className = 'alert alert-danger mt-3';
                                requestCallBtn.parentNode.appendChild(errorMsg);
                            }
                            
                            const errorElement = document.getElementById('callRequestError');
                            errorElement.style.display = 'block';
                            errorElement.textContent = data.message || 'Ha ocurrido un error. Por favor, intenta de nuevo.';
                            
                            // Restaurar el botón después de un error
                            setTimeout(() => {
                                requestCallBtn.disabled = false;
                                requestCallBtn.innerHTML = '<i class="fas fa-phone-alt"></i> ¿Te llamamos?';
                                requestCallBtn.style.display = 'block';
                                errorElement.style.display = 'none';
                            }, 3000);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        requestCallBtn.disabled = false;
                        requestCallBtn.innerHTML = '<i class="fas fa-phone-alt"></i> ¿Te llamamos?';
                        document.getElementById('callRequestError').style.display = 'block';
                    });
                });
            }
        };
        
        // Inicializar todas las funciones
        animateSavingsCounter();
        animateOnScroll();
        setupCallButton();
        
        // Definir la animación de pulso para los botones
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }
            .pulse-animation {
                animation: pulse 1s ease;
            }
        `;
        document.head.appendChild(style);
    });
</script>
{% endblock %}

{% block extra_styles %}
<style>
    .savings-result-section {
        padding-top: 100px;
        padding-bottom: 60px;
    }
    
    .savings-card {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 25px;
    }
    
    .card-header {
        position: relative;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        color: #fff;
        padding: 30px;
        text-align: center;
    }
    
    .card-header h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 10px;
    }
    
    .savings-header-content .subtitle {
        font-size: 1.2rem;
        opacity: 0.85;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .saving-badge {
        background-color: #fff;
        color: var(--primary-color);
        border-radius: 50px;
        padding: 10px 25px;
        display: inline-flex;
        flex-direction: column;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .saving-badge.minimal-saving {
        background-color: rgba(255,255,255,0.9);
        color: #333;
    }
    
    .saving-label {
        font-size: 0.9rem;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
    }
    
    .saving-amount {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        margin: 5px 0;
    }
    
    .saving-percent {
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .card-body {
        padding: 30px;
    }
    
    .analysis-details {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 25px;
    }
    
    .tariff-type-info {
        margin-bottom: 15px;
    }
    
    .info-label {
        font-weight: 600;
        color: #555;
    }
    
    .info-value {
        font-weight: 700;
        font-size: 1.1rem;
        color: #333;
        margin-left: 5px;
    }
    
    .tariff-description {
        color: #666;
        font-size: 0.9rem;
        margin-top: 5px;
    }
    
    .cost-comparison {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    
    .current-cost, .new-cost {
        text-align: center;
        flex: 1;
    }
    
    .current-cost {
        position: relative;
    }
    
    .current-cost::after {
        content: '';
        position: absolute;
        right: 0;
        top: 15%;
        height: 70%;
        width: 1px;
        background-color: #ddd;
    }
    
    .cost-label {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 5px;
    }
    
    .cost-amount {
        font-size: 1.5rem;
        font-weight: 700;
        color: #333;
    }
    
    .new-cost .cost-amount {
        color: var(--primary-color);
    }
    
    .trust-badge {
        display: flex;
        align-items: center;
        background-color: #e8f4ff;
        border-radius: 8px;
        padding: 15px;
        margin: 25px 0;
    }
    
    .badge-icon {
        background-color: #0d6efd;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    .badge-icon i {
        font-size: 1.2rem;
    }
    
    .badge-text {
        display: flex;
        flex-direction: column;
    }
    
    .badge-title {
        font-weight: 600;
        color: #333;
        margin-bottom: 2px;
    }
    
    .badge-description {
        font-size: 0.85rem;
        color: #666;
    }
    
    .action-container {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 25px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .direct-contract {
        background-color: #fef8e8;
        border: 1px dashed #ffc107;
    }
    
    .request-call {
        background-color: #f0f7ff;
        border: 1px dashed #0d6efd;
    }
    
    .action-content h3 {
        font-size: 1.3rem;
        color: #333;
        margin-bottom: 10px;
    }
    
    .action-content p {
        color: #666;
        margin-bottom: 20px;
    }
    
    .complex-tariff-note {
        display: flex;
        align-items: flex-start;
        background-color: #f6f3ff;
        border-radius: 8px;
        padding: 15px;
        margin-top: 20px;
    }
    
    .note-icon {
        color: #6610f2;
        font-size: 1.5rem;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    .note-content h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }
    
    .note-content p {
        font-size: 0.9rem;
        color: #666;
        margin: 0;
    }
    
    .additional-info {
        text-align: center;
        color: #777;
        font-size: 0.85rem;
        padding: 0 20px;
    }
    
    .additional-info p {
        margin: 0;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        border: none;
        padding: 10px 25px;
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    /* Responsive */
    @media (max-width: 767px) {
        .savings-result-section {
            padding-top: 80px;
            padding-bottom: 40px;
        }
        
        .card-header {
            padding: 25px 20px;
        }
        
        .card-header h1 {
            font-size: 1.5rem;
        }
        
        .saving-badge {
            padding: 8px 20px;
        }
        
        .saving-amount {
            font-size: 1.6rem;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .cost-comparison {
            flex-direction: column;
            gap: 20px;
        }
        
        .current-cost::after {
            display: none;
        }
        
        .complex-tariff-note {
            flex-direction: column;
            text-align: center;
        }
        
        .note-icon {
            margin-right: 0;
            margin-bottom: 10px;
        }
    }
</style>
{% endblock %}

{% endblock content %}