/* ================================
   NGD Schedule - Timetable Styles
   ================================ */

.ngd-schedule {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 120px; /* space for sticky bar */
}

@media (min-width: 1025px) {
    .ngd-schedule {
        /* Matches the tile size from before the Classes page went full-width:
           the old boxed page wrapper capped this content at 1080px effective
           width (1120px container minus its own 40px padding), so this cap
           reproduces that exact size now that the page itself has no cap. */
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ================================
   Desktop Grid - 5 day columns
   ================================ */

.ngd-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 40px 0;
}

.ngd-day-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #7B2FBE;
}

/* Day headers fade up first, left to right across the 5 columns, then the
   cards follow row by row (see .ngd-card below) once the headers are done.
   "both" fill mode holds each element invisible until its own delay starts
   and holds it visible once finished — see the matching hero animation notes
   in the theme's custom.css for the fuller explanation. */
@keyframes ngd-schedule-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ngd-day-title {
    animation: ngd-schedule-fade-in 0.5s ease-out both;
}

.ngd-day:nth-child(1) .ngd-day-title { animation-delay: 0s; }
.ngd-day:nth-child(2) .ngd-day-title { animation-delay: 0.1s; }
.ngd-day:nth-child(3) .ngd-day-title { animation-delay: 0.2s; }
.ngd-day:nth-child(4) .ngd-day-title { animation-delay: 0.3s; }
.ngd-day:nth-child(5) .ngd-day-title { animation-delay: 0.4s; }

/* ================================
   Class Cards
   ================================ */

.ngd-card {
    background: #242424;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Cards already match height within a row via CSS Grid's stretch, but an
       invite-only card (extra "Invite Only" line) needs more room than that
       stretch alone provides — min-height pins every card to that tallest
       case so they're all the same size regardless of content or row. */
    min-height: 190px;
    animation: ngd-schedule-fade-in 0.5s ease-out both;
}

/* Cards reveal row by row once the headers finish (0.4s + 0.5s ≈ 0.9s).
   nth-child counts the day-title as the 1st child, so the 1st card in each
   column is nth-child(2), 2nd card is nth-child(3), and so on. */
.ngd-day .ngd-card:nth-child(2) { animation-delay: 0.9s; }
.ngd-day .ngd-card:nth-child(3) { animation-delay: 1s; }
.ngd-day .ngd-card:nth-child(4) { animation-delay: 1.1s; }
.ngd-day .ngd-card:nth-child(5) { animation-delay: 1.2s; }
.ngd-day .ngd-card:nth-child(6) { animation-delay: 1.3s; }

.ngd-card:hover:not(.invite-only) {
    border-color: #7B2FBE;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.ngd-card.invite-only {
    cursor: default;
}

.ngd-card.selected {
    border-color: #7B2FBE;
    background: #2d1f42;
}

.ngd-card.selected::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    background: #00aa00;
    color: #ffffff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.ngd-card-name {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.ngd-card-age {
    display: inline-block;
    align-self: flex-start;
    background: #7B2FBE;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.ngd-card-footer {
    margin-top: auto;
}

.ngd-card-details {
    display: flex;
    justify-content: space-between;
    color: #cccccc;
    font-size: 0.875rem;
}

.ngd-card-details span {
    white-space: nowrap;
}

.ngd-card-invite {
    display: block;
    color: #cccccc;
    font-size: 0.875rem;
    margin-bottom: 8px;
    font-style: italic;
}

/* ================================
   Mobile Tabs
   ================================ */

.ngd-tabs {
    display: none;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.ngd-tab {
    background: #242424;
    color: #cccccc;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Full day name by default (tablet portrait, up to 1024px); true mobile
   (below 768px) switches to the short M/T/W/TH/F form instead. */
.ngd-tab-short {
    display: none;
}

.ngd-tab.active {
    background: #7B2FBE;
    color: #ffffff;
    border-color: #7B2FBE;
}

/* ================================
   Sticky Booking Summary Bar
   ================================ */

.ngd-booking-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #7B2FBE;
    border-top: 3px solid #9b4fd6;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 24px rgba(123, 47, 190, 0.5);
}

.ngd-booking-bar.visible {
    transform: translateY(0);
}

.ngd-booking-bar-clickable {
    cursor: pointer;
}

.ngd-booking-bar-clickable:hover {
    background: #6a28a8;
}

.ngd-booking-bar-summary {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    min-width: 150px;
}

.ngd-booking-bar-summary span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 6px;
}

.ngd-booking-bar select,
.ngd-booking-bar input {
    background: #242424;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
}

.ngd-booking-bar-field {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.ngd-booking-bar label {
    color: #f0e6fa;
    font-size: 0.875rem;
    margin-right: 8px;
}

@media (min-width: 1025px) {
    .ngd-booking-bar select,
    .ngd-booking-bar input {
        padding: 10px 14px;
        font-size: 1rem;
    }

    .ngd-booking-bar label {
        font-size: 1rem;
    }
}

.ngd-booking-bar-total {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.125rem;
    margin-left: auto;
}

.ngd-booking-bar-total span {
    color: #ffffff;
    font-size: 1.5rem;
}

.ngd-book-btn {
    background: #ffffff;
    color: #7B2FBE;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.ngd-book-btn:hover {
    background: #f0e6fa;
}

.ngd-book-btn:disabled {
    background: rgba(255, 255, 255, 0.35);
    color: rgba(123, 47, 190, 0.7);
    cursor: not-allowed;
}

.ngd-booking-bar-prompt-link {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ngd-booking-bar-prompt-link strong {
    text-decoration: underline;
}

.ngd-booking-bar-prompt-link:hover {
    opacity: 0.85;
}

/* ================================
   Responsive
   ================================ */

/* Mobile & iPad: Total and Book Now always get their own line */
@media (max-width: 1024px) {
    .ngd-card-details {
        flex-direction: column;
        gap: 4px;
    }

    .ngd-booking-bar {
        flex-wrap: wrap;
    }

    .ngd-booking-bar-total,
    .ngd-book-btn {
        flex-basis: 100%;
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        text-align: center;
    }
}

/* Single-day tab view, not just true mobile — at tablet portrait (up to
   1024px) the 5-column grid gets too cramped/uneven to be usable, so this
   switches to the same one-day-at-a-time tabs used on phones. */
@media (max-width: 1024px) {
    .ngd-tabs {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .ngd-tab {
        padding: 14px 28px;
        font-size: 1.0625rem;
    }

    .ngd-grid {
        grid-template-columns: 1fr;
    }

    .ngd-day {
        display: none;
    }

    .ngd-day.active {
        display: block;
    }
}

@media (max-width: 768px) {
    .ngd-tab-full {
        display: none;
    }

    .ngd-tab-short {
        display: inline;
    }

    /* Tabs grow to equally fill the row instead of clustering left with
       leftover empty space, since the short M/T/W/TH/F labels are narrow
       enough now that all 5 always fit on one line. */
    .ngd-tab {
        flex: 1 1 0;
        text-align: center;
        padding: 14px 4px;
        font-size: 1rem;
    }

    .ngd-card {
        padding: 24px;
    }

    .ngd-card-name {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .ngd-card-age {
        font-size: 0.875rem;
        padding: 4px 12px;
        margin-bottom: 14px;
    }

    .ngd-card-details {
        /* At true mobile width the card is full-width (single-column grid),
           so there's plenty of room for time + duration side by side again —
           overriding the flex-direction:column stacking from the 1024px
           breakpoint above, which was aimed at the narrower tablet range. */
        flex-direction: row;
        font-size: 1.0625rem;
    }

    .ngd-booking-bar {
        flex-wrap: wrap;
        padding: 16px 20px;
        gap: 12px;
    }

    .ngd-booking-bar-total {
        margin-left: 0;
    }

    .ngd-booking-bar label {
        font-size: 0.9375rem;
    }
}