/**
 * Wedwebs Elite RSVP 3.1.0
 */
 :root {
    /* Global */
    --ww-primary: #222;
    --ww-accent: #1e1e1e;
    --ww-font: 'Inter', -apple-system, sans-serif;
    --ww-bg: #f8fafc;
    --ww-card-bg: #ffffff;
    --ww-border: #f0f0f0;
    --ww-radius: 16px;
    --ww-shadow: 0 10px 30px rgba(0,0,0,0.05);

    /* Element-level controls */
    --ww-event-title-color: var(--ww-primary);
    --ww-event-title-size: 1rem;
    --ww-label-color: #666;
    --ww-label-size: 0.9rem;
    --ww-input-color: var(--ww-primary);
    --ww-input-size: 16px;
    --ww-button-color: #fff;
    --ww-button-bg: var(--ww-accent);

    /* Spacing + ticket-detail controls (Elementor widget Style tab).
       Defaults below equal the previous hard-coded values, so shortcode
       output is unchanged; the widgets override these on their wrapper. */
    --ww-card-padding: 25px;
    --ww-qr-padding: 25px;
    --ww-badge-bg: #f7f7f7;
    --ww-badge-color: #888;
    --ww-divider-color: #eee;
    --ww-detail-label-color: #bbb;
    --ww-detail-value-color: #444;
}

/* --- LOGIKA VISIBILITAS --- */
/* Sembunyikan elemen secara total saat di halaman live sesuai state */
.is-lang-id, .is-lang-en, .is-lang-sp, .is-lang-ar,
.ceremony, .reception, .afterparty, 
.event_1, .event_2, .event_3,
.eliteform, .eliteqr, .eliteno { 
    display: none !important; 
}

/* State Aktif: Dipanggil oleh JS Engine GMS */
.gms-visible-flex { 
    display: flex !important; 
}

/* Logika State Berdasarkan Body Class */
body.rsvp-pending .eliteform {display: block !important; }
body.rsvp-pending .eliteqr { display: flex !important; }
body.rsvp-confirmed .eliteqr { display: flex !important; }
body.rsvp-declined .eliteno { display: flex !important; }

/* show_form="false": JS adds .ww-form-hidden. ID+class outranks the
   body.rsvp-* and editor rules above, so the form stays hidden in every
   state — including the Elementor editor (reflects the real condition). */
#ww-form-content.ww-form-hidden { display: none !important; }

/* Travel-form visibility rules live further down (after .ww-form-wrapper) so
   they out-specify its `display:block !important`. See the ".ww-travel-instance
   visibility" block near the unified-form section. */

/* --- EDITOR MODE OVERRIDE (COMPREHENSIVE) --- */
/* Memastikan desainer bisa melihat semua elemen dinamis di Elementor Editor */
body.elementor-editor-active .is-lang-id,
body.elementor-editor-active .is-lang-en,
body.elementor-editor-active .is-lang-sp,
body.elementor-editor-active .is-lang-ar,
body.elementor-editor-active .ceremony,
body.elementor-editor-active .reception,
body.elementor-editor-active .afterparty,
body.elementor-editor-active .event_1,
body.elementor-editor-active .event_2,
body.elementor-editor-active .event_3,
body.elementor-editor-active .eliteform,
body.elementor-editor-active .eliteqr,
body.elementor-editor-active .eliteno { 
    display: flex !important; 
    visibility: visible !important;
}

/* --- CONTAINER UTAMA --- */
:is(#wedwebs-elite-app, #wedwebs-travel-app) {
    width: 92%;
    max-width: 480px;
    margin: 20px auto;
    box-sizing: border-box;
    display: block;
    font-family: var(--ww-font);
}

/* --- SECTION / BOX TITLES (form + QR) --- */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-form-title {
    text-align: var(--ww-title-align, center);
    margin-bottom: var(--ww-title-margin, 16px);
}
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-form-title h3 {
    color: var(--ww-title-color, var(--ww-primary, #222));
    font-size: var(--ww-title-size, 1.1rem);
    font-weight: var(--ww-title-weight, 600);
    margin: 0;
}

/* --- QR CONTAINER (render target for E-Ticket) --- */
/* Layout only; visibility controlled by .eliteqr + body.rsvp-* */
:is(#wedwebs-elite-app, #wedwebs-travel-app) #ww-qr-container.eliteqr {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 16px !important;
    margin-bottom: 20px !important;
}

/* --- RESULT CARD / E-TICKET --- */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-result-card {
    background: var(--ww-qr-bg, var(--ww-card-bg)) !important;
    border-radius: var(--ww-radius) !important;
    padding: var(--ww-qr-padding, 25px) !important;
    box-shadow: var(--ww-shadow) !important;
    text-align: center !important;
    border: 1px solid var(--ww-border) !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-qr-wrapper {
    background: transparent !important;
    padding: 10px !important;
    display: inline-block !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    max-width: 180px !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-qr-wrapper img {
    width: 100% !important;
    height: auto !important;
    mix-blend-mode: multiply !important; 
    display: block;
    margin: 0 auto;
}

/* Typographic props carry NO !important so the Elementor Typography group can
   override them; color/alignment/spacing flow through CSS variables. */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-qr-caption {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--ww-qr-caption-color, #888) !important;
    text-align: var(--ww-qr-caption-align, center) !important;
    max-width: var(--ww-qr-caption-max-width, 260px) !important;
    margin: var(--ww-qr-caption-margin-top, -5px) auto var(--ww-qr-caption-margin-bottom, 15px) auto !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-guest-name {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    font-weight: 800;
    color: var(--ww-primary) !important;
    margin: 0 0 5px 0 !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
}

/* --- SUCCESS MESSAGE (post-submit overlay, main + travel forms) ---
   Colour + alignment flow through CSS variables (widget Style tab); the
   typographic props carry NO !important so an Elementor Typography group can
   override them. Defaults reproduce the previous hard-coded look. */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-success-title {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ww-success-title-color, var(--ww-primary, #222)) !important;
    text-align: var(--ww-success-align, center) !important;
    margin: 0 0 8px 0 !important;
    word-break: break-word !important;
}
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-success-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ww-success-text-color, #666) !important;
    text-align: var(--ww-success-align, center) !important;
    margin: 0 !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-badge {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: var(--ww-badge-bg, #f7f7f7) !important;
    color: var(--ww-badge-color, #888) !important;
    border-radius: 100px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
}

/* Standalone category chip ([wedwebs_guest_category] / Elementor "Wedwebs Guest
   Category"). Same look as the .ww-badge on the QR card, but unscoped and free
   of !important so Elementor's style controls can override every property. */
.ww-guest-category-display {
    display: inline-block;
    padding: 6px 14px;
    background: var(--ww-badge-bg, #f7f7f7);
    color: var(--ww-badge-color, #888);
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-divider {
    border: none !important;
    border-top: 1px solid var(--ww-divider-color, #eee) !important;
    margin: 15px 0 !important;
    height: 1px !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-details-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-detail-item span {
    display: block !important;
    font-size: 9px;
    color: var(--ww-detail-label-color, #bbb) !important;
    text-transform: uppercase;
    margin-bottom: 2px !important;
    letter-spacing: 0.5px;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-detail-item strong {
    font-size: 12px;
    color: var(--ww-detail-value-color, #444) !important;
    font-weight: 600;
    word-break: break-word;
}

/* Accommodation Details as hyperlink (URL values open in a new tab) */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-detail-item strong a {
    color: var(--ww-detail-value-color, #444) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-detail-item strong a:hover {
    opacity: 0.75;
}

/* --- STANDALONE ACCOMMODATION CARD (modular [wedwebs_guest_accommodation]) ---
   Self-contained: NOT scoped under :is(#wedwebs-elite-app, #wedwebs-travel-app), so it can live on the
   same page as the main RSVP card without duplicating the app container. It
   reuses the same --ww-* design tokens (with literal fallbacks) so it inherits
   the theme by default, and carries NO !important so the Elementor style
   controls (which target these exact classes under {{WRAPPER}}) win cleanly. */
.ww-accommodation-card {
    background: var(--ww-card-bg, #ffffff);
    border: var(--ww-acc-border-width, 1px) solid var(--ww-border, #f0f0f0);
    border-radius: var(--ww-radius, 16px);
    padding: var(--ww-card-padding, 25px);
    box-shadow: var(--ww-shadow, 0 10px 30px rgba(0,0,0,0.05));
    font-family: var(--ww-font, 'Inter', -apple-system, sans-serif);
    box-sizing: border-box;
    width: 100%;
}
.ww-accommodation-card .ww-acc-title {
    text-align: var(--ww-title-align, center);
    margin-bottom: var(--ww-title-margin, 16px);
}
.ww-accommodation-card .ww-acc-title h3 {
    color: var(--ww-title-color, var(--ww-primary, #222));
    font-size: var(--ww-title-size, 1.1rem);
    font-weight: 600;
    margin: 0;
}
.ww-accommodation-card .ww-details-grid {
    display: grid;
    grid-template-columns: repeat(var(--ww-acc-columns, 2), 1fr);
    gap: var(--ww-acc-gap, 10px);
}
.ww-accommodation-card .ww-detail-item span {
    display: block;
    font-size: 9px;
    color: var(--ww-detail-label-color, #bbb);
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}
.ww-accommodation-card .ww-detail-item strong {
    font-size: 12px;
    color: var(--ww-detail-value-color, #444);
    font-weight: 600;
    word-break: break-word;
}
.ww-accommodation-card .ww-detail-item strong a {
    color: var(--ww-detail-value-color, #444);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ww-accommodation-card .ww-detail-item strong a:hover {
    opacity: 0.75;
}
.ww-accommodation-card .ww-acc-empty {
    color: var(--ww-label-color, #666);
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
}

/* --- BOARDING-PASS STUBS (multi-event guests) --- */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-header {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    text-align: left !important;
    margin-bottom: 2px !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-header .ww-detail-item {
    flex: 0 0 auto !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-header + .ww-divider {
    margin: 8px 0 !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stubs {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub {
    padding: 6px 4px !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--ww-primary) !important;
    margin-bottom: 2px !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-meta {
    display: flex !important;
    gap: 20px !important;
    align-items: baseline !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-meta span {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-meta em {
    font-style: normal !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--ww-detail-label-color, #bbb) !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-meta strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ww-detail-value-color, #444) !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-sep {
    height: 1px !important;
    background-image: linear-gradient(to right, #ddd 50%, transparent 50%) !important;
    background-size: 8px 1px !important;
    background-repeat: repeat-x !important;
    margin: 0 -10px !important;
    position: relative !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-sep::before,
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-sep::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: var(--ww-bg, #fff) !important;
    transform: translateY(-50%) !important;
}
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-sep::before { left: -7px !important; }
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-sep::after  { right: -7px !important; }

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-footer {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    text-align: left !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-stub-footer .ww-detail-item {
    flex: 0 0 auto !important;
}

/* --- UNIFIED FORM --- */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-form-wrapper {
    background: var(--ww-card-bg) !important;
    border-radius: var(--ww-radius) !important;
    padding: var(--ww-card-padding, 25px) !important;
    border: 1px solid var(--ww-border) !important;
    box-shadow: var(--ww-shadow) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block;
}

/* --- TRAVEL & STAY FORM ([wedwebs_travel_rsvp]) visibility ---
   The travel form ([wedwebs_travel_rsvp]) shares the .ww-form-wrapper card look
   but is NOT gated by body.rsvp-*: it must stay visible while pending AND
   confirmed. rsvp-elite.js drives its whole-instance visibility, adding
   .ww-travel-visible when the guest is attending ≥1 event and .ww-travel-hidden
   once every event is declined. These rules are app-id scoped so they out-rank
   the .ww-form-wrapper `display:block !important` above (which the travel card
   also matches), and default to hidden so the form never flashes before the
   engine evaluates the decline state. */
#wedwebs-travel-app .ww-travel-instance { display: none !important; }
#wedwebs-travel-app .ww-travel-instance.ww-travel-visible {
    display: block !important;
    /* Graceful "next step" reveal under the ticket once the RSVP is confirmed,
       rather than an abrupt pop. Triggers whenever the visible class is added. */
    animation: wwTravelReveal 0.45s ease both;
}
#wedwebs-travel-app .ww-travel-instance.ww-travel-hidden  { display: none !important; }
body.elementor-editor-active #wedwebs-travel-app .ww-travel-instance { display: block !important; }

@keyframes wwTravelReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #wedwebs-travel-app .ww-travel-instance.ww-travel-visible { animation: none; }
}

/* "Edit details" link on the travel summary card — re-opens the pre-filled form. */
#wedwebs-travel-app .ww-travel-edit {
    display: inline-block;
    margin-top: 14px;
    padding: 0;
    background: none;
    border: none;
    color: var(--ww-accent, #1e1e1e);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
#wedwebs-travel-app .ww-travel-edit:hover { opacity: 0.7; }

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-form-section {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #f9f9f9 !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-form-section:last-child,
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-global-section,
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-form-section:has(+ .ww-global-section) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-section-title {
    /* Typographic props not !important so an Elementor Typography group can
       override them; colour/layout stay !important. */
    font-weight: 700;
    font-size: var(--ww-event-title-size, 1rem);
    color: var(--ww-event-title-color) !important;
    margin-bottom: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-field-group {
    margin-bottom: 15px !important;
    text-align: left !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-field-group label {
    display: block !important;
    /* Typographic props intentionally NOT !important so an Elementor
       Typography group (targeting an #id-boosted selector) can override them.
       Colour + layout stay !important. */
    font-size: var(--ww-label-size, 0.9rem);
    font-weight: 600;
    margin-bottom: 6px !important;
    color: var(--ww-label-color) !important;
    text-transform: none;
}

/* --- INPUTS & SELECTS --- */
:is(#wedwebs-elite-app, #wedwebs-travel-app) select.ww-input-field,
:is(#wedwebs-elite-app, #wedwebs-travel-app) select.ww-select,
:is(#wedwebs-elite-app, #wedwebs-travel-app) select,
:is(#wedwebs-elite-app, #wedwebs-travel-app) input.ww-input-field,
:is(#wedwebs-elite-app, #wedwebs-travel-app) textarea.ww-input-field {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1.5px solid #f0f0f0 !important;
    border-radius: 10px !important;
    font-size: var(--ww-input-size, 16px);
    background: #fafafa !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    color: var(--ww-input-color) !important;
    margin: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-field-group select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-input-field:focus {
    background: #fff !important;
    border-color: var(--ww-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.05) !important;
}

/* --- BUTTON --- */
:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-btn-submit {
    width: 100% !important;
    padding: 18px !important;
    background: var(--ww-button-bg) !important;
    color: var(--ww-button-color) !important;
    border: none !important;
    border-radius: 12px !important;
    /* font-weight / font-size not !important so an Elementor Typography group
       can override them; background/colour/layout stay !important. */
    font-weight: 700;
    cursor: pointer !important;
    margin-top: 10px !important;
    font-size: 1rem;
    transition: all 0.3s ease !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
}

:is(#wedwebs-elite-app, #wedwebs-travel-app) .ww-btn-submit:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

.ww-status { text-align: center; padding: 40px; color: #94a3b8; font-size: 0.9rem; }

.ww-error-msg {
    color: #dc2626;
    font-size: 13px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* --- OPEN REGISTRATION (wedwebs_open_rsvp) --- */
#wedwebs-open-rsvp-app {
    width: 92%;
    max-width: 480px;
    margin: 20px auto;
    box-sizing: border-box;
    font-family: var(--ww-font);
}

#wedwebs-open-rsvp-app .ww-form-wrapper {
    background: var(--ww-card-bg) !important;
    border-radius: var(--ww-radius) !important;
    padding: var(--ww-card-padding, 25px) !important;
    border: 1px solid var(--ww-border) !important;
    box-shadow: var(--ww-shadow) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#wedwebs-open-rsvp-app .ww-field-group {
    margin-bottom: 15px !important;
    text-align: left !important;
}

#wedwebs-open-rsvp-app .ww-field-group label {
    display: block !important;
    /* See elite label note — typographic props left overridable. */
    font-size: var(--ww-label-size, 0.9rem);
    font-weight: 600;
    margin-bottom: 6px !important;
    color: var(--ww-label-color) !important;
}

#wedwebs-open-rsvp-app .ww-required {
    color: #dc2626;
}

#wedwebs-open-rsvp-app select.ww-input-field,
#wedwebs-open-rsvp-app input.ww-input-field {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1.5px solid #f0f0f0 !important;
    border-radius: 10px !important;
    font-size: var(--ww-input-size, 16px);
    background: #fafafa !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    color: var(--ww-input-color) !important;
    margin: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}

#wedwebs-open-rsvp-app .ww-input-field:focus {
    background: #fff !important;
    border-color: var(--ww-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30,30,30,0.05) !important;
}

#wedwebs-open-rsvp-app .ww-btn-submit {
    width: 100% !important;
    padding: 18px !important;
    background: var(--ww-button-bg) !important;
    color: var(--ww-button-color) !important;
    border: none !important;
    border-radius: 12px !important;
    /* See elite button note — font-weight / font-size left overridable. */
    font-weight: 700;
    cursor: pointer !important;
    margin-top: 10px !important;
    font-size: 1rem;
    transition: all 0.3s ease !important;
    display: block !important;
    text-align: center !important;
}

#wedwebs-open-rsvp-app .ww-btn-submit:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

#wedwebs-open-rsvp-app .ww-error-msg {
    color: #dc2626;
    font-size: 13px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* QR card — mirrors :is(#wedwebs-elite-app, #wedwebs-travel-app) equivalents */
#wedwebs-open-rsvp-app .ww-result-card {
    background: var(--ww-qr-bg, var(--ww-card-bg)) !important;
    border-radius: var(--ww-radius) !important;
    padding: var(--ww-qr-padding, 25px) !important;
    box-shadow: var(--ww-shadow) !important;
    text-align: center !important;
    border: 1px solid var(--ww-border) !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block;
}

#wedwebs-open-rsvp-app .ww-form-title {
    text-align: var(--ww-title-align, center);
    margin-bottom: var(--ww-title-margin, 16px);
}

#wedwebs-open-rsvp-app .ww-form-title h3 {
    color: var(--ww-title-color, var(--ww-primary, #222));
    font-size: var(--ww-title-size, 1.1rem);
    font-weight: var(--ww-title-weight, 600);
    margin: 0;
}

#wedwebs-open-rsvp-app .ww-qr-wrapper {
    background: transparent !important;
    padding: 10px !important;
    display: inline-block !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    max-width: 180px !important;
}

#wedwebs-open-rsvp-app .ww-qr-wrapper img {
    width: 100% !important;
    height: auto !important;
    mix-blend-mode: multiply !important;
    display: block;
    margin: 0 auto;
}

#wedwebs-open-rsvp-app .ww-guest-name {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    font-weight: 800;
    color: var(--ww-primary) !important;
    margin: 0 0 5px 0 !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
}

#wedwebs-open-rsvp-app .ww-divider {
    border: none !important;
    border-top: 1px solid var(--ww-divider-color, #eee) !important;
    margin: 15px 0 !important;
    height: 1px !important;
}

#wedwebs-open-rsvp-app .ww-details-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

#wedwebs-open-rsvp-app .ww-detail-item span {
    display: block !important;
    font-size: 9px;
    color: var(--ww-detail-label-color, #bbb) !important;
    text-transform: uppercase;
    margin-bottom: 2px !important;
    letter-spacing: 0.5px;
}

#wedwebs-open-rsvp-app .ww-detail-item strong {
    font-size: 12px;
    color: var(--ww-detail-value-color, #444) !important;
    font-weight: 600;
}

#wedwebs-open-rsvp-app .ww-qr-hint {
    font-size: 12px !important;
    color: #aaa !important;
    margin-top: 14px !important;
    line-height: 1.4 !important;
}

#wedwebs-open-rsvp-app .ww-btn-wa {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 14px !important;
    background: #25d366 !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: opacity 0.2s ease !important;
}

#wedwebs-open-rsvp-app .ww-btn-wa:hover {
    opacity: 0.88 !important;
}