/* TemplateData/style.css - TU VERSIÓN (INTACTA) + LÓGICA BLUR */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800;900&display=swap');

body { 
    padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden;
    background-color: #191919; 
    font-family: 'Sora', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- 1. FONDO (Imagen para la carga inicial) --- */
#bg-image-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('background.jpg'); 
    background-size: cover; background-position: center;
    filter: blur(4px); 
    transform: scale(1.05); 
    z-index: 1;
    transition: opacity 0.5s ease-out;
    pointer-events: none; /* Para que no bloquee clicks cuando desaparezca */
}

.slide-in { transform: translateY(0%) !important; }
.slide-out { transform: translateY(100%) !important; }

/* --- 2. TARJETA DE CARGA (TU ESTILO) --- */
#loading-card {
    padding: 0 !important; 
    height: auto;        
    border-top-left-radius: 50px; border-top-right-radius: 50px;
    box-shadow: 0px -10px 40px rgba(0,0,0,0.15);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#percent-text {
    font-size: 1.8rem; font-weight: 700; color: #001530; 
    margin-top: 20px; margin-bottom: 10px;
    letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}

#progress-container {
    width: 80%; height: 44px; background-color: #001e3c;
    border-radius: 40px; padding: 6px; box-sizing: border-box;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); margin-bottom: 40px;
}

#progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #2ECAEC 0%, #0B63F6 100%);
    border-radius: 30px; transition: width 0.2s linear;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 0 12px rgba(11, 99, 246, 0.5);
}

/* --- 3. ESTILO "WALLET" (PAGOS) --- */
.bottom-card {
    position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;
    width: 100%; max-width: 500px;
    background-color: #FFFFFF;
    border-top-left-radius: 36px; border-top-right-radius: 36px;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    z-index: 10;
    box-shadow: 0px -10px 50px rgba(0,0,0,0.2);
    transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    
    /* TU PADDING AJUSTADO */
    padding: 24px 24px 24px 24px; 
    box-sizing: border-box;
}

.wallet-title {
    font-size: 1.6rem; font-weight: 800; color: #0F172A;
    margin: 10px 0 20px 0; text-align: center; width: 100%; letter-spacing: -0.03em;
}

/* Procesando */
.processing-pill {
    width: 100%; height: 56px; background-color: #F3F4F6;
    border-radius: 100px; display: flex; justify-content: space-between; align-items: center;
    padding: 0 24px; box-sizing: border-box; color: #374151; font-weight: 600; font-size: 1rem;
    border: 1px solid #E5E7EB; margin: 0 0 20px 0;
}
.mini-spinner {
    width: 20px; height: 20px; border: 2px solid #E5E7EB; border-top-color: #0F172A;
    border-radius: 50%; animation: spinner-spin 0.8s linear infinite;
}
@keyframes spinner-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Fallido */
.close-icon-btn {
    position: absolute; top: 20px; left: 20px; width: 36px; height: 36px;
    background-color: #F3F4F6; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    border: none; cursor: pointer; color: #9CA3AF; transition: transform 0.1s; z-index: 20;
}
.close-icon-btn:active { transform: scale(0.92); }

.try-again-btn {
    width: 100%; height: 56px;
    background: linear-gradient(90deg, #4F8AFF 0%, #2E5CFF 100%);
    border-radius: 100px; border: none; display: flex; justify-content: space-between; align-items: center;
    padding: 0 24px; box-sizing: border-box; color: white; font-weight: 700; font-size: 1.05rem;
    cursor: pointer; box-shadow: 0 4px 12px rgba(46, 92, 255, 0.25); transition: transform 0.1s;
    margin-bottom: 8px;
}
.try-again-btn:active { transform: scale(0.98); }

.error-subtext {
    margin-top: 8px; color: #EF4444; font-size: 0.85rem; font-weight: 600; text-align: center;
}

/* --- 4. NUEVO: LÓGICA DE BLUR PARA UNITY --- */
#unity-container { position: fixed; width: 100%; height: 100%; z-index: 0; background: #191919; }
#unity-canvas { 
    width: 100%; height: 100%; background: #191919; 
    transition: filter 0.3s ease-out; /* Transición suave del blur */
}
#unity-loading-bar { display: none !important; }

/* Clase que aplicaremos con JS al abrir pagos */
.blurred-canvas {
    filter: blur(8px) brightness(0.8);
    transform: scale(1.02); /* Evita bordes blancos */
}