/* General Form Styles */
.form-section {
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 2rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 0;
}

/* Inline field error state */
.input-error {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

/* Participant Rows */
.participant-row {
    border: 1px solid #e0e0e0;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

/* Breakout Form Styles */
.madsemble-breakout-app-wrapper {
    /* background-color removed per request */
    color: #fff;
    padding: 2rem;
    font-family: sans-serif;
}

.madsemble-breakout-app-wrapper h2,
.madsemble-breakout-app-wrapper h3 {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.madsemble-breakout-app-wrapper .form-group label {
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.madsemble-breakout-app-wrapper .form-group input {
    background-color: #fff;
    border: none;
    border-radius: 0;
    padding: 0.8rem 1rem;
    color: #000;
}

.madsemble-breakout-app-wrapper .form-group input[readonly] {
    background-color: #333;
    color: #999;
}

.madsemble-breakout-app-wrapper button {
    background-color: #E61E5B;
    /* A pinkish color from a similar palette */
    color: #fff;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    text-transform: uppercase;
}

.madsemble-breakout-app-wrapper .submit-booking-button {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    margin-top: 2rem;
    border-radius: 0;
}

.participant-details-form {
    margin-bottom: 3rem;
}

.slot-section {
    margin-bottom: 2rem;
}

.track-section {
    margin-bottom: 2rem;
}

.sessions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Base session card - default blue (fallback if no custom color) */
.session-card {
    background-color: #56B8D6;
    border-radius: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Normal hover state */
.session-card:not(.selected):not(.other-selected):not(.disabled):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* SELECTED card - keep original color with white shadow */
.session-card.selected {
    border: 2px solid transparent !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 25px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-3px) !important;
    /* Don't override background-color - let custom colors show */
}

/* OTHER-SELECTED cards - grey and dimmed */
.session-card.other-selected {
    background-color: #666 !important;
    opacity: 0.6 !important;
    cursor: pointer;
    border: 1px solid #888 !important;
}

.session-card.other-selected:hover {
    opacity: 0.8 !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid #aaa !important;
}

/* DISABLED cards - dark grey */
.session-card.disabled {
    background-color: #333 !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    border: 1px solid #444 !important;
}

.session-title {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 0.5rem;
}

.session-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
}

.session-footer .seats-left {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* iPad vertical and below - 4 line form layout */
@media (max-width: 1024px) {
    .madsemble-breakout-app-wrapper .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .madsemble-breakout-app-wrapper .form-group {
        margin-bottom: 1rem;
    }
}

/* Mobile responsive - beautiful carousel with preview */
@media (max-width: 768px) {
    .madsemble-breakout-app-wrapper {
        padding: 1rem;
    }

    .track-section {
        margin-bottom: 3rem;
        position: relative;
    }

    .track-section h3 {
        margin-bottom: 1.5rem;
        font-size: 1.1rem;
    }

    .sessions-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding: 0 1rem 2rem 1rem;
        margin: 0 -1rem;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .session-card {
        flex: 0 0 calc(100vw - 2rem);
        /* Full width minus container padding */
        max-width: 320px;
        scroll-snap-align: start;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
        position: relative;
    }

    .session-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    }

    .session-card.selected {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.4) !important;
        transform: translateY(-2px) !important;
    }

    /* No ::after element needed - let last card align naturally to the right */

    /* Hide scrollbar completely */
    .sessions-grid::-webkit-scrollbar {
        display: none;
    }

    .sessions-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Right shadow - indicates more cards to the right */
    .track-section::before {
        content: '';
        position: absolute;
        top: 0;
        right: -1rem;
        /* Extend beyond container padding */
        width: 80px;
        height: 100%;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent);
        pointer-events: none;
        z-index: 2;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* Left shadow - indicates more cards to the left */
    .track-section::after {
        content: '';
        position: absolute;
        top: 0;
        left: -1rem;
        /* Extend beyond container padding */
        width: 80px;
        height: 100%;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent);
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Show left shadow when at end */
    .track-section.at-end::before {
        opacity: 0;
    }

    .track-section.at-end::after {
        opacity: 1;
    }

    /* Show both shadows when in middle */
    .track-section.in-middle::before,
    .track-section.in-middle::after {
        opacity: 1;
    }

    /* Hide right shadow when at start */
    .track-section.at-start::before {
        opacity: 1;
    }

    .track-section.at-start::after {
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .session-card {
        flex: 0 0 calc(100vw - 1rem);
        max-width: 280px;
    }

    .sessions-grid {
        gap: 0.8rem;
        margin: 0 -0.5rem;
        padding: 0 0.5rem 2rem 0.5rem;
    }

    /* Adjust shadow positioning for smaller screens */
    .track-section::before {
        right: -0.5rem;
        width: 70px;
    }

    .track-section::after {
        left: -0.5rem;
        width: 70px;
    }
}

.status-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
}

.status-message.error {
    background-color: #dc3545;
    color: #fff;
}

.status-message.success {
    background-color: #198754;
    color: #fff;
}

/* Desktop Grid for Breakouts */
@media (min-width: 768px) {
    .tracks-container {
        display: block;
    }

    .track-section {
        margin-bottom: 2rem;
    }
}