.school-pricing-cards{display:flex;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;}
.school-price-card{background:var(--surface-elevated);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;min-width:150px;border:2px solid transparent;cursor:pointer;transition:all 0.2s;position:relative;}
.school-price-card:hover{border-color:var(--primary);transform:translateY(-2px);}
.school-price-card--popular{border-color:var(--primary);}
.school-price-card__badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--primary);color:white;padding:4px 12px;border-radius:20px;font-size:10px;font-weight:600;white-space:nowrap;}
.school-price-card__games{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-2);}
.school-price-card__price{font-size:2rem;font-weight:700;color:var(--primary);}
.school-price-card__per{color:var(--text-muted);font-size:0.875rem;}
.supervisor-notice{background:rgba(34,197,94,0.1);border:1px solid var(--success);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;margin-bottom:var(--space-6);display:flex;align-items:center;justify-content:center;gap:var(--space-3);}
.games-selector{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);}
.game-btn{background:var(--surface-elevated);border:2px solid transparent;border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);cursor:pointer;transition:all 0.2s;font-weight:500;}
.game-btn:hover{border-color:var(--primary);}
.game-btn--active{border-color:var(--primary);background:rgba(59,130,246,0.1);color:var(--primary);}
.supervisor-calculator__status{display:flex;align-items:center;gap:var(--space-2);}
.supervisor-calculator__status--valid{color:var(--success);}
.supervisor-calculator__status--invalid{color:var(--danger);}
.review-section{background:var(--surface-elevated);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);}
.review-row{display:flex;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px solid var(--border);}
.review-row--total{font-weight:700;font-size:1.25rem;color:var(--primary);border-top:2px solid var(--border);margin-top:var(--space-2);padding-top:var(--space-3);}

.calendar-day--outside-hours {
    background: rgba(251, 191, 36, 0.1);
    border: 1px dashed var(--warning);
    cursor: pointer;
}

.calendar-day--outside-hours:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: var(--warning);
}

.calendar-day--outside-hours .calendar-day__label {
    color: var(--warning);
    font-size: 9px;
}

/* Outside hours notice */
.outside-hours-notice {
    margin-top: var(--space-4);
}

.outside-hours-time-request {
    padding: var(--space-4);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
}

.outside-hours-time-request .form-group {
    margin-top: var(--space-4);
}

.outside-hours-time-request input[type="time"] {
    max-width: 200px;
}

/* Summary notice for approval required */
.summary-notice {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

/* Outside hours grid cells */
.grid-cell--outside-hours {
    background: rgba(251, 191, 36, 0.15) !important;
    border: 1px dashed var(--warning) !important;
}

.grid-cell--outside-hours:hover {
    background: rgba(251, 191, 36, 0.3) !important;
}

.summary-notice--warning {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--warning);
    color: var(--warning);
}

/* Approval notice in review step */
#approval-notice {
    margin-bottom: var(--space-4);
}

/* Info notice variations */
.info-notice--info {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--info);
}

.info-notice--info .info-notice__icon {
    color: var(--info);
}

/* Calendar Legend - School specific override */
.booking-step .calendar-legend {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.booking-step .calendar-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.booking-step .calendar-legend .legend-box {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
}

.booking-step .calendar-legend .legend-box--available {
    background: var(--bg-card);
    border: 2px solid var(--primary);
}

.booking-step .calendar-legend .legend-box--closed {
    background: var(--bg-card);
    border: 2px dashed #ff4d6a;
}

.booking-step .calendar-legend .legend-box--request {
    background: rgba(251, 191, 36, 0.1);
    border: 2px solid var(--warning);
}

.booking-step .calendar-legend .legend-box--closure {
    background: rgba(255, 77, 106, 0.3);
    border: 2px solid #ff4d6a;
}

/* CRITICAL: Selected cells MUST show cyan even when outside hours */
.grid-cell.grid-cell--outside-hours.grid-cell--selected,
.availability-grid .grid-cell--outside-hours.grid-cell--selected {
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: var(--bg-darkest) !important;
}

/* Ensure outside hours cells have proper hover feedback */
.grid-cell--outside-hours:hover {
    background: rgba(251, 191, 36, 0.35) !important;
    box-shadow: inset 0 0 0 2px var(--warning);
}