/* Centre Hire Booking Styles */

/* Duration selector cards */
.duration-cards{display:flex;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;}
.duration-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;}
.duration-card:hover{border-color:var(--primary);transform:translateY(-2px);}
.duration-card--popular{border-color:var(--primary);}
.duration-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;}
.duration-card__hours{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-2);}
.duration-card__price{font-size:2rem;font-weight:700;color:var(--primary);}
.duration-card__per{color:var(--text-muted);font-size:0.875rem;}

/* Centre hire notice */
.centre-hire-notice{background:rgba(59,130,246,0.1);border:1px solid var(--info);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);}

/* Review section */
.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 styling */
.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 - Centre hire 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);
}

/* Review card note styling */
.review-card__note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

/* Full prepayment emphasis */
.payment-option__amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Cancellation policy */
.cancellation-notice {
    background: rgba(255, 77, 106, 0.1);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

.cancellation-notice strong {
    color: var(--danger);
}