/* ==========================================================
   RSVP Link Personalizado – Saludo y Modal de Confirmación
   ========================================================== */

/* ---- Saludo personalizado ---- */
.rsvp-saludo-personalizado {
    text-align: center;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    animation: rsvpSaludoEntrada 0.6s ease-out both;
}

.rsvp-saludo-personalizado__nombre {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.rsvp-saludo-personalizado__texto {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.85;
}

@keyframes rsvpSaludoEntrada {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Modal RSVP Confirmación (base con --rsvp-* custom properties) ---- */
/* Cada plantilla define sus propios --rsvp-* en su CSS para personalizar */
.rsvp-conf-modal {
    border-radius: var(--rsvp-radius, 20px);
    border: none;
    overflow: hidden;
    box-shadow: var(--rsvp-shadow, 0 20px 60px rgba(0, 0, 0, 0.25));
}

.rsvp-conf-modal__body {
    padding: 2.5rem 2rem 2rem;
    background: var(--rsvp-modal-bg, #ffffff);
    color: var(--rsvp-text-muted, #555);
}

.rsvp-conf-modal__icono {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.rsvp-conf-modal__titulo {
    font-family: var(--rsvp-font-title, inherit);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--rsvp-title-color, #222);
}

.rsvp-conf-modal__nombre {
    font-size: 1.1rem;
    color: var(--rsvp-text-muted, #555);
    margin-bottom: 0.35rem;
}

.rsvp-conf-modal__detalle {
    font-size: 1rem;
    color: var(--rsvp-text-muted, #777);
    margin-bottom: 0;
}

.rsvp-conf-modal__detalle strong {
    color: var(--rsvp-title-color, #444);
}

.rsvp-conf-modal__btn {
    margin-top: 1.5rem;
    padding: 0.65rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--rsvp-btn-text, #fff);
    background: var(--rsvp-btn-bg, linear-gradient(135deg, #b8860b, #d4af37));
    border: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.rsvp-conf-modal__btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
    color: var(--rsvp-btn-text, #fff);
}

/* ---- Responsivo ---- */
@media (max-width: 576px) {
    .rsvp-saludo-personalizado__nombre {
        font-size: 1.15rem;
    }

    .rsvp-conf-modal__body {
        padding: 2rem 1.25rem 1.5rem;
    }

    .rsvp-conf-modal__titulo {
        font-size: 1.4rem;
    }
}