/* ═══════════════════════════════════════════════════════════════════════════
   Wedding RSVP for Elementor — Frontend CSS
   Developed by Antena Visual — https://antenavisual.com
   v2.1.1
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* ── Variables (Elementor las sobreescribe por sección vía selectores) ─────── */
.wrsvp-wrap {
    --wrsvp-accent : #b5956e;
    --wrsvp-text   : #3d2b1f;
    --wrsvp-border : rgba(181,149,110,.25);

    background    : #fdf9f5;
    color         : var(--wrsvp-text);
    font-family   : 'Jost', sans-serif;
    max-width     : 560px;
    margin        : 0 auto;
    padding       : 48px 40px;
    border-radius : 12px;
    box-shadow    : 0 4px 32px rgba(61,43,31,.08);
    border        : 1px solid var(--wrsvp-border);
    text-align    : center;
    position      : relative;
    overflow      : hidden;
    box-sizing    : border-box;
}

/* Barra decorativa superior */
.wrsvp-wrap::before {
    content    : '';
    position   : absolute;
    top:0; left:0; right:0;
    height     : 3px;
    background : linear-gradient(90deg,transparent,var(--wrsvp-accent),transparent);
    pointer-events : none;
}

/* ── Aviso / fecha límite ─────────────────────────────────────────────────── */
.wrsvp-deadline {
    font-size      : 11px;
    letter-spacing : .15em;
    text-transform : uppercase;
    color          : var(--wrsvp-accent);
    margin         : 0 0 20px;
}

/* ── Título ──────────────────────────────────────────────────────────────── */
.wrsvp-title {
    font-family : 'Cormorant Garamond', serif;
    font-size   : clamp(1.8rem, 5vw, 2.8rem);
    font-weight : 300;
    line-height : 1.15;
    margin      : 0 0 12px;
    color       : var(--wrsvp-text);
}

/* ── Subtítulo ───────────────────────────────────────────────────────────── */
.wrsvp-subtitle {
    font-size   : .9rem;
    font-weight : 300;
    line-height : 1.7;
    color       : var(--wrsvp-text);
    opacity     : .8;
    margin      : 0 auto 32px;
    max-width   : 400px;
}

/* ── Lookup ──────────────────────────────────────────────────────────────── */
.wrsvp-lookup-box {
    display   : flex;
    gap       : 10px;
    max-width : 440px;
    margin    : 0 auto;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.wrsvp-input {
    width         : 100%;
    padding       : 12px 16px;
    background    : #fff;
    border        : 1.5px solid var(--wrsvp-border);
    border-radius : 8px;
    font-family   : 'Jost', sans-serif;
    font-size     : .9rem;
    color         : var(--wrsvp-text);
    outline       : none;
    transition    : border-color .2s, box-shadow .2s;
    box-sizing    : border-box;
    -webkit-appearance : none;
    appearance    : none;
}

.wrsvp-input:focus {
    border-color : var(--wrsvp-accent);
    box-shadow   : 0 0 0 3px rgba(181,149,110,.15);
}

.wrsvp-select {
    cursor             : pointer;
    background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b5956e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: right 14px center;
    padding-right      : 36px;
}

.wrsvp-textarea {
    resize     : vertical;
    min-height : 80px;
}

/* ── Etiquetas ───────────────────────────────────────────────────────────── */
.wrsvp-label {
    display        : block;
    font-size      : .78rem;
    font-weight    : 500;
    letter-spacing : .08em;
    text-transform : uppercase;
    margin-bottom  : 8px;
    color          : var(--wrsvp-text);
    opacity        : .75;
    text-align     : left;
}

.wrsvp-label-sm {
    font-size  : .72rem;
    opacity    : .6;
    margin-bottom : 4px;
}

.wrsvp-req { color:#c0392b; margin-left:2px; }

/* ── Campos ──────────────────────────────────────────────────────────────── */
.wrsvp-field {
    margin-bottom : 20px;
    text-align    : left;
}

/* ── Pasos ───────────────────────────────────────────────────────────────── */
.wrsvp-step { text-align:left; }
#wrsvp-step-lookup { text-align:center; }

/* ── Mensajes ────────────────────────────────────────────────────────────── */
.wrsvp-msg {
    margin-top    : 12px;
    padding       : 10px 16px;
    border-radius : 8px;
    font-size     : .875rem;
    text-align    : left;
    line-height   : 1.5;
    display       : none;
}
.wrsvp-msg.wrsvp-error   { background:#fff0f0; color:#c0392b; border:1px solid #f5c6c6; }
.wrsvp-msg.wrsvp-success { background:#f0faf0; color:#27ae60; border:1px solid #c6e9c6; }

/* ── Tarjeta del invitado ────────────────────────────────────────────────── */
.wrsvp-guest-card {
    display       : flex;
    align-items   : center;
    gap           : 14px;
    background    : #fff;
    border        : 1.5px solid var(--wrsvp-border);
    border-radius : 12px;
    padding       : 16px 20px;
    margin-bottom : 28px;
    animation     : wrsvp-slide-in .3s ease;
}

.wrsvp-guest-icon {
    font-size  : 1.6rem;
    color      : var(--wrsvp-accent);
    flex-shrink: 0;
    line-height: 1;
}

.wrsvp-guest-card > div:nth-child(2) { flex:1; min-width:0; }

.wrsvp-guest-label {
    font-size      : .72rem;
    letter-spacing : .1em;
    text-transform : uppercase;
    color          : var(--wrsvp-accent);
    margin         : 0 0 3px;
}

.wrsvp-guest-name {
    font-family   : 'Cormorant Garamond', serif;
    font-size     : 1.3rem;
    font-weight   : 400;
    margin        : 0 0 2px;
    color         : var(--wrsvp-text);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.wrsvp-guest-seats { font-size:.8rem; opacity:.65; margin:0; color:var(--wrsvp-text); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.wrsvp-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 12px 24px;
    border          : none;
    border-radius   : 8px;
    font-family     : 'Jost', sans-serif;
    font-size       : .85rem;
    font-weight     : 500;
    letter-spacing  : .05em;
    cursor          : pointer;
    transition      : background-color .2s, color .2s, box-shadow .2s, transform .15s, filter .2s;
    white-space     : nowrap;
    line-height     : 1;
}

.wrsvp-btn-primary {
    background-color : var(--wrsvp-accent);
    color            : #fff;
}

.wrsvp-btn-primary:hover:not(:disabled) {
    filter    : brightness(1.08);
    transform : translateY(-1px);
    box-shadow: 0 4px 16px rgba(181,149,110,.35);
}

.wrsvp-btn-primary:disabled {
    opacity   : .4;
    cursor    : not-allowed;
    transform : none;
    box-shadow: none;
    filter    : none;
}

.wrsvp-btn-full {
    width      : 100%;
    padding    : 14px;
    font-size  : .95rem;
    margin-top : 8px;
}

.wrsvp-btn-link {
    background      : none;
    border          : none;
    color           : var(--wrsvp-accent);
    font-family     : 'Jost', sans-serif;
    font-size       : .8rem;
    cursor          : pointer;
    padding         : 4px 0;
    text-decoration : underline;
    text-underline-offset : 3px;
    opacity         : .85;
    transition      : opacity .15s;
}
.wrsvp-btn-link:hover { opacity:1; }

/* ── Botones Sí / No asistencia ──────────────────────────────────────────── */
.wrsvp-attending-btns {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 10px;
}

.wrsvp-attend-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 14px 12px;
    background      : #fff;
    border          : 1.5px solid var(--wrsvp-border);
    border-radius   : 10px;
    font-family     : 'Jost', sans-serif;
    font-size       : .9rem;
    cursor          : pointer;
    transition      : border-color .2s, background-color .2s, color .2s, box-shadow .2s;
    color           : var(--wrsvp-text);
    line-height     : 1.2;
}

.wrsvp-attend-btn:hover {
    border-color : var(--wrsvp-accent);
    background   : rgba(181,149,110,.06);
}

/* Sí — seleccionado (asistencia y acompañantes) */
.wrsvp-attend-btn.wrsvp-selected[data-val="1"],
.wrsvp-attend-btn.wrsvp-comp-selected[data-val="1"] {
    background-color : var(--wrsvp-accent);
    border-color     : var(--wrsvp-accent);
    color            : #fff;
    box-shadow       : 0 4px 14px rgba(181,149,110,.3);
}

/* No — seleccionado */
.wrsvp-attend-btn.wrsvp-selected[data-val="0"],
.wrsvp-attend-btn.wrsvp-comp-selected[data-val="0"] {
    background-color : #6c6c6c;
    border-color     : #6c6c6c;
    color            : #fff;
}

.wrsvp-attend-icon { font-size:1rem; }

/* ── Sección de acompañantes ─────────────────────────────────────────────── */
.wrsvp-comp-section {
    background    : rgba(181,149,110,.05);
    border        : 1px dashed var(--wrsvp-border);
    border-radius : 10px;
    padding       : 20px;
    margin-bottom : 20px;
    animation     : wrsvp-slide-in .25s ease;
}

.wrsvp-comp-names-wrap {
    display        : flex;
    flex-direction : column;
    gap            : 14px;
    margin-top     : 4px;
}

.wrsvp-comp-name-row {
    display        : flex;
    flex-direction : column;
    gap            : 6px;
}

/* ── Campos radio y checkbox ─────────────────────────────────────────────── */
.wrsvp-radio-group  { display:flex; flex-direction:column; gap:8px; }
.wrsvp-radio-label,
.wrsvp-checkbox-label {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-size   : .9rem;
    cursor      : pointer;
    color       : var(--wrsvp-text);
}

/* ── Pantalla de confirmación ────────────────────────────────────────────── */
.wrsvp-done-box {
    text-align : center;
    padding    : 20px 0;
    animation  : wrsvp-fade-in .5s ease;
}

.wrsvp-done-icon {
    font-size     : 3rem;
    margin-bottom : 16px;
    display       : block;
    animation     : wrsvp-pulse 1.2s ease-out;
}
.wrsvp-done-icon.attending { color: var(--wrsvp-accent); }
.wrsvp-done-icon.declining { color: #999; }

.wrsvp-done-title {
    font-family : 'Cormorant Garamond', serif;
    font-size   : 2rem;
    font-weight : 300;
    margin      : 0 0 10px;
    color       : var(--wrsvp-text);
}

.wrsvp-done-msg {
    font-size   : .9rem;
    opacity     : .78;
    line-height : 1.7;
    margin      : 0 0 20px;
    color       : var(--wrsvp-text);
}

/* ── Carga ───────────────────────────────────────────────────────────────── */
.wrsvp-btn.wrsvp-loading { pointer-events:none; opacity:.7; }
.wrsvp-btn.wrsvp-loading::after {
    content       : '';
    display       : inline-block;
    width         : 14px;
    height        : 14px;
    border        : 2px solid rgba(255,255,255,.35);
    border-top-color : #fff;
    border-radius : 50%;
    animation     : wrsvp-spin .7s linear infinite;
    margin-left   : 8px;
    vertical-align: middle;
}

/* ── Animaciones ─────────────────────────────────────────────────────────── */
@keyframes wrsvp-slide-in {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0);   }
}
@keyframes wrsvp-fade-in {
    from { opacity:0; } to { opacity:1; }
}
@keyframes wrsvp-pulse {
    0%   { transform:scale(.8); opacity:0; }
    60%  { transform:scale(1.15); }
    100% { transform:scale(1);   opacity:1; }
}
@keyframes wrsvp-spin { to { transform:rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:480px) {
    .wrsvp-wrap           { padding:32px 20px; }
    .wrsvp-lookup-box     { flex-direction:column; }
    .wrsvp-attending-btns { grid-template-columns:1fr; }
    .wrsvp-guest-card     { flex-wrap:wrap; }
}