/* ========================================
   COMPONENT: RSVP
   Extracted from styles.css
   ======================================== */

/* ========================================
   RSVP Section Styles - Modern UI/UX
   ======================================== */

.rsvp-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rsvp-icon-badge i {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

/* Attendee avatar initials circle */
.rsvp-attendee-avatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* RSVP Section Header */
.rsvp-section-header {
    margin-bottom: var(--space-4);
}

/* RSVP Card */
.rsvp-card {
    background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-gray-50) 100%);
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Capacity progress bar */
.rsvp-progress {
    height: 6px;
}

/* ========================================
   Segmented Tab Control (Register Myself / Invite a Guest)
   ======================================== */
.rsvp-segmented {
    display: flex;
    background: var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: 4px;
    gap: 4px;
}

.rsvp-seg-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: background var(--transition-fast) var(--ease-out),
                color var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out);
    white-space: nowrap;
}

.rsvp-seg-btn:hover:not(.active) {
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-primary);
}

.rsvp-seg-btn.active {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.rsvp-seg-btn i {
    font-size: var(--font-size-base);
}

.rsvp-seg-label {
    line-height: 1;
}

/* Registration notices */
.rsvp-existing-notice,
.rsvp-guest-notice {
    background: rgba(var(--color-success-rgb), 0.06);
    border: 1px solid rgba(var(--color-success-rgb), 0.2);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
}

.rsvp-guest-notice {
    background: rgba(var(--color-primary-rgb), 0.06);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

/* Form Container */
.rsvp-form-container {
    position: relative;
}

/* RSVP submit button (Confirm RSVP / Update Registration / Join Waitlist).
   Referenced by apps/events/forms.py's RSVPForm but never had a matching
   style rule, so it was silently falling back to bare Bootstrap .btn
   defaults with no fill color — visually inconsistent with the rest of
   this section's styling. Also needs a real :disabled state since the
   button starts disabled in edit mode until the user changes a field
   (see the dirty-check script in rsvp_form.html) — without one, a
   disabled button looked identical to an enabled one. */
.btn-modern {
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
    padding: var(--space-3) var(--space-5);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25);
    transition: all var(--transition-slow) var(--ease-in-out);
}

/* Bootstrap's own .btn:hover / .btn:focus-visible rules (bootstrap.min.css)
   set background-color/border-color/color from --bs-btn-hover-* custom
   properties — but those are only ever defined by a Bootstrap color
   variant class (.btn-primary, etc.), which this button doesn't have.
   Left unset, they resolve to background-color's initial value
   (transparent), and .btn:hover's specificity (0,2,0) beats this rule's
   own un-stated background (0,1,0 on the bare .btn-modern selector) —
   so without explicitly re-declaring these here, the button's fill
   silently disappears on hover/keyboard-focus instead of just
   brightening. */
.btn-modern:hover:not(:disabled) {
    background-color: var(--color-primary);
    border-color: transparent;
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.35);
    color: var(--color-white);
}

.btn-modern:focus-visible {
    background-color: var(--color-primary);
    border-color: transparent;
    color: var(--color-white);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Same Bootstrap-variable gap as :hover/:focus-visible above, for the
   pressed state (Bootstrap's .btn.active/.btn:active rule). */
.btn-modern:active:not(:disabled) {
    background-color: var(--color-primary);
    border-color: transparent;
    color: var(--color-white);
    filter: brightness(0.85);
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.3);
}

.btn-modern:disabled {
    background: var(--color-gray-300);
    color: var(--color-gray-600);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Loading Spinner */
.spinner-modern {
    width: 3rem;
    height: 3rem;
    border-width: 0.35rem;
    animation: spinPulse 1s linear infinite;
}

/* Success State */
.rsvp-success-state {
    text-align: center;
    padding: 2rem 0;
}

.success-icon-wrapper {
    display: inline-block;
    animation: successSettle 0.5s var(--ease-out-expo);
}

.success-icon-wrapper i {
    font-size: 5rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(25, 135, 84, 0.3));
}

/* HTMX Indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Animations */

/* Responsive Design */
@media (max-width: 767.98px) {
    .success-icon-wrapper i {
        font-size: 3.5rem;
    }
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.errorlist li {
    padding: 0.5rem 1rem 0.5rem 3rem;
    background-color: var(--color-danger-bg);
    border: 1px solid rgba(var(--color-danger-rgb), 0.35);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

/* Smooth Transitions */
* {
    -webkit-tap-highlight-color: transparent;
}

.fade-in {
    animation: fadeIn 0.2s ease-out;
}

/* Focus Visible for Accessibility */
.rsvp-seg-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .rsvp-section,
    .rsvp-card {
        box-shadow: none !important;
        animation: none !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* Mobile sticky RSVP CTA */
#rsvp-sticky-cta {
    z-index: var(--z-index-fixed);
}