:root { --af-mobile-progress-offset: 90px; /* move bar 90px above bottom */ } :root{ --af-mobile-header-offset: 65px; /* tweak to taste; adds space under sticky mobile menu */ } :root{ /* JS will keep these up to date */ --af-sticky-header-h: 0px; /* current sticky header height */ --af-progress-height: 60px; /* computed on load; rough fallback */ /* Make scrollIntoView stop below header + progress bar */ scroll-padding-top: calc(var(--af-sticky-header-h) + var(--af-progress-height) + 8px); } /* Desktop: push the progress bar below the sticky header */ @media (min-width: 768px){ .sticky-progress{ top: calc(var(--af-sticky-header-h) + 100px); /* tweak 100px → any px you like */ } /* Optional: ensure content never hides behind progress bar when it's sticky */ #availability-form-container.with-progress-padding{ padding-top: var(--af-progress-height); } } @media (max-width: 767px){ .sticky-progress{ bottom: calc(var(--af-mobile-progress-offset) + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 767px){ :root{ /* ensure any UA-driven scroll (find-in-page, focus, etc.) accounts for the sticky header */ scroll-padding-top: calc(var(--af-sticky-header-h) + var(--af-mobile-header-offset) + env(safe-area-inset-top)); } /* if the H2 becomes the scroll target, keep it below the sticky header */ .form-step .step-title{ scroll-margin-top: calc(var(--af-sticky-header-h) + var(--af-mobile-header-offset) + env(safe-area-inset-top)); } } #availability-form-container { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: inherit; } @media (max-width: 767px) { #availability-form-container.with-progress-padding { padding-bottom: calc(90px + var(--af-mobile-progress-offset)); } } /* Progress bar */ .sticky-progress { position: sticky; top: 0; z-index: 50; padding: 10px 12px; margin-bottom: 24px; background: rgba(255,255,255,0.95); border-bottom: 1px solid #eee; } @supports (backdrop-filter: blur(8px)) { .sticky-progress { backdrop-filter: blur(8px); } } @media (max-width: 767px) { .sticky-progress { position: fixed; left: 0; right: 0; bottom: var(--af-mobile-progress-offset); top: auto; width: 100vw; margin: 0; border-bottom: 0; border-top: 1px solid #eee; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(0,0,0,0.06); background: rgba(255,255,255,0.98); } .sticky-progress.mobile-hidden { display: none !important; } } .form-progress{display:flex;align-items:center;justify-content:center;gap:20px} .progress-step{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.5;transition:opacity .3s} .progress-step.active,.progress-step.completed{opacity:1} .progress-step.clickable{cursor:pointer} .step-number{width:40px;height:40px;border-radius:50%;background:#e5347b;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px} .progress-step:not(.active):not(.completed) .step-number{background:#ddd;color:#666} .step-label{font-size:12px;font-weight:600;color:#333;text-align:center} .progress-line{width:60px;height:2px;background:#ddd} /* Steps */ .form-step{display:none;min-height:400px} .form-step.active{display:block} .step-title{text-align:center;font-size:28px;font-weight:700;color:#333;margin-bottom:8px} .step-subtitle{text-align:center;color:#666;font-size:16px;margin-bottom:20px} @media (max-width:480px){.step-title{font-size:24px}.step-subtitle{font-size:14px}} /* Grids */ .game-grid,.location-grid{display:grid;gap:20px;margin-bottom:40px} @media (min-width:1400px){.game-grid,.location-grid{grid-template-columns:repeat(5,1fr)}} @media (min-width:1200px) and (max-width:1399px){.game-grid,.location-grid{grid-template-columns:repeat(4,1fr)}} @media (min-width:768px) and (max-width:1199px){.game-grid,.location-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:767px){.game-grid,.location-grid{grid-template-columns:repeat(2,1fr)}} /* Cards */ .game-card,.location-card{ background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1); overflow:hidden;cursor:pointer;transition:.3s;border:1px solid transparent;outline:0;position:relative; } .game-card:hover,.location-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.15)} .game-grid .game-card.selected,.location-grid .location-card.selected{ border:1px solid #e5347b;transform:translateY(-4px); box-shadow:0 8px 25px rgba(229,52,123,.2);background:#fff; } .game-image-container,.location-image-container{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden} .game-image,.location-image{width:100%;height:100%;object-fit:cover} .game-type-badge{position:absolute;bottom:12px;right:12px;background:rgba(229,52,123,.9);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600} .game-info,.location-info{padding:16px 16px 0px 16px} .location-info { padding: 16px; padding-bottom: 24px; } .game-name,.location-name{font-size:14px;color:#333;margin:0;text-align:center} /* Plaats label */ .plaats-label{ position:absolute; left:12px; right:12px; bottom:20px; text-align:center; font-size:13px; letter-spacing:.5px; color:#666; text-transform:uppercase; font-weight:400; pointer-events:none; } /* Selectors */ .location-selection{ max-width: 960px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 16px; } @media (min-width: 992px){ .location-selection{ flex-direction: row; } .location-selection .select-field{ flex:1; } } .form-label{font-size:16px;font-weight:600;color:#333;margin-bottom:8px;display:block} .select-wrapper{position:relative} .form-select{ -webkit-appearance:none;-moz-appearance:none;appearance:none; width:100%;height:60px;background:#fff;border:1px solid #e8e8ec;border-radius:6px; font-size:16px;color:#121212;padding:0 48px 0 56px;transition:border-color .2s,box-shadow .2s } .form-select:focus{outline:0;border-color:#e5347b;box-shadow:0 0 0 4px rgba(229,52,123,.08)} .select-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:inline-flex;width:24px;height:24px;color:#e5347b;pointer-events:none;font-size:20px} .select-chevron{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;pointer-events:none} .select-chevron::before{content:"";display:block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #333;margin:0 auto} /* Pricing tables */ .pricing-tables{margin:24px 0 12px;display:grid;gap:20px} .pricing-table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid #e2e2e2; border-radius:6px; overflow:hidden; background:#fff; cursor:pointer; transition: border-color .2s, box-shadow .2s, transform .2s; } .pricing-table thead th{ background:#f9f9f9;font-weight:400;font-size:15px;color:#1d1d1f;padding:16px 20px;border-bottom:1px solid #e2e2e2 } .pricing-table td{ padding:16px 20px;font-size:15px;color:#1d1d1f;vertical-align:top;border-bottom:1px solid #e2e2e2;border-right:1px solid #e2e2e2 } .pricing-table td:last-child{border-right:0} .pricing-table tr:last-child td{border-bottom:0} .pricing-table.selected{border:2px solid #e5347b;box-shadow:0 0 0 3px rgba(229,52,123,.12)} .pricing-table:hover, .pricing-table:focus-visible{ border-color:#e5347b; /* pink border on hover */ box-shadow: 0 6px 24px rgba(0,0,0,.08), /* existing soft elevation */ 0 0 0 3px rgba(229,52,123,.12); /* pink "ring" highlight */ outline:0; } @media (max-width:767px){ .pricing-table thead th,.pricing-table td{ font-size:14px; } } /* Arrangement toggle */ .arrangement-info{margin:10px 0 16px} /* Reduce spacing when toggles follow each other */ .arrangement-info + .arrangement-info { margin-top: 4px; /* small gap between consecutive toggles */ } .arr-toggle-btn{width:100%;display:flex;align-items:center;gap:18px;background:transparent;border:0;cursor:pointer;padding:8px 0;text-align:left} .arr-toggle-btn:focus-visible{outline:3px solid rgba(229,52,123,.35);outline-offset:2px} .pm-square{width:32px;height:32px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:#111;color:#fff;font-size:22px;line-height:1;font-weight:700} .arr-toggle-btn[aria-expanded="true"] .pm-square{background:#e5347b;color:#fff} .arr-title{font-weight:800;color:#111;font-size:24px;line-height:1.2} @media (max-width:640px){.arr-title{font-size:22px}.pm-square{width:32px;height:32px;font-size:22px}} .arr-content{display:none;padding:12px 0 8px} .arr-content.open{display:block} .selected-info { background:#f8f9fa;border:1px solid #e5347b;border-radius:6px;padding:16px;margin-bottom:24px;text-align:center; } .selected-info p { margin:4px 0; font-size:14px; } .selected-info span { color:#e5347b; font-weight:600; } .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,1px,1px)!important;white-space:nowrap!important;border:0!important} /* Hover/focus highlight for the + square and title */ .arr-toggle-btn:hover .pm-square, .arr-toggle-btn:focus-visible .pm-square{ background:#e5347b; color:#fff; } .arr-toggle-btn:hover .arr-title, .arr-toggle-btn:focus-visible .arr-title{ color:#e5347b; } /* Smoothen the transition */ .pm-square{ transition: background-color .2s, color .2s, transform .2s; } .arr-title{ transition: color .2s; } /* Step 4 form layout */ .ds-form-grid{ display:grid; gap:16px; grid-template-columns: 1fr 1fr; } @media (max-width: 900px){ .ds-form-grid{ grid-template-columns: 1fr; } } /* Inputs */ #step-4 input[type="text"], #step-4 input[type="email"], #step-4 input[type="tel"], #step-4 input[type="number"], #step-4 input[type="date"], #step-4 select, #step-4 textarea { width:100%; height:56px; border:1px solid #e8e8ec; border-radius:6px; background:#fff; padding:0 16px; font-size:16px; color:#121212; transition:border-color .2s, box-shadow .2s; } #step-4 textarea{ height:auto; padding:12px 16px; min-height:110px; resize:vertical; } #step-4 input:focus, #step-4 select:focus, #step-4 textarea:focus{ outline:0; border-color:#e5347b; box-shadow:0 0 0 4px rgba(229,52,123,.08); } #step-4 ::placeholder{ color:#666; } /* Consistent spacing between fields */ #step-4 .ds-form-grid > * { margin-bottom: 16px; } #step-4 .ds-form-grid > *:last-child { margin-bottom: 0; } /* Buttons */ .ds-form-actions{ display:flex; justify-content:flex-start; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; /* stack on small screens */ } .ds-form-actions .ds-btn{ min-width:200px; } /* Base button (works for