/* Overlay del pop-up */
#ppcu-overlay { /* Adaptado de #popup-cross-upsell-overlay o #mi-upsell-popup-overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Para animación */
    transition: opacity 0.3s ease-out; /* Para animación */
}

/* Contenido del pop-up */
#ppcu-content { /* Adaptado de #popup-cross-upsell-content o #mi-upsell-popup-content */
    background: #ffffff; /* Tu color de fondo original */
    padding: 25px; /* Valor adaptado de tu CSS anterior */
    border-radius: 10px; /* Valor adaptado de tu CSS anterior */
    max-width: 500px; /* Valor adaptado de tu CSS anterior */
    text-align: center;
    position: relative;
    transform: translateY(-20px); /* Para animación */
    transition: transform 0.3s ease-out; /* Para animación */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); /* Sombra más pronunciada adaptada de tu CSS anterior */
    min-width: 320px; /* Valor adaptado de tu CSS anterior */
    width: 90%; /* Valor adaptado de tu CSS anterior */
}

/* Contenedor de botones para añadir espacio */
.ppcu-buttons { /* Adaptado de .popup-cross-upsell-buttons */
    display: flex; /* Usamos flexbox para alinear y distribuir */
    flex-wrap: wrap; /* Permite que los botones salten de línea */
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 10px; /* Espacio entre los botones */
    margin-top: 25px; /* Valor adaptado de tu CSS anterior */
}

/* Estilos para los botones */
.ppcu-buttons .ppcu-button { /* Adaptado de .popup-cross-upsell-buttons .popup-cross-upsell-button */
    padding: 12px 25px; /* Más padding para botones */
    font-size: 18px; /* Letra un poco más grande */
    font-weight: bold;
    border-radius: 10px; /* Bordes más redondeados */
    transition: background-color 0.2s ease, transform 0.1s ease; /* Transición para hover y click */
    text-decoration: none; /* Eliminar subrayado por defecto */
    color: white; /* Asegurar texto blanco */
    /* Las propiedades de display y margin ya se manejan con flexbox y gap en el contenedor */
    flex-grow: 1; /* Permite que los botones crezcan para llenar el espacio */
    max-width: calc(50% - 10px); /* Dos columnas en pantallas medianas, ajustado por el gap */
}

/* Estilos específicos para el botón positivo */
.ppcu-buttons .ppcu-button-positive { /* Adaptado de .popup-cross-upsell-buttons .popup-cross-upsell-button-positive */
    background-color: #4CAF50!important; /* Verde */
}

.ppcu-buttons .ppcu-button-positive:hover { /* Adaptado de #mi-oferta-accept:hover */
    background-color: #218838 !important; /* Tono de verde más oscuro al pasar el ratón */
    transform: translateY(-1px); /* Ligero efecto de levantamiento */
}

/* Estilos específicos para el botón negativo */
.ppcu-buttons .ppcu-button-negative { /* Adaptado de .popup-cross-upsell-buttons .popup-cross-upsell-button-negative */
    background-color: #f44336!important; /* Rojo */
}

.ppcu-buttons .ppcu-button-negative:hover { /* Adaptado de #mi-oferta-reject:hover */
    background-color: #c82333 !important; /* Tono de rojo más oscuro al pasar el ratón */
    transform: translateY(-1px); /* Ligero efecto de levantamiento */
}

/* Responsividad mejorada para pantallas pequeñas */
@media (max-width: 600px) {
    #ppcu-content { /* Adaptado de #popup-cross-upsell-content */
        padding: 15px; /* Valor adaptado de tu CSS anterior */
    }
    .ppcu-buttons { /* Adaptado de .popup-cross-upsell-buttons */
        flex-direction: column; /* Apila los botones verticalmente en móviles */
        align-items: stretch; /* Estira los botones a todo el ancho disponible */
    }
    .ppcu-buttons .ppcu-button { /* Adaptado de .popup-cross-upsell-buttons .popup-cross-upsell-button */
        max-width: 100%; /* Ocupa todo el ancho */
        margin: 5px auto; /* Centra y da margen vertical */
    }
}