/* --- Core HTML and Body Setup (Crucial for correct height propagation) --- */
html, body {
    height: 100%; /* Ensures HTML and Body take full viewport height */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #050511 0%, #0A0A23 50%, #050511 100%);
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Fallback for older browsers, redundant with height: 100% on html/body */
    overflow: hidden; /* Prevent body scroll, let specific sections scroll */

    /* IMPORTANT: Add padding to body to create space for fixed/sticky elements */
    padding-bottom: 70px; /* Space for the fixed logo at the bottom (approx height 60px + margin) */
}

/* --- Fixed Elements (Direct children of body, assuming this structure in HTML) --- */
.event_logo {
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 200px;
    height: auto;
    z-index: 1000;
}

/* Fixed QR Codes Section (Desktop Only) */
.qr-codes-section {
    display: none; /* Hidden by default for mobile */
    position: fixed; /* Make it fixed */
    top: 0; /* Position at the top of the viewport */
    right: 0; /* Position at the right of the viewport */
    height: 100vh; /* Make it take full viewport height */
    margin-right: 20px;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 999; /* Ensure it stays on top of other content, but below logo */
    width: 300px; /* This is the width we need to account for */
}

/* --- Main Content Container (which is now offset by body padding) --- */
.container {
    text-align: center;
    width: 95%; /* Adjust as needed */
    margin: 0 auto; /* Center horizontally, remove vertical margin */
    flex-grow: 1; /* Allows it to take all available vertical space in body */
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    position: relative;
    box-sizing: border-box;
    padding-left: 20px; /* Add consistent side padding to container for smaller screens */
    padding-right: 20px; /* Add consistent side padding to container for smaller screens */
    height: 100%; /* Important: Takes 100% of the flex-grown space in body */
    overflow: hidden; /* Ensures child overflow is handled by children */
    /* Remove redundant padding-top/bottom here, as body padding handles overall space */
    padding-top: 0;
    padding-bottom: 0;
}

h1 {
    color: #ffcc33;
    margin-bottom: 0px;
}

h2 {
    padding-bottom: 10px;
    font-weight: 300;
    color: #fff;
}

/* General button styles for inputs and main buttons */
button, input[type="submit"] {
    background-color: #1E90FF;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.3em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

button:hover, input[type="submit"]:hover {
    background-color: #1873CC;
}

input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 15px;
    font-size: 1em;
}

label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Event Page Specific Styles (Main layout for event content) */
.event-page {
    display: flex;
    flex-grow: 1; /* Allow event-page to take available height */
    flex-wrap: wrap; /* Still allows wrapping on smaller screens */
    justify-content: space-between;
    text-align: left;
    height: 100%; /* Important: Takes 100% of the flex-grown .container */
    overflow: hidden; /* Ensures child overflow is handled by children */
    /* Remove general padding-top/bottom here, inner sections will manage */
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Sticky Event Title (inside event-details) --- */
.event-title {
    position: sticky; /* Makes it stick to the top of its scrolling parent */
    top: 0; /* Sticks to the very top of .event-details */
    width: 100%;
    background: linear-gradient(135deg, #050511 0%, #0A0A23 50%);
    /* Adjust padding to provide space below the title text itself */
    padding-top: 10px;
    padding-bottom: 20px; /* IMPORTANT: Increased padding-bottom to accommodate wrapping titles */
    box-sizing: border-box;
    z-index: 10; /* Stays above scrolling content */
    text-align: left;
}

.event-title h1 {
    margin-top: 0;
    margin-bottom: 0;
    color: #ffcc33;
    font-size: 2em;

}


.event-details {
    flex-grow: 1; /* Allow it to grow horizontally on desktop */
    min-width: 300px;
    display: flex;
    flex-direction: column;
    height: 100%; /* Takes 100% of .event-page's height */

    /* --- SCROLLING FOR ATTENDEE CARDS --- */
    overflow-y: auto; /* Make this section scrollable when content overflows */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    padding-bottom: 70px; /* Adjust for fixed logo at the bottom and some internal spacing */
    padding-right: 20px; /* Padding for scrollbar on Windows, and general content spacing */
    box-sizing: border-box; /* Include padding in height/width calculation */

    /* --- HIDE SCROLLBAR ON ALL BROWSERS --- */
    /* For Firefox */
    scrollbar-width: none;
    /* For Internet Explorer and older Edge */
    -ms-overflow-style: none;
    /* For Webkit browsers (Chrome, Safari, newer Edge, Opera) */
    &::-webkit-scrollbar {
        width: 0; /* Remove scrollbar space for vertical scrollbar */
        height: 0; /* Remove scrollbar space for horizontal scrollbar (even if not used) */
        background: transparent; /* Make the scrollbar track invisible */
    }
    /* --- END HIDE SCROLLBAR --- */
}

.mobile-buttons-section {
    display: none;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    padding: 20px;
    background-color: #2c2c2c;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    min-width: 250px;
    width: 100%;
    box-sizing: border-box;
}

.qr-code-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 55%; /* Each box takes max 50% of parent's height */
    border: 5px solid #ffcc33;
}

.qr-code-box h2 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #1c90ff;
    font-weight: 700;
}

#checkinQrCode, #pageQrCode {
    height: auto;
    max-width: 250px;
    max-height: 250px;
    margin: 10px auto;
}

.checkin-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    box-sizing: border-box;
    margin-top: auto;
    margin-bottom: auto;
}

.checkin-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    padding: 0;
}

.checkin-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
    border-radius: 0;
    border: none;
}

.checkin-card h3 {
    margin: 10px 0;
    color: #333;
    font-size: 1.5em;
    padding: 0 10px;
}

.checkin-card p {
    margin: 3px 0;
    font-size: 0.9em;
    color: #666;
    display: none;
}

.checkin-card a {
    color: #0077B5;
    text-decoration: none;
}

.checkin-card a:hover {
    text-decoration: underline;
}

.timestamp {
    font-size: 0.75em;
    color: #666;
    margin-top: 10px;
    padding: 0 10px 10px;
}

.checkin-card .actions {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 10px);
    box-sizing: border-box;
    margin: auto;
}

.checkin-card .actions a.button {
    display: block;
    padding: 15px;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.checkin-card .actions a.linkedin-button {
    background-color: #0077B5;
}

.checkin-card .actions a.linkedin-button:hover {
    background-color: #005582;
}

.checkin-card .actions a.email-button {
    background-color: #D44638;
}

.checkin-card .actions a.email-button:hover {
    background-color: #B0362C;
}

/* General button styles for the new full-width buttons */
.button.full-width-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1em;
    margin-bottom: 0;
}

.button.full-width-button i {
    margin-right: 8px;
}

.button.full-width-button:nth-child(1) {
    background-color: #1E90FF;
}

.button.full-width-button:nth-child(1):hover {
    background-color: #1873CC;
}

.button.full-width-button:nth-child(2) {
    background-color: #28a745;
}

.button.full-width-button:nth-child(2):hover {
    background-color: #1e7e34;
}

/* --- MEDIA QUERIES --- */
@media (min-width: 768px) {
    .container {
        flex-direction: row; /* Main content and fixed QR section side-by-side */
        align-items: stretch; /* Make direct flex children stretch to fill height */
        width: 100%; /* Take full width of viewport */
        margin: 0; /* No auto margin when full width */
        padding: 0; /* Remove padding as it will be handled by children */
        overflow: hidden; /* Important to contain fixed element */
        height: 100%; /* Ensure container takes full height of body */
    }

    .event-page {
        flex-direction: row; /* Keep for internal flex if needed */
        flex-grow: 1; /* Allows it to take remaining space horizontally */
        width: calc(100% - 300px); /* 100% of container minus QR section width */
        margin-right: 300px; /* This creates the space for the fixed QR section */
        height: 100%; /* Takes 100% of .container's height */
        overflow: hidden; /* Ensures child overflow is handled by event-details */
        padding-top: 0; /* Adjust as container already has vertical padding */
        padding-bottom: 0; /* Adjust as container already has vertical padding */
        padding-left: 20px; /* Add back padding to event-page */
        padding-right: 20px; /* Add back padding to event-page */
    }

    .event-details {
        flex-grow: 1; /* Fill remaining space on the left */
        height: 100%; /* Take full height of event-page */
        padding-top: 0;
    }

    .qr-codes-section {
        display: flex; /* Show QR section on desktop */
        /* position: fixed, top, right, height, width, padding-top/bottom are already defined above */
    }
    body.attendee-list-view .qr-codes-section {
        display: none; /* Hide QR codes when attendee-list-view is active */
    }

    .mobile-buttons-section {
        display: none; /* Always hidden on desktop */
    }

    body.attendee-list-view .checkin-card .actions {
        display: flex;
    }

    body:not(.attendee-list-view) .checkin-card .actions {
        display: none;
    }
}


@media (max-width: 767px) {
    .event-page {
        flex-direction: column;
        padding-left: 0; /* Remove desktop padding */
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .event-details {
        padding-right: 0;
        /* For position: sticky to work, overflow must be auto/scroll/hidden and height/max-height defined. */
        overflow-y: auto; /* IMPORTANT: Changed from visible to auto to enable sticky header on mobile */
        height: 100%; /* IMPORTANT: Changed from auto to 100% to ensure a scrollable height */
        padding-top: 0; /* Remove desktop padding */
        padding-bottom: 0; /* Remove desktop padding */
    }

    .qr-codes-section {
        display: none; /* Hide QR codes on mobile */
    }

    .mobile-buttons-section {
        display: flex; /* Show buttons on mobile */
    }

    .container {
        padding: 0px 20px 0px 20px;
    }

    .checkin-card .actions {
        display: flex;
    }

    .checkin-card p {
        display: block;
        padding: 0 10px;
    }

    .timestamp {
        padding-bottom: 10px;
    }

    .event-title {
        padding-left: 0; /* Remove explicit left padding for h1 container */
        text-align: center; /* Center the h1 on mobile */
        position: static;
    }
    .event-title h1 {
        padding-left: 0; /* No padding on h1 itself */
    }

    .event_logo {
        width: 150px; /* Make logo smaller on mobile */
        bottom: 5px;
        right: 5px;
    }
    
    .checkin-cards-container {
        padding-bottom: 200px;
    }
}

/* These .logo rules are likely redundant now that .event_logo is positioned fixed */
/* You might want to remove them if they don't apply to other images */
.logo {
    max-width: 300px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .logo {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .logo {
        max-width: 60%;
    }
}