/* assets/popup-styles.css */

.tpp-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--tpp-overlay-color, rgba(0, 0, 0, 0.7));
    z-index: 99998; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;
}

.tpp-popup-container {
    background-color: var(--tpp-bg-color, #fff);
    color: var(--tpp-text-color, #333);
    width: 100%;
    max-width: var(--tpp-max-width, 600px);
    max-height: var(--tpp-max-height, 90vh);
    display: flex;
    flex-direction: column;
    
    padding: 25px 30px;
    border-radius: 8px;
    position: relative;
    z-index: 99999;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-sizing: border-box;
    border: 2px solid var(--tpp-border-color, transparent);
    background-image: var(--tpp-bg-image);
    background-size: cover;
    background-position: center center;
    box-shadow: var(--tpp-box-shadow, 0 4px 15px rgba(0,0,0,0.15));
}

.tpp-overlay.tpp-visible { display: flex; }
.tpp-overlay.tpp-visible .tpp-popup-container { transform: scale(1); opacity: 1; }

.tpp-popup-content {
    margin-bottom: 20px;
    overflow-y: auto;
    flex-grow: 1;
}
.tpp-popup-content h1, .tpp-popup-content h2, .tpp-popup-content h3 { margin-top: 0; color: var(--tpp-text-color, #000); }

.tpp-close-btn {
    position: absolute; top: 10px; right: 15px; background: transparent; border: none; font-size: 28px;
    line-height: 1; cursor: pointer; padding: 0; opacity: 0.7; color: var(--tpp-text-color, #555);
    flex-shrink: 0;
}
.tpp-close-btn:hover { opacity: 1; }

.tpp-social-links {
    border-top: 1px solid rgba(128, 128, 128, 0.3); padding-top: 15px; text-align: center;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    flex-shrink: 0;
}

.tpp-social-links a {
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 5px;
    transition: opacity 0.2s;
    
    background-color: var(--tpp-btn-bg-color, transparent);
    color: var(--tpp-btn-text-color, var(--tpp-text-color, #333));
    border: 1px solid var(--tpp-btn-bg-color, var(--tpp-text-color, #ddd));
}

.tpp-social-links a:hover {
    opacity: 0.85;
}

/* -- NUEVO: Estilos para hacer responsivos los iframes (vídeos) -- */
.tpp-popup-content iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Mantiene la proporción 16:9 de los vídeos */
}