/* Event page styles (concert-style schedule and speakers) */

.event-hero {
    position: relative;
    min-height: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    color: #fff;
    background: #fff;
    overflow: hidden;
}
.event-hero.hero-transitioning h1,
.event-hero.hero-transitioning p {
    animation: fadeContent 0.3s ease-in-out;
}
@keyframes fadeContent {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.event-hero .hero-overlay { display: none; }
.event-hero h1 { 
    font-size: 2.25rem; 
    margin: 0 0 8px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.event-hero p { 
    font-size: 1.125rem; 
    margin: 0 0 16px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* Ensure text sits above overlays and hero art */
.event-hero .container { 
    position: relative; 
    z-index: 3;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}
/* Constrained hero art with edge fade */
.event-hero .event-hero-art {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1400px;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transition: opacity 0.5s ease-in-out;
    mask-image: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0,0,0,1) 10%, 
        rgba(0,0,0,1) 90%, 
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0,0,0,1) 10%, 
        rgba(0,0,0,1) 90%, 
        transparent 100%
    );
}
/* Dark overlay for text readability */
.event-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(1400px, 100%);
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.35));
    z-index: 2;
    pointer-events: none;
}
/* Soft edge fade for hero image to blend into page background */
.event-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(1400px, 100%);
    height: 100%;
    pointer-events: none;
    background: 
        linear-gradient(90deg, 
            rgba(255,255,255,1) 0%, 
            rgba(255,255,255,0) 15%, 
            rgba(255,255,255,0) 85%, 
            rgba(255,255,255,1) 100%
        ),
        radial-gradient(ellipse at center, 
            rgba(0,0,0,0) 30%, 
            rgba(255,255,255,0.4) 75%, 
            rgba(255,255,255,0.9) 100%
        );
    z-index: 4;
}

/* Hero Carousel Controls */
.hero-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-carousel-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}
.hero-carousel-prev {
    left: max(24px, calc(50% - 700px + 24px));
}
.hero-carousel-next {
    right: max(24px, calc(50% - 700px + 24px));
}

/* Hero Carousel Indicators (dots) */
.hero-carousel-indicators {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}
.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.carousel-indicator:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.2);
}
.carousel-indicator.active {
    width: 32px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(0, 0, 0, 0.8);
}

.speakers-section { padding: 40px 0; }
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1024px) { .speakers-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .speakers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .speakers-grid { grid-template-columns: 1fr; } }

.speaker-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 20px;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    position: relative;
    padding-bottom: 56px; /* space for bottom-left actions */
    min-height: 180px;
}
.speaker-card::after { content: ""; display: table; clear: both; }
.speaker-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.speaker-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #e9ecef;
    object-fit: cover;
    float: left;
    margin-right: 16px;
}
.speaker-meta { display: block; }
.speaker-name { font-weight: 700; font-size: 1.1rem; }
.speaker-org { color: #555; }
.speaker-link { color: var(--primary-color, #0057ff); text-decoration: none; }
.speaker-link:hover { text-decoration: underline; }

.speaker-bio { color: #333; display: none; margin-top: 8px; line-height: 1.5; white-space: pre-line; }
.speaker-toggle { cursor: pointer; color: var(--primary-color, #0057ff); text-decoration: none; }
.speaker-actions { position: absolute; left: 20px; bottom: 16px; display: inline-flex; gap: 8px; align-items: center; }
.speaker-actions .show-more { border: 1px solid rgba(0,0,0,0.12); background: #fff; padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 0.9rem; }

/* Full-width detail section */
.speaker-detail { padding: 16px 0 24px; display: none; }
.speaker-detail.is-visible { display: block; }
.speaker-detail .detail-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.speaker-detail .detail-header { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.speaker-detail .detail-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #e9ecef; }
.speaker-detail .detail-name { font-size: 1.25rem; font-weight: 700; margin: 0; }
.speaker-detail .detail-org { color: #555; margin: 2px 0 0 0; }
.speaker-detail .detail-body { color: #333; line-height: 1.6; white-space: pre-line; }

.schedule-section { padding: 24px 0 64px; }
.track-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.track-toggle { border: 1px solid rgba(0,0,0,0.12); background: #fff; padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 0.9rem; }
.track-toggle.active { background: #111; color: #fff; border-color: #111; }
.my-schedule-toggle { margin: 8px 0; }
.my-schedule-toggle .switch { position: relative; display: inline-block; width: 46px; height: 26px; vertical-align: middle; margin-right: 8px; }
.my-schedule-toggle .switch input { opacity: 0; width: 0; height: 0; }
.my-schedule-toggle .slider { position: absolute; cursor: pointer; inset: 0; background: #ddd; transition: background 0.2s ease; border-radius: 999px; }
.my-schedule-toggle .slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; transition: transform 0.2s ease; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.my-schedule-toggle input:checked + .slider { background: #22c55e; }
.my-schedule-toggle input:checked + .slider:before { transform: translateX(20px); }
.my-schedule-toggle .label { font-size: 0.95rem; vertical-align: middle; }
.dev-columns-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0 8px 0;
    font-weight: 600;
    color: #444;
}
.track-header { transition: box-shadow 0.15s ease, color 0.15s ease; }
.track-header--highlight { color: #111; box-shadow: inset 0 -4px 0 rgba(0,87,255,0.25); }
.schedule-grid {
    display: grid;
    position: relative;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.calendar-grid { /* calendar mode */ }
.calendar-time { font-weight: 600; color: #666; }
.calendar-row-divider { height: 1px; background: rgba(0,0,0,0.06); align-self: stretch; z-index: 0; }
/* Keep time labels aligned and right-justified in their fixed column */
.calendar-time { display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.time-slot {
    background: #111;
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-weight: 600;
    text-align: center;
}
.session {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 12px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    position: relative;
    z-index: 1;
}
.session.session--track-highlight { box-shadow: 0 0 0 2px rgba(0,87,255,0.2), 0 1px 2px rgba(0,0,0,0.04); }
.session.session--event-wide {
    background: #fafafa;
    border-style: dashed;
}
.session.session--text-only {
    min-height: auto;
    padding: 6px 12px;
    border-width: 0; /* avoid extra pixel pushing it off the grid */
    margin-top: -6px; /* further pull up for tiny 15-min slots */
}
.session.session--text-only .session-speaker,
.session.session--text-only .session-tags,
.session.session--text-only .session-add-icon,
.session.session--text-only .session-details-link { display: none; }
.session.session--clickable { cursor: pointer; }
.session-details-link { font-size: 0.9rem; }
.session-title { font-weight: 600; color: #222; }
.session-title-row { display: flex; align-items: center; gap: 8px; }
.session-speaker { color: #555; font-size: 0.95rem; }
.session a { color: var(--primary-color, #0057ff); text-decoration: none; }
.session a:hover { text-decoration: underline; }
.session--selected { border-color: var(--primary-color, #0057ff); box-shadow: 0 0 0 2px rgba(0,87,255,0.15); }
.session--dimmed { opacity: 0.45; }
.session-select-btn.is-selected { background: #111; color: #fff; border-color: #111; }
.session--hidden { display: none; }

/* Hover add-to-schedule icon */
.session-add-icon {
    position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
    border-radius: 50%; border: none; cursor: pointer;
    background: #22c55e; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 0; transition: opacity 0.15s ease; z-index: 2;
}
.session-add-icon i { pointer-events: none; }
.session:hover .session-add-icon { opacity: 1; }
.session--selected .session-add-icon { opacity: 1; background: #16a34a; }
.session.session--text-only .session-add-icon { display: none; }
.session-speaker-inline {
    display: inline-flex; align-items: center; gap: 8px;
}
.session-speaker-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #e9ecef;
}
.session-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-badge { font-size: 0.7rem; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; padding: 2px 8px; background: #fafafa; cursor: pointer; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-badge.active { background: #111; color: #fff; border-color: #111; }
.active-tags-bar, .available-tags-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
.available-tags-bar .tag-badge::before, .active-tags-bar .tag-badge::before { content: ''; }
.active-tags-bar .tag-badge { background: #111; color: #fff; border-color: #111; }
.available-tags-bar .tag-badge { background: #f6f6f6; }
.session-select { margin-top: 8px; }
.session-select .btn { font-size: 0.85rem; padding: 6px 10px; }

/* Mobile stacking */
@media (max-width: 768px) {
    .dev-columns-header, .schedule-grid {
        grid-template-columns: 100%;
    }
    .time-slot { text-align: left; }
}

/* Speaker Modal */
.speaker-modal { position: fixed; inset: 0; display: none; }
.speaker-modal[aria-hidden="false"] { display: block; }
.speaker-modal { z-index: 1000; }
.speaker-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; }
.speaker-modal-dialog {
    position: relative;
    width: min(640px, 92vw);
    margin: 10vh auto 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    padding: 20px 24px;
    z-index: 1001;
}
.speaker-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
.speaker-modal-content h3 { margin: 0 0 8px 0; }
.speaker-modal-org { color: #555; margin: 0 0 12px 0; }
.speaker-modal-bio { color: #333; margin: 0; line-height: 1.6; white-space: pre-line; max-height: 60vh; overflow: auto; }

/* Calendar rows are sized via --increment-height in JS (gridTemplateRows). */





/* Register CTA inline blocks */
.register-cta { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Registration Modal */
.register-modal { position: fixed; inset: 0; display: none; z-index: 1100; }
.register-modal[aria-hidden="false"] { display: block; }
.register-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.register-modal-dialog {
    position: relative;
    width: min(760px, 94vw);
    margin: 8vh auto 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
    padding: 22px 24px;
}
/* Allow modal to scroll independently on small screens */
.register-modal-dialog {
    max-height: 90vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.register-modal-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 1.5rem; cursor: pointer; }
.register-modal-content h3 { margin: 0 0 12px 0; }
.register-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.register-header-actions .btn { white-space: nowrap; }
.register-cost { margin: 4px 0 12px; color: #333; }
.price-amount-inline { font-weight: 800; color: #111; }
.price-subtext-inline { color: #555; }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.form-field label { font-weight: 600; color: #333; }
.form-field input { border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; padding: 10px 12px; font-size: 0.95rem; }
.form-field select { border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; padding: 10px 12px; font-size: 0.95rem; background: #fff; }

.attendees-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.attendee-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr auto; gap: 12px; align-items: start; background: #fafafa; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 12px; }
@media (max-width: 768px) { .attendee-row { grid-template-columns: 1fr; } }
.attendee-actions { display: flex; align-items: flex-start; justify-content: flex-end; }
.remove-attendee { border: 1px solid rgba(0,0,0,0.12); background: #fff; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; line-height: 1; }

/* Wider row for checkbox clusters */
.attendee-wide { grid-column: 1 / -1; }
.checkboxes-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.checkboxes-inline label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(0,0,0,0.08); border-radius: 999px; background: #fff; font-size: 0.9rem; }
@media (max-width: 768px) { .attendee-wide { grid-column: 1 / -1; } }

.register-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.register-disclaimer { color: #555; font-size: 0.9rem; margin-top: 10px; }

/* Success summary */
.register-success { padding: 8px 0; }
.register-summary-org { font-weight: 600; color: #222; }
.register-summary-list { margin: 8px 0 0 0; padding-left: 18px; }
.register-summary-item { margin: 6px 0; }
.register-summary-meta { color: #444; font-size: 0.95rem; }
.register-success-note { margin-top: 12px; color: #333; font-size: 0.95rem; }

/* Pricing note */
.price-note { color: #555; font-size: 0.9rem; margin-top: 8px; }
/* Pricing & Reservation sections */
.pricing-section { padding: 32px 0 16px; background: #fafafa; }
.price-display { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.price-amount { font-size: 2.25rem; font-weight: 800; color: #111; }
.price-subtext { color: #555; }

.included-section { padding: 24px 0; }
.included-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.included-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.included-card h3 { margin: 8px 0 6px 0; font-size: 1.05rem; }
.included-card p { margin: 0 0 6px 0; color: #333; }
.included-card .meta { color: #666; font-size: 0.9rem; }
.included-card i { color: var(--primary-color, #0057ff); font-size: 1.25rem; }
@media (max-width: 1024px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }

.included-note { margin-top: 12px; color: #444; }
.included-note a { color: var(--primary-color, #0057ff); text-decoration: none; }
.included-note a:hover { text-decoration: underline; }

.reserve-cta { padding: 24px 0 64px; text-align: center; }
.reserve-cta p { margin: 8px 0 16px 0; color: #333; }

/* ------------------------------ */
/* Mobile enhancements (overrides) */
/* ------------------------------ */

/* Ensure buttons are easy touch targets */
.event-hero .btn,
.register-cta .btn,
.register-actions .btn,
.session-select .btn { min-height: 44px; }

/* Event hero: scale for small screens */
@media (max-width: 600px) {
    .event-hero { 
        min-height: 320px;
        height: 320px;
    }
    .event-hero .container {
        padding: 0 20px;
    }
    .event-hero h1 { 
        font-size: 1.75rem;
        max-width: 100%;
    }
    .event-hero p { 
        font-size: 1rem;
        max-width: 100%;
    }
    .event-hero .event-hero-art { width: 100%; }
    
    /* Smaller carousel controls on mobile */
    .hero-carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .hero-carousel-prev { left: 12px; }
    .hero-carousel-next { right: 12px; }
    
    /* Smaller indicators on mobile */
    .hero-carousel-indicators { bottom: 16px; }
    .carousel-indicator { width: 8px; height: 8px; }
    .carousel-indicator.active { width: 24px; }
    
    /* Tighter edge fade on mobile */
    .event-hero::after {
        background: 
            linear-gradient(90deg, 
                rgba(255,255,255,1) 0%, 
                rgba(255,255,255,0) 8%, 
                rgba(255,255,255,0) 92%, 
                rgba(255,255,255,1) 100%
            ),
            radial-gradient(ellipse at center, 
                rgba(0,0,0,0) 20%, 
                rgba(255,255,255,0.5) 70%, 
                rgba(255,255,255,0.95) 100%
            );
    }
}

/* Speaker cards: stack avatar and center actions on mobile */
@media (max-width: 600px) {
    .speaker-card { padding: 16px; padding-bottom: 56px; }
    .speaker-avatar { float: none; margin: 0 auto 12px; display: block; }
    .speaker-meta { text-align: center; }
    .speaker-actions { left: 50%; transform: translateX(-50%); bottom: 12px; }
}

/* Speaker detail header stacks on mobile */
@media (max-width: 600px) {
    .speaker-detail .detail-header { flex-direction: column; text-align: center; }
}

/* Schedule: increase row height variable slightly on small screens */
@media (max-width: 600px) {
    .schedule-grid { --increment-height: 28px; }
}

/* Center Register CTA on mobile */
@media (max-width: 600px) {
    .register-cta { justify-content: center; }
}

/* Form controls: touch-friendly heights */
.form-field input,
.form-field select { min-height: 44px; }

/* Registration actions: wrap and center on mobile */
@media (max-width: 600px) {
    .register-actions { flex-wrap: wrap; justify-content: center; }
}

/* Pricing layout center and scale */
@media (max-width: 600px) {
    .price-display { justify-content: center; }
    .price-amount { font-size: 2rem; }
}

/* Modals: tighter padding on very small screens */
@media (max-width: 480px) {
    .speaker-modal-dialog,
    .register-modal-dialog { padding: 16px; width: 94vw; margin: 6vh auto 0; }
    .speaker-modal-bio { max-height: 58vh; -webkit-overflow-scrolling: touch; }
}

/* Filters and tags ergonomics on mobile */
@media (max-width: 600px) {
    .track-toggle { padding: 10px 14px; font-size: 1rem; }
    .tag-badge { font-size: 0.85rem; max-width: 100%; }
}

/* Speakers: mobile presentation (3-wide circles + minimal text) */
@media (max-width: 600px) {
    .speakers-grid { grid-template-columns: repeat(3, 1fr); }
    .speaker-org, .speaker-actions { display: none !important; }
    .speaker-card { padding: 8px; padding-bottom: 8px; min-height: auto; box-shadow: none; }
    .speaker-avatar {
        float: none;
        margin: 0 auto 6px;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
    }
    .speaker-name { display: block; text-align: center; font-size: 0.9rem; }
}

/* What's Included: hide small meta at bottom on mobile */
@media (max-width: 600px) {
    .included-card .meta { display: none; }
}

/* Schedule on mobile: show title only (no tags or speaker icon) */
@media (max-width: 600px) {
    .session .session-tags,
    .session .session-speaker-avatar,
    .session .session-speaker,
    .session .session-details-link,
    .session .session-add-icon { display: none !important; }
    .session { padding: 8px; min-height: 48px; }
    .session-title { font-size: 0.95rem; }
    .session-title-row { gap: 0; }
}

/* ------------------------------ */
/* Registration modal mobile fixes */
/* ------------------------------ */

/* Ensure everything inside the modal uses border-box and stays within viewport */
.register-modal *,
.register-modal *::before,
.register-modal *::after { box-sizing: border-box; }

/* Prevent any accidental horizontal overflow */
.register-modal-dialog { max-width: 100vw; }
.register-modal-content { max-width: 100%; }

/* Inputs/selects should never exceed container width */
.form-field input,
.form-field select,
.form-field textarea { width: 100%; max-width: 100%; }

/* Keep grid content from overflowing rounded container */
.attendee-row { overflow: hidden; }

/* Allow checkbox chips to wrap text on narrow screens */
.checkboxes-inline { margin-top: 6px; }
.checkboxes-inline label {
    white-space: nowrap; /* keep each chip on one line */
    line-height: 1.2;
    min-width: 0;
    word-break: normal;
    overflow-wrap: normal;
}

/* On mobile, make chips form two columns for better use of space */
@media (max-width: 768px) {
    .register-modal-dialog {
        width: 100vw;
        width: 100dvw;
        max-height: 92dvh; /* account for dynamic mobile viewport */
        margin: 0; /* flush edges for full-width */
        border-radius: 12px 12px 0 0; /* bottom sheet feel */
    }
    .register-modal-content { width: 100%; max-width: 100%; }
    .checkboxes-inline label { flex: 0 0 auto; } /* chips flow in a row, wrap naturally */
    .register-actions { flex-wrap: wrap; justify-content: center; }
}

/* Slight vertical alignment for checkboxes */
.register-modal [type="checkbox"] { transform: scale(0.85) translateY(1px); transform-origin: center left; margin-right: 6px; }

/* ------------------------------ */
/* Promotional Popup */
/* ------------------------------ */
.promo-modal { position: fixed; inset: 0; display: none; z-index: 1200; }
.promo-modal[aria-hidden="false"] { display: block; }
.promo-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.promo-modal-dialog {
    position: relative;
    width: min(980px, 94vw);
    margin: 12vh auto 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    z-index: 1201;
}

.promo-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}
.promo-modal-close:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.promo-modal-content {
    display: grid;
    grid-template-columns: 504px 1fr;
    gap: 0;
}

.promo-image-container {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.promo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.promo-text-content {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.promo-title {
    margin: 0 0 20px 0;
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
}

.promo-message {
    margin: 0 0 8px 0;
    font-size: 1.15rem;
    color: #333;
    line-height: 1.6;
}

.promo-amount {
    font-size: 2.5rem;
    font-weight: 900;
    color: #22c55e;
    display: inline-block;
    margin: 0 4px;
}

.promo-deadline {
    color: #d97706;
    font-size: 1.25rem;
}

.promo-coupon {
    margin: 0 0 20px 0;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
}

.promo-coupon-label {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 2px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.promo-coupon-code {
    font-size: 0.95rem;
    font-weight: 700;
    color: #16a34a;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.promo-register-btn {
    min-width: 200px;
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,87,255,0.25);
    transition: all 0.2s ease;
}

.promo-register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,87,255,0.35);
}

.promo-note {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .promo-modal-dialog {
        width: 96vw;
        margin: 8vh auto 0;
    }
    
    .promo-modal-content {
        grid-template-columns: 1fr;
    }
    
    .promo-image-container {
        height: 220px;
    }
    
    .promo-text-content {
        padding: 32px 24px;
    }
    
    .promo-title {
        font-size: 1.75rem;
    }
    
    .promo-message {
        font-size: 1.05rem;
    }
    
    .promo-amount {
        font-size: 2rem;
    }
    
    .promo-deadline {
        font-size: 1.15rem;
    }
    
    .promo-coupon {
        margin: 0 0 16px 0;
        padding: 4px 10px;
    }
    
    .promo-coupon-code {
        font-size: 0.85rem;
    }
}

/* Hide on mobile (screens smaller than 768px) */
@media (max-width: 767px) {
    .promo-modal {
        display: none !important;
    }
}