/* * Two-step transfer booking form on route pages. * Palette matches the cream / green route page cards. */ .tbf{font-family:Inter,sans-serif} .tbf-title{color:#233e2d;font-family:Montserrat,sans-serif;font-size:1.3rem;font-weight:500;margin:0 0 .3rem} .tbf-note{color:#5a6b5e;font-size:.92rem;margin:0 0 1.15rem} /* Step indicator */ .tbf-steps{display:flex;gap:.5rem;margin:0 0 1.25rem} .tbf-step-pill{flex:1;text-align:center;border-radius:999px;background:#f0eee6;color:#7d8a72;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.45rem .5rem} .tbf-step-pill.is-active{background:#294023;color:#eeebe0} .tbf-step-pill.is-done{background:#d2d375;color:#294023} .tbf-panel[hidden]{display:none!important} /* Sliding One way / Round trip toggle */ .tbf-switch{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 0 1.1rem; padding:4px; border-radius:999px; background:#f0eee6; border:1px solid #e4e0d5; } .tbf-switch button{ position:relative; z-index:1; border:0; background:transparent; color:#5a6b5e; font-family:Inter,sans-serif; font-size:.9rem; font-weight:600; padding:.7rem .5rem; cursor:pointer; border-radius:999px; transition:color .2s ease; } .tbf-switch button.is-active{color:#eeebe0} .tbf-switch-thumb{ position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px); border-radius:999px; background:#294023; box-shadow:0 4px 12px rgba(35,62,45,.18); transition:transform .25s cubic-bezier(.645,.045,.355,1); pointer-events:none; } .tbf-switch.is-round .tbf-switch-thumb{transform:translateX(100%)} .tbf-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} .tbf-field{min-width:0} .tbf-field.tbf-wide{grid-column:1/-1} .tbf-field label{display:block;color:#233e2d;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem} .tbf-field input,.tbf-field textarea{width:100%;box-sizing:border-box;border:1px solid #d8d4c8;border-radius:10px;background:#fafaf7;color:#233e2d;font-family:Inter,sans-serif;font-size:.95rem;padding:.85rem .9rem;outline:none;transition:border-color .15s,background .15s} .tbf-field input:focus,.tbf-field textarea:focus{border-color:#294023;background:#fff} .tbf-hint{color:#7d8a72;font-size:.75rem;margin:.3rem 0 0} .tbf-warn{color:#8a6a2f} /* Pickup + drop-off on one row */ .tbf-places{ grid-column:1/-1; display:grid; grid-template-columns:1fr auto 1fr; gap:.55rem; align-items:start; } .tbf-swap{ margin-top:1.85rem; width:2.4rem; height:2.4rem; border:1px solid #d8d4c8; border-radius:999px; background:#fff; color:#294023; font-size:1.05rem; line-height:1; cursor:pointer; transition:background .15s,border-color .15s; } .tbf-swap:hover{background:#f0eee6;border-color:#294023} .tbf-swap-static{ display:flex; align-items:center; justify-content:center; cursor:default; pointer-events:none; } /* Pickup / drop-off: label chip transforms into the search input in place. */ .tbf-place{display:flex;flex-direction:column;gap:.4rem} .tbf-place-slot{min-height:2.7rem} .tbf-place-current, .tbf-place-edit{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:#f0eee6; border:1px solid transparent; border-radius:10px; padding:.15rem .85rem .15rem .15rem; color:#233e2d; font-size:.86rem; min-height:2.7rem; box-sizing:border-box; } .tbf-place-current{padding:.65rem .85rem} .tbf-place-current strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tbf-place-edit{background:#fff;border-color:#294023;padding-left:.15rem} .tbf-place-edit[hidden], .tbf-place-current[hidden]{display:none!important} .tbf-place-clear{border:0;background:transparent;color:#7d8a72;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;padding:0;flex-shrink:0} .tbf-place-clear:hover{color:#294023} /* Search box only — suggestions render on so they are never clipped. */ .tbf-ac{flex:1;min-width:0;min-height:2.4rem} .tbf-ac input, .tbf-ac-input, .tbf-ac-fallback{ border:0!important; background:transparent!important; width:100%; box-sizing:border-box; padding:.6rem .7rem; font-size:.9rem; color:#233e2d; font-family:Inter,sans-serif; outline:none; } /* Google place suggestions (fixed over the page, same idea as admin). */ .tbf-place-suggestions{ position:fixed; z-index:80; display:none; max-height:16rem; overflow-y:auto; padding:.25rem; border-radius:10px; background:#fff; border:1px solid #e4e0d5; box-shadow:0 12px 28px rgba(35,62,45,.14); box-sizing:border-box; } .tbf-place-option{ display:block; width:100%; border:0; background:transparent; text-align:left; padding:.55rem .7rem; border-radius:8px; color:#233e2d; font-family:Inter,sans-serif; font-size:.88rem; line-height:1.3; cursor:pointer; } .tbf-place-option:hover, .tbf-place-option[aria-selected='true']{background:#f0eee6} .tbf-place-option-sub{ display:block; margin-top:.15rem; color:#7d8a72; font-size:.75rem; } /* Vehicle horizontal slider */ .tbf-vehicles-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.35rem} .tbf-vehicles-head label{margin:0} .tbf-slider-nav{display:flex;gap:.35rem} .tbf-slider-btn{ width:2rem;height:2rem;border:1px solid #d8d4c8;border-radius:999px; background:#fff;color:#294023;font-size:1.15rem;line-height:1;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:background .15s,border-color .15s; } .tbf-slider-btn:hover{background:#f0eee6;border-color:#294023} .tbf-slider-btn:disabled{opacity:.35;cursor:default} .tbf-cars-wrap{position:relative;margin:0 -.15rem} .tbf-cars{ display:flex; gap:.65rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.15rem .15rem .55rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#d2d375 transparent; } .tbf-cars::-webkit-scrollbar{height:6px} .tbf-cars::-webkit-scrollbar-thumb{background:#d2d375;border-radius:999px} /* Vertical card inside the horizontal track */ .tbf-car{ flex:0 0 168px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:stretch; text-align:center; gap:.3rem; background:#fafaf7; border:1px solid #e4e0d5; border-radius:14px; padding:.55rem .55rem .8rem; cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; } .tbf-car:hover{border-color:#294023} .tbf-car.is-selected{border-color:#294023;box-shadow:0 0 0 2px rgba(41,64,35,.18);background:#fff} .tbf-car-photo{ width:100%; height:92px; object-fit:cover; border-radius:10px; background:#e8e4d8; display:block; } .tbf-car-name{color:#233e2d;font-family:Montserrat,sans-serif;font-size:.92rem;font-weight:500;line-height:1.25;margin-top:.25rem;padding:0 .2rem} .tbf-car-cap{color:#7d8a72;font-size:.72rem;line-height:1.3;min-height:1.8em;padding:0 .2rem} .tbf-car-price{color:#233e2d;font-family:Montserrat,sans-serif;font-size:1.2rem;font-weight:600;margin-top:auto;padding-top:.25rem} .tbf-car-note{color:#7d8a72;font-size:.68rem;line-height:1.3;padding:0 .2rem} .tbf-error{color:#8a2f2f;font-size:.85rem;margin:.75rem 0 0;min-height:1.2em} .tbf-btn{border:0;border-radius:10px;background:#294023;color:#eeebe0;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;padding:.95rem 2rem;margin-top:1.1rem;width:100%;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1)} .tbf-btn:hover{background:#d2d375;color:#294023} .tbf-btn:disabled{opacity:.55;cursor:not-allowed} .tbf-btn-secondary{background:transparent;border:1px solid #d8d4c8;color:#294023;margin-top:.6rem} .tbf-btn-secondary:hover{background:#f0eee6;color:#294023} .tbf-recap{background:#fafaf7;border:1px solid #e4e0d5;border-radius:12px;padding:1rem 1.1rem;margin-bottom:1rem;color:#5a6b5e;font-size:.92rem;line-height:1.55} .tbf-recap b{color:#233e2d;font-weight:600} .tbf-recap-total{color:#233e2d;font-family:Montserrat,sans-serif;font-size:1.25rem;font-weight:600;margin-top:.45rem} .tbf-consent{display:flex;align-items:flex-start;gap:.6rem;margin-top:1rem;color:#5a6b5e;font-size:.85rem} .tbf-consent input{width:auto;margin-top:.15rem} .tbf-consent a{color:#294023} /* Payment-method picker on step 2 (Stripe card / Viva Wallet). */ .tbf-pay-block{margin-top:1.15rem} .tbf-pay-block label{display:block;color:#233e2d;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem} .tbf-pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:.65rem} .tbf-pay-methods:has(.tbf-pay-card:only-child){grid-template-columns:1fr} .tbf-pay-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; text-align:left; border:1px solid #d8d4c8; border-radius:12px; background:#fafaf7; color:#233e2d; font-family:Inter,sans-serif; padding:.85rem .95rem 1rem; cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; } .tbf-pay-card:hover{border-color:#294023} .tbf-pay-card.is-selected{border-color:#294023;box-shadow:0 0 0 2px rgba(41,64,35,.18);background:#fff} .tbf-pay-card-icon{color:#294023;margin-bottom:.15rem} .tbf-pay-card-name{font-family:Montserrat,sans-serif;font-size:.95rem;font-weight:600} .tbf-pay-card-hint{color:#7d8a72;font-size:.72rem;line-height:1.35} .tbf-pay-note{color:#7d8a72;font-size:.78rem;line-height:1.5;margin:.65rem 0 0;text-align:center} /* Rates table under the booking form: six car types in 3 columns × 2 rows. Overrides the theme flex row that put every column on one line. */ .tr-rates-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem 1rem; align-items:stretch; justify-content:initial; } .tr-rates-grid > .spark-pricing-column{ width:auto; max-width:none; min-width:0; display:flex; flex-direction:column; } /* Route-first rates list: quiet prices, whole-row links, soft separators. */ .tr-rates-grid .rates-destinations-div{ display:flex; flex-direction:column; gap:0; padding:.35rem 1rem 1rem; margin-top:auto; } .tr-rates-grid .tr-rate-row{ display:flex; justify-content:space-between; align-items:baseline; gap:.85rem; padding:.72rem .2rem; border-top:1px solid rgba(35,62,45,.1); text-decoration:none; color:inherit; border-radius:.35rem; transition:background .15s ease, color .15s ease; } .tr-rates-grid .tr-rate-row:first-child{border-top:0} .tr-rates-grid .tr-rate-row:hover{ background:rgba(41,64,35,.05); color:#294023; } .tr-rates-grid .tr-rate-route{ flex:1; min-width:0; font-size:.82rem; line-height:1.4; color:#5a6b5e; text-decoration:none; } .tr-rates-grid .tr-rate-row:hover .tr-rate-route{ color:#294023; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .tr-rates-grid .tr-rate-price{ flex:none; font-size:.8rem; font-weight:600; line-height:1.2; color:#233e2d; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.01em; } .tr-rates-grid .tr-rate-currency{ font-weight:500; opacity:.7; margin-right:.08rem; } @media (max-width:991px){ .tr-rates-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .tbf-grid{grid-template-columns:1fr} .tbf-places{grid-template-columns:1fr;gap:.65rem} .tbf-swap,.tbf-swap-static{margin:0 auto} .tbf-car{flex-basis:152px} .tbf-car-photo{height:80px} .tbf-pay-methods{grid-template-columns:1fr} .tr-rates-grid{grid-template-columns:1fr} }