:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #eff6ff;--color-text-main: #1f2937;--color-text-muted: #6b7280;--color-bg: #f3f4f6;--color-white: #ffffff;--color-border: #e5e7eb;--color-danger: #ef4444;--color-danger-bg: #fef2f2;--color-success: #16a34a;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}.booking-app{font-family:Inter,sans-serif;color:var(--color-text-main);min-height:100vh;display:flex;flex-direction:column;padding:2rem 1rem}.app-logo-container{display:flex;justify-content:center;margin-bottom:2rem}.app-logo{height:8rem;width:auto}.step-wrapper{width:100%;max-width:56rem;margin:0 auto}.step-card{background-color:var(--color-white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);overflow:hidden;margin-bottom:2rem}.step-header{background-color:var(--color-primary);padding:1.5rem;color:var(--color-white);position:sticky;top:0;z-index:30}.step-header h2{font-size:1.5rem;font-weight:700;margin:0}.step-body{padding:1.5rem}@media(min-width:768px){.step-body{padding:2rem}}.btn{padding:.75rem 1.5rem;border-radius:var(--radius-lg);font-weight:600;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border:none;font-size:1rem}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:var(--color-white);box-shadow:0 10px 15px -3px #2563eb4d}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark)}.btn-secondary{background-color:#f3f4f6;color:var(--color-text-main);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:#e5e7eb}.form-group{display:flex;flex-direction:column;width:100%;margin-bottom:1rem;position:relative}.form-label{font-size:.75rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.025em;margin-bottom:.25rem;margin-left:.25rem}.required-star{color:var(--color-danger)}.input-wrapper{position:relative}.input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none;z-index:10}.form-input{width:100%;padding:1rem 1rem 1rem 3rem;border:1px solid var(--color-border);border-radius:var(--radius-xl);background-color:#f9fafb;color:var(--color-text-main);font-weight:500;outline:none;transition:all .2s;font-size:1rem}.form-input:focus{background-color:var(--color-white);border-color:var(--color-primary);box-shadow:0 0 0 2px #2563eb33}.form-input.has-error{border-color:var(--color-danger);background-color:var(--color-danger-bg)}.error-msg{font-size:.75rem;color:var(--color-danger);margin-top:.25rem}.date-selection-bar{position:sticky;top:0;z-index:30;background-color:#fffffff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:1rem;margin:-1.5rem -1.5rem 1.5rem;border-bottom:1px solid var(--color-border);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}.date-grid{display:flex;flex-direction:column;gap:1rem}@media(min-width:768px){.date-grid{flex-direction:row;align-items:flex-end}}.duration-box{text-align:right;padding-bottom:.75rem}.duration-val{font-size:1.5rem;font-weight:700;color:var(--color-primary)}.filter-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.filter-btn{padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:700;transition:all .2s;border:1px solid var(--color-border);background:#fff;color:var(--color-text-muted);cursor:pointer}.filter-btn:hover{border-color:#93c5fd;background-color:var(--color-primary-light)}.filter-btn.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:scale(1.05);box-shadow:var(--shadow-md)}.bike-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}@media(min-width:768px){.bike-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.bike-grid{grid-template-columns:repeat(3,1fr)}}.bike-card{position:relative;border-radius:var(--radius-2xl);overflow:hidden;display:flex;flex-direction:column;height:100%;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);background:#fff;transition:transform .2s}.bike-card.disabled{opacity:.6;filter:grayscale(1);cursor:not-allowed}.bike-card.selected{border-color:var(--color-primary);background-color:var(--color-primary-light);box-shadow:var(--shadow-xl);z-index:10}.bike-img-container{height:12rem;background-color:#f3f4f6;position:relative;background-size:cover;background-position:center;cursor:pointer}.price-pill{position:absolute;bottom:.75rem;right:.75rem;background-color:#dcfce7f2;backdrop-filter:blur(4px);padding:.25rem .75rem;border-radius:9999px;display:flex;align-items:center;gap:.25rem;box-shadow:var(--shadow-sm);z-index:10}.price-val{font-weight:700;color:#14532d;font-size:.875rem}.price-label{font-size:.65rem;color:#15803d;text-transform:uppercase}.card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.overlay-check{background:#fff;color:var(--color-primary);border-radius:50%;padding:.75rem;box-shadow:var(--shadow-xl)}.overlay-unavailable{background:#1f2937cc;color:#fff;padding:.5rem 1rem;border-radius:var(--radius-lg);font-weight:700}.bike-content{padding:1rem;flex:1;display:flex;flex-direction:column}.bike-title{font-weight:700;font-size:1.125rem;margin-bottom:.5rem;line-height:1.25;cursor:pointer}.bike-meta{font-size:.75rem;color:var(--color-text-muted);margin-bottom:1rem}.bike-actions{margin-top:auto;display:flex;flex-direction:column;gap:.5rem}.btn-info{background-color:#f3f4f6;color:var(--color-text-main);padding:.5rem;border-radius:var(--radius-lg);font-size:.875rem;font-weight:600;border:none;cursor:pointer}.btn-info:hover{background-color:#e5e7eb}.btn-select{padding:.5rem;border-radius:var(--radius-lg);font-size:.875rem;font-weight:600;border:none;cursor:pointer;transition:background-color .2s}.btn-select.action-add{background-color:var(--color-primary-light);color:var(--color-primary)}.btn-select.action-add:hover{background-color:#dbeafe}.btn-select.action-remove{background-color:#fef2f2;color:var(--color-danger)}.btn-select.action-remove:hover{background-color:#fee2e2}.btn-select.action-date{background-color:var(--color-primary);color:#fff}.btn-select.action-date:hover{background-color:var(--color-primary-dark)}.btn-select:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.mobile-sticky-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--color-border);box-shadow:0 -4px 6px -1px #0000001a;padding:1rem;z-index:40;display:flex;justify-content:space-between;align-items:center}@media(min-width:768px){.mobile-sticky-bar{display:none}}.floating-next-btn{position:fixed;bottom:2rem;right:2rem;z-index:50;display:none}@media(min-width:768px){.floating-next-btn{display:block}}.floating-inner{background:#fff;padding:.5rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);border:1px solid var(--color-border)}.rider-badge{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;background-color:#fefce8;border:1px solid #fef9c3;border-radius:var(--radius-xl)}.rider-badge img{width:4rem;height:4rem;border-radius:var(--radius-lg);object-fit:cover}.grid-form{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}@media(min-width:768px){.grid-form{grid-template-columns:repeat(2,1fr)}}.span-full{grid-column:1 / -1}.phone-group{display:flex;gap:.5rem}.phone-select{width:35%}.phone-input{width:65%}.addon-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1rem;display:flex;gap:1rem;align-items:center;box-shadow:var(--shadow-sm)}.addon-img{width:5rem;height:5rem;border-radius:var(--radius-lg);object-fit:cover;background-color:#f3f4f6}.qty-control{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}.qty-btn{width:2rem;height:2rem;border-radius:50%;border:none;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}.qty-btn.minus{background-color:#f3f4f6;color:var(--color-text-main)}.qty-btn.plus{background-color:var(--color-primary-light);color:var(--color-primary)}.terms-box{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem;height:16rem;overflow-y:auto;font-size:.875rem;line-height:1.6;color:#4b5563;margin-bottom:1rem;box-shadow:inset 0 2px 4px #0000000d}.checkbox-group{background-color:var(--color-primary-light);border:1px solid #dbeafe;border-radius:var(--radius-xl);padding:1rem;display:flex;flex-direction:column;gap:1rem}.checkbox-item{display:flex;align-items:flex-start;gap:.75rem}.checkbox-input{min-width:20px;min-height:20px;cursor:pointer}.summary-box{background-color:#f9fafb;border-radius:var(--radius-xl);padding:1.5rem;border:1px solid var(--color-border);margin-bottom:2rem}.summary-header{font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--color-border)}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;font-size:.875rem}.summary-item{display:flex;gap:1rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid var(--color-border);margin-bottom:1rem}.summary-item:last-child{border-bottom:none;margin-bottom:0}.item-details{flex:1}.item-row{display:flex;justify-content:space-between}.rider-details-mini{margin-top:.5rem;font-size:.75rem;color:#4b5563;background:#f9fafb;padding:.5rem;border-radius:.25rem;border:1px solid #e5e7eb;display:grid;grid-template-columns:1fr 1fr;gap:.25rem}.payment-card{background-color:#1e3a8a;color:#fff;padding:1.5rem;border-radius:var(--radius-xl)}.pay-btn-group{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}@media(min-width:768px){.pay-btn-group{grid-template-columns:1fr 1fr}}.pay-btn{padding:1rem;border-radius:var(--radius-xl);border:2px solid;background:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer}.pay-btn.card{border-color:var(--color-primary);color:var(--color-primary)}.pay-btn.paypal{border-color:#1e40af;color:#1e40af}.pay-btn:hover:not(:disabled){background-color:#f8fafc}.error-banner{max-width:56rem;margin:0 auto 1.5rem;background-color:var(--color-danger-bg);color:#b91c1c;padding:.75rem 1rem;border-radius:var(--radius-lg);border:1px solid #fecaca}.loading-overlay{position:absolute;inset:0;z-index:20;background-color:#fff9;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-2xl)}.spinner{width:3rem;height:3rem;border-radius:50%;border:3px solid transparent;border-top-color:var(--color-primary);animation:spin 1s linear infinite;margin-bottom:1rem}.modal-backdrop{position:fixed;inset:0;z-index:50;background-color:#00000080;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:#fff;border-radius:var(--radius-2xl);width:100%;max-width:32rem;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;position:relative}.close-modal-btn{position:absolute;top:1rem;right:1rem;background:#00000080;color:#fff;border:none;border-radius:50%;width:2rem;height:2rem;cursor:pointer}.notification-container{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;width:90%;max-width:450px;pointer-events:none}.note-popup{pointer-events:auto;background:#fff7ca;border-left:4px solid #ffd900;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:12px 16px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;position:relative}.note-content{display:flex;align-items:center;gap:12px;color:#1f2937;font-size:.95rem;font-weight:500}.clo-close{background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;border-radius:4px;transition:background .2s}.note-popup.is-notification .note-close{position:absolute;top:8px;right:20px;margin:0;background:transparent;border:none;cursor:pointer;line-height:1}.note-text{padding:10px}.note-close:hover{background:#f3f4f6;color:#1f2937}.closure-alert{border-left:4px solid #f97316!important;background:#fff7ed!important}.closure-alert p strong{color:#ea580c}.booking-app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;width:100%;color:#4b5563}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2563eb;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.retry-link{background:none;border:none;color:#000;text-decoration:underline;margin-left:10px;font-weight:700;cursor:pointer}
