/* Custom styles for Viaje a Japón crowdfunding page */

body { 
    background-color: #fafafa; 
    color: #333; 
}

.hero-pattern { 
    background-color: #ffffff; 
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239333ea' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 
}

.progress-bar-container { 
    background-color: #f3f4f6; 
    border-radius: 9999px; 
    overflow: hidden; 
    height: 24px; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); 
}

.progress-bar-fill { 
    height: 100%; 
    background: linear-gradient(90deg, #9333ea 0%, #c026d3 100%); 
    transition: width 1s ease-in-out; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    padding-right: 8px; 
    color: white; 
    font-weight: bold; 
    font-size: 0.75rem; 
}

.glass-card { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01); 
}

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

.animate-fade-in { 
    animation: fadeIn 0.5s ease-out forwards; 
}

.message-bubble { 
    background: white; 
    border-left: 4px solid #9333ea; 
    border-radius: 0 8px 8px 0; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}

#payment-modal { 
    display: none; 
}

#payment-modal.active { 
    display: flex; 
}

/* Modal de seguretat (pantalla completa bloquejant) */
#auth-overlay {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.8);
}