@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root { --arena-primary:#29235c; --arena-accent:#009ec5; --arena-ink:#23223a; --arena-muted:#727183; --arena-border:#dddde5; --arena-bg:#f7f7f4; color-scheme:light; font-family:Montserrat,Arial,sans-serif; color:var(--arena-ink); background:var(--arena-bg); }
* { box-sizing:border-box; }
body { margin:0; font-size:14px; line-height:1.6; }
button,input,select,textarea { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
[hidden] { display:none !important; }
a { color:var(--arena-primary); text-underline-offset:3px; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--arena-accent); outline-offset:3px; }
img { display:block; max-width:100%; }
h1,h2,h3,h4,p { margin:0 0 12px; }
h1,h2,h3,h4 { color:var(--arena-primary); line-height:1.3; }
h1 { font-size:27px; font-weight:800; }
h2 { font-size:22px; font-weight:700; }
h3 { font-size:16px; }
.page-width { width:min(1120px,100%); margin:0 auto; padding:0 28px; }
.yard-hero { height:230px; position:relative; overflow:hidden; background:linear-gradient(120deg,var(--arena-primary),#66607a); }
.yard-banner { width:100%; height:100%; object-fit:cover; object-position:center; }
.yard-hero .page-width { position:absolute; inset:0; padding-top:20px; }
.back-link { display:inline-block; padding:5px 12px; background:white; border:1px solid var(--arena-border); border-radius:20px; text-decoration:none; font-size:12px; box-shadow:0 2px 10px #0001; }
.yard-heading { position:relative; padding:0 0 12px; }
.yard-title-row { display:flex; align-items:center; gap:18px; margin-top:-32px; margin-bottom:18px; min-height:84px; }
.yard-title-row h1 { margin-top:48px; margin-bottom:0px; }
.yard-logo { width:86px; height:86px; flex-shrink:0; object-fit:contain; background:white; border:8px solid white; border-radius:12px; box-shadow:0 3px 12px #0002; margin-top: 14px; }
.yard-location { margin-bottom:0; font-size:12px; }
.yard-description { margin-bottom:9px; max-width:760px; }
.facility-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.facility-chips span { border:1px solid #e8e1cf; border-radius:12px; padding:2px 9px; background:#f5f0e4; font-size:11px; }
.booking-intro { font-size:12px; margin:0 0 16px; }
.booking-panel { background:white; border:1px solid #ececf0; border-radius:8px; padding:26px; box-shadow:0 4px 18px #23223a07; }
form.booking-panel { display:grid; grid-template-columns:300px minmax(0,1fr); gap:32px; align-items:start; }
.section-label { margin:0 0 10px; color:var(--arena-muted); font-size:10px; font-weight:700; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; }
.arena-chips { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; }
.arena-chips button { padding:6px 12px; background:white; color:var(--arena-primary); border:1px solid #c5c2d8; border-radius:22px; font-size:11px; font-weight:600; }
.arena-chips button[aria-pressed=true] { background:var(--arena-primary); border-color:var(--arena-primary); color:white; }
.arena-detail-card { border:1px solid var(--arena-border); border-radius:7px; overflow:hidden; margin-bottom:22px; }
.arena-detail-card img { width:100%; aspect-ratio:1.8; object-fit:cover; }
.arena-detail-card .arena-detail-copy { padding:12px; }
.arena-detail-copy h3 { margin-bottom:7px; font-size:13px; }
.arena-detail-copy p { font-size:11px; line-height:1.65; margin-bottom:0; white-space:pre-line; }
.calendar-section { margin-top:22px; }
.calendar { border:1px solid var(--arena-border); padding:12px; border-radius:7px; }
.calendar-heading { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; margin-bottom:12px; }
.calendar-heading h3 { margin:0; font-size:12px; text-align:center; }
.icon-button { width:30px; height:30px; border:0; border-radius:50%; color:var(--arena-primary); background:transparent; font-size:22px; line-height:1; }
.icon-button:hover { background:#f0eff5; }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; text-align:center; }
.calendar-weekdays { font-size:9px; margin-bottom:8px; color:var(--arena-muted); }
.calendar-days button { position:relative; min-height:34px; padding:4px 0 10px; border:1px solid transparent; border-radius:5px; background:#f1f1f6; color:var(--arena-primary); font-size:11px; font-weight:600; }
.calendar-days button.available::after { position:absolute; bottom:4px; left:calc(50% - 1.5px); content:''; width:3px; height:3px; border-radius:50%; background:#26844f; }
.calendar-days button:disabled { color:#b2b0be; background:#f4f4f6; }
.calendar-days button.other-month { opacity:.45; }
.calendar-days button[aria-pressed=true] { color:white; background:var(--arena-primary); }
.calendar-days button[aria-pressed=true]::after { background:#b8e4c7; }
.calendar-key { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 0; font-size:9px; color:var(--arena-muted); }
.calendar-key span { display:inline-flex; align-items:center; gap:4px; }
.calendar-key i { width:5px; height:5px; border-radius:50%; }
.free-dot { background:#26844f; }.closed-dot { background:#bbb9c8; }
.booking-times h2 { font-size:20px; margin-bottom:18px; }
.type-cards { display:grid; gap:16px; }
.type-card { border:1px solid #d7d4e3; border-radius:7px; padding:16px; }
.type-card.selected { border-color:var(--arena-primary); box-shadow:0 0 0 1px var(--arena-primary); }
.type-card-header { display:flex; align-items:start; gap:10px; }
.type-thumbnail { width:42px; height:42px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.type-title { flex:1; min-width:0; }
.type-title .section-label { margin-bottom:3px; font-size:8px; }
.type-title h3 { font-size:14px; margin-bottom:3px; }
.type-description { margin-bottom:3px; color:var(--arena-muted); font-size:11px; }
.type-price { font-size:11px; color:var(--arena-primary); text-align:right; font-weight:700; white-space:nowrap; }
.text-button { display:inline-block; border:0; padding:0; background:transparent; color:var(--arena-primary); text-decoration:underline; text-underline-offset:3px; font-size:12px; }
.type-card .text-button { font-size:10px; }
.time-buttons { display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:7px; margin-top:16px; }
.time-buttons button { min-height:34px; padding:6px; border:1px solid #b9b4ce; background:white; color:var(--arena-primary); border-radius:4px; font-size:11px; font-weight:600; }
.time-buttons button[aria-pressed=true] { color:white; background:var(--arena-primary); border-color:var(--arena-primary); }
.time-buttons button:disabled { color:#aaa7b4; border-color:#e7e5ec; background:#f5f4f7; text-decoration:line-through; }
.duration-options { padding-top:14px; border-top:1px solid #eeeaf2; margin-top:16px; }
.duration-options h4 { margin:0; font-size:12px; }
.duration-options .time-buttons { grid-template-columns:repeat(auto-fill,minmax(85px,1fr)); margin-top:10px; }
.selection-summary { position:sticky; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding:16px; border-radius:6px; background:white; box-shadow:0 1px 0 1px #dedbe8,0 4px 20px #29235c15; z-index:2; }
.selection-summary strong { display:block; font-size:13px; color:var(--arena-primary); }
.selection-summary p { margin:2px 0; font-size:11px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--arena-primary); border-radius:5px; padding:10px 22px; background:var(--arena-primary); color:white; font-size:13px; font-weight:700; text-decoration:none; }
.button:hover { filter:brightness(1.12); }.button:disabled { opacity:.45; }
.notice { padding:12px 14px; border:1px solid #ddd9e8; border-radius:5px; margin:12px 0; background:#f4f2f9; font-size:12px; }
.notice.error { border-color:#edc6bb; color:#8a311f; background:#fff5f0; }
.notice ul { margin:0; padding-left:18px; }
.muted { color:var(--arena-muted); }.small { font-size:11px; }.error-text { color:#a33324; }
.checkout-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:36px; align-items:start; }
.booking-summary { border:1px solid var(--arena-border); padding:18px; border-radius:6px; font-size:12px; }
.booking-summary h2 { font-size:18px; margin-bottom:5px; }.booking-summary p { margin-bottom:10px; }
.summary-image { width:100%; aspect-ratio:1.8; border-radius:4px; object-fit:cover; margin-bottom:16px; }
.summary-extras { border-top:1px solid var(--arena-border); padding-top:10px; }.summary-extras p { display:flex; justify-content:space-between; gap:12px; }
.summary-total { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--arena-border); padding-top:12px; margin:12px 0 0; font-size:15px; }
.booking-summary > .small:last-child { margin-top:12px; margin-bottom:0; }
.form-field { display:block; margin:18px 0; font-size:12px; font-weight:600; }
.form-field input,.form-field textarea { display:block; width:100%; margin-top:6px; border:1px solid #d7d4e1; border-radius:5px; padding:10px 12px; color:var(--arena-ink); background:white; font-size:16px; font-weight:400; }
.form-field textarea { resize:vertical; }
fieldset { min-width:0; margin:0; padding:0; border:0; }legend { font-size:14px; font-weight:600; }
.declarations { margin:22px 0; }.declaration { display:flex; align-items:flex-start; gap:10px; margin:14px 0; font-size:12px; }
input[type=checkbox],input[type=radio] { width:18px; height:18px; flex-shrink:0; accent-color:var(--arena-primary); color-scheme:light; }
.declaration input { margin:2px 0 0; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:24px; }
.extras-list { border-top:1px solid var(--arena-border); margin-top:22px; }
.extra-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; border-bottom:1px solid var(--arena-border); padding:12px 4px; cursor:pointer; }
.extra-row strong { display:block; font-size:13px; font-weight:600; }.extra-row small { color:var(--arena-muted); font-size:11px; }.extra-row input { margin:0; }
.arena-dialog { width:min(500px,calc(100% - 32px)); max-height:85vh; padding:24px; border:1px solid var(--arena-border); border-radius:8px; color:var(--arena-ink); overflow:auto; }
.arena-dialog::backdrop { background:#17132b88; }.dialog-close { float:right; margin:-12px -12px 8px 8px; }.arena-dialog img { width:100%; border-radius:5px; margin-bottom:16px; }
.arena-dialog p { white-space:pre-line; font-size:13px; }
.confirmation { max-width:700px; margin:0 auto; text-align:center; }.confirmation .booking-summary { text-align:left; max-width:420px; margin:24px auto; }.confirmation .form-actions { justify-content:center; }
.confirmation-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#eaf5ec; color:#287344; font-size:24px; margin-bottom:16px; }
.page-footer { margin:28px 0; text-align:center; color:var(--arena-muted); font-size:10px; }
@media(max-width:760px) {
	.page-width { padding:0 16px; }.yard-hero { height:135px; }.yard-hero .page-width { padding-top:12px; }.back-link { font-size:10px; padding:3px 9px; }
	.yard-title-row { gap:12px; margin-top:-24px; margin-bottom:14px; min-height:62px; }.yard-logo { width:66px; height:66px; border-width:6px; }.yard-title-row h1 { margin-top:40px; font-size:20px; }
	.yard-description { font-size:12px; }.yard-location { font-size:10px; }.facility-chips span { font-size:9px; }.booking-intro { font-size:11px; }
	.booking-panel { padding:18px; }form.booking-panel,.checkout-grid { grid-template-columns:minmax(0,1fr); gap:26px; }.booking-sidebar { min-width:0; }.arena-detail-card { max-width:none; }.arena-detail-card img { aspect-ratio:2; }
	.calendar-days button { min-height:38px; }.calendar-weekdays { font-size:10px; }.booking-times h2 { font-size:18px; }.type-card { padding:12px; }.type-price { white-space:normal; max-width:105px; }
	.time-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }.time-buttons button { min-height:36px; }.selection-summary { bottom:8px; padding:12px; gap:10px; }.selection-summary .button { padding:10px 14px; }
	.checkout-grid .booking-summary { margin-bottom:0; }.summary-image { max-height:160px; }.form-actions .button { flex:1; }.confirmation .form-actions .button { flex:auto; }
}