/* =================================================
Estilos para el Popup Fantasma (random-image-display)
Archivo: random-image-display.css
=================================================
*/

/* --- FUENTES --- */
/* ✅ Bloque de fuentes eliminado, ya no se usan para los títulos */

/* 1. OVERLAY Y CENTRADO */
.rid-overlay {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 100000;
    display: flex; /* CRÍTICO para el centrado */
    justify-content: center;
    align-items: center;
}

/* 2. CONTENEDOR PRINCIPAL (EL POPUP) */
.rid-popup-container {
    /* URL de fondo */
    background-image: url('https://akinet.com.co/wp-content/uploads/2025/10/fondo.webp'); 
    background-color: #5d2b7f;
    background-size: cover;
    background-position: center;
    
    padding: 30px 30px 40px 30px;
    border-radius: 12px; 
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(0,0,0,0.6);
    position: relative;
    box-sizing: border-box; 
    overflow: hidden; 
    padding-top: 50px; 
    animation: fadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. TÍTULO DE IMAGEN */
.rid-title-img {
    display: block;
    width: 85%; /* Aseguramos que la imagen del título escale bien */
    height: auto;
    margin: 0 auto 30px auto; /* Centramos y damos margen inferior para separar del primer input */
}

/* 4. LABELS E INPUTS */
.rid-label {
    font-family: 'Nunito Bold', sans-serif; 
    display: block;
    text-align: center; 
    margin-top: 15px; 
    margin-bottom: 10px; 
    font-weight: 700;
    color: #fff;
    font-size: 20px;
}
.rid-input {
    width: 80%; 
    height: 40px; 
    padding: 5px 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 8px; 
    background-color: transparent; 
    color: #fff; 
    box-sizing: border-box;
    font-size: 16px;
    /* Borde doble con box-shadow */
    box-shadow: 0 0 0 2px #FF6600, inset 0 0 0 2px #5d2b7f; 
}
.rid-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px #F9D030, inset 0 0 0 2px #5d2b7f; /* Pequeño brillo al enfocar */
}

/* 5. BOTONES (IMAGEN DE FONDO) */
.rid-buttons-group {
    display: flex;
    gap: 15px; 
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 20px;
}
.rid-btn {
    font-family: 'Nunito Extrabold', sans-serif; 
    width: 120px; 
    height: 40px; 
    padding: 0; 
    border: none;
    border-radius: 0; 
    cursor: pointer;
    text-indent: -9999px; /* Oculta el texto */
    background-size: cover; 
    background-position: center;
    background-color: transparent !important; 
    transition: none; /* No animaciones */
    box-shadow: none; /* No sombras */
    outline: none; 
}

.rid-btn:hover,
.rid-btn:active,
.rid-btn:focus {
    transform: none; /* No zoom */
    background-color: transparent; /* No fondo */
    box-shadow: none;
    outline: none;
}

.rid-btn-send {
    background-image: url('https://akinet.com.co/wp-content/uploads/2025/10/boton-enviar-1.webp'); 
}

.rid-btn-cancel {
    background-image: url('https://akinet.com.co/wp-content/uploads/2025/10/boton-cancelar-1.webp'); 
}

/* 6. FANTASMA PANDA */
.rid-panda-ghost {
    position: absolute;
    bottom: -2px; 
    right: -15px; 
    width: 120px; 
    height: 120px; 
    background-image: url('https://akinet.com.co/wp-content/uploads/2025/10/fantasma-aki.webp'); 
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2; 
}

/* 7. BOTÓN CERRAR (X) */
.rid-close-btn {
    position: absolute; 
    top: 5px; 
    right: 5px; 
    background: none; 
    border: none; 
    font-size: 14px; 
    line-height: 1;
    color: #ff9900; 
    cursor: pointer;
    z-index: 100001; 
    text-shadow: none; 
}

/* 8. Animación de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 9. Media Queries (Responsive) */
@media (max-width: 450px) {
    .rid-popup-container {
        max-width: 95%;
    }
    .rid-buttons-group {
        gap: 10px;
    }
    .rid-panda-ghost {
        width: 100px;
        height: 100px;
        right: -10px;
    }
}