.form-error{background:#fff0f0;color:#a33;border-radius:8px;padding:12px}.notice{background:#eaf7ef;color:#0b5d3b;border-radius:8px;padding:12px}.bookings-page,.details-card{max-width:820px}.booking-tabs{display:flex;gap:6px;margin:24px 0}.booking-tabs button{flex:1;padding:12px;border:1px solid #dde5e0;border-radius:8px;background:white;cursor:pointer}.booking-tabs button.active{background:#0b5d3b;color:white}.booking-row{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:20px;background:white;border:1px solid #dde5e0;border-radius:12px;margin-bottom:14px;color:#17211b;text-decoration:none}.booking-row[hidden]{display:none}.booking-info span{display:block;margin-top:7px}.details-card{background:white;border:1px solid #dde5e0;border-radius:12px;padding:24px}.details-card h2{overflow-wrap:anywhere}.detail-line{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #edf1ee}.detail-line strong{text-align:right}.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.details-card form,.details-card details{margin-top:20px}.reschedule-form{display:grid;gap:14px}.outline{border:1px solid #0b5d3b;background:white;color:#0b5d3b}.flow label{margin:14px 0}.flow select,.reschedule-form select{padding:12px;border:1px solid #dde5e0;border-radius:8px;font:inherit;background:white;width:100%}.time-option:disabled{opacity:.5;cursor:not-allowed}.court-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.home-court{background:white;border:1px solid #dde5e0;border-radius:12px;padding:16px;cursor:pointer}.court-photo{height:120px;background:linear-gradient(135deg,#277b54,#87be74 50%,#2477b6 51%,#59a2d6);border-radius:8px;color:white;padding:15px}.confirm-box strong{text-align:right}.payment-choice input{width:auto}.flow .panel{min-width:0}@media(max-width:600px){.court-grid{grid-template-columns:1fr}.details-card{padding:16px}.detail-line{font-size:14px}.confirm-box p{gap:16px}.flow-next{gap:12px}.booking-row{padding:15px}}
.flow .court-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.flow .court-choice{display:flex;flex-direction:column;gap:16px;overflow:hidden;background:white;border:1px solid #dde5e0;border-radius:10px;padding:0;text-align:left;cursor:pointer}.flow .court-choice:hover,.flow .court-choice:focus-visible{border-color:#0b5d3b;outline:2px solid #0b5d3b}.flow .court-thumb{height:130px;width:100%;background:linear-gradient(135deg,#638f7e,#9bc2b4 50%,#2e8b57 51%,#6bb5d9);display:grid;place-items:center;color:white;font-size:32px}.flow .court-choice>span:nth-child(2){display:grid;gap:8px;padding:0 16px}.flow .court-choice>b{padding:12px 16px;color:#0b5d3b}.time-option small{display:block;margin-top:8px}.confirm-box{margin:22px 0;padding:12px 18px;border:1px solid #dde5e0;border-radius:12px}.confirm-box p{display:flex;justify-content:space-between;gap:20px}.panel .payment-choice{display:flex;align-items:center;gap:12px}.booking-row .status,.home-court .status{margin-left:0}@media(max-width:600px){.flow .court-list{grid-template-columns:1fr}.flow .court-thumb{height:110px}.confirm-box{padding:10px}.confirm-box p{flex-wrap:wrap}.detail-line strong{overflow-wrap:anywhere}}
.flow .court-thumb{height:150px;object-fit:cover;display:block;background:#e6ede9}.court-back{border:0;background:transparent;color:#0b5d3b;font-weight:700;padding:0;margin-bottom:20px;cursor:pointer}.court-detail{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.85fr);gap:28px}.court-photo-gallery{position:relative;min-height:390px;border-radius:14px;overflow:hidden;background:#e6ede9}.court-photo-gallery img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.court-photo-gallery span{position:absolute;left:14px;bottom:14px;background:rgba(20,32,26,.78);color:#fff;padding:7px 10px;border-radius:999px;font-size:11px}.court-detail-copy{align-self:center}.court-detail-copy h2{font-size:30px;margin:8px 0}.court-surface{font-weight:700;color:#0b5d3b}.amenity-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 28px}.amenity-list li{display:flex;gap:8px;align-items:center;font-size:13px}.amenity-list span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eaf7ef;color:#0b5d3b;font-weight:800}.availability-head{display:flex;gap:16px;align-items:center;margin-bottom:22px}.availability-head img{width:112px;height:76px;object-fit:cover;border-radius:10px}.availability-head h2{margin:6px 0 0}.availability-key{display:flex;gap:20px;margin:12px 0;color:#66736b;font-size:12px}.availability-key span{display:flex;gap:7px;align-items:center}.availability-key i{width:9px;height:9px;border-radius:50%;display:block}.available-dot{background:#0b5d3b}.unavailable-dot{background:#adb8b2}.home-court .court-photo{width:100%;height:150px;object-fit:cover;display:block;padding:0}@media(max-width:760px){.court-detail{grid-template-columns:1fr}.court-photo-gallery{min-height:280px}.court-detail-copy{align-self:auto}}@media(max-width:600px){.flow .court-thumb{height:180px}.court-photo-gallery{min-height:220px}.amenity-list{grid-template-columns:1fr}.availability-head img{width:86px;height:64px}}
.equipment-rental{border:1px solid #dde5e0;border-radius:12px;overflow:hidden}.rental-item{display:grid;grid-template-columns:1fr auto 88px;gap:18px;align-items:center;padding:18px}.rental-item+.rental-item{border-top:1px solid #edf1ee}.rental-item>div:first-child{display:grid;gap:5px}.rental-item small{color:#66736b}.rental-item>strong{text-align:right}.quantity-stepper{display:flex;align-items:center;gap:12px}.quantity-stepper button{width:36px;height:36px;border:1px solid #cbd8d1;border-radius:8px;background:#fff;color:#0b5d3b;font-size:20px;font-weight:700;cursor:pointer}.quantity-stepper button:disabled{opacity:.35;cursor:not-allowed}.quantity-stepper output{min-width:20px;text-align:center;font-size:16px;font-weight:800}.equipment-subtotal{display:flex;justify-content:space-between;padding:16px 18px;background:#f6faf7;color:#66736b}.equipment-subtotal strong{color:#17211b}@media(max-width:560px){.rental-item{grid-template-columns:1fr auto}.rental-item>strong{grid-column:1/-1;text-align:right}.quantity-stepper{grid-column:2;grid-row:1/3}.equipment-subtotal{font-size:13px}}
.availability-key{flex-wrap:wrap}.held-dot{background:#e6a817}.time-option span{display:block;margin-top:7px;font-size:11px;font-weight:700}.time-option.held{border-color:#e6a817;background:#fff9e9;color:#725100}.time-option.held:disabled{opacity:1}.time-option.held .slot-countdown{color:#8a6500;font-weight:700}.payment-hold{margin:18px 0;padding:17px 18px;border:1px solid #e6a817;border-radius:12px;background:#fff9e9;color:#5f4700}.payment-hold strong{font-size:16px}.payment-hold p{margin:8px 0 0;line-height:1.55}.status.pending{background:#fff3cd;color:#725100}
.time-option small:last-child{display:block;margin-top:4px;font-weight:700}
.time-option .slot-time-range{display:block;font-size:13px;line-height:1.35;white-space:normal}
@media(max-width:600px){.time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.time-grid{grid-template-columns:1fr}}
.mobile-date-picker{display:none}.mobile-date-option{flex:0 0 88px;min-height:66px;border:1px solid #dce7e0;border-radius:10px;background:#fff;color:#17211b;padding:9px 8px;cursor:pointer}.mobile-date-option span,.mobile-date-option strong{display:block}.mobile-date-option span{color:#66736b;font-size:11px;margin-bottom:5px}.mobile-date-option.selected{border-color:#0b5d3b;background:#eaf7ef;color:#0b5d3b;box-shadow:inset 0 0 0 1px #0b5d3b}.mobile-date-option.selected span{color:#0b5d3b}@media(max-width:1024px){.desktop-date-picker{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mobile-date-picker{display:flex;gap:9px;overflow-x:auto;padding:3px 2px 10px;scrollbar-width:thin;overscroll-behavior-inline:contain}.mobile-date-option{touch-action:manipulation}}
.payment-hold .release-hold{margin-top:16px;border:1px solid #8a6500;background:#fff;color:#725100}.payment-hold .release-hold:disabled{opacity:.6;cursor:not-allowed}.payment-hold #release-error{margin-top:12px;color:#a33}

/* Reservation details: clear identity, urgent action, then grouped facts. */
.details-card.booking-details-page { padding: 22px; }
.booking-details-heading { display: grid; gap: 8px; }
.booking-details-heading h2 { margin: 0; font-size: 26px; }
.booking-reference { margin: 0; color: #66736b; font-size: 12px; line-height: 1.5; }
.booking-reference span { overflow-wrap: anywhere; }
.booking-confirmation { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 16px; border-radius: 12px; background: #eaf7ef; color: #0b5d3b; }
.booking-confirmation-icon { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: #0b5d3b; color: white; font-weight: 700; }
.booking-confirmation strong { display: block; margin: 3px 0 6px; font-size: 15px; }
.booking-confirmation p { margin: 0; font-size: 13px; line-height: 1.6; }
.booking-detail-wide { grid-column: 1 / -1; }
.booking-review-intro { margin: 8px 0 24px; font-size: 13px; }
.slot-filters { margin: 18px 0 16px; }
.flow .slot-filters .available-only-toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.available-only-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #0b5d3b; }
.slot-periods { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; overscroll-behavior-inline: contain; }
.slot-period { flex: 1 0 105px; padding: 10px; border: 1px solid #dce7e0; border-radius: 10px; background: #fff; color: #17211b; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.slot-period span, .slot-period small { display: block; margin-top: 5px; font-size: 10px; font-weight: 400; color: #66736b; }
.slot-period.active { border-color: #0b5d3b; background: #eaf7ef; color: #0b5d3b; box-shadow: inset 0 0 0 1px #0b5d3b; }
.slot-period.active small { color: #0b5d3b; font-weight: 700; }
.time-grid .time-option[hidden] { display: none; }
.selected-hours-summary { margin-top: 18px; }
.selected-hours-summary > p { margin: 0 0 10px; color: #0b5d3b; font-size: 13px; font-weight: 700; }
#selected-hour-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#selected-hour-chips button { min-height: 44px; padding: 8px 10px; border: 1px solid #b7dccc; border-radius: 8px; background: #eaf7ef; color: #0b5d3b; font: inherit; font-size: 12px; cursor: pointer; }
.flow #details-form > h3 { margin: 26px 0 12px; font-size: 16px; }
.equipment-rental .rental-item { grid-template-columns: minmax(0,1fr) auto; gap: 10px 16px; padding: 18px; }
.equipment-rental .rental-item > div:first-child { grid-column: 1; grid-row: 1; gap: 5px; }
.equipment-rental .rental-item .quantity-stepper { grid-column: 2; grid-row: 1; gap: 10px; }
.equipment-rental .rental-item > strong { grid-column: 1 / -1; grid-row: 2; font-size: 14px; text-align: right; color: #0b5d3b; }
.equipment-rental .quantity-stepper output { min-width: 24px; }
.equipment-rental .quantity-stepper button { background: #f6faf7; }
.equipment-rental .equipment-subtotal { align-items: center; gap: 12px; padding: 16px 18px; font-size: 14px; border-top: 1px solid #edf1ee; }
.equipment-rental .equipment-subtotal strong { font-size: 18px; color: #0b5d3b; }
#details-form .flow-next { display: grid; grid-template-columns: 1fr; gap: 12px; }
#details-form .flow-next .btn { width: 100%; justify-content: center; }
@media(min-width:600px) { #details-form .flow-next { grid-template-columns: 1fr 2fr; } }
.booking-review-group { border: 1px solid #dce7e0; border-radius: 12px; padding: 18px; margin: 20px 0; }
.panel .booking-review-group h3 { margin: 0 0 16px; font-size: 15px; }
.booking-review-facts { display: grid; gap: 18px; margin: 0; }
.booking-review-facts > div { display: grid; gap: 6px; min-width: 0; }
.booking-review-facts dt { color: #66736b; font-size: 12px; }
.booking-review-facts dd { margin: 0; font-weight: 600; line-height: 1.5; }
.booking-review-hours dd { display: grid; gap: 8px; }
.booking-review-hours dd span { padding: 8px 10px; background: #f6faf7; border-radius: 8px; }
.booking-review-costs { display: grid; gap: 16px; margin: 0; }
.booking-review-costs > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.booking-review-costs dd { margin: 0; font-weight: 600; white-space: nowrap; }
.booking-review-costs small { display: block; margin-top: 5px; color: #66736b; font-size: 12px; line-height: 1.5; }
.booking-review-total { margin-top: 20px; padding-top: 18px; border-top: 1px solid #dce7e0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.booking-review-total strong { color: #0b5d3b; font-size: 26px; }
.panel .booking-review-payment-note h3 { margin: 24px 0 8px; font-size: 14px; }
.booking-review-payment-note p { margin: 0 0 12px; font-size: 13px; color: #66736b; line-height: 1.65; }
.booking-review-payment-note p.notice { color: #0b5d3b; }
.flow-next.booking-review-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
.booking-review-actions .btn { width: 100%; justify-content: center; }
@media(min-width:600px) { .booking-review-facts { grid-template-columns: repeat(2,minmax(0,1fr)); } .booking-review-hours { grid-column: 1 / -1; } .flow-next.booking-review-actions { grid-template-columns: 1fr 2fr; } }

/* Booking list: identity and status together, schedule beneath, action last. */
.bookings-page > .notice { font-size: 12px; line-height: 1.5; }
.bookings-page .booking-tabs { padding: 4px; gap: 4px; border: 1px solid #dce7e0; border-radius: 12px; background: #edf3ef; margin: 20px 0; }
.bookings-page .booking-tabs button { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; border: 0; font-weight: 600; background: transparent; }
.bookings-page .booking-tabs button.active { background: #0b5d3b; }
.booking-tab-count { display: inline-grid; place-items: center; min-width: 22px; padding: 2px 6px; border-radius: 99px; background: #dce7e0; color: #0b5d3b; font-size: 11px; }
.booking-tabs .active .booking-tab-count { background: #ffffff26; color: #fff; }
.my-booking-list { display: grid; gap: 16px; }
.my-booking-list .booking-row { display: grid; gap: 14px; margin: 0; padding: 20px; }
.my-booking-list .booking-row[hidden] { display: none; }
.my-booking-list .booking-row:hover { border-color: #0b5d3b; }
.my-booking-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.my-booking-heading h2, .my-booking-heading h3 { margin: 0; font-size: 18px; }
.dashboard-bookings { max-width: 100%; }
.my-booking-heading .status { margin: 0; width: fit-content; }
.my-booking-heading .completed { background: #edf1ee; color: #66736b; }
.my-booking-schedule { display: grid; gap: 6px; line-height: 1.5; }
.my-booking-schedule strong { font-size: 14px; font-weight: 600; }
.my-booking-schedule > span { color: #66736b; font-size: 13px; }
.my-booking-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #edf1ee; }
.my-booking-amount { font-size: 16px; font-weight: 700; }
.my-booking-link { margin-left: auto; color: #0b5d3b; font-size: 13px; font-weight: 700; }
.my-bookings-create { width: 100%; justify-content: center; margin-top: 20px; }
.my-bookings-empty { margin: 0; border: 1px dashed #cbd8d1; border-radius: 12px; padding: 32px 20px; text-align: center; color: #66736b; }
.booking-details-page .booking-payment-panel { margin: 24px 0; padding: 18px; }
.booking-payment-deadline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.booking-payment-deadline h3 { margin: 0; font-size: 16px; }
.booking-countdown { padding: 8px 10px; border-radius: 8px; background: #fff0bd; font-size: 12px; white-space: nowrap; }
.booking-countdown #payment-hold-timer { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.booking-payment-panel > p { font-size: 13px; line-height: 1.65; margin: 12px 0 18px; }
.booking-payment-actions { display: grid; gap: 12px; }
.booking-payment-actions .btn { width: 100%; justify-content: center; text-align: center; line-height: 1.5; }
.booking-payment-actions .release-hold { margin: 0; }
.booking-payment-actions .form-error { margin: 0; }
.booking-overview { margin-top: 24px; }
.booking-overview h3 { font-size: 16px; margin: 0 0 16px; }
.booking-detail-list { display: grid; gap: 18px; margin: 0; }
.booking-detail-list > div { display: grid; gap: 6px; min-width: 0; }
.booking-detail-list dt { color: #66736b; font-size: 12px; }
.booking-detail-list dd { margin: 0; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.booking-payment-summary { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dce7e0; }
.booking-total { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.booking-total > strong { color: #0b5d3b; font-size: 26px; }
.booking-payment-status { display: grid; gap: 6px; margin: 16px 0 0; }
.booking-payment-status span { color: #66736b; font-size: 12px; }
.booking-payment-status strong { font-size: 13px; line-height: 1.5; }
.booking-details-page .detail-actions { display: grid; gap: 12px; border-top: 1px solid #dce7e0; padding-top: 20px; }
.booking-details-page .detail-actions .btn { justify-content: center; text-align: center; }
@media(min-width:600px) { .details-card.booking-details-page { padding: 28px; } .booking-detail-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; } .booking-details-page .detail-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.bookings-page .booking-tabs { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.bookings-page .booking-tabs button { min-width:0;padding:12px 6px; }
.bookings-page .status.cancelled { background:#fff0ee;color:#9b2920; }
.my-booking-cancellation { padding:14px;border-radius:10px;background:#fff6f4;font-size:13px;line-height:1.6; }
.my-booking-cancellation p { margin:8px 0 0; }
.booking-refund-note { font-weight:600; }