/* ===============================================
   EVENT PAGE SPECIFIC STYLES
   =============================================== */

/* Event Title Styling */
#event-content #event-title {
    background: var(--blue-grey-dark);
    padding: 1em;
    box-shadow: var(--shadow-hard);
    color: var(--white);
    text-shadow: 2px 2px var(--border-color);
    line-height: 1.2;
}

/* Event Header & Details Grid */
.container .event-header {
    padding: var(--space-4) var(--space-8);
    background: var(--beige-light);
    border-bottom: 2px dashed var(--border-color);
}

.event-details {
    background: var(--beige);
    margin-block: var(--space-6);
    border: 2px solid var(--beige);
    color: var(--border-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.event-details p {
    text-align: left;
    margin-bottom: 0px;
    font-size: var(--font-size-base);
}

.event-details strong {
    font-weight: 600;
    font-size: var(--font-size-base);
    font-family: var(--font-header);
}

.detail-item {
    padding: var(--space-4);
    background-color: var(--beige-light);
}

/* Character Selection */
#character-selection {
    border: 2px solid var(--border-color);
    border-bottom: none;
    padding: var(--space-4);
}

.character-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.character-card {
    border: 2px solid var(--beige);
    padding: var(--space-4);
    cursor: pointer;
    transition: var(--transition);
    background: var(--white);
    position: relative;
    overflow: hidden;
}

.character-card:hover {
    background-color: var(--beige);
    border-color: var(--brown-dark);
}

.character-card.selected {
    border-color: var(--success-light);
    background: var(--sage);
}

.character-card.taken {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--beige);
    display: flex;
    justify-content: space-between;
}

.character-card.taken:hover {
    transform: none;
    border-color: var(--beige);
    box-shadow: none;
    background: var(--beige);
}

.character-card .character-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--space-2);
}

.character-card .character-description {
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

.character-help {
    margin: var(--space-4) 0;
    font-size: var(--font-size-sm);
    color: var(--success);
}

.taken-character {
    color: var(--danger);
    text-transform: uppercase;
    font-weight: bold;
}

/* Attendees Section */
#attendees-section {
    padding: var(--space-8);
    background: var(--blue-grey);
    margin-top: var(--space-6);
    box-shadow: var(--shadow-hard);
}

#attendees-section h2 {
    color: var(--blue-grey-dark);
}

.attendee-list {
    margin: var(--space-4) 0;
}

.attendee {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-3);
    background: var(--white);
    margin-bottom: var(--space-3);
    box-shadow: var(--space-1) var(--space-1) 0px var(--blue-grey-accent);
    transition: var(--transition);
}

.attendee:last-child {
    margin-bottom: 0;
}

.attendee strong {
    color: var(--text-color);
    font-weight: 600;
}

.attendee small {
    margin-top: var(--space-1);
}

.attendees-section .attendee {
    background: #96b5d4;
}

.no-rsvps {
    color: #455472;
    text-align: left;
}

.rsvp-note {
    font-style: normal;
}

/* RSVP Notifications */
.rsvp-notification {
    text-align: center;
    padding: var(--space-8);
    box-shadow: var(--shadow-hard);
}

.rsvp-notification svg {
    width: 64px;
    height: 64px;
}

.rsvp-notification h2 {
    margin-bottom: var(--space-6);
    font-family: var(--font-header);
}

.rsvp-notification-details {
    background: var(--white);
    padding: var(--space-6);
}

.rsvp-notification-details p {
    margin-bottom: var(--space-3);
    color: var(--text-color);
}

.rsvp-notification-details p:last-child {
    margin-bottom: 0;
}

/* RSVP Confirmation Styles */
.rsvp-confirmation {
    background: var(--sage);
}

.rsvp-confirmation h2 {
    color: var(--background-gradient-top);
}

.confirmation-details {
    border: 2px solid var(--background-gradient-bottom);
    box-shadow: var(--space-1) var(--space-1) 0px var(--background-gradient-bottom);
}

.success-icon {
    fill: var(--background-gradient-top);
}

/* RSVP Event Full Styles */
.rsvp-event-full {
    background: var(--warning-light);
}

.rsvp-event-full h2 {
    color: var(--warning-dark);
}

.rsvp-full-details {
    border: 2px solid var(--warning-dark);
    box-shadow: var(--space-1) var(--space-1) 0px var(--warning-dark);
}

.full-icon {
    fill: var(--warning-dark);
}

.reminder {
    font-style: italic;
    color: var(--brown-dark) !important;
    margin-top: var(--space-4) !important;
}

/* Privacy Warning for Event Page */
.privacy-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning-dark);
    padding: 16px;
    margin-top: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--text-color);
}

/* Event Footer */
.event-footer {
    margin-top: var(--space-8);
}

/* Error State for Event Not Found */
.error-state {
    text-align: center;
    padding: var(--space-8);
    background: var(--white);
    box-shadow: var(--shadow-hard);
}

.error-state h2 {
    color: var(--danger);
    margin-bottom: var(--space-4);
}

.error-state p {
    margin-bottom: var(--space-6);
    color: var(--text-color);
}

/* Responsive Design for Event Page */
@media (max-width: 640px) {
    .character-grid {
        grid-template-columns: 1fr;
    }
    
    .attendee {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .event-details {
        grid-template-columns: 1fr;
    }
}