/* Houston Galveston Shuttle Service Booking Form — STYLE Upload: public_html/hgss-booking-form.css Badalne ke baad: form ke HTML widget mein ?v= ka number barhayein, phir Purge All */ /* Elementor & Theme Override Reset */ #booking-form-widget, #booking-form-widget * { box-sizing: border-box !important; } #booking-form-widget { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; max-width: 850px !important; margin: 20px auto !important; background: #ffffff !important; color: #333 !important; border: 1px solid #e1e8ed !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; padding: 15px !important; width: 100% !important; } /* Top Header Banner */ .top-support-banner { background-color: #0b3c36 !important; color: #ffffff !important; border-radius: 8px !important; padding: 15px 20px !important; text-align: center !important; margin-bottom: 12px !important; position: relative !important; } .banner-content-box { background: #ffffff !important; color: #0b3c36 !important; border-radius: 6px !important; padding: 10px 15px !important; font-weight: 600 !important; font-size: 15px !important; display: inline-block !important; width: 90% !important; } .banner-content-box a { color: #0b3c36 !important; text-decoration: underline !important; } /* Call + WhatsApp buttons */ #booking-form-widget .banner-btns { display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; } #booking-form-widget a.banner-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex: 1 1 200px !important; max-width: 300px !important; min-height: 46px !important; padding: 10px 16px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; transition: filter .15s !important; } #booking-form-widget a.banner-btn svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; } #booking-form-widget a.banner-btn:hover { filter: brightness(1.08) !important; } #booking-form-widget a.banner-btn-call { background: #f7a600 !important; color: #0b3c36 !important; } #booking-form-widget a.banner-btn-wa { background: #25d366 !important; color: #fff !important; } @media (max-width: 480px) { #booking-form-widget .banner-btns { gap: 8px !important; } #booking-form-widget a.banner-btn { flex: 1 1 0 !important; font-size: 13px !important; padding: 10px 8px !important; } } .banner-subtext { text-align: right !important; font-size: 11px !important; color: #c5a059 !important; margin-top: 8px !important; letter-spacing: 0.5px !important; } .features-row { display: flex !important; justify-content: space-around !important; padding: 10px 0 20px 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #2d3748 !important; } .features-row span { color: #1b4d4a !important; } /* Steps Bar */ .progress-wrapper { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 20px 25px 20px !important; max-width: 600px !important; margin: 0 auto !important; position: relative !important; } .progress-step { position: relative !important; z-index: 2 !important; text-align: center !important; flex: 1 !important; } .step-circle { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid #cbd5e0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 6px !important; font-weight: bold !important; color: #4a5568 !important; font-size: 14px !important; transition: 0.3s !important; } .step-label { font-size: 13px !important; color: #718096 !important; font-weight: 500 !important; } .progress-step.completed .step-circle { background: #0b3c36 !important; border-color: #0b3c36 !important; color: #fff !important; } .progress-step.active .step-circle { border-color: #0b3c36 !important; color: #0b3c36 !important; border-width: 2px !important; } .progress-step.active .step-label { color: #0b3c36 !important; font-weight: 700 !important; } /* Common Form Styling */ .step-container { padding: 0 10px 10px 10px !important; } .form-step { display: none !important; } .form-step.active { display: block !important; } /* Map chhupa hua hai (distance ke liye andar chalta rehta hai) */ #booking-form-widget .map-side { display: none !important; } #booking-form-widget .trip-cols { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 24px !important; align-items: start !important; } #booking-form-widget .trip-cols .return-trip-box { margin-top: 0 !important; display: block; } #booking-form-widget .trip-cols.is-hourly { grid-template-columns: minmax(0, 1fr) !important; } #booking-form-widget .trip-cols.is-hourly .return-trip-box { display: none !important; } @media (max-width: 768px) { #booking-form-widget .trip-cols { grid-template-columns: minmax(0, 1fr) !important; } #booking-form-widget .trip-cols .return-trip-box { margin-top: 20px !important; } } /* One Way / Round Trip radio ab chhupe hain — Return section ka switch unhein chalata hai */ #booking-form-widget #trip_type_options { display: none !important; } #booking-form-widget h4.rt-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: wrap !important; margin: 0 0 15px 0 !important; padding: 0 0 8px 0 !important; border-bottom: 1px solid #cbd5e0 !important; color: #0b3c36 !important; font-size: 16px !important; font-weight: 700 !important; position: relative !important; z-index: 7 !important; } #booking-form-widget label.rt-switch { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; cursor: pointer !important; user-select: none !important; } #booking-form-widget label.rt-switch input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none !important; } #booking-form-widget .rt-slider { position: relative !important; width: 44px !important; height: 24px !important; border-radius: 24px !important; background: #cbd5e0 !important; transition: background .2s !important; flex: 0 0 auto !important; } #booking-form-widget .rt-slider::after { content: "" !important; position: absolute !important; top: 3px !important; left: 3px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.25) !important; transition: transform .2s !important; } #booking-form-widget label.rt-switch input:checked + .rt-slider { background: #0b3c36 !important; } #booking-form-widget label.rt-switch input:checked + .rt-slider::after { transform: translateX(20px) !important; } #booking-form-widget label.rt-switch input:focus-visible + .rt-slider { outline: 2px solid #f7a600 !important; outline-offset: 2px !important; } #booking-form-widget .rt-switch-text { font-size: 13px !important; font-weight: 700 !important; color: #0b3c36 !important; } /* Return section band (One Way) */ #booking-form-widget .return-trip-box { position: relative !important; } #booking-form-widget .return-trip-box.rt-disabled { border-style: dashed !important; background: #f7f9f9 !important; } #booking-form-widget .return-trip-box.rt-disabled > *:not(.rt-overlay):not(.rt-head) { opacity: .45 !important; filter: grayscale(1) !important; } #booking-form-widget .rt-overlay { display: none; position: absolute !important; inset: 0 !important; z-index: 6 !important; cursor: pointer !important; border-radius: 8px !important; } #booking-form-widget .return-trip-box.rt-disabled .rt-overlay { display: flex !important; align-items: center !important; justify-content: center !important; } #booking-form-widget .rt-overlay-tag { background: #0b3c36 !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; padding: 8px 14px !important; border-radius: 20px !important; box-shadow: 0 4px 14px rgba(11,60,54,.25) !important; } #booking-form-widget .rt-overlay:hover .rt-overlay-tag { background: #f7a600 !important; color: #0b3c36 !important; } /* Vertically Center Map Alignment */ .step1-flex-wrapper { display: flex !important; gap: 30px !important; align-items: center !important; } .form-side { flex: 1.2 !important; } .map-side { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; width: 100% !important; } .form-group { margin-bottom: 18px !important; } #booking-form-widget label { display: block !important; margin-bottom: 6px !important; font-weight: 600 !important; font-size: 14px !important; color: #4a5568 !important; } #booking-form-widget input, #booking-form-widget select, #booking-form-widget textarea { width: 100% !important; padding: 12px !important; border: 1px solid #cbd5e0 !important; border-radius: 6px !important; font-size: 14px !important; transition: border-color 0.2s !important; } #booking-form-widget input:focus, #booking-form-widget textarea:focus { border-color: #0b3c36 !important; outline: none !important; } #booking-form-widget input[type="date"], #booking-form-widget #pickup_time, #booking-form-widget #return_pickup_time { height: 45px !important; } /* Dual Map Container Styles with Spacing */ #map, #return_map { height: 350px !important; width: 100% !important; border: 1px solid #cbd5e0 !important; border-radius: 6px !important; } #map { margin-bottom: 20px !important; } #return_map { display: none; } .counter-group { display: flex !important; align-items: center !important; border: 1px solid #cbd5e0 !important; border-radius: 6px !important; width: 140px !important; background: #fff !important; } .counter-group input { border: none !important; text-align: center !important; padding: 10px 0 !important; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } .counter-btn { flex: 1 !important; padding: 10px !important; background: #f7fafc !important; border: none !important; font-size: 18px !important; cursor: pointer !important; color: #4a5568 !important; } .action-link { color: #0b3c36 !important; text-decoration: none !important; font-size: 14px !important; display: inline-block !important; margin-top: 5px !important; font-weight: 600 !important; cursor: pointer !important; } /* Radio Group Custom Styles */ /* Round trip nudge (steps 2-4, sirf One Way par) */ #booking-form-widget .rt-nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff8e6 !important; border: 1px dashed #f7a600 !important; border-radius: 10px !important; padding: 10px 14px !important; margin: 4px 0 18px !important; } #booking-form-widget .rt-nudge-text { font-size: 14px !important; font-weight: 600 !important; color: #0b3c36 !important; } #booking-form-widget .rt-nudge-text i { color: #f7a600 !important; margin-right: 4px !important; } #booking-form-widget button.rt-nudge-btn { margin: 0 !important; padding: 8px 14px !important; border: 0 !important; border-radius: 8px !important; background: #0b3c36 !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; white-space: nowrap !important; } #booking-form-widget button.rt-nudge-btn:hover { background: #1b4d4a !important; } @media (max-width: 480px) { #booking-form-widget button.rt-nudge-btn { width: 100% !important; } } /* Standard / Corporate chooser */ #booking-form-widget .cat-title { font-size: 22px !important; font-weight: 800 !important; color: #0b3c36 !important; text-align: center !important; margin: 6px 0 18px !important; } #booking-form-widget .cat-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; margin-bottom: 10px !important; } #booking-form-widget button.cat-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 210px !important; width: 100% !important; margin: 0 !important; padding: 26px 18px !important; border: 2px solid #cbd5e0 !important; border-radius: 14px !important; background: #fff !important; color: #0b3c36 !important; text-align: center !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; box-shadow: 0 6px 18px rgba(11,60,54,.06) !important; cursor: pointer !important; transition: transform .15s, border-color .15s, box-shadow .15s !important; } #booking-form-widget button.cat-card:hover { border-color: #0b3c36 !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(11,60,54,.14) !important; } #booking-form-widget button.cat-card[data-cat="corporate"] { background: #0b3c36 !important; border-color: #0b3c36 !important; color: #fff !important; } #booking-form-widget .cat-icon { width: 58px !important; height: 58px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f7a600 !important; color: #0b3c36 !important; font-size: 24px !important; } #booking-form-widget .cat-name { display: block !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.2 !important; } #booking-form-widget .cat-desc { display: block !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.4 !important; opacity: .8 !important; max-width: 260px !important; } #booking-form-widget .cat-go { display: inline-block !important; margin-top: 6px !important; padding: 8px 16px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 700 !important; background: #0b3c36 !important; color: #fff !important; } #booking-form-widget button.cat-card[data-cat="corporate"] .cat-go { background: #f7a600 !important; color: #0b3c36 !important; } #booking-form-widget .cat-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; background: #f1f5f4 !important; border-radius: 8px !important; padding: 8px 12px !important; margin-bottom: 14px !important; } #booking-form-widget .cat-bar-label { font-size: 14px !important; font-weight: 700 !important; color: #0b3c36 !important; } #booking-form-widget .cat-bar-label::before { content: "✓ " !important; color: #f7a600 !important; } #booking-form-widget button.cat-change { margin: 0 !important; padding: 5px 12px !important; border: 1px solid #0b3c36 !important; border-radius: 6px !important; background: #fff !important; color: #0b3c36 !important; font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer !important; text-transform: none !important; box-shadow: none !important; } #booking-form-widget.cat-pending .progress-wrapper { display: none !important; } @media (max-width: 600px) { #booking-form-widget .cat-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } #booking-form-widget button.cat-card { min-height: 150px !important; padding: 18px 14px !important; } #booking-form-widget .cat-title { font-size: 19px !important; } } /* Service type buttons */ #booking-form-widget .svc-btns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #booking-form-widget button.svc-btn { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-height: 74px !important; margin: 0 !important; padding: 12px 8px !important; width: 100% !important; border: 2px solid #cbd5e0 !important; border-radius: 10px !important; background: #fff !important; color: #0b3c36 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer !important; transition: border-color .15s, background .15s !important; } #booking-form-widget button.svc-btn, #booking-form-widget button.svc-btn span, #booking-form-widget button.svc-btn em { white-space: normal !important; overflow-wrap: break-word !important; min-width: 0 !important; max-width: 100% !important; } #booking-form-widget button.svc-btn { overflow: hidden !important; height: auto !important; } #booking-form-widget button.svc-btn span { display: block !important; font-size: inherit !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-indent: 0 !important; } #booking-form-widget button.svc-btn span.svc-sub { font-size: .86em !important; font-weight: 600 !important; margin-top: -3px !important; } #booking-form-widget button.svc-btn { max-height: none !important; } #booking-form-widget button.svc-btn i { font-size: 18px !important; color: #0b3c36 !important; } #booking-form-widget button.svc-btn:hover:not(:disabled) { border-color: #0b3c36 !important; } #booking-form-widget button.svc-btn.active { border-color: #0b3c36 !important; background: #0b3c36 !important; color: #fff !important; } #booking-form-widget button.svc-btn.active i { color: #f7a600 !important; } #booking-form-widget button.svc-btn:disabled { cursor: not-allowed !important; background: #f4f6f6 !important; color: #94a3a1 !important; border-style: dashed !important; } #booking-form-widget button.svc-btn:disabled i { color: #b6c2c0 !important; } #booking-form-widget .svc-soon { font-style: normal !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .4px !important; text-transform: uppercase !important; color: #0b3c36 !important; background: #f7a600 !important; border-radius: 20px !important; padding: 2px 8px !important; } @media (max-width: 480px) { #booking-form-widget .svc-btns { gap: 6px !important; } #booking-form-widget button.svc-btn { font-size: 12px !important; min-height: 70px !important; padding: 10px 4px !important; } #booking-form-widget .svc-soon { font-size: 8.5px !important; padding: 2px 5px !important; } } #booking-form-widget #hourly_hours { height: 45px !important; cursor: pointer !important; background-color: #fff !important; } #booking-form-widget .hourly-note { font-size: 12.5px !important; color: #4a5568 !important; margin-top: 6px !important; } .trip-type-options { display: flex !important; gap: 20px !important; margin-top: 15px !important; margin-bottom: 20px !important; padding-bottom: 10px !important; border-bottom: 1px dashed #cbd5e0 !important; } .trip-radio-label { display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 14px !important; color: #2d3748 !important; } .trip-radio-label input[type="radio"] { width: auto !important; margin: 0 !important; cursor: pointer !important; } /* Outbound Trip Card Header */ .trip-section-header { font-size: 16px !important; font-weight: 700 !important; color: #0b3c36 !important; margin-bottom: 15px !important; display: flex !important; align-items: center !important; gap: 8px !important; border-bottom: 1px solid #e2e8f0 !important; padding-bottom: 6px !important; } /* Return Trip Box */ .return-trip-box { background: #fcfcfc !important; border: 1px solid #0b3c36 !important; border-radius: 8px !important; padding: 15px !important; margin-top: 20px !important; display: none; } /* Fleet Step Specific UI */ .step-title-header { font-size: 22px !important; font-weight: 700 !important; color: #1a202c !important; margin-bottom: 15px !important; display: flex !important; align-items: center !important; gap: 10px !important; } .step-badge { background: #0b3c36 !important; color: #fff !important; font-size: 12px !important; padding: 3px 10px !important; border-radius: 12px !important; font-weight: 600 !important; } #vehicle_options_container { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; margin-top: 15px !important; justify-content: center !important; width: 100% !important; } .vehicle-card { width: 260px !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; padding: 0 0 15px 0 !important; display: flex !important; flex-direction: column !important; background: #fff !important; transition: all 0.2s ease !important; overflow: hidden !important; } .vehicle-card.selected { outline: 2px solid #0b3c36 !important; outline-offset: -2px !important; box-shadow: 0 4px 12px rgba(11, 60, 54, 0.15) !important; } .v-img-box { border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 15px 0 !important; width: 100% !important; height: 180px !important; background-color: #f8fafc !important; display: block !important; overflow: hidden !important; border-top-left-radius: 9px !important; border-top-right-radius: 9px !important; } .v-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } .v-title-row { margin-bottom: 8px !important; padding-left: 15px !important; padding-right: 15px !important; } .v-name { font-size: 15px !important; font-weight: 700 !important; color: #1a202c !important; line-height: 1.3 !important; width: 100% !important; } .v-details-row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; padding-left: 15px !important; padding-right: 15px !important; } .v-price { font-size: 16px !important; font-weight: 800 !important; color: #0b3c36 !important; white-space: nowrap !important; } .v-specs-row { display: flex !important; gap: 10px !important; font-size: 12px !important; color: #4a5568 !important; font-weight: 600 !important; } .spec-item { display: flex !important; align-items: center !important; gap: 4px !important; } .v-desc { font-size: 12px !important; color: #718096 !important; line-height: 1.4 !important; margin-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; flex: 1 !important; text-align: center !important; } .btn-select-v { width: 100% !important; background: #ffffff !important; color: #1a202c !important; border: 1px solid #cbd5e0 !important; padding: 10px !important; border-radius: 6px !important; font-weight: 700 !important; cursor: pointer !important; font-size: 13px !important; transition: 0.2s !important; } .vehicle-card.selected .btn-select-v { background: #0b3c36 !important; color: #ffffff !important; border-color: #0b3c36 !important; } /* Disabled Vehicle Card Styling */ .vehicle-card.disabled-card { opacity: 0.55 !important; pointer-events: none !important; background-color: #f1f5f9 !important; border-color: #cbd5e0 !important; filter: grayscale(40%) !important; } #booking-form-widget .v-best { display: inline-block !important; margin-left: 6px !important; padding: 2px 8px !important; border-radius: 20px !important; background: #f7a600 !important; color: #0b3c36 !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .4px !important; vertical-align: middle !important; } .capacity-note { font-size: 10px !important; color: #0b3c36 !important; font-weight: 600 !important; text-align: center !important; margin-top: 6px !important; line-height: 1.2 !important; } /* Step 3 Layout Grid */ .p-info-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important; } .p-info-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; margin-top: 15px !important; } /* Tip Section Container */ .tip-section-card { border: 1px solid #1b4d4a !important; border-radius: 12px !important; padding: 20px !important; margin: 25px 0 !important; background: #ffffff !important; } .tip-header { font-size: 16px !important; font-weight: 700 !important; color: #1a202c !important; margin-bottom: 4px !important; } .tip-subtext { font-size: 13px !important; color: #718096 !important; margin-bottom: 15px !important; } .tip-options-row { display: flex !important; gap: 10px !important; } .tip-btn { flex: 1 !important; border: 1px solid #1b4d4a !important; background: #fff !important; border-radius: 8px !important; padding: 10px 5px !important; text-align: center !important; cursor: pointer !important; transition: all 0.2s ease !important; } .tip-btn .tip-percent { font-weight: 800 !important; font-size: 15px !important; color: #1b4d4a !important; display: block !important; } .tip-btn .tip-label { font-size: 10px !important; color: #718096 !important; display: block !important; } .tip-btn.active { background: #0b3c36 !important; border-color: #0b3c36 !important; } .tip-btn.active .tip-percent, .tip-btn.active .tip-label { color: #ffffff !important; } /* Step 3 Summary Ticket Card */ .summary-ticket { border: 1px solid #1b4d4a !important; border-radius: 12px !important; overflow: hidden !important; margin-top: 20px !important; font-family: monospace, sans-serif !important; } .summary-ticket-body { padding: 15px 20px !important; background: #ffffff !important; } .ticket-row { display: flex !important; justify-content: space-between !important; padding: 10px 0 !important; border-bottom: 1px dashed #e2e8f0 !important; font-size: 14px !important; color: #2d3748 !important; } .ticket-row:last-child { border-bottom: none !important; } .ticket-row .t-label { font-weight: 600 !important; } .ticket-row .t-val { font-weight: 700 !important; text-align: right !important; } .ticket-total-bar { background: #0b3c36 !important; color: #ffffff !important; padding: 15px 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 18px !important; font-weight: 800 !important; } /* Bottom Buttons */ .nav-buttons-flex { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 30px !important; } .btn-back-custom { background: #ffffff !important; color: #1a202c !important; border: 1px solid #cbd5e0 !important; padding: 12px 24px !important; border-radius: 6px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 14px !important; } .btn-next-custom { background: #0b3c36 !important; color: white !important; padding: 12px 28px !important; border: none !important; border-radius: 6px !important; font-weight: 700 !important; cursor: pointer !important; font-size: 14px !important; } .btn-next-custom:disabled { background: #a0aec0 !important; cursor: not-allowed !important; } .stop-input-wrapper { display: flex !important; gap: 8px !important; margin-bottom: 8px !important; align-items: center !important; } .remove-stop { color: #0b3c36 !important; cursor: pointer !important; font-weight: bold !important; font-size: 18px !important; padding: 0 5px !important; } .clover-field { height: 45px !important; padding: 10px !important; border: 1px solid #cbd5e0 !important; border-radius: 6px !important; background: #fff !important; } .error-outline { border: 1px solid #0b3c36 !important; } .error-text { color: #DC3545 !important; font-size: 11px !important; margin-top: 4px !important; display: block !important; font-weight: 600 !important; } /* Hide Maps completely on Mobile Screen */ @media (max-width: 768px) { .step1-flex-wrapper { flex-direction: column !important; } .map-side { display: none !important; } /* Hidden on mobile */ .features-row { font-size: 12px !important; } .banner-content-box { width: 100% !important; } .nav-buttons-flex { flex-direction: column-reverse !important; gap: 10px !important; } .btn-next-custom, .btn-back-custom { width: 100% !important; text-align: center !important; } .p-info-grid, .p-info-grid-2 { grid-template-columns: 1fr !important; } .tip-options-row { flex-wrap: wrap !important; } .tip-btn { flex: 1 1 30% !important; } .vehicle-card { width: 100% !important; } } /* ===== Simple Digital Time Picker ===== */ #booking-form-widget .lah-tp-wrap { position: relative !important; } #booking-form-widget #pickup_time, #booking-form-widget #return_pickup_time { cursor: pointer !important; background: #fff !important; caret-color: transparent !important; } #booking-form-widget .lah-tp { position: absolute !important; top: calc(100% + 6px) !important; left: 0; z-index: 9999 !important; width: 250px !important; max-width: calc(100vw - 20px) !important; background: #fff !important; border: 1px solid #cbd5e0 !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(11,60,54,.18) !important; padding: 14px !important; display: none; font-family: inherit !important; } #booking-form-widget .lah-tp.open { display: block !important; } #booking-form-widget .lah-tp-row { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } #booking-form-widget .lah-tp-col { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; } #booking-form-widget .lah-tp button { all: unset; box-sizing: border-box !important; cursor: pointer !important; font-family: inherit !important; -webkit-tap-highlight-color: transparent; } #booking-form-widget .lah-tp .lah-tp-arrow { width: 54px !important; height: 30px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #0b3c36 !important; background: #f1f5f4 !important; font-size: 13px !important; } #booking-form-widget .lah-tp .lah-tp-arrow:hover { background: #e2ecea !important; } #booking-form-widget .lah-tp-num { width: 54px !important; height: 48px !important; border-radius: 8px !important; background: #0b3c36 !important; color: #fff !important; font-size: 26px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-variant-numeric: tabular-nums !important; letter-spacing: 1px !important; } #booking-form-widget .lah-tp-colon { font-size: 26px !important; font-weight: 700 !important; color: #0b3c36 !important; margin: 0 1px !important; } #booking-form-widget .lah-tp-ampm { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-left: 6px !important; } #booking-form-widget .lah-tp .lah-tp-ap { width: 52px !important; height: 34px !important; border-radius: 8px !important; border: 1px solid #cbd5e0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 700 !important; color: #0b3c36 !important; background: #fff !important; } #booking-form-widget .lah-tp .lah-tp-ap.on { background: #f7a600 !important; border-color: #f7a600 !important; color: #0b3c36 !important; } #booking-form-widget .lah-tp .lah-tp-done { display: block !important; width: 100% !important; margin-top: 12px !important; height: 40px !important; line-height: 40px !important; text-align: center !important; border-radius: 8px !important; background: #0b3c36 !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; } #booking-form-widget .lah-tp .lah-tp-done:hover { background: #1b4d4a !important; } /* ================= size, centre, light theme + elite corporate ================= */ .elementor-widget-html:has(#booking-form-widget), .elementor-widget-html:has(#booking-form-widget) > .elementor-widget-container { width: 100% !important; max-width: 100% !important; } #booking-form-widget { width: 850px !important; max-width: 100% !important; margin: 20px auto !important; display: block !important; background: #ffffff !important; border-color: #e6ecea !important; box-shadow: 0 4px 18px rgba(11,60,54,.06) !important; } /* Hero / banner: light */ #booking-form-widget .top-support-banner { background: #f2f7f6 !important; border: 1px solid #dfe9e6 !important; color: #0b3c36 !important; } #booking-form-widget .banner-subtext { color: #8a7a4f !important; } #booking-form-widget a.banner-btn-call { background: #f7a600 !important; color: #0b3c36 !important; } #booking-form-widget .features-row span { color: #c88a00 !important; } /* Steps bar */ #booking-form-widget .progress-step.completed .step-circle { background: #e3efec !important; border-color: #9cc3bb !important; color: #0b3c36 !important; } #booking-form-widget .progress-step.active .step-circle { background: #fff !important; } /* Service type buttons: selected = light tint */ #booking-form-widget button.svc-btn.active { background: #eaf4f1 !important; border-color: #0b3c36 !important; color: #0b3c36 !important; } #booking-form-widget button.svc-btn.active i { color: #c88a00 !important; } #booking-form-widget label.rt-switch input:checked + .rt-slider { background: #2f7d6e !important; } #booking-form-widget .rt-overlay-tag { background: #ffffff !important; color: #0b3c36 !important; border: 1px solid #0b3c36 !important; box-shadow: 0 4px 14px rgba(11,60,54,.12) !important; } #booking-form-widget button.rt-nudge-btn { background: #ffffff !important; color: #0b3c36 !important; border: 1px solid #0b3c36 !important; } #booking-form-widget button.rt-nudge-btn:hover { background: #eaf4f1 !important; } #booking-form-widget .return-trip-box { background: #fbfcfc !important; border-color: #cfe0dc !important; } /* Vehicle cards / badges */ #booking-form-widget .step-badge { background: #eaf4f1 !important; color: #0b3c36 !important; } #booking-form-widget .vehicle-card.selected { outline-color: #2f7d6e !important; } #booking-form-widget .vehicle-card.selected .btn-select-v { background: #eaf4f1 !important; color: #0b3c36 !important; border-color: #2f7d6e !important; } /* Tips + summary */ #booking-form-widget .tip-section-card, #booking-form-widget .summary-ticket { border-color: #dfe9e6 !important; } #booking-form-widget .tip-btn { border-color: #cfe0dc !important; } #booking-form-widget .tip-btn.active { background: #eaf4f1 !important; border-color: #0b3c36 !important; } #booking-form-widget .tip-btn.active .tip-percent { color: #0b3c36 !important; } #booking-form-widget .tip-btn.active .tip-label { color: #4a5568 !important; } #booking-form-widget .ticket-total-bar { background: #f2f7f6 !important; color: #0b3c36 !important; border-top: 1px solid #dfe9e6 !important; } /* Time picker */ #booking-form-widget .lah-tp-num { background: #f2f7f6 !important; color: #0b3c36 !important; border: 1px solid #dfe9e6 !important; } /* Payment step: corporate option (elite: black + gold) */ #booking-form-widget .corp-card { position: relative !important; border: 1px solid #b8975a !important; border-radius: 14px !important; padding: 18px 20px !important; margin: 10px 0 18px !important; background: linear-gradient(135deg, #15171c 0%, #23262d 100%) !important; box-shadow: 0 8px 22px rgba(0,0,0,.18) !important; transition: box-shadow .2s, border-color .2s !important; } #booking-form-widget .corp-card.on { border-color: #d9b36c !important; box-shadow: 0 0 0 2px rgba(217,179,108,.35), 0 10px 26px rgba(0,0,0,.25) !important; } #booking-form-widget label.corp-head { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 0 12px !important; cursor: pointer !important; color: #f4ead6 !important; } #booking-form-widget label.corp-head input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none !important; } #booking-form-widget .corp-check { width: 22px !important; height: 22px !important; border: 2px solid #b8975a !important; border-radius: 6px !important; background: transparent !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #booking-form-widget label.corp-head input:checked + .corp-check { background: linear-gradient(135deg, #e6c47f, #b8975a) !important; border-color: #d9b36c !important; } #booking-form-widget label.corp-head input:checked + .corp-check::after { content: "\2713" !important; color: #15171c !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1 !important; } #booking-form-widget label.corp-head input:focus-visible + .corp-check { outline: 2px solid #e6c47f !important; outline-offset: 2px !important; } #booking-form-widget .corp-title { font-size: 16.5px !important; font-weight: 800 !important; letter-spacing: .3px !important; color: #f4ead6 !important; } #booking-form-widget .corp-title i { color: #d9b36c !important; margin-right: 5px !important; } #booking-form-widget .corp-tag { margin-left: auto !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #15171c !important; background: linear-gradient(135deg, #e6c47f, #b8975a) !important; border-radius: 20px !important; padding: 4px 11px !important; } #booking-form-widget ul.corp-list { list-style: none !important; margin: 0 0 12px !important; padding: 12px 0 0 !important; border-top: 1px solid rgba(217,179,108,.25) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 16px !important; } #booking-form-widget ul.corp-list li { position: relative !important; margin: 0 !important; padding-left: 20px !important; font-size: 13px !important; line-height: 1.4 !important; color: #d6d3cc !important; } #booking-form-widget ul.corp-list li::before { content: "◆" !important; position: absolute !important; left: 0 !important; top: 1px !important; color: #d9b36c !important; font-size: 10px !important; } #booking-form-widget .corp-note { font-size: 12.5px !important; color: #a9a59c !important; } #booking-form-widget .corp-card.on .corp-note { color: #e6c47f !important; font-weight: 600 !important; } #booking-form-widget .amount-due { margin: 18px 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #1a202c !important; } #booking-form-widget .amount-due span { color: #0b3c36 !important; font-weight: 800 !important; } @media (max-width: 600px) { #booking-form-widget ul.corp-list { grid-template-columns: minmax(0, 1fr) !important; } #booking-form-widget .corp-tag { margin-left: 0 !important; } } /* ---- Upar ka hissa: kam se kam height ---- */ #booking-form-widget { padding: 10px 15px 15px !important; margin-top: 10px !important; } #booking-form-widget .top-support-banner { padding: 8px 12px !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 10px !important; } #booking-form-widget .top-support-banner .banner-btns { flex: 1 1 auto !important; gap: 10px !important; } #booking-form-widget a.banner-btn { min-height: 38px !important; padding: 6px 14px !important; font-size: 14px !important; } #booking-form-widget .banner-subtext { display: none !important; } #booking-form-widget .features-row { padding: 4px 0 6px !important; font-size: 13px !important; } #booking-form-widget .progress-wrapper { padding: 2px 20px 8px !important; } #booking-form-widget .step-circle { width: 28px !important; height: 28px !important; margin-bottom: 3px !important; font-size: 13px !important; } #booking-form-widget .step-label { font-size: 12px !important; } #booking-form-widget #step1_main_heading { margin-bottom: 8px !important; font-size: 18px !important; } #booking-form-widget .service-type-group { margin-bottom: 12px !important; } #booking-form-widget button.svc-btn { min-height: 52px !important; padding: 6px 8px !important; gap: 2px !important; } #booking-form-widget button.svc-btn i { font-size: 15px !important; } @media (max-width: 480px) { #booking-form-widget a.banner-btn { min-height: 36px !important; font-size: 13px !important; padding: 6px 8px !important; } #booking-form-widget .features-row { font-size: 11.5px !important; } #booking-form-widget button.svc-btn { min-height: 50px !important; } } /* ================= Compact v2: kam height, aasaan form, chhota digital time picker ================= */ #booking-form-widget { padding: 8px 14px 14px !important; } #booking-form-widget .top-support-banner { padding: 6px 10px !important; margin-bottom: 6px !important; border-radius: 10px !important; } #booking-form-widget a.banner-btn { min-height: 34px !important; padding: 4px 12px !important; font-size: 13.5px !important; border-radius: 7px !important; } #booking-form-widget a.banner-btn svg { width: 16px !important; height: 16px !important; } /* Steps: number + naam aik line mein */ #booking-form-widget .progress-wrapper { max-width: 640px !important; padding: 2px 6px 10px !important; gap: 6px !important; } #booking-form-widget .progress-step { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } #booking-form-widget .step-circle { width: 22px !important; height: 22px !important; margin: 0 !important; font-size: 11.5px !important; flex: 0 0 auto !important; } #booking-form-widget .step-label { font-size: 12.5px !important; white-space: nowrap !important; } /* Ghair zaroori headings */ #booking-form-widget #step1_main_heading, #booking-form-widget .service-type-group > label { display: none !important; } #booking-form-widget .service-type-group { margin-bottom: 10px !important; } #booking-form-widget button.svc-btn { min-height: 44px !important; display: block !important; text-align: center !important; padding: 8px 10px !important; line-height: 1.3 !important; } #booking-form-widget button.svc-btn i { display: inline-block !important; margin-right: 6px !important; vertical-align: -1px !important; } #booking-form-widget button.svc-btn span { display: inline !important; } #booking-form-widget button.svc-btn span.svc-sub { margin: 0 0 0 3px !important; font-size: inherit !important; font-weight: inherit !important; } /* Fields: kam jagah */ #booking-form-widget .form-group { margin-bottom: 10px !important; } #booking-form-widget label { margin-bottom: 4px !important; font-size: 12.5px !important; } #booking-form-widget input, #booking-form-widget select, #booking-form-widget textarea { padding: 9px 11px !important; font-size: 14px !important; border-radius: 8px !important; } #booking-form-widget input[type="date"], #booking-form-widget #pickup_time, #booking-form-widget #return_pickup_time, #booking-form-widget #hourly_hours { height: 40px !important; } #booking-form-widget .trip-section-header { font-size: 14px !important; margin-bottom: 10px !important; padding-bottom: 5px !important; } #booking-form-widget h4.rt-head { font-size: 14px !important; margin-bottom: 10px !important; padding-bottom: 5px !important; } #booking-form-widget .return-trip-box { padding: 10px 12px !important; } #booking-form-widget .trip-cols { gap: 16px !important; } #booking-form-widget .action-link { font-size: 13px !important; margin-top: 4px !important; } #booking-form-widget .counter-group { width: 100% !important; max-width: 150px !important; height: 40px !important; } #booking-form-widget .counter-group input { padding: 6px 0 !important; height: 38px !important; border: 0 !important; } #booking-form-widget .counter-btn { padding: 0 10px !important; font-size: 16px !important; } #booking-form-widget .pax-seat-row { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; } #booking-form-widget .nav-buttons-flex { margin-top: 14px !important; } #booking-form-widget .btn-next-custom, #booking-form-widget .btn-back-custom { padding: 11px 22px !important; } #booking-form-widget .step-title-header { font-size: 18px !important; margin-bottom: 10px !important; } #booking-form-widget .p-info-grid, #booking-form-widget .p-info-grid-2 { gap: 10px !important; } #booking-form-widget .p-info-grid-2 { margin-top: 0 !important; } #booking-form-widget .tip-section-card { padding: 14px !important; margin: 14px 0 !important; } #booking-form-widget .tip-btn { padding: 7px 4px !important; } #booking-form-widget .ticket-row { padding: 7px 0 !important; font-size: 13px !important; } #booking-form-widget .rt-nudge { padding: 7px 12px !important; margin: 0 0 10px !important; } #booking-form-widget .rt-nudge-text { font-size: 13px !important; } #booking-form-widget button.rt-nudge-btn { padding: 6px 12px !important; font-size: 12.5px !important; } @media (max-width: 600px) { #booking-form-widget .progress-step { flex-direction: column !important; gap: 2px !important; } #booking-form-widget .step-label { font-size: 11px !important; } #booking-form-widget .p-info-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } #booking-form-widget .p-info-grid > .form-group:first-child { grid-column: 1 / -1 !important; } #booking-form-widget .p-info-grid-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } #booking-form-widget a.banner-btn { font-size: 12.5px !important; } #booking-form-widget .trip-cols .return-trip-box { margin-top: 8px !important; } #booking-form-widget button.svc-btn { font-size: 13px !important; } } /* ---- Chhota digital time picker ---- */ #booking-form-widget .lah-tp { width: 196px !important; padding: 10px !important; border-radius: 12px !important; border: 1px solid #dfe9e6 !important; box-shadow: 0 10px 26px rgba(11,60,54,.14) !important; } #booking-form-widget .lah-tp-row { gap: 4px !important; } #booking-form-widget .lah-tp-col { gap: 2px !important; } #booking-form-widget .lah-tp .lah-tp-arrow { width: 44px !important; height: 22px !important; font-size: 11px !important; border-radius: 6px !important; background: #f2f7f6 !important; color: #0b3c36 !important; } #booking-form-widget .lah-tp .lah-tp-arrow:hover { background: #eef5f3 !important; color: #0b3c36 !important; } #booking-form-widget .lah-tp-num { width: 44px !important; height: 38px !important; border-radius: 8px !important; font-family: 'Orbitron', ui-monospace, monospace !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 1px !important; background: #10231f !important; color: #7CF2C8 !important; border: 0 !important; text-shadow: 0 0 6px rgba(124,242,200,.45) !important; } #booking-form-widget .lah-tp-colon { font-family: 'Orbitron', ui-monospace, monospace !important; font-size: 18px !important; color: #0b3c36 !important; margin: 0 !important; } #booking-form-widget .lah-tp-ampm { gap: 4px !important; margin-left: 4px !important; } #booking-form-widget .lah-tp .lah-tp-ap { width: 40px !important; height: 26px !important; font-size: 11.5px !important; border-radius: 6px !important; border-color: #dfe9e6 !important; } #booking-form-widget .lah-tp .lah-tp-ap.on { background: #0b3c36 !important; border-color: #0b3c36 !important; color: #fff !important; } #booking-form-widget .lah-tp .lah-tp-done { height: 30px !important; line-height: 30px !important; margin-top: 8px !important; font-size: 13px !important; border-radius: 7px !important; background: #f7a600 !important; color: #0b3c36 !important; } #booking-form-widget .lah-tp .lah-tp-done:hover { background: #ffb81f !important; } /* ================= v3: steps + call bar, corporate class, decent time picker ================= */ #booking-form-widget .top-support-banner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 7px 10px 7px 14px !important; margin-bottom: 10px !important; text-align: left !important; } #booking-form-widget .top-support-banner .progress-wrapper { flex: 1 1 auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; gap: 4px !important; } #booking-form-widget .top-support-banner .progress-step { flex: 0 0 auto !important; flex-direction: row !important; gap: 5px !important; padding-right: 14px !important; position: relative !important; } #booking-form-widget .top-support-banner .progress-step:not(:last-child)::after { content: "" !important; position: absolute !important; right: 3px !important; top: 50% !important; width: 6px !important; height: 6px !important; border-top: 1.5px solid #9cb5b0 !important; border-right: 1.5px solid #9cb5b0 !important; transform: translateY(-50%) rotate(45deg) !important; } #booking-form-widget .top-support-banner .step-label { font-size: 12.5px !important; } #booking-form-widget .top-support-banner .banner-btns { flex: 0 0 auto !important; gap: 8px !important; flex-wrap: nowrap !important; } #booking-form-widget .top-support-banner a.banner-btn { flex: 0 0 auto !important; max-width: none !important; min-height: 34px !important; padding: 4px 12px !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 20px !important; box-shadow: none !important; } #booking-form-widget .top-support-banner a.banner-btn-call { background: #ffffff !important; color: #0b3c36 !important; border: 1.5px solid #0b3c36 !important; } #booking-form-widget .top-support-banner a.banner-btn-call:hover { background: #0b3c36 !important; color: #ffffff !important; filter: none !important; } #booking-form-widget .top-support-banner a.banner-btn-wa { background: #ffffff !important; color: #128c4a !important; border: 1.5px solid #25d366 !important; } #booking-form-widget .top-support-banner a.banner-btn-wa:hover { background: #25d366 !important; color: #ffffff !important; filter: none !important; } @media (max-width: 760px) { #booking-form-widget .top-support-banner { flex-direction: column-reverse !important; align-items: stretch !important; gap: 8px !important; padding: 8px !important; } #booking-form-widget .top-support-banner .banner-btns { justify-content: center !important; } #booking-form-widget .top-support-banner a.banner-btn { flex: 1 1 0 !important; } #booking-form-widget .top-support-banner .progress-wrapper { justify-content: space-between !important; } #booking-form-widget .top-support-banner .progress-step { flex-direction: row !important; padding-right: 10px !important; gap: 4px !important; } #booking-form-widget .top-support-banner .step-label { font-size: 11px !important; } #booking-form-widget .top-support-banner .step-circle { width: 20px !important; height: 20px !important; font-size: 10.5px !important; } } @media (max-width: 380px) { #booking-form-widget .top-support-banner .progress-step:not(.active) .step-label { display: none !important; } } /* Corporate Class: aik line, poora box clickable, saaf "Select" button */ #booking-form-widget label.corp-card { display: flex !important; align-items: center !important; gap: 12px !important; margin: 6px 0 14px !important; padding: 12px 14px !important; cursor: pointer !important; border-radius: 12px !important; border: 1px solid #b8975a !important; background: linear-gradient(120deg, #16181d 0%, #262a31 100%) !important; box-shadow: 0 6px 18px rgba(0,0,0,.14) !important; font-weight: 400 !important; color: #f4ead6 !important; transition: box-shadow .2s, transform .15s !important; } #booking-form-widget label.corp-card:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(0,0,0,.2) !important; } #booking-form-widget label.corp-card.on { border-color: #e6c47f !important; box-shadow: 0 0 0 2px rgba(230,196,127,.45), 0 8px 22px rgba(0,0,0,.2) !important; } #booking-form-widget label.corp-card input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none !important; } #booking-form-widget .corp-ico { flex: 0 0 auto !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(230,196,127,.6) !important; color: #e6c47f !important; font-size: 15px !important; } #booking-form-widget .corp-txt { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } #booking-form-widget .corp-title { font-family: Georgia, 'Times New Roman', serif !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .6px !important; color: #f4ead6 !important; } #booking-form-widget .corp-sub { font-size: 12px !important; letter-spacing: .3px !important; color: #b9b4a8 !important; } #booking-form-widget .corp-btn { flex: 0 0 auto !important; padding: 7px 16px !important; border-radius: 20px !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .5px !important; text-transform: uppercase !important; border: 1.5px solid #e6c47f !important; color: #e6c47f !important; background: transparent !important; transition: background .15s, color .15s !important; } #booking-form-widget label.corp-card:hover .corp-btn { background: rgba(230,196,127,.12) !important; } #booking-form-widget label.corp-card.on .corp-btn { background: linear-gradient(135deg, #f0d08f, #b8975a) !important; color: #16181d !important; border-color: #e6c47f !important; } #booking-form-widget .corp-btn-on { display: none !important; } #booking-form-widget label.corp-card.on .corp-btn-on { display: inline !important; } #booking-form-widget label.corp-card.on .corp-btn-off { display: none !important; } #booking-form-widget label.corp-card input:focus-visible ~ .corp-btn { outline: 2px solid #e6c47f !important; outline-offset: 2px !important; } @media (max-width: 480px) { #booking-form-widget label.corp-card { flex-wrap: wrap !important; } #booking-form-widget .corp-txt { flex-basis: calc(100% - 52px) !important; } #booking-form-widget .corp-btn { width: 100% !important; text-align: center !important; } } /* Time picker: saaf, decent digital */ #booking-form-widget .lah-tp { width: 206px !important; padding: 12px !important; background: #ffffff !important; border: 1px solid #e3ebea !important; border-radius: 14px !important; box-shadow: 0 14px 30px rgba(11,60,54,.14) !important; } #booking-form-widget .lah-tp .lah-tp-arrow { width: 46px !important; height: 20px !important; background: transparent !important; color: #9cb5b0 !important; font-size: 10px !important; } #booking-form-widget .lah-tp .lah-tp-arrow:hover { color: #0b3c36 !important; background: #f2f7f6 !important; } #booking-form-widget .lah-tp-num { width: 46px !important; height: 42px !important; border-radius: 10px !important; background: #f6f9f8 !important; color: #0b3c36 !important; border: 1px solid #e3ebea !important; text-shadow: none !important; font-family: 'Orbitron', ui-monospace, monospace !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: .5px !important; } #booking-form-widget .lah-tp-colon { font-family: 'Orbitron', ui-monospace, monospace !important; font-size: 18px !important; color: #9cb5b0 !important; } #booking-form-widget .lah-tp-ampm { margin-left: 6px !important; gap: 0 !important; border: 1px solid #e3ebea !important; border-radius: 8px !important; overflow: hidden !important; } #booking-form-widget .lah-tp .lah-tp-ap { width: 40px !important; height: 25px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #6b7f7d !important; font-size: 11px !important; letter-spacing: .5px !important; } #booking-form-widget .lah-tp .lah-tp-ap.on { background: #0b3c36 !important; color: #fff !important; } #booking-form-widget .lah-tp .lah-tp-done { height: 32px !important; line-height: 32px !important; margin-top: 10px !important; border-radius: 8px !important; background: #0b3c36 !important; color: #fff !important; font-size: 13px !important; letter-spacing: .3px !important; } #booking-form-widget .lah-tp .lah-tp-done:hover { background: #1b4d4a !important; } #booking-form-widget #pickup_time, #booking-form-widget #return_pickup_time { font-variant-numeric: tabular-nums !important; letter-spacing: .3px !important; } /* ================= v4: time dropdowns, button colors, light corporate ================= */ #booking-form-widget input.lah-tsel-src { display: none !important; } #booking-form-widget .lah-tsel { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } #booking-form-widget .lah-tsel select { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 40px !important; padding: 0 26px 0 12px !important; cursor: pointer !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; -webkit-appearance: none !important; appearance: none !important; background-repeat: no-repeat !important; background-position: right 10px center !important; } #booking-form-widget .lah-tsel select.lah-tsel-h { background-color: #1B4D4A !important; color: #ffffff !important; border: 1px solid #1B4D4A !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") !important; } #booking-form-widget .lah-tsel select.lah-tsel-m { background-color: #F7A600 !important; color: #1B4D4A !important; border: 1px solid #F7A600 !important; flex: 0 0 84px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231B4D4A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") !important; } #booking-form-widget .lah-tsel select option { background: #ffffff !important; color: #1a202c !important; font-weight: 500 !important; } #booking-form-widget .lah-tsel select:focus { outline: 2px solid rgba(27,77,74,.35) !important; outline-offset: 1px !important; } #booking-form-widget .lah-tsel select.error-outline { outline: 2px solid #DC3545 !important; } #booking-form-widget .lah-tsel .error-text { flex-basis: 100% !important; } /* Call + WhatsApp */ #booking-form-widget .top-support-banner a.banner-btn-call { background: #1B4D4A !important; color: #ffffff !important; border: 1.5px solid #1B4D4A !important; } #booking-form-widget .top-support-banner a.banner-btn-call:hover { background: #0b3c36 !important; color: #ffffff !important; } #booking-form-widget .top-support-banner a.banner-btn-wa { background: #F7A600 !important; color: #1B4D4A !important; border: 1.5px solid #F7A600 !important; } #booking-form-widget .top-support-banner a.banner-btn-wa:hover { background: #ffb81f !important; color: #1B4D4A !important; } /* Corporate Class: light */ #booking-form-widget label.corp-card { background: linear-gradient(120deg, #fffaf0 0%, #f7efdd 100%) !important; border: 1px solid #d9b36c !important; box-shadow: 0 4px 14px rgba(184,151,90,.15) !important; color: #1a1a1a !important; } #booking-form-widget label.corp-card:hover { box-shadow: 0 8px 20px rgba(184,151,90,.25) !important; } #booking-form-widget label.corp-card.on { border-color: #b8975a !important; box-shadow: 0 0 0 2px rgba(184,151,90,.45), 0 6px 18px rgba(184,151,90,.2) !important; } #booking-form-widget .corp-ico { border-color: #d9b36c !important; color: #9a7633 !important; background: #ffffff !important; } #booking-form-widget .corp-title { color: #1a1a1a !important; } #booking-form-widget .corp-sub { color: #5b5750 !important; } #booking-form-widget .corp-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; border-color: #b8975a !important; color: #7a5a1e !important; background: #ffffff !important; } #booking-form-widget label.corp-card:hover .corp-btn { background: #fff6e3 !important; } #booking-form-widget .corp-box { width: 16px !important; height: 16px !important; border: 1.5px solid #b8975a !important; border-radius: 4px !important; background: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; } #booking-form-widget label.corp-card.on .corp-btn { background: linear-gradient(135deg, #e9c983, #b8975a) !important; color: #1a1a1a !important; border-color: #b8975a !important; } #booking-form-widget label.corp-card.on .corp-box { background: #1a1a1a !important; border-color: #1a1a1a !important; } #booking-form-widget label.corp-card.on .corp-box::after { content: "\2713" !important; color: #e9c983 !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; } @media (max-width: 480px) { #booking-form-widget .corp-btn { justify-content: center !important; } } /* ================= v5: aik time dropdown (saada), round trip sirf button ================= */ #booking-form-widget select.lah-tsel { display: block !important; width: 100% !important; height: 40px !important; padding: 0 30px 0 11px !important; cursor: pointer !important; background-color: #ffffff !important; color: #1a202c !important; border: 1px solid #cbd5e0 !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; font-variant-numeric: tabular-nums !important; -webkit-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5568' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; } #booking-form-widget select.lah-tsel:focus { border-color: #0b3c36 !important; outline: none !important; } #booking-form-widget select.lah-tsel.error-outline { border-color: #DC3545 !important; } #booking-form-widget .rt-nudge { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; justify-content: flex-end !important; } #booking-form-widget button.rt-nudge-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 8px 16px !important; border-radius: 20px !important; background: #fff8e6 !important; border: 1.5px solid #F7A600 !important; color: #1B4D4A !important; font-size: 13px !important; font-weight: 700 !important; } #booking-form-widget button.rt-nudge-btn i { color: #c88a00 !important; } #booking-form-widget button.rt-nudge-btn:hover { background: #F7A600 !important; color: #1B4D4A !important; } #booking-form-widget button.rt-nudge-btn:hover i { color: #1B4D4A !important; } @media (max-width: 480px) { #booking-form-widget button.rt-nudge-btn { width: 100% !important; justify-content: center !important; } } #booking-form-widget label.corp-card.on .corp-btn { background: #ffffff !important; color: #7a5a1e !important; } /* ================= v6: chaura form, kam height, round trip button ================= */ #booking-form-widget { width: 1060px !important; } #booking-form-widget .step-title-header { flex-wrap: wrap !important; } #booking-form-widget .step-title-header .rt-nudge { margin: 0 0 0 auto !important; } #booking-form-widget .trip-cols:not(.rt-on) .return-trip-box { display: none !important; } #booking-form-widget .trip-cols:not(.rt-on) { grid-template-columns: minmax(0, 1fr) !important; } #booking-form-widget .rt-overlay { display: none !important; } #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .trip-section-header { display: none !important; } #booking-form-widget .step1-nav { align-items: center !important; gap: 10px !important; } #booking-form-widget button.rt-step1-btn.on { background: #ffffff !important; border-color: #cbd5e0 !important; color: #6b7f7d !important; } #booking-form-widget button.rt-step1-btn.on i { color: #9cb5b0 !important; } /* Laptop, One Way: sab fields 2 lines mein */ @media (min-width: 900px) { #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 14px !important; align-items: start !important; } #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .trip-section-header { display: none !important; } #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row, #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row, #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .form-group { grid-column: span 2 !important; } #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row { grid-row: 1 !important; grid-column: 1 / span 2 !important; } #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row { grid-row: 1 !important; grid-column: 3 / span 2 !important; } #booking-form-widget .trip-cols.is-hourly:not(.rt-on) #going_trip_fields_container > #hourly_hours_group { grid-row: 2 !important; grid-column: 3 / span 2 !important; } #booking-form-widget .counter-group { max-width: none !important; } } /* ================= Logo (upar wali patti mein, left) ================= */ #booking-form-widget a.bf-logo { display: inline-flex !important; align-items: center !important; gap: 7px !important; flex: 0 0 auto !important; text-decoration: none !important; margin-right: 6px !important; padding-right: 14px !important; border-right: 1px solid #dfe9e6 !important; } #booking-form-widget a.bf-logo img { height: 26px !important; width: auto !important; max-width: none !important; display: block !important; margin: 0 !important; } #booking-form-widget a.bf-logo span { font-size: 18px !important; font-weight: 800 !important; color: #f7a600 !important; letter-spacing: -.3px !important; line-height: 1 !important; white-space: nowrap !important; } @media (max-width: 760px) { #booking-form-widget .top-support-banner { flex-direction: column !important; } #booking-form-widget a.bf-logo { order: 1 !important; align-self: center !important; border-right: 0 !important; margin: 0 !important; padding: 2px 0 0 !important; } #booking-form-widget .top-support-banner .banner-btns { order: 2 !important; } #booking-form-widget .top-support-banner .progress-wrapper { order: 3 !important; } #booking-form-widget a.bf-logo img { height: 24px !important; } #booking-form-widget a.bf-logo span { font-size: 17px !important; } } /* ================= v7: stops dropdown, behtar borders, mobile round trip button ================= */ #booking-form-widget #going_trip_fields_container, #booking-form-widget .return-trip-box { border: 1px solid #dfe9e6 !important; border-radius: 12px !important; padding: 14px 16px 6px !important; background: #fcfdfd !important; box-shadow: 0 1px 2px rgba(11,60,54,.04) !important; } #booking-form-widget .return-trip-box { border-color: #cfe0dc !important; } #booking-form-widget input, #booking-form-widget select, #booking-form-widget textarea { border-color: #cfdcd9 !important; background-color: #ffffff; transition: border-color .15s, box-shadow .15s !important; } #booking-form-widget input:hover, #booking-form-widget select:hover, #booking-form-widget textarea:hover { border-color: #9cb5b0 !important; } #booking-form-widget input:focus, #booking-form-widget select:focus, #booking-form-widget textarea:focus { border-color: #1B4D4A !important; box-shadow: 0 0 0 3px rgba(27,77,74,.12) !important; outline: none !important; } #booking-form-widget .counter-group { border-color: #cfdcd9 !important; border-radius: 8px !important; overflow: hidden !important; } #booking-form-widget .counter-btn { background: #f2f7f6 !important; color: #1B4D4A !important; font-weight: 700 !important; } #booking-form-widget button.svc-btn { border-width: 1.5px !important; } #booking-form-widget #step2 > div[style*="max-width"] , #booking-form-widget .p-info-grid, #booking-form-widget .p-info-grid-2 { } #booking-form-widget .vehicle-card { border-color: #dfe9e6 !important; box-shadow: 0 2px 8px rgba(11,60,54,.05) !important; } #booking-form-widget .vehicle-card:hover { border-color: #9cb5b0 !important; } #booking-form-widget .trip-cols.is-hourly .stop-note { display: none !important; } /* Stop rows */ #booking-form-widget .stop-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; padding: 8px !important; margin: 0 0 8px !important; border: 1px dashed #cfdcd9 !important; border-radius: 10px !important; background: #f8fbfa !important; } #booking-form-widget .stop-line { display: flex !important; gap: 6px !important; align-items: center !important; } #booking-form-widget .stop-line select { flex: 1 1 0 !important; min-width: 0 !important; height: 38px !important; padding: 0 28px 0 10px !important; font-size: 13.5px !important; cursor: pointer !important; } #booking-form-widget .stop-line select.stop-wait { flex: 0 0 158px !important; } #booking-form-widget button.remove-stop { flex: 0 0 auto !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e3c3c3 !important; border-radius: 50% !important; background: #fff !important; color: #b42318 !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; } #booking-form-widget button.remove-stop:hover { background: #fff1f1 !important; } #booking-form-widget .stop-row input.stop-addr { height: 38px !important; } #booking-form-widget .stop-note { margin-top: 6px !important; padding: 7px 10px !important; border-radius: 8px !important; background: #fff8e6 !important; border: 1px solid #f3d68f !important; color: #6b4e00 !important; font-size: 12.5px !important; line-height: 1.45 !important; } #booking-form-widget .stop-note i { color: #c88a00 !important; margin-right: 4px !important; } @media (max-width: 480px) { #booking-form-widget .stop-line { flex-wrap: wrap !important; } #booking-form-widget .stop-line select.stop-type { flex: 1 1 calc(100% - 40px) !important; } #booking-form-widget .stop-line select.stop-wait { flex: 1 1 100% !important; order: 3 !important; } } /* Mobile: "Choose Round Trip?" Continue ke UPAR */ @media (max-width: 768px) { #booking-form-widget .step1-nav { flex-direction: column !important; } #booking-form-widget .step1-nav .rt-step1-btn { width: 100% !important; justify-content: center !important; } } #booking-form-widget .v-stopnote { display: block !important; font-size: 10.5px !important; font-weight: 600 !important; color: #8a6400 !important; text-align: right !important; } #booking-form-widget .pay-breakdown { margin: -10px 0 16px !important; font-size: 12.5px !important; color: #6b7f7d !important; } /* ================= v8: dark header, chhota form, labels ki jagah placeholders, chhota time picker ================= */ #booking-form-widget { width: 900px !important; padding: 8px 12px 12px !important; } #booking-form-widget label.vh { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } #booking-form-widget .form-group { margin-bottom: 8px !important; position: relative !important; } #booking-form-widget input, #booking-form-widget select { height: 40px !important; } #booking-form-widget textarea { height: auto !important; min-height: 44px !important; } #booking-form-widget .dt-row, #booking-form-widget .trip-cols .return-trip-box > div[style*="display: flex"] { gap: 8px !important; } #booking-form-widget .pax-seat-row { gap: 8px !important; } #booking-form-widget #going_trip_fields_container, #booking-form-widget .return-trip-box { padding: 10px 12px 2px !important; } #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container { column-gap: 8px !important; } #booking-form-widget .service-type-group { margin-bottom: 8px !important; } #booking-form-widget button.svc-btn { min-height: 40px !important; padding: 6px 10px !important; } #booking-form-widget .nav-buttons-flex { margin-top: 10px !important; } #booking-form-widget .btn-next-custom, #booking-form-widget .btn-back-custom { padding: 10px 20px !important; } #booking-form-widget .action-link { margin-top: 2px !important; } #booking-form-widget #step2 > div[style*="max-width: 250px"] { margin-bottom: 10px !important; } #booking-form-widget .p-info-grid, #booking-form-widget .p-info-grid-2 { gap: 8px !important; } #booking-form-widget #step3 .form-group[style*="margin-top"] { margin-top: 0 !important; } #booking-form-widget .tip-section-card { padding: 12px !important; margin: 10px 0 !important; } /* Date: andar placeholder */ #booking-form-widget .date-wrap { position: relative !important; } #booking-form-widget .date-wrap .date-ph { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: #8a9a98 !important; font-size: 14px !important; pointer-events: none !important; } #booking-form-widget .date-wrap:not(.is-empty) .date-ph, #booking-form-widget .date-wrap:focus-within .date-ph { display: none !important; } #booking-form-widget .date-wrap.is-empty input:not(:focus) { color: transparent !important; } #booking-form-widget .date-wrap.is-empty input:not(:focus)::-webkit-datetime-edit { color: transparent !important; } /* Counters: label andar */ #booking-form-widget .counter-group.has-lbl { display: flex !important; align-items: center !important; width: 100% !important; max-width: none !important; height: 40px !important; background: #fff !important; } #booking-form-widget .counter-group .cg-lbl { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 6px 0 11px !important; font-size: 13px !important; font-weight: 600 !important; color: #6b7f7d !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #booking-form-widget .counter-group.has-lbl input { flex: 0 0 38px !important; width: 38px !important; padding: 0 !important; font-weight: 700 !important; } #booking-form-widget .counter-group.has-lbl .counter-btn { flex: 0 0 34px !important; width: 34px !important; height: 38px !important; padding: 0 !important; } /* Time: chhoti list */ #booking-form-widget #pickup_time, #booking-form-widget #return_pickup_time { cursor: pointer !important; caret-color: transparent !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7f7d' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat right 11px center !important; } #booking-form-widget .lah-tlist { display: none; position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; z-index: 9999 !important; width: 100% !important; min-width: 140px !important; max-width: 220px !important; max-height: 216px !important; overflow-y: auto !important; padding: 4px !important; background: #fff !important; border: 1px solid #cfdcd9 !important; border-radius: 10px !important; box-shadow: 0 12px 28px rgba(11,60,54,.16) !important; -webkit-overflow-scrolling: touch; } #booking-form-widget .lah-tlist.open { display: block !important; } #booking-form-widget .lah-tlist button { all: unset; display: block !important; box-sizing: border-box !important; width: 100% !important; padding: 7px 10px !important; border-radius: 6px !important; cursor: pointer !important; font-size: 14px !important; color: #1a202c !important; font-variant-numeric: tabular-nums !important; font-family: inherit !important; } #booking-form-widget .lah-tlist button:hover { background: #eef5f3 !important; } #booking-form-widget .lah-tlist button.on { background: #1B4D4A !important; color: #fff !important; font-weight: 700 !important; } /* Header: dark */ #booking-form-widget .top-support-banner { background: linear-gradient(120deg, #0b3c36 0%, #12463f 100%) !important; border: 0 !important; border-radius: 12px !important; padding: 8px 10px 8px 14px !important; margin-bottom: 8px !important; box-shadow: 0 4px 14px rgba(11,60,54,.18) !important; } #booking-form-widget a.bf-logo { border-right-color: rgba(255,255,255,.18) !important; } #booking-form-widget a.bf-logo img { background: #fff !important; border-radius: 6px !important; padding: 2px 3px !important; height: 26px !important; } #booking-form-widget a.bf-logo span { color: #F7A600 !important; } #booking-form-widget .top-support-banner .step-circle { background: transparent !important; border: 1.5px solid rgba(255,255,255,.45) !important; color: rgba(255,255,255,.85) !important; } #booking-form-widget .top-support-banner .step-label { color: rgba(255,255,255,.7) !important; } #booking-form-widget .top-support-banner .progress-step.active .step-circle { background: #F7A600 !important; border-color: #F7A600 !important; color: #0b3c36 !important; } #booking-form-widget .top-support-banner .progress-step.active .step-label { color: #ffffff !important; font-weight: 700 !important; } #booking-form-widget .top-support-banner .progress-step.completed .step-circle { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.55) !important; color: #ffffff !important; } #booking-form-widget .top-support-banner .progress-step:not(:last-child)::after { border-color: rgba(255,255,255,.4) !important; } #booking-form-widget .top-support-banner a.banner-btn-call { background: #1B4D4A !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.35) !important; } #booking-form-widget .top-support-banner a.banner-btn-call:hover { background: #24615c !important; } #booking-form-widget .top-support-banner a.banner-btn-wa { background: #F7A600 !important; color: #0b3c36 !important; border-color: #F7A600 !important; } #booking-form-widget .bb-short { display: none !important; } /* Mobile header: logo + 2 chhote buttons aik line, steps neeche */ @media (max-width: 760px) { #booking-form-widget { padding: 6px 8px 10px !important; } #booking-form-widget .top-support-banner { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 6px !important; padding: 8px 10px !important; } #booking-form-widget a.bf-logo { order: 1 !important; flex: 1 1 auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; } #booking-form-widget a.bf-logo img { height: 22px !important; } #booking-form-widget a.bf-logo span { font-size: 15px !important; } #booking-form-widget .top-support-banner .banner-btns { order: 2 !important; flex: 0 0 auto !important; gap: 6px !important; } #booking-form-widget .top-support-banner a.banner-btn { flex: 0 0 auto !important; min-height: 32px !important; padding: 4px 11px !important; font-size: 12.5px !important; gap: 5px !important; } #booking-form-widget .top-support-banner a.banner-btn svg { width: 14px !important; height: 14px !important; } #booking-form-widget .bb-full { display: none !important; } #booking-form-widget .bb-short { display: inline !important; } #booking-form-widget .top-support-banner .progress-wrapper { order: 3 !important; flex: 1 1 100% !important; justify-content: space-between !important; padding: 6px 0 0 !important; border-top: 1px solid rgba(255,255,255,.14) !important; } } @media (max-width: 380px) { #booking-form-widget a.bf-logo span { font-size: 13.5px !important; } #booking-form-widget .top-support-banner a.banner-btn { padding: 4px 9px !important; } } #booking-form-widget .top-support-banner .progress-wrapper { min-width: 0 !important; flex: 1 1 auto !important; } #booking-form-widget .top-support-banner .banner-btns { flex-shrink: 0 !important; } @media (min-width: 761px) and (max-width: 940px) { #booking-form-widget .top-support-banner .bb-full { display: none !important; } #booking-form-widget .top-support-banner .bb-short { display: inline !important; } } @media (max-width: 440px) { #booking-form-widget .pax-seat-row { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } } #booking-form-widget .counter-group.has-lbl input { flex: 0 0 30px !important; width: 30px !important; } #booking-form-widget .counter-group.has-lbl .counter-btn { flex: 0 0 28px !important; width: 28px !important; font-size: 15px !important; } #booking-form-widget .counter-group .cg-lbl { padding-left: 10px !important; font-size: 12.5px !important; } #booking-form-widget textarea { font-family: inherit !important; } /* ================= v9: green border ================= */ #booking-form-widget { border: 2px solid #1B4D4A !important; box-shadow: 0 6px 22px rgba(11,60,54,.12) !important; } #booking-form-widget #going_trip_fields_container, #booking-form-widget .return-trip-box, #booking-form-widget .tip-section-card, #booking-form-widget .summary-ticket { border: 1px solid #9cc3bb !important; } #booking-form-widget button.svc-btn { border-color: #9cc3bb !important; } #booking-form-widget button.svc-btn.active { border-color: #1B4D4A !important; } #booking-form-widget .stop-row { border-color: #9cc3bb !important; } #booking-form-widget .stop-line select.stop-wait { flex: 0 0 118px !important; } #booking-form-widget .stop-line select { padding: 0 24px 0 8px !important; font-size: 13px !important; } #booking-form-widget .top-support-banner .progress-wrapper { overflow: hidden !important; } @media (min-width: 761px) and (max-width: 1000px) { #booking-form-widget .top-support-banner .progress-step:not(.active) .step-label { display: none !important; } } /* ================= Trust boxes (form ke neeche) ================= */ #booking-form-widget .trust-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 14px 0 2px !important; } #booking-form-widget .trust-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 10px 8px !important; border-radius: 10px !important; background: #0b3c36 !important; text-align: center !important; min-height: 62px !important; } #booking-form-widget .trust-item b { font-size: 16px !important; font-weight: 800 !important; line-height: 1.2 !important; color: #F7A600 !important; } #booking-form-widget .trust-item span { font-size: 12px !important; line-height: 1.35 !important; color: rgba(255,255,255,.9) !important; } @media (max-width: 600px) { #booking-form-widget .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } #booking-form-widget .trust-item { padding: 8px 6px !important; min-height: 58px !important; } #booking-form-widget .trust-item b { font-size: 14px !important; } #booking-form-widget .trust-item span { font-size: 11px !important; } } /* Theme ke link/heading styles header ko kharab na karein */ #booking-form-widget a.bf-logo, #booking-form-widget a.bf-logo:hover, #booking-form-widget a.banner-btn, #booking-form-widget a.banner-btn:hover { text-decoration: none !important; box-shadow: none !important; outline: none; } #booking-form-widget .top-support-banner { line-height: 1.3 !important; } #booking-form-widget .top-support-banner .progress-wrapper, #booking-form-widget .top-support-banner .banner-btns { margin-top: 0 !important; margin-bottom: 0 !important; } /* ===== Header: lambe naam ke liye bhi ===== */ @media (min-width: 761px) { #booking-form-widget .top-support-banner .progress-step:not(.active) .step-label { display: none !important; } #booking-form-widget a.bf-logo span { font-size: 16px !important; } } @media (max-width: 760px) { #booking-form-widget a.bf-logo { flex: 1 1 100% !important; justify-content: center !important; } #booking-form-widget a.bf-logo span { font-size: 15px !important; } #booking-form-widget .top-support-banner .banner-btns { flex: 1 1 100% !important; } #booking-form-widget .top-support-banner a.banner-btn { flex: 1 1 0 !important; justify-content: center !important; } #booking-form-widget .top-support-banner .bb-full { display: inline !important; } #booking-form-widget .top-support-banner .bb-short { display: none !important; } } @media (max-width: 380px) { #booking-form-widget a.bf-logo span { font-size: 13px !important; } #booking-form-widget .top-support-banner .bb-full { display: none !important; } #booking-form-widget .top-support-banner .bb-short { display: inline !important; } } /* ===================== MULTI-TRIP + COMBOS + CUSTOM VEHICLES (v7) ===================== Rang har site ke widget mein: #booking-form-widget { --bf-main; --bf-tint; --bf-line; } */ #booking-form-widget { --bf-main: #0b3c36; --bf-tint: #eaf4f1; --bf-line: #d6e3e0; } #booking-form-widget .xt-section { margin: 4px 0 0 !important; } #booking-form-widget .xt-section.has-trips { margin: 12px 0 4px !important; } #booking-form-widget .xtrip { border: 1px solid var(--bf-line) !important; border-left: 4px solid var(--bf-main) !important; border-radius: 10px !important; padding: 10px 12px 4px !important; margin: 0 0 10px !important; background: #fafcfc !important; } #booking-form-widget .xt-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: 0 0 8px !important; } #booking-form-widget .xt-title { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } #booking-form-widget .xt-badge { background: var(--bf-main) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 20px !important; } #booking-form-widget .xt-sub { font-size: 12px !important; color: #6b7f7d !important; } #booking-form-widget button.xt-del { background: transparent !important; border: 1px solid #e3b4b4 !important; color: #b42318 !important; font-size: 12px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 6px !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; margin: 0 !important; } #booking-form-widget button.xt-del:hover { background: #fdecec !important; } #booking-form-widget .xt-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 10px !important; } #booking-form-widget .xt-grid .form-group { margin-bottom: 8px !important; } #booking-form-widget button.xt-add-btn { background: #fff !important; color: var(--bf-main) !important; border: 1px dashed var(--bf-main) !important; } #booking-form-widget button.xt-add-btn:hover { background: var(--bf-tint) !important; } #booking-form-widget .xt-vnote { background: var(--bf-tint) !important; color: var(--bf-main) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 13px !important; margin: 0 0 12px !important; } @media (max-width: 480px) { #booking-form-widget .xt-grid { grid-template-columns: 1fr !important; } #booking-form-widget .xt-sub { display: none !important; } #booking-form-widget button.xt-add-btn { width: 100% !important; justify-content: center !important; } } /* Combo cards */ #booking-form-widget .v-img-multi { display: flex !important; width: 100% !important; height: 100% !important; gap: 2px !important; } #booking-form-widget .v-img-multi .v-image { width: 50% !important; flex: 1 1 0 !important; min-width: 0 !important; } #booking-form-widget .v-best.v-combo { background: var(--bf-main) !important; color: #fff !important; } /* ===================== v8: TRIP TABS + MULTI-TRIP PER-TRIP VEHICLES ===================== */ #booking-form-widget .tt-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 12px !important; } #booking-form-widget button.tt-tab { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; padding: 8px 6px !important; margin: 0 !important; background: #fff !important; color: #2d3f3d !important; border: 1.5px solid var(--bf-line) !important; border-radius: 10px !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; min-height: 58px !important; line-height: 1.2 !important; } #booking-form-widget button.tt-tab .tt-ico { font-size: 16px !important; line-height: 1 !important; } #booking-form-widget button.tt-tab .tt-main { font-size: 14px !important; font-weight: 700 !important; } #booking-form-widget button.tt-tab .tt-sub { font-size: 11px !important; color: #6b7f7d !important; font-weight: 500 !important; } #booking-form-widget button.tt-tab:hover { border-color: var(--bf-main) !important; } #booking-form-widget button.tt-tab.active { background: var(--bf-main) !important; border-color: var(--bf-main) !important; color: #fff !important; } #booking-form-widget button.tt-tab.active .tt-sub { color: rgba(255,255,255,.8) !important; } #booking-form-widget .trip-cols.is-multi #return_trip_section { display: none !important; } #booking-form-widget .xt-cnt-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 10px !important; } #booking-form-widget .xt-cnt-row .form-group { margin-bottom: 8px !important; } #booking-form-widget .xt-cnt-row .counter-group { max-width: none !important; } #booking-form-widget button.xt-add-btn { margin: 2px 0 6px !important; } @media (max-width: 600px) { #booking-form-widget .xt-cnt-row { grid-template-columns: 1fr 1fr !important; } #booking-form-widget button.tt-tab .tt-sub { display: none !important; } #booking-form-widget button.tt-tab { min-height: 46px !important; } #booking-form-widget button.tt-tab .tt-main { font-size: 13px !important; } } /* Vehicle step: har trip ka accordion */ #booking-form-widget #mt_vehicle_sections { margin: 0 0 10px !important; } #booking-form-widget .mtv { border: 1px solid var(--bf-line) !important; border-radius: 10px !important; margin: 0 0 10px !important; background: #fff !important; overflow: hidden !important; } #booking-form-widget .mtv.open { border-color: var(--bf-main) !important; box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; } #booking-form-widget button.mtv-head { width: 100% !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 4px 12px !important; padding: 12px 14px !important; margin: 0 !important; background: var(--bf-tint) !important; color: #1f2d2b !important; border: 0 !important; border-radius: 0 !important; text-align: left !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; } #booking-form-widget .mtv.done button.mtv-head { background: #f7f9f9 !important; } #booking-form-widget .mtv-title { font-size: 15px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } #booking-form-widget .mtv-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--bf-main) !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; } #booking-form-widget .mtv.done .mtv-badge { background: #2e9e5b !important; } #booking-form-widget .mtv-route { font-size: 12.5px !important; color: #6b7f7d !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } #booking-form-widget .mtv-pick { font-size: 13px !important; color: var(--bf-main) !important; font-weight: 600 !important; white-space: nowrap !important; } #booking-form-widget .mtv-pick u { margin-left: 6px !important; font-weight: 700 !important; } #booking-form-widget .mtv-body { display: none !important; padding: 12px !important; } #booking-form-widget .mtv.open .mtv-body { display: block !important; } #booking-form-widget .mtv-cards { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; } #booking-form-widget .mtv-empty { padding: 10px !important; color: #b42318 !important; font-size: 14px !important; } #booking-form-widget .v-best.v-new { background: #2e9e5b !important; color: #fff !important; } @media (max-width: 700px) { #booking-form-widget button.mtv-head { grid-template-columns: 1fr !important; } #booking-form-widget .mtv-route { white-space: normal !important; } #booking-form-widget .mtv-pick { white-space: normal !important; } } #booking-form-widget .trip-cols.is-multi #going_trip_fields_container::before { content: "Trip 1"; grid-column: 1 / -1; order: -1; justify-self: start; display: inline-block; background: var(--bf-main); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin: 0 0 8px; } #booking-form-widget .step1-nav { justify-content: flex-end !important; } #booking-form-widget .lug-t1 { font-size: 13px !important; font-weight: 700 !important; color: var(--bf-main) !important; margin: 0 0 4px !important; } #booking-form-widget .trip-cols.is-multi #going_trip_fields_container::before { grid-row: 1 !important; } #booking-form-widget .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .dt-row, #booking-form-widget .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .pax-seat-row { grid-row: 2 !important; } /* ===================== NO-GOLD THEME: sirf site ka rang + white ===================== Widget par class="bf-nogold" ho to gold / peela rang kahin nahi */ #booking-form-widget.bf-nogold a.bf-logo span { color: #fff !important; } #booking-form-widget.bf-nogold .top-support-banner .progress-step.active .step-circle { background: #fff !important; border-color: #fff !important; color: var(--bf-main) !important; } #booking-form-widget.bf-nogold .top-support-banner .progress-step.completed .step-circle { background: rgba(255,255,255,.18) !important; border-color: #fff !important; color: #fff !important; } #booking-form-widget.bf-nogold .trust-item b { color: #fff !important; } #booking-form-widget.bf-nogold button.rt-nudge-btn { background: #fff !important; border: 1.5px solid var(--bf-main) !important; color: var(--bf-main) !important; } #booking-form-widget.bf-nogold button.rt-nudge-btn:hover { background: var(--bf-main) !important; color: #fff !important; } #booking-form-widget.bf-nogold .rt-nudge-text i, #booking-form-widget.bf-nogold button.svc-btn.active i, #booking-form-widget.bf-nogold .cat-bar-label::before { color: var(--bf-main) !important; } #booking-form-widget.bf-nogold .rt-nudge { background: #fff !important; border-color: var(--bf-line) !important; } #booking-form-widget.bf-nogold .v-best, #booking-form-widget.bf-nogold .svc-soon, #booking-form-widget.bf-nogold .cat-icon, #booking-form-widget.bf-nogold button.cat-card[data-cat="corporate"] .cat-go, #booking-form-widget.bf-nogold .rt-overlay:hover .rt-overlay-tag { background: var(--bf-main) !important; color: #fff !important; } #booking-form-widget.bf-nogold .lah-tp .lah-tp-ap.on, #booking-form-widget.bf-nogold .lah-tp .lah-tp-done, #booking-form-widget.bf-nogold .lah-tsel select.lah-tsel-m { background-color: var(--bf-main) !important; border-color: var(--bf-main) !important; color: #fff !important; } #booking-form-widget.bf-nogold .lah-tp .lah-tp-done:hover { filter: brightness(1.15) !important; } #booking-form-widget.bf-nogold label.rt-switch input:focus-visible + .rt-slider { outline-color: var(--bf-main) !important; } #booking-form-widget.bf-nogold .stop-note { background: var(--bf-tint) !important; border-color: var(--bf-line) !important; color: var(--bf-main) !important; } #booking-form-widget.bf-nogold .tip-btn.active { background: var(--bf-tint) !important; border-color: var(--bf-main) !important; } #booking-form-widget.bf-nogold .tip-btn.active .tip-percent, #booking-form-widget.bf-nogold .tip-btn.active .tip-label { color: var(--bf-main) !important; } /* Corporate Class card: site ka rang + white */ #booking-form-widget.bf-nogold label.corp-card { background: #fff !important; border: 1.5px solid var(--bf-line) !important; color: var(--bf-main) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } #booking-form-widget.bf-nogold label.corp-card.on { border-color: var(--bf-main) !important; background: var(--bf-tint) !important; box-shadow: 0 0 0 2px var(--bf-line) !important; } #booking-form-widget.bf-nogold .corp-ico { border-color: var(--bf-main) !important; color: var(--bf-main) !important; background: #fff !important; } #booking-form-widget.bf-nogold .corp-title { color: var(--bf-main) !important; } #booking-form-widget.bf-nogold .corp-sub { color: #5f6f6d !important; } #booking-form-widget.bf-nogold .corp-btn { border-color: var(--bf-main) !important; color: var(--bf-main) !important; background: #fff !important; } #booking-form-widget.bf-nogold label.corp-card:hover .corp-btn { background: var(--bf-tint) !important; } #booking-form-widget.bf-nogold label.corp-card.on .corp-btn { background: var(--bf-main) !important; color: #fff !important; border-color: var(--bf-main) !important; } #booking-form-widget.bf-nogold label.corp-card input:focus-visible ~ .corp-btn { outline-color: var(--bf-main) !important; } #booking-form-widget .v-price.v-quote { font-size: 15px !important; } #booking-form-widget.bf-nogold .corp-box { border-color: var(--bf-main) !important; } #booking-form-widget.bf-nogold label.corp-card.on .corp-box { border-color: #fff !important; background: #fff !important; } /* Multi-Trip: chhoti screen par kuch bhi bahar na nikle */ #booking-form-widget .form-side, #booking-form-widget .xt-section, #booking-form-widget #extra_trips, #booking-form-widget .xtrip { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } #booking-form-widget .xt-grid > *, #booking-form-widget .xt-cnt-row > *, #booking-form-widget .tt-tabs > * { min-width: 0 !important; } #booking-form-widget .xtrip .counter-group { width: 100% !important; max-width: none !important; min-width: 0 !important; } #booking-form-widget .xtrip .counter-group .cg-lbl { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } @media (max-width: 480px) { #booking-form-widget .xt-cnt-row { grid-template-columns: 1fr !important; } #booking-form-widget .xtrip { padding: 10px 10px 4px !important; } } /* ===================== CORPORATE ACCOUNT (data-corp="1") ===================== */ #booking-form-widget .corp-bar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px 6px !important; margin: 6px 0 8px !important; padding: 7px 12px !important; font-size: 13px !important; color: #3d4f4d !important; background: #f7f9f9 !important; border: 1px solid var(--bf-line) !important; border-radius: 8px !important; } #booking-form-widget.corp-on .corp-bar { background: var(--bf-tint) !important; border-color: var(--bf-main) !important; color: var(--bf-main) !important; } #booking-form-widget .corp-bar a, #booking-form-widget .corp-paynote a { color: var(--bf-main) !important; font-weight: 700 !important; text-decoration: underline !important; cursor: pointer !important; } #booking-form-widget .corp-bar .corp-out { margin-left: auto !important; } #booking-form-widget .corp-dim { color: #5f6f6d !important; font-weight: 500 !important; } #booking-form-widget .corp-line { font-size: 13px !important; color: #3d4f4d !important; margin: 0 0 10px !important; } #booking-form-widget .corp-bill { margin: 0 0 12px !important; padding: 12px 14px !important; border: 1.5px solid var(--bf-main) !important; border-radius: 10px !important; background: var(--bf-tint) !important; color: var(--bf-main) !important; font-size: 15px !important; line-height: 1.45 !important; } #booking-form-widget .corp-bill span { font-size: 13px !important; color: #3d4f4d !important; } #booking-form-widget.corp-on #corp_card { display: none !important; } #booking-form-widget .corp-fields { margin: 12px 0 4px !important; padding: 10px 12px 2px !important; border: 1px dashed var(--bf-line) !important; border-radius: 10px !important; } #booking-form-widget .corp-fields-h { font-size: 13px !important; font-weight: 800 !important; color: var(--bf-main) !important; margin: 0 0 8px !important; } #booking-form-widget .corp-fields-g { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 10px !important; } #booking-form-widget .corp-locs { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; margin: 8px 0 4px !important; } #booking-form-widget .corp-locs[style*="none"] { display: none !important; } #booking-form-widget .corp-locs-h { font-size: 12.5px !important; font-weight: 700 !important; color: var(--bf-main) !important; } #booking-form-widget button.corp-loc { padding: 5px 12px !important; margin: 0 !important; border: 1px solid var(--bf-main) !important; border-radius: 16px !important; background: #fff !important; color: var(--bf-main) !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; } #booking-form-widget button.corp-loc:hover { background: var(--bf-tint) !important; } #booking-form-widget .corp-modal { display: none !important; position: fixed !important; inset: 0 !important; z-index: 99999 !important; background: rgba(10,20,20,.55) !important; align-items: center !important; justify-content: center !important; padding: 16px !important; } #booking-form-widget .corp-modal.open { display: flex !important; } #booking-form-widget .corp-mbox { position: relative !important; width: 100% !important; max-width: 400px !important; background: #fff !important; border-radius: 14px !important; padding: 22px 22px 18px !important; box-shadow: 0 20px 50px rgba(0,0,0,.25) !important; } #booking-form-widget .corp-mbox h3 { margin: 0 0 6px !important; font-size: 19px !important; color: var(--bf-main) !important; } #booking-form-widget .corp-mbox p { margin: 0 0 12px !important; font-size: 13.5px !important; color: #3d4f4d !important; line-height: 1.45 !important; } #booking-form-widget .corp-mbox input.corp-in { width: 100% !important; height: 44px !important; margin: 0 0 10px !important; padding: 0 12px !important; font-size: 15px !important; border: 1.5px solid var(--bf-line) !important; border-radius: 9px !important; } #booking-form-widget .corp-mbox input.corp-code { letter-spacing: 8px !important; text-align: center !important; font-size: 20px !important; font-weight: 700 !important; } #booking-form-widget .corp-mbox button.corp-go { width: 100% !important; height: 44px !important; margin: 0 0 10px !important; border: 0 !important; border-radius: 9px !important; background: var(--bf-main) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; text-transform: none !important; box-shadow: none !important; } #booking-form-widget .corp-mbox button.corp-go:disabled { opacity: .6 !important; cursor: wait !important; } #booking-form-widget .corp-mbox button.corp-x { position: absolute !important; top: 8px !important; right: 10px !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #6b7f7d !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; } #booking-form-widget .corp-mbox .corp-small { font-size: 12.5px !important; margin: 0 !important; } #booking-form-widget .corp-mbox .corp-small a { color: var(--bf-main) !important; font-weight: 600 !important; } #booking-form-widget .corp-mbox .corp-rem { display: flex !important; gap: 8px !important; align-items: center !important; font-size: 13px !important; color: #3d4f4d !important; margin: 0 0 12px !important; font-weight: 500 !important; } #booking-form-widget .corp-err { color: #b42318 !important; font-size: 13px !important; font-weight: 600 !important; min-height: 0 !important; } @media (max-width: 600px) { #booking-form-widget .corp-fields-g { grid-template-columns: 1fr !important; } } #booking-form-widget .corp-bico { font-size: 15px !important; line-height: 1 !important; } #booking-form-widget .corp-mbox .corp-rem input { width: 16px !important; height: 16px !important; margin: 0 !important; flex: 0 0 16px !important; accent-color: var(--bf-main) !important; } @media (max-width: 600px) { #booking-form-widget .corp-bar .corp-out { margin-left: 0 !important; } } /* ===================================================================== v12 — 2 RANG (site ka rang + white), naye badges, child seat picker, accounts, mobile header Har site ke widget mein sirf yeh 4 rang (var) likhe hote hain: #booking-form-widget { --bf-main: ...; --bf-dark: ...; --bf-tint: ...; --bf-line: ...; } ===================================================================== */ #booking-form-widget { --bf-dark: #072a26; --bf-on: #ffffff; } #booking-form-widget.bf-2c { border: 2px solid var(--bf-main) !important; box-shadow: 0 6px 22px rgba(0,0,0,.08) !important; } /* Header: site ka rang, white likhai */ #booking-form-widget.bf-2c .top-support-banner { background: var(--bf-main) !important; box-shadow: none !important; } #booking-form-widget.bf-2c a.bf-logo { border-right-color: rgba(255,255,255,.25) !important; } #booking-form-widget.bf-2c a.bf-logo span { color: var(--bf-on) !important; } #booking-form-widget.bf-2c a.bf-logo img { background: #fff !important; } #booking-form-widget.bf-2c .top-support-banner .step-circle { background: transparent !important; border: 1.5px solid rgba(255,255,255,.55) !important; color: var(--bf-on) !important; } #booking-form-widget.bf-2c .top-support-banner .step-label { color: rgba(255,255,255,.8) !important; } #booking-form-widget.bf-2c .top-support-banner .progress-step.active .step-circle { background: #fff !important; border-color: #fff !important; color: var(--bf-main) !important; } #booking-form-widget.bf-2c .top-support-banner .progress-step.active .step-label { color: #fff !important; } #booking-form-widget.bf-2c .top-support-banner .progress-step.completed .step-circle { background: rgba(255,255,255,.18) !important; border-color: #fff !important; color: #fff !important; } #booking-form-widget.bf-2c .top-support-banner .progress-step:not(:last-child)::after { border-color: rgba(255,255,255,.5) !important; } #booking-form-widget.bf-2c .top-support-banner a.banner-btn-call { background: #fff !important; color: var(--bf-main) !important; border: 1.5px solid #fff !important; } #booking-form-widget.bf-2c .top-support-banner a.banner-btn-call:hover { background: var(--bf-tint) !important; color: var(--bf-main) !important; } #booking-form-widget.bf-2c .top-support-banner a.banner-btn-wa { display: none !important; } /* Buttons, khane, cards */ #booking-form-widget.bf-2c .btn-next-custom { background: var(--bf-main) !important; color: var(--bf-on) !important; } #booking-form-widget.bf-2c .btn-next-custom:hover:not(:disabled) { background: var(--bf-dark) !important; } #booking-form-widget.bf-2c .btn-next-custom:disabled { background: #a7b0b5 !important; color: #fff !important; } #booking-form-widget.bf-2c .action-link, #booking-form-widget.bf-2c .trip-section-header, #booking-form-widget.bf-2c h4.rt-head, #booking-form-widget.bf-2c .rt-switch-text, #booking-form-widget.bf-2c .cat-title, #booking-form-widget.bf-2c .capacity-note, #booking-form-widget.bf-2c .v-price, #booking-form-widget.bf-2c .amount-due span, #booking-form-widget.bf-2c .v-stopnote, #booking-form-widget.bf-2c .remove-stop { color: var(--bf-main) !important; } #booking-form-widget.bf-2c input:focus, #booking-form-widget.bf-2c select:focus, #booking-form-widget.bf-2c textarea:focus { border-color: var(--bf-main) !important; box-shadow: 0 0 0 3px var(--bf-tint) !important; } #booking-form-widget.bf-2c input:hover, #booking-form-widget.bf-2c select:hover, #booking-form-widget.bf-2c textarea:hover { border-color: var(--bf-line) !important; } #booking-form-widget.bf-2c #going_trip_fields_container, #booking-form-widget.bf-2c .return-trip-box, #booking-form-widget.bf-2c .tip-section-card, #booking-form-widget.bf-2c .summary-ticket, #booking-form-widget.bf-2c .stop-row, #booking-form-widget.bf-2c button.svc-btn, #booking-form-widget.bf-2c .tip-btn, #booking-form-widget.bf-2c .vehicle-card { border-color: var(--bf-line) !important; } #booking-form-widget.bf-2c button.svc-btn { color: var(--bf-main) !important; } #booking-form-widget.bf-2c button.svc-btn i { color: var(--bf-main) !important; } #booking-form-widget.bf-2c button.svc-btn.active { background: var(--bf-main) !important; border-color: var(--bf-main) !important; color: var(--bf-on) !important; } #booking-form-widget.bf-2c button.svc-btn.active i { color: var(--bf-on) !important; } #booking-form-widget.bf-2c .counter-btn { background: var(--bf-tint) !important; color: var(--bf-main) !important; } #booking-form-widget.bf-2c .step-badge { background: var(--bf-tint) !important; color: var(--bf-main) !important; } #booking-form-widget.bf-2c .vehicle-card:hover { border-color: var(--bf-main) !important; } #booking-form-widget.bf-2c .vehicle-card.selected { outline-color: var(--bf-main) !important; } #booking-form-widget.bf-2c .vehicle-card.selected .btn-select-v { background: var(--bf-main) !important; color: var(--bf-on) !important; border-color: var(--bf-main) !important; } #booking-form-widget.bf-2c .v-best, #booking-form-widget.bf-2c .v-best.v-new, #booking-form-widget.bf-2c .v-best.v-combo, #booking-form-widget.bf-2c .mtv.done .mtv-badge { background: var(--bf-main) !important; color: var(--bf-on) !important; } #booking-form-widget.bf-2c .tip-btn .tip-percent { color: var(--bf-main) !important; } #booking-form-widget.bf-2c .tip-btn.active { background: var(--bf-main) !important; border-color: var(--bf-main) !important; } #booking-form-widget.bf-2c .tip-btn.active .tip-percent, #booking-form-widget.bf-2c .tip-btn.active .tip-label { color: var(--bf-on) !important; } #booking-form-widget.bf-2c .ticket-total-bar { background: var(--bf-main) !important; color: var(--bf-on) !important; border-top: 0 !important; } #booking-form-widget.bf-2c label.rt-switch input:checked + .rt-slider { background: var(--bf-main) !important; } #booking-form-widget.bf-2c button.rt-nudge-btn, #booking-form-widget.bf-2c button.rt-step1-btn { background: #fff !important; border: 1.5px solid var(--bf-main) !important; color: var(--bf-main) !important; } #booking-form-widget.bf-2c button.rt-nudge-btn i, #booking-form-widget.bf-2c button.rt-step1-btn i { color: var(--bf-main) !important; } #booking-form-widget.bf-2c button.rt-nudge-btn:hover, #booking-form-widget.bf-2c button.rt-step1-btn:hover { background: var(--bf-main) !important; color: var(--bf-on) !important; } #booking-form-widget.bf-2c button.rt-nudge-btn:hover i, #booking-form-widget.bf-2c button.rt-step1-btn:hover i { color: var(--bf-on) !important; } #booking-form-widget.bf-2c .lah-tlist button:hover { background: var(--bf-tint) !important; } #booking-form-widget.bf-2c .lah-tlist button.on { background: var(--bf-main) !important; color: var(--bf-on) !important; } #booking-form-widget.bf-2c .stop-note { background: var(--bf-tint) !important; border-color: var(--bf-line) !important; color: var(--bf-main) !important; } #booking-form-widget.bf-2c .stop-note i, #booking-form-widget.bf-2c .rt-nudge-text i { color: var(--bf-main) !important; } #booking-form-widget.bf-2c .lah-tsel select.lah-tsel-h, #booking-form-widget.bf-2c .lah-tsel select.lah-tsel-m { background-color: var(--bf-main) !important; border-color: var(--bf-main) !important; color: var(--bf-on) !important; } #booking-form-widget.bf-2c .error-outline { border-color: #d92d20 !important; } /* ================= Badges (form ke neeche, 4) ================= */ #booking-form-widget .trust-grid.tg4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin: 16px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid #e6eaec !important; } #booking-form-widget .trust-grid.tg4 .trust-item { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; padding: 14px !important; min-height: 0 !important; background: #f7f9f9 !important; border: 1px solid #e3e8ea !important; border-radius: 12px !important; text-align: left !important; } #booking-form-widget .trust-grid.tg4 .ti-ico { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--bf-main) !important; font-size: 17px !important; } #booking-form-widget .trust-grid.tg4 .ti-txt { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } #booking-form-widget .trust-grid.tg4 .trust-item b { font-size: 14.5px !important; font-weight: 800 !important; line-height: 1.25 !important; color: #17222a !important; } #booking-form-widget .trust-grid.tg4 .trust-item .ti-txt > span { font-size: 12.5px !important; line-height: 1.35 !important; color: #5d6b70 !important; } #booking-form-widget .trust-policy { margin: 10px 2px 0 !important; font-size: 12.5px !important; line-height: 1.45 !important; color: #5d6b70 !important; text-align: center !important; } #booking-form-widget .trust-policy i { color: var(--bf-main) !important; margin-right: 4px !important; } #booking-form-widget .trust-policy b { color: #17222a !important; } @media (max-width: 860px) { #booking-form-widget .trust-grid.tg4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } } @media (max-width: 420px) { #booking-form-widget .trust-grid.tg4 .trust-item { padding: 10px !important; gap: 8px !important; } #booking-form-widget .trust-grid.tg4 .ti-ico { flex-basis: 32px !important; width: 32px !important; height: 32px !important; font-size: 14px !important; } #booking-form-widget .trust-grid.tg4 .trust-item b { font-size: 13px !important; } #booking-form-widget .trust-grid.tg4 .trust-item .ti-txt > span { font-size: 11.5px !important; } } /* ================= Child seat picker ================= */ #booking-form-widget .sp { position: relative !important; width: 100% !important; } #booking-form-widget .sp button.sp-btn { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; height: 40px !important; margin: 0 !important; padding: 0 12px !important; background: #fff !important; color: #4a5568 !important; border: 1px solid #cfdcd9 !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer !important; line-height: 1.2 !important; } #booking-form-widget.bf-2c .sp button.sp-btn { border-color: var(--bf-line) !important; } #booking-form-widget .sp button.sp-btn:hover, #booking-form-widget .sp.open button.sp-btn { border-color: var(--bf-main) !important; } #booking-form-widget .sp.has button.sp-btn { color: var(--bf-main) !important; background: var(--bf-tint) !important; border-color: var(--bf-main) !important; } #booking-form-widget .sp .sp-ico { color: var(--bf-main) !important; font-size: 14px !important; flex: 0 0 auto !important; } #booking-form-widget .sp .sp-val { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #booking-form-widget .sp .sp-car { font-size: 11px !important; flex: 0 0 auto !important; transition: transform .15s !important; color: var(--bf-main) !important; } #booking-form-widget .sp.open .sp-car { transform: rotate(180deg) !important; } #booking-form-widget .sp .sp-pop { display: none; position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; z-index: 9999 !important; width: 300px !important; max-width: calc(100vw - 32px) !important; background: #fff !important; border: 1px solid #e3e8ea !important; border-radius: 14px !important; box-shadow: 0 14px 34px rgba(0,0,0,.16) !important; padding: 14px 14px 12px !important; } #booking-form-widget .sp.sp-right .sp-pop { left: auto !important; right: 0 !important; } #booking-form-widget .sp.open .sp-pop { display: block !important; } #booking-form-widget .sp .sp-h { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .6px !important; text-transform: uppercase !important; color: var(--bf-main) !important; margin: 0 0 6px !important; } #booking-form-widget .sp .sp-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 10px 0 !important; border-bottom: 1px solid #eef1f2 !important; } #booking-form-widget .sp .sp-n { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } #booking-form-widget .sp .sp-n b { font-size: 14.5px !important; font-weight: 700 !important; color: #17222a !important; line-height: 1.25 !important; } #booking-form-widget .sp .sp-fee { font-size: 12.5px !important; font-weight: 600 !important; color: var(--bf-main) !important; } #booking-form-widget .sp .sp-c { display: flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; } #booking-form-widget .sp .sp-c button { width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; } #booking-form-widget .sp button.sp-p { background: var(--bf-main) !important; color: var(--bf-on) !important; border: 1px solid var(--bf-main) !important; } #booking-form-widget .sp button.sp-m { background: #fff !important; color: var(--bf-main) !important; border: 1px solid var(--bf-line) !important; } #booking-form-widget .sp .sp-c button:disabled { opacity: .35 !important; cursor: default !important; } #booking-form-widget .sp .sp-q { min-width: 16px !important; text-align: center !important; font-size: 16px !important; font-weight: 800 !important; color: #17222a !important; font-variant-numeric: tabular-nums !important; } #booking-form-widget .sp .sp-f { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding-top: 10px !important; } #booking-form-widget .sp .sp-tot { font-size: 12.5px !important; color: #5d6b70 !important; font-weight: 600 !important; } #booking-form-widget .sp button.sp-done { margin: 0 !important; padding: 8px 20px !important; border: 0 !important; border-radius: 20px !important; background: var(--bf-main) !important; color: var(--bf-on) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .4px !important; cursor: pointer !important; box-shadow: none !important; text-transform: uppercase !important; } /* ================= Accounts: header button, checkboxes, saved card, panel ================= */ #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.6) !important; gap: 6px !important; max-width: 180px !important; } #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct:hover { background: rgba(255,255,255,.14) !important; } #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct.on { background: rgba(255,255,255,.16) !important; border-color: #fff !important; } #booking-form-widget a.banner-btn-acct .acc-hb-txt { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } #booking-form-widget:not(.bf-2c) .top-support-banner a.banner-btn.banner-btn-acct { color: inherit !important; border-color: currentColor !important; } #booking-form-widget .acc-bar { margin: 0 0 8px !important; } #booking-form-widget .acc-bar a { color: var(--bf-main) !important; font-weight: 700 !important; text-decoration: underline !important; margin-left: auto !important; } #booking-form-widget.acc-on .acc-bar { background: var(--bf-tint) !important; border-color: var(--bf-line) !important; color: var(--bf-main) !important; } #booking-form-widget label.acc-check { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 10px 0 !important; padding: 10px 12px !important; border: 1px dashed var(--bf-line) !important; border-radius: 10px !important; background: #fff !important; cursor: pointer !important; font-weight: 400 !important; color: #2d3748 !important; } #booking-form-widget label.acc-check input { width: 18px !important; height: 18px !important; margin: 1px 0 0 !important; padding: 0 !important; flex: 0 0 18px !important; accent-color: var(--bf-main) !important; } #booking-form-widget label.acc-check span { display: flex !important; flex-direction: column !important; gap: 2px !important; } #booking-form-widget label.acc-check b { font-size: 13.5px !important; color: var(--bf-main) !important; } #booking-form-widget label.acc-check small { font-size: 12px !important; color: #5d6b70 !important; line-height: 1.4 !important; } #booking-form-widget .acc-pay { margin: 0 0 12px !important; padding: 10px 12px !important; border: 1.5px solid var(--bf-line) !important; border-radius: 10px !important; background: #fff !important; } #booking-form-widget .acc-pay-h { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .5px !important; text-transform: uppercase !important; color: var(--bf-main) !important; margin: 0 0 6px !important; } #booking-form-widget label.acc-opt { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 8px 4px !important; cursor: pointer !important; font-weight: 500 !important; font-size: 14px !important; color: #17222a !important; } #booking-form-widget label.acc-opt + label.acc-opt { border-top: 1px solid #eef1f2 !important; } #booking-form-widget label.acc-opt input { width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 18px !important; accent-color: var(--bf-main) !important; } #booking-form-widget label.acc-opt i { color: var(--bf-main) !important; margin-right: 4px !important; } #booking-form-widget label.acc-opt small { color: #5d6b70 !important; } #booking-form-widget .acc-modal .corp-mbox { max-width: 440px !important; max-height: calc(100vh - 32px) !important; overflow-y: auto !important; } #booking-form-widget .acc-modal .acc-dim { color: #5d6b70 !important; font-size: 13px !important; margin: 0 0 10px !important; } #booking-form-widget .acc-modal .acc-sec { border-top: 1px solid #eef1f2 !important; padding: 10px 0 4px !important; } #booking-form-widget .acc-modal .acc-sec-h { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .5px !important; text-transform: uppercase !important; color: var(--bf-main) !important; margin: 0 0 8px !important; } #booking-form-widget .acc-modal .acc-addrow { display: grid !important; grid-template-columns: 1fr 1.6fr auto !important; gap: 6px !important; align-items: start !important; } #booking-form-widget .acc-modal .acc-addrow input.corp-in { height: 40px !important; font-size: 13.5px !important; } #booking-form-widget .acc-modal button.acc-mini { margin: 0 !important; padding: 0 12px !important; height: 34px !important; border: 1px solid var(--bf-main) !important; border-radius: 8px !important; background: #fff !important; color: var(--bf-main) !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; white-space: nowrap !important; } #booking-form-widget .acc-modal .acc-addrow button.acc-mini { height: 40px !important; } #booking-form-widget .acc-modal button.acc-mini.acc-del { border-color: #e3b4b4 !important; color: #b42318 !important; } #booking-form-widget .acc-modal .acc-place, #booking-form-widget .acc-modal .acc-cardrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 6px 0 !important; font-size: 13.5px !important; color: #2d3748 !important; } #booking-form-widget .acc-modal .acc-place span { min-width: 0 !important; overflow-wrap: anywhere !important; } #booking-form-widget .acc-modal .acc-cardrow i { color: var(--bf-main) !important; margin-right: 4px !important; } #booking-form-widget .acc-modal .acc-bk { position: relative !important; padding: 8px 90px 8px 0 !important; border-bottom: 1px solid #f1f3f4 !important; font-size: 12.5px !important; color: #2d3748 !important; line-height: 1.45 !important; } #booking-form-widget .acc-modal .acc-bk span { color: #5d6b70 !important; } #booking-form-widget .acc-modal .acc-bk .acc-again { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; } #booking-form-widget button.corp-loc.is-recent { border-style: dashed !important; } @media (max-width: 480px) { #booking-form-widget .acc-modal .acc-addrow { grid-template-columns: 1fr !important; } } /* ================= Mobile header: logo + Sign in + Call aik line, steps neeche ================= */ @media (max-width: 760px) { #booking-form-widget.bf-2c .top-support-banner { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; } #booking-form-widget.bf-2c a.bf-logo { order: 1 !important; flex: 1 1 auto !important; justify-content: flex-start !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #booking-form-widget.bf-2c a.bf-logo img { height: 30px !important; } #booking-form-widget.bf-2c a.bf-logo span { font-size: 15px !important; overflow: hidden !important; text-overflow: ellipsis !important; } #booking-form-widget.bf-2c a.bf-logo span.nm-full { display: none !important; } #booking-form-widget.bf-2c a.bf-logo span.nm-short { display: inline !important; } #booking-form-widget.bf-2c .top-support-banner .banner-btns { order: 2 !important; flex: 0 0 auto !important; gap: 6px !important; flex-wrap: nowrap !important; } #booking-form-widget.bf-2c .top-support-banner a.banner-btn { flex: 0 0 auto !important; min-height: 34px !important; padding: 4px 12px !important; font-size: 13px !important; } #booking-form-widget.bf-2c .top-support-banner .bb-full { display: none !important; } #booking-form-widget.bf-2c .top-support-banner .bb-short { display: inline !important; } #booking-form-widget.bf-2c .top-support-banner a.banner-btn-acct { max-width: 112px !important; padding: 4px 10px !important; } #booking-form-widget.bf-2c .top-support-banner .progress-wrapper { order: 3 !important; flex: 1 1 100% !important; justify-content: space-between !important; padding: 6px 0 0 !important; border-top: 1px solid rgba(255,255,255,.18) !important; } } @media (max-width: 400px) { #booking-form-widget.bf-2c a.bf-logo span { display: none !important; } #booking-form-widget.bf-2c .top-support-banner a.banner-btn { padding: 4px 9px !important; font-size: 12.5px !important; } #booking-form-widget.bf-2c .top-support-banner a.banner-btn-acct { max-width: 92px !important; } } #booking-form-widget .acc-bar[style*="none"], #booking-form-widget label.acc-check[style*="none"], #booking-form-widget .acc-pay[style*="none"] { display: none !important; } #booking-form-widget .acc-bar:empty { display: none !important; } @media (min-width: 761px) { #booking-form-widget.bf-2c a.bf-logo span.nm-short { display: none !important; } } /* ===================================================================== v13 — PREMIUM LAYOUT (widget par class "bf-v13") Header: logo + title + buttons · steps neeche line ke saath · trip cards · labels upar · badge 3 Rang sirf site ke: --bf-main / --bf-dark / --bf-tint / --bf-line + white ===================================================================== */ #booking-form-widget.bf-v13 { font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; width: 1000px !important; max-width: 100% !important; padding: 14px 16px 16px !important; background: #ffffff !important; border: 1px solid #e9e7e2 !important; border-radius: 22px !important; box-shadow: 0 12px 40px rgba(16, 24, 40, .08) !important; color: #1d2433 !important; } #booking-form-widget.bf-v13 input, #booking-form-widget.bf-v13 select, #booking-form-widget.bf-v13 textarea, #booking-form-widget.bf-v13 button { font-family: inherit !important; } /* ---------- Header ---------- */ #booking-form-widget.bf-v13 .top-support-banner.bf-head { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 4px !important; padding: 12px 16px !important; border: 0 !important; border-radius: 16px !important; text-align: left !important; background: linear-gradient(120deg, var(--bf-dark) 0%, var(--bf-main) 100%) !important; box-shadow: 0 8px 22px rgba(16, 24, 40, .16) !important; } #booking-form-widget.bf-v13 a.bf-logo { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 1 auto !important; min-width: 0 !important; order: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; justify-content: flex-start !important; align-self: center !important; } #booking-form-widget.bf-v13 a.bf-logo img { height: 46px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; background: #fff !important; padding: 4px 6px !important; border-radius: 12px !important; box-shadow: 0 0 0 2px rgba(255,255,255,.35) !important; flex: 0 0 auto !important; } #booking-form-widget.bf-v13 a.bf-logo span.bf-title { display: block !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important; font-size: 23px !important; font-weight: 700 !important; letter-spacing: .2px !important; color: #fff !important; line-height: 1.2 !important; } #booking-form-widget.bf-v13 a.bf-logo span.bf-title span { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; } #booking-form-widget.bf-v13 a.bf-logo span.bf-title .nm-full { display: inline !important; } #booking-form-widget.bf-v13 a.bf-logo span.bf-title .nm-short { display: none !important; } #booking-form-widget.bf-v13 .top-support-banner .banner-btns { display: flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; gap: 8px !important; order: 0 !important; margin: 0 !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; height: 44px !important; padding: 0 18px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 700 !important; max-width: none !important; box-shadow: none !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn-call { background: #fff !important; color: var(--bf-main) !important; border: 1.5px solid #fff !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn-call:hover { background: var(--bf-tint) !important; color: var(--bf-dark) !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn.banner-btn-acct { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.55) !important; max-width: 200px !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn.banner-btn-acct:hover { background: rgba(255,255,255,.18) !important; } #booking-form-widget.bf-v13 .top-support-banner .bb-full { display: inline !important; } #booking-form-widget.bf-v13 .top-support-banner .bb-short { display: none !important; } /* ---------- Steps (header ke neeche) ---------- */ #booking-form-widget.bf-v13 > .progress-wrapper { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0 !important; max-width: none !important; margin: 8px 0 12px !important; padding: 10px 4% 2px !important; border: 0 !important; overflow: visible !important; position: relative !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; padding: 0 !important; position: relative !important; text-align: center !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step:not(:last-child)::after { content: "" !important; position: absolute !important; top: 16px !important; left: calc(50% + 24px) !important; right: calc(-50% + 24px) !important; width: auto !important; height: 2px !important; border: 0 !important; background: #e5e2dc !important; transform: none !important; border-radius: 2px !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step.completed:not(:last-child)::after { background: var(--bf-main) !important; } #booking-form-widget.bf-v13 > .progress-wrapper .step-circle { width: 34px !important; height: 34px !important; margin: 0 !important; border-radius: 50% !important; background: #fff !important; border: 2px solid #dedad3 !important; color: #8b919c !important; font-size: 14px !important; font-weight: 800 !important; box-shadow: 0 0 0 4px #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step.active .step-circle { background: linear-gradient(135deg, var(--bf-main) 0%, var(--bf-dark) 100%) !important; border-color: var(--bf-main) !important; color: #fff !important; box-shadow: 0 0 0 5px var(--bf-tint), 0 4px 12px rgba(16,24,40,.18) !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step.completed .step-circle { background: var(--bf-main) !important; border-color: var(--bf-main) !important; color: #fff !important; } #booking-form-widget.bf-v13 > .progress-wrapper .step-label { display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: #8b919c !important; white-space: nowrap !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step.active .step-label { color: #1d2433 !important; font-weight: 800 !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step.completed .step-label { color: var(--bf-main) !important; } /* ---------- Service type (Point to Point / Hourly) ---------- */ #booking-form-widget.bf-v13 .svc-btns { gap: 8px !important; } #booking-form-widget.bf-v13 button.svc-btn { min-height: 44px !important; border-radius: 12px !important; border: 1px solid var(--bf-line) !important; background: #fff !important; font-size: 14.5px !important; font-weight: 700 !important; } #booking-form-widget.bf-v13 button.svc-btn.active { background: var(--bf-main) !important; border-color: var(--bf-main) !important; color: #fff !important; } /* ---------- Trip type cards ---------- */ #booking-form-widget.bf-v13 .tt-tabs { background: var(--bf-tint) !important; padding: 8px !important; border-radius: 18px !important; gap: 10px !important; margin: 0 0 14px !important; } #booking-form-widget.bf-v13 button.tt-tab { position: relative !important; min-height: 78px !important; gap: 3px !important; border-radius: 14px !important; border: 1px solid var(--bf-line) !important; background: linear-gradient(180deg, #ffffff 0%, var(--bf-tint) 100%) !important; color: #1d2433 !important; box-shadow: 0 2px 6px rgba(16,24,40,.06) !important; overflow: visible !important; } #booking-form-widget.bf-v13 button.tt-tab:hover { border-color: var(--bf-main) !important; } #booking-form-widget.bf-v13 button.tt-tab .tt-ico { font-size: 17px !important; color: #1d2433 !important; } #booking-form-widget.bf-v13 button.tt-tab .tt-main { font-size: 16.5px !important; font-weight: 800 !important; } #booking-form-widget.bf-v13 button.tt-tab .tt-sub { font-size: 12.5px !important; color: #6b7280 !important; } #booking-form-widget.bf-v13 button.tt-tab.active { background: linear-gradient(135deg, var(--bf-dark) 0%, var(--bf-main) 100%) !important; border: 2px solid var(--bf-main) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(16,24,40,.2) !important; } #booking-form-widget.bf-v13 button.tt-tab.active .tt-ico, #booking-form-widget.bf-v13 button.tt-tab.active .tt-main { color: #fff !important; } #booking-form-widget.bf-v13 button.tt-tab.active .tt-sub { color: rgba(255,255,255,.82) !important; } #booking-form-widget.bf-v13 button.tt-tab.active::after { content: "\2713" !important; position: absolute !important; top: -9px !important; right: -9px !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: #fff !important; color: var(--bf-main) !important; border: 2px solid var(--bf-main) !important; font-size: 13px !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } /* ---------- Trip boxes ---------- */ #booking-form-widget.bf-v13 #going_trip_fields_container, #booking-form-widget.bf-v13 .return-trip-box, #booking-form-widget.bf-v13 .xtrip { background: #fcfcfa !important; border: 1px solid #ebe8e2 !important; border-radius: 18px !important; padding: 16px 18px 8px !important; box-shadow: none !important; } #booking-form-widget.bf-v13 .xtrip { border-left: 4px solid var(--bf-main) !important; } #booking-form-widget.bf-v13 .trip-section-header, #booking-form-widget.bf-v13 h4.rt-head { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 20px !important; font-weight: 700 !important; color: #1d2433 !important; } #booking-form-widget.bf-v13 h4.rt-head .rt-head-title { display: inline-flex !important; align-items: center !important; gap: 10px !important; } #booking-form-widget.bf-v13 .tsh-ico { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 9px !important; background: linear-gradient(135deg, var(--bf-main), var(--bf-dark)) !important; color: #fff !important; font-size: 13px !important; flex: 0 0 auto !important; } #booking-form-widget.bf-v13 .tsh-ico i { color: #fff !important; } #booking-form-widget.bf-v13 .trip-cols:not(.rt-on) #going_trip_fields_container > .trip-section-header { display: flex !important; } #booking-form-widget.bf-v13 .trip-cols.is-multi #going_trip_fields_container > .trip-section-header { display: none !important; } #booking-form-widget.bf-v13 .rt-switch-text { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; } /* Labels upar (placeholder ki jagah nahi — dono) */ #booking-form-widget.bf-v13 #step1 label.vh, #booking-form-widget.bf-v13 .xtrip label.vh { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: nowrap !important; display: block !important; margin: 0 0 6px !important; padding: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; color: #2b3340 !important; } #booking-form-widget.bf-v13 #step1 .form-group, #booking-form-widget.bf-v13 .xtrip .form-group { margin-bottom: 12px !important; } /* Khane */ #booking-form-widget.bf-v13 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), #booking-form-widget.bf-v13 select { height: 48px !important; border: 1px solid #e3e0da !important; border-radius: 12px !important; background-color: #fff; font-size: 15px !important; padding: 0 14px !important; color: #1d2433 !important; } #booking-form-widget.bf-v13 textarea { border: 1px solid #e3e0da !important; border-radius: 12px !important; padding: 12px 14px !important; font-size: 15px !important; } #booking-form-widget.bf-v13 input::placeholder, #booking-form-widget.bf-v13 textarea::placeholder { color: #9aa1ab !important; } #booking-form-widget.bf-v13 input:not([type="checkbox"]):not([type="radio"]):hover, #booking-form-widget.bf-v13 select:hover, #booking-form-widget.bf-v13 textarea:hover { border-color: var(--bf-line) !important; } #booking-form-widget.bf-v13 input:not([type="checkbox"]):not([type="radio"]):focus, #booking-form-widget.bf-v13 select:focus, #booking-form-widget.bf-v13 textarea:focus { border-color: var(--bf-main) !important; box-shadow: 0 0 0 3px var(--bf-tint) !important; } #booking-form-widget.bf-v13 .error-outline { border-color: #d92d20 !important; } #booking-form-widget.bf-v13 .date-wrap .date-ph { left: 14px !important; color: #9aa1ab !important; font-size: 15px !important; } /* Icons khanon ke andar */ #booking-form-widget.bf-v13 #pickup_addr, #booking-form-widget.bf-v13 #return_pickup_addr, #booking-form-widget.bf-v13 .xt-pickup { padding-left: 40px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") no-repeat 14px center !important; } #booking-form-widget.bf-v13 #dropoff_addr, #booking-form-widget.bf-v13 #return_dropoff_addr, #booking-form-widget.bf-v13 .xt-dropoff { padding-left: 40px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E") no-repeat 14px center !important; } #booking-form-widget.bf-v13 #pickup_time, #booking-form-widget.bf-v13 #return_pickup_time, #booking-form-widget.bf-v13 .xt-time { padding-left: 40px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat 14px center !important; cursor: pointer !important; } #booking-form-widget.bf-v13 .lah-tlist { top: calc(100% + 6px) !important; border-radius: 12px !important; } /* Counters: label upar, - [ginti] + */ #booking-form-widget.bf-v13 .counter-group.has-lbl { position: relative !important; overflow: visible !important; margin-top: 26px !important; height: 48px !important; width: 100% !important; max-width: none !important; border: 1px solid #e3e0da !important; border-radius: 12px !important; background: #fff !important; } #booking-form-widget.bf-v13 .counter-group.has-lbl .cg-lbl { position: absolute !important; top: -26px !important; left: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; color: #2b3340 !important; overflow: visible !important; white-space: nowrap !important; } #booking-form-widget.bf-v13 .counter-group.has-lbl .counter-btn { flex: 0 0 48px !important; width: 48px !important; height: 46px !important; padding: 0 !important; margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; background: var(--bf-tint) !important; color: var(--bf-main) !important; border: 0 !important; } #booking-form-widget.bf-v13 .counter-group.has-lbl .counter-btn:first-of-type { border-radius: 11px 0 0 11px !important; } #booking-form-widget.bf-v13 .counter-group.has-lbl .counter-btn:last-of-type { border-radius: 0 11px 11px 0 !important; } #booking-form-widget.bf-v13 .counter-group.has-lbl input[type="number"] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 46px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center !important; padding: 0 !important; font-size: 16px !important; font-weight: 700 !important; background: #fff !important; } #booking-form-widget.bf-v13 .pax-seat-row { gap: 12px !important; } /* Child seat (label upar + NONE dropdown) */ #booking-form-widget.bf-v13 .sp-lbl { display: block !important; margin: 0 0 6px !important; font-size: 13.5px !important; font-weight: 700 !important; color: #2b3340 !important; white-space: nowrap !important; } #booking-form-widget.bf-v13 .sp-lbl small { font-size: 12.5px !important; font-weight: 700 !important; color: var(--bf-main) !important; margin-left: 2px !important; } #booking-form-widget.bf-v13 .sp button.sp-btn { height: 48px !important; border-radius: 12px !important; border: 1px solid #e3e0da !important; padding: 0 14px !important; font-size: 15px !important; gap: 10px !important; background: #fff !important; } #booking-form-widget.bf-v13 .sp.has button.sp-btn { background: var(--bf-tint) !important; border-color: var(--bf-main) !important; } #booking-form-widget.bf-v13 .sp:not(.has) .sp-val { text-transform: uppercase !important; letter-spacing: 1.2px !important; color: #6b7280 !important; font-weight: 600 !important; } #booking-form-widget.bf-v13 .sp .sp-ico { font-size: 15px !important; } #booking-form-widget.bf-v13 .sp .sp-car { font-size: 12px !important; } #booking-form-widget.bf-v13 .sp .sp-pop { width: 320px !important; border-radius: 18px !important; padding: 18px 18px 14px !important; } #booking-form-widget.bf-v13 .sp .sp-h { color: var(--bf-main) !important; font-size: 13px !important; letter-spacing: .8px !important; margin: 0 0 8px !important; } #booking-form-widget.bf-v13 .sp .sp-row { padding: 12px 0 !important; } #booking-form-widget.bf-v13 .sp .sp-n b { font-size: 16px !important; } #booking-form-widget.bf-v13 .sp .sp-c button { width: 38px !important; height: 38px !important; } #booking-form-widget.bf-v13 .sp button.sp-p { background: linear-gradient(135deg, var(--bf-main), var(--bf-dark)) !important; } #booking-form-widget.bf-v13 .sp button.sp-done { background: var(--bf-dark) !important; padding: 10px 24px !important; } /* Laptop, One Way: heading upar, phir 4 khane, phir pickup / drop-off */ @media (min-width: 900px) { #booking-form-widget.bf-v13 .trip-cols:not(.rt-on) #going_trip_fields_container > .trip-section-header { grid-column: 1 / -1 !important; grid-row: 1 !important; } #booking-form-widget.bf-v13 .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row, #booking-form-widget.bf-v13 .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row { grid-row: 2 !important; } #booking-form-widget.bf-v13 .trip-cols.is-hourly:not(.rt-on) #going_trip_fields_container > #hourly_hours_group { grid-row: 3 !important; } #booking-form-widget.bf-v13 .trip-cols:not(.rt-on) #going_trip_fields_container { column-gap: 14px !important; } } /* ---------- Buttons ---------- */ #booking-form-widget.bf-v13 .btn-next-custom { min-height: 52px !important; padding: 0 28px !important; border-radius: 14px !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .5px !important; text-transform: uppercase !important; background: linear-gradient(135deg, var(--bf-main) 0%, var(--bf-dark) 100%) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 18px rgba(16,24,40,.16) !important; } #booking-form-widget.bf-v13 .btn-next-custom:hover:not(:disabled) { filter: brightness(1.08) !important; background: linear-gradient(135deg, var(--bf-main) 0%, var(--bf-dark) 100%) !important; } #booking-form-widget.bf-v13 .btn-next-custom:disabled { background: #b8bdc4 !important; box-shadow: none !important; } #booking-form-widget.bf-v13 .btn-back-custom { min-height: 52px !important; padding: 0 22px !important; border-radius: 14px !important; border: 1px solid #e3e0da !important; font-weight: 700 !important; } #booking-form-widget.bf-v13 button.rt-nudge-btn, #booking-form-widget.bf-v13 button.xt-add-btn { border-radius: 12px !important; min-height: 42px !important; } /* ---------- Steps 2-4 ---------- */ #booking-form-widget.bf-v13 .step-title-header { font-family: 'Playfair Display', Georgia, serif !important; font-size: 23px !important; font-weight: 700 !important; color: #1d2433 !important; } #booking-form-widget.bf-v13 .step-badge { font-family: 'Plus Jakarta Sans', sans-serif !important; border-radius: 999px !important; padding: 4px 12px !important; } #booking-form-widget.bf-v13 .vehicle-card { border-radius: 18px !important; border: 1px solid #ebe8e2 !important; } #booking-form-widget.bf-v13 .btn-select-v { border-radius: 12px !important; min-height: 42px !important; } #booking-form-widget.bf-v13 .tip-section-card, #booking-form-widget.bf-v13 .summary-ticket { border-radius: 18px !important; border: 1px solid #ebe8e2 !important; } #booking-form-widget.bf-v13 .summary-ticket { font-family: inherit !important; } #booking-form-widget.bf-v13 .tip-btn { border-radius: 12px !important; } #booking-form-widget.bf-v13 .ticket-total-bar { background: linear-gradient(120deg, var(--bf-dark), var(--bf-main)) !important; } #booking-form-widget.bf-v13 .clover-field { height: 48px !important; border-radius: 12px !important; border: 1px solid #e3e0da !important; } #booking-form-widget.bf-v13 #step3 label.vh, #booking-form-widget.bf-v13 #step4 label { font-size: 13.5px !important; font-weight: 700 !important; color: #2b3340 !important; } #booking-form-widget.bf-v13 label.corp-card { border-radius: 16px !important; } /* ---------- Secure + badges ---------- */ #booking-form-widget.bf-v13 .bf-secure { margin: 14px 0 0 !important; padding: 12px !important; border-top: 1px solid #efece6 !important; text-align: center !important; font-size: 14px !important; color: #4b5563 !important; } #booking-form-widget.bf-v13 .bf-secure i { color: var(--bf-main) !important; margin-right: 6px !important; } #booking-form-widget.bf-v13 .bf-secure b { color: #1d2433 !important; } #booking-form-widget .trust-grid.tg3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; } #booking-form-widget .trust-grid.tg3 .trust-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; padding: 16px 18px !important; min-height: 0 !important; background: #f6f8f7 !important; border: 1px solid #e6ebe9 !important; border-radius: 14px !important; text-align: left !important; } #booking-form-widget .trust-grid.tg3 .ti-ico { flex: 0 0 46px !important; width: 46px !important; height: 46px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 2px 8px rgba(16,24,40,.08) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--bf-main) !important; font-size: 19px !important; } #booking-form-widget .trust-grid.tg3 .ti-ico i { color: var(--bf-main) !important; } #booking-form-widget .trust-grid.tg3 .ti-txt { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; } #booking-form-widget .trust-grid.tg3 .trust-item b { font-size: 15.5px !important; font-weight: 800 !important; line-height: 1.25 !important; color: #17222a !important; } #booking-form-widget .trust-grid.tg3 .trust-item .ti-txt > span { font-size: 13px !important; line-height: 1.4 !important; color: #5d6b70 !important; } /* ---------- Mobile ---------- */ @media (max-width: 760px) { #booking-form-widget.bf-v13 { padding: 10px !important; border-radius: 18px !important; } #booking-form-widget.bf-v13 .top-support-banner.bf-head { padding: 10px 12px !important; gap: 8px !important; border-radius: 14px !important; } #booking-form-widget.bf-v13 a.bf-logo { gap: 8px !important; } #booking-form-widget.bf-v13 a.bf-logo img { height: 38px !important; max-width: 84px !important; border-radius: 10px !important; } #booking-form-widget.bf-v13 a.bf-logo span.bf-title { font-size: 17px !important; } #booking-form-widget.bf-v13 a.bf-logo span.bf-title .nm-full { display: none !important; } #booking-form-widget.bf-v13 a.bf-logo span.bf-title .nm-short { display: inline !important; } #booking-form-widget.bf-v13 .top-support-banner .banner-btns { gap: 6px !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn { height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 13.5px !important; gap: 6px !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn svg { width: 15px !important; height: 15px !important; } #booking-form-widget.bf-v13 .top-support-banner .bb-full { display: none !important; } #booking-form-widget.bf-v13 .top-support-banner .bb-short { display: inline !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn.banner-btn-acct { max-width: 104px !important; } #booking-form-widget.bf-v13 > .progress-wrapper { padding: 8px 0 0 !important; margin: 6px 0 10px !important; } #booking-form-widget.bf-v13 > .progress-wrapper .step-circle { width: 30px !important; height: 30px !important; font-size: 13px !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step:not(:last-child)::after { top: 14px !important; left: calc(50% + 21px) !important; right: calc(-50% + 21px) !important; } #booking-form-widget.bf-v13 > .progress-wrapper .step-label { font-size: 11.5px !important; } #booking-form-widget.bf-v13 .tt-tabs { padding: 6px !important; gap: 6px !important; border-radius: 14px !important; } #booking-form-widget.bf-v13 button.tt-tab { min-height: 62px !important; border-radius: 12px !important; } #booking-form-widget.bf-v13 button.tt-tab .tt-main { font-size: 14px !important; } #booking-form-widget.bf-v13 button.tt-tab.active::after { width: 22px !important; height: 22px !important; top: -7px !important; right: -6px !important; font-size: 11px !important; } #booking-form-widget.bf-v13 #going_trip_fields_container, #booking-form-widget.bf-v13 .return-trip-box, #booking-form-widget.bf-v13 .xtrip { padding: 14px 12px 6px !important; border-radius: 16px !important; } #booking-form-widget.bf-v13 .trip-section-header, #booking-form-widget.bf-v13 h4.rt-head { font-size: 18px !important; } #booking-form-widget.bf-v13 .step-title-header { font-size: 20px !important; } #booking-form-widget.bf-v13 .btn-next-custom { font-size: 14px !important; padding: 0 16px !important; } #booking-form-widget .trust-grid.tg3 { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } #booking-form-widget .trust-grid.tg3 .trust-item { padding: 12px 14px !important; } } @media (max-width: 420px) { #booking-form-widget.bf-v13 a.bf-logo span.bf-title { display: none !important; } #booking-form-widget.bf-v13 > .progress-wrapper .progress-step:not(.active) .step-label { display: none !important; } #booking-form-widget.bf-v13 .top-support-banner a.banner-btn { padding: 0 11px !important; } } #booking-form-widget.bf-v13 #pickup_time, #booking-form-widget.bf-v13 #return_pickup_time, #booking-form-widget.bf-v13 #hourly_hours, #booking-form-widget.bf-v13 input[type="date"] { height: 48px !important; } /* ================= LOGIN / SIGN UP (sab sites) ================= */ #booking-form-widget .acc-modal .acc-tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; padding: 4px !important; margin: 0 28px 14px 0 !important; background: #f3f4f4 !important; border-radius: 10px !important; } #booking-form-widget .acc-modal button.acc-tab { height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #5f6f6d !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; } #booking-form-widget .acc-modal button.acc-tab.on { background: #fff !important; color: var(--bf-main) !important; box-shadow: 0 1px 4px rgba(0,0,0,.12) !important; } #booking-form-widget .acc-modal .corp-err.acc-ok { color: #1f7a45 !important; } #booking-form-widget .acc-create { margin: 10px 0 !important; } #booking-form-widget .acc-create label.acc-check { margin: 0 !important; } #booking-form-widget .acc-create small a { color: var(--bf-main) !important; font-weight: 700 !important; text-decoration: underline !important; } #booking-form-widget .acc-create .acc-pass-row { margin: 8px 0 0 !important; max-width: 360px !important; } #booking-form-widget .acc-create[style*="none"], #booking-form-widget .acc-create .acc-pass-row[style*="none"] { display: none !important; } #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct .bb-short { display: none; } @media (max-width: 760px) { #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct .bb-full { display: none !important; } #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct .bb-short { display: inline !important; } } #booking-form-widget .acc-modal .acc-tabs[style*="none"] { display: none !important; } /* Purane (dark) headers par Login button: white */ #booking-form-widget:not(.bf-2c) .top-support-banner a.banner-btn.banner-btn-acct { background: transparent !important; color: #ffffff !important; border: 1.5px solid rgba(255,255,255,.55) !important; } #booking-form-widget:not(.bf-2c) .top-support-banner a.banner-btn.banner-btn-acct:hover { background: rgba(255,255,255,.14) !important; } #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct i { font-size: 12px !important; } #booking-form-widget .top-support-banner a.banner-btn.banner-btn-signup[style*="none"] { display: none !important; } #booking-form-widget .top-support-banner a.banner-btn.banner-btn-signup { background: #ffffff !important; color: var(--bf-main) !important; border-color: #ffffff !important; } /* ================= Login ke baad: recent trips, contact chhupa ================= */ #booking-form-widget.acc-hide-contact #step3 .p-info-grid { display: none !important; } #booking-form-widget .acc-who { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 8px !important; margin: 0 0 10px !important; padding: 9px 12px !important; border: 1px solid var(--bf-line) !important; border-radius: 10px !important; background: #fbfbfa !important; font-size: 13px !important; color: #2d3748 !important; } #booking-form-widget .acc-who[style*="none"] { display: none !important; } #booking-form-widget .acc-who i { color: var(--bf-main) !important; } #booking-form-widget .acc-who a { margin-left: auto !important; color: var(--bf-main) !important; font-weight: 700 !important; text-decoration: underline !important; } #booking-form-widget .acc-trips { margin: 0 0 12px !important; padding: 10px 12px !important; border: 1px solid var(--bf-line) !important; border-radius: 12px !important; background: #fff !important; } #booking-form-widget .acc-trips[style*="none"] { display: none !important; } #booking-form-widget .acc-trips-h { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 0 6px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .4px !important; text-transform: uppercase !important; color: #5f6f6d !important; } #booking-form-widget .acc-trips-h i { color: var(--bf-main) !important; margin-right: 4px !important; } #booking-form-widget .acc-trips-h a { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--bf-main) !important; text-decoration: underline !important; } #booking-form-widget .acc-trip { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 7px 0 !important; border-top: 1px solid #f0f2f2 !important; } #booking-form-widget .acc-trip-t { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; } #booking-form-widget .acc-trip-t b { font-size: 13px !important; font-weight: 600 !important; color: #1d2433 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #booking-form-widget .acc-trip-t span { font-size: 11.5px !important; color: #6b7280 !important; } #booking-form-widget button.acc-trip-go { flex: 0 0 auto !important; margin: 0 !important; padding: 6px 12px !important; border: 1px solid var(--bf-main) !important; border-radius: 999px !important; background: #fff !important; color: var(--bf-main) !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; white-space: nowrap !important; } #booking-form-widget button.acc-trip-go:hover { background: var(--bf-main) !important; color: #fff !important; } #booking-form-widget .acc-rebook-note { margin: 0 0 10px !important; padding: 8px 12px !important; border-radius: 10px !important; background: var(--bf-tint) !important; color: var(--bf-main) !important; font-size: 13px !important; } #booking-form-widget .acc-bar-links { margin-left: auto !important; } #booking-form-widget .acc-bar-links a { margin-left: 0 !important; } /* Luggage note (sab sites) */ #booking-form-widget .lug-note { display: flex !important; align-items: center !important; gap: 7px !important; margin: 6px 0 0 !important; padding: 0 0 0 2px !important; font-size: 12px !important; line-height: 1.35 !important; color: #6b7280 !important; font-weight: 500 !important; background: none !important; border: 0 !important; } #booking-form-widget .lug-note i { flex: 0 0 auto !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--bf-tint) !important; color: var(--bf-main) !important; font-size: 11px !important; } #booking-form-widget .lug-note { margin: -12px 0 16px !important; } #booking-form-widget:not(.bf-2c) .top-support-banner a.banner-btn.banner-btn-acct.banner-btn-signup { background: #ffffff !important; color: var(--bf-main) !important; border-color: #ffffff !important; } #booking-form-widget:not(.bf-2c) .top-support-banner a.banner-btn.banner-btn-acct.banner-btn-signup:hover { background: rgba(255,255,255,.88) !important; } /* ================= mobile par logo + buttons aik line ================= */ @media (max-width: 760px) { #booking-form-widget:not(.bf-2c) .top-support-banner { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 6px !important; } #booking-form-widget:not(.bf-2c) .top-support-banner a.bf-logo { order: 1 !important; flex: 1 1 auto !important; justify-content: flex-start !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #booking-form-widget:not(.bf-2c) .top-support-banner a.bf-logo span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #booking-form-widget:not(.bf-2c) .top-support-banner .banner-btns { order: 2 !important; flex: 0 0 auto !important; width: auto !important; gap: 6px !important; flex-wrap: nowrap !important; } #booking-form-widget:not(.bf-2c) .top-support-banner a.banner-btn { flex: 0 0 auto !important; min-height: 32px !important; height: 32px !important; padding: 0 11px !important; font-size: 12.5px !important; } #booking-form-widget:not(.bf-2c) .top-support-banner .bb-full { display: none !important; } #booking-form-widget:not(.bf-2c) .top-support-banner .bb-short { display: inline !important; } #booking-form-widget:not(.bf-2c) .top-support-banner .progress-wrapper { order: 3 !important; flex: 1 1 100% !important; } /* Log in / Sign up ho to Call sirf nishan (jagah bachane ke liye) */ #booking-form-widget.acc-ready:not(.bf-2c) .top-support-banner a.banner-btn-call { width: 32px !important; padding: 0 !important; justify-content: center !important; } #booking-form-widget.acc-ready:not(.bf-2c) .top-support-banner a.banner-btn-call span { display: none !important; } #booking-form-widget.acc-ready:not(.bf-2c) .top-support-banner a.banner-btn-acct i { display: none !important; } } /* ================= Badges: 3, halka BG (sab sites) ================= */ #booking-form-widget:not(.bf-v13) .trust-grid.tg3 { margin: 14px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid #e8ecec !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item b { color: #17322e !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .ti-ico, #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .ti-ico i { color: var(--bf-main) !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item:first-child { border-color: var(--bf-line) !important; } @media (max-width: 760px) { #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item { padding: 10px 12px !important; gap: 10px !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .ti-ico { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; font-size: 14px !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item b { font-size: 14px !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item .ti-txt > span { font-size: 12px !important; } } /* ===================================================================== v14: SAADA / AASAN FORM (sab sites) — Account menu, Luggage Step 1 mein, halke tabs aur badges ===================================================================== */ /* ---- Account: aik button + chhota menu ---- */ #booking-form-widget .top-support-banner a.banner-btn.banner-btn-acct .acc-hb-caret { font-size: 9px !important; opacity: .8 !important; margin-left: 1px !important; } .acc-menu { position: fixed !important; z-index: 2147483000 !important; width: 230px !important; padding: 6px !important; background: #fff !important; border: 1px solid #e3e8ea !important; border-radius: 12px !important; box-shadow: 0 14px 38px rgba(16,24,40,.18) !important; font-family: inherit !important; } .acc-menu button { display: flex !important; align-items: center !important; gap: 11px !important; width: 100% !important; margin: 0 !important; padding: 10px 11px !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; cursor: pointer !important; text-align: left !important; color: #17222a !important; font: inherit !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; text-transform: none !important; letter-spacing: 0 !important; } .acc-menu button:hover, .acc-menu button:focus-visible { background: #f2f5f6 !important; outline: none !important; } .acc-menu button i { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #eef3f4 !important; color: #2b3a40 !important; font-size: 13px !important; } .acc-menu button span { display: flex !important; flex-direction: column !important; line-height: 1.25 !important; } .acc-menu button b { font-size: 14px !important; font-weight: 700 !important; color: #17222a !important; } .acc-menu button small { font-size: 12px !important; color: #6b7780 !important; font-weight: 400 !important; } .acc-menu button + button { margin-top: 2px !important; } /* ---- Luggage: Step 1 mein Passengers ke saath ---- */ #booking-form-widget .lug-note.lug-note-s1 { margin: 2px 0 10px !important; font-size: 12px !important; } #booking-form-widget .lug-note.lug-note-s1 i { width: 20px !important; height: 20px !important; font-size: 10px !important; } /* Passengers | Luggage aik line, Child Seat neeche poori chaurai (laptop One Way par neeche wali 2-line layout) */ #booking-form-widget .pax-seat-row.has-lug { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #booking-form-widget .pax-seat-row.has-lug > .psr-seat { grid-column: 1 / -1 !important; } @media (max-width: 600px) { #booking-form-widget:not(.bf-v13) .pax-seat-row.has-lug > .psr-pax .counter-group .cg-lbl, #booking-form-widget:not(.bf-v13) .pax-seat-row.has-lug > .psr-lug .counter-group .cg-lbl { padding-left: 8px !important; font-size: 11.5px !important; letter-spacing: -.1px !important; text-overflow: clip !important; } #booking-form-widget:not(.bf-v13) .pax-seat-row.has-lug > .psr-pax .counter-btn, #booking-form-widget:not(.bf-v13) .pax-seat-row.has-lug > .psr-lug .counter-btn { flex: 0 0 26px !important; width: 26px !important; } #booking-form-widget:not(.bf-v13) .pax-seat-row.has-lug > .psr-pax input, #booking-form-widget:not(.bf-v13) .pax-seat-row.has-lug > .psr-lug input { flex: 0 0 24px !important; width: 24px !important; } #booking-form-widget:not(.bf-v13) button.svc-btn { font-size: 13px !important; padding: 0 6px !important; white-space: nowrap !important; } #booking-form-widget:not(.bf-v13) button.svc-btn i { display: none !important; } #booking-form-widget:not(.bf-v13) button.svc-btn span { white-space: nowrap !important; } /* Mobile par sirf "Hourly" (jagah kam hai) */ #booking-form-widget:not(.bf-v13) button.svc-btn .svc-sub { display: none !important; } #booking-form-widget:not(.bf-v13) button.svc-btn .svc-main { font-size: 0 !important; } #booking-form-widget:not(.bf-v13) button.svc-btn .svc-main::before { content: "Hourly"; font-size: 13px !important; } } @media (max-width: 385px) { #booking-form-widget:not(.bf-v13) .pax-seat-row.has-lug { grid-template-columns: minmax(0, 1fr) !important; } } /* laptop, One Way / Multi / Hourly: 2 saaf lines 1) Date | Time | Passengers | Luggage 2) Pick-up | Drop-off (ya Hours) | Child Seat */ @media (min-width: 900px) { #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container { grid-template-columns: repeat(24, minmax(0, 1fr)) !important; column-gap: 12px !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row, #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug { display: contents !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row > .form-group:nth-child(1) { grid-row: 1 !important; grid-column: 1 / span 6 !important; margin-bottom: 10px !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row > .form-group:nth-child(2) { grid-row: 1 !important; grid-column: 7 / span 6 !important; margin-bottom: 10px !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .psr-pax { grid-row: 1 !important; grid-column: 13 / span 6 !important; margin-bottom: 10px !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .psr-lug { grid-row: 1 !important; grid-column: 19 / span 6 !important; margin-bottom: 10px !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .grp-pickup { grid-row: 2 !important; grid-column: 1 / span 9 !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > #dropoff_group, #booking-form-widget:not(.bf-v13) .trip-cols.is-hourly:not(.rt-on) #going_trip_fields_container > #hourly_hours_group { grid-row: 2 !important; grid-column: 10 / span 9 !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .psr-seat { grid-row: 2 !important; grid-column: 19 / span 6 !important; } #booking-form-widget:not(.bf-v13) .trip-cols:not(.rt-on) #going_trip_fields_container > .lug-note { grid-row: 3 !important; grid-column: 1 / -1 !important; } /* Multi-Trip: upar "Trip 1" ki line, baqi aik line neeche */ #booking-form-widget:not(.bf-v13) .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .dt-row > .form-group, #booking-form-widget:not(.bf-v13) .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .psr-pax, #booking-form-widget:not(.bf-v13) .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .psr-lug { grid-row: 2 !important; } #booking-form-widget:not(.bf-v13) .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .grp-pickup, #booking-form-widget:not(.bf-v13) .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > #dropoff_group, #booking-form-widget:not(.bf-v13) .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .psr-seat { grid-row: 3 !important; } #booking-form-widget:not(.bf-v13) .trip-cols.is-multi:not(.rt-on) #going_trip_fields_container > .lug-note { grid-row: 4 !important; } } /* ---- Purani sites: halke, kam bhare hue tabs ---- */ #booking-form-widget:not(.bf-v13) .service-type-group { margin-bottom: 10px !important; } #booking-form-widget:not(.bf-v13) button.svc-btn { min-height: 40px !important; height: 40px !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 10px !important; } #booking-form-widget:not(.bf-v13) .tt-tabs { gap: 4px !important; padding: 4px !important; margin: 0 0 14px !important; background: #f1f4f5 !important; border-radius: 12px !important; } #booking-form-widget:not(.bf-v13) button.tt-tab { flex-direction: row !important; min-height: 38px !important; height: 38px !important; padding: 0 8px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; color: #46565b !important; } #booking-form-widget:not(.bf-v13) button.tt-tab .tt-ico, #booking-form-widget:not(.bf-v13) button.tt-tab .tt-sub { display: none !important; } #booking-form-widget:not(.bf-v13) button.tt-tab .tt-main { font-size: 14px !important; font-weight: 600 !important; } #booking-form-widget:not(.bf-v13) button.tt-tab:hover { background: rgba(255,255,255,.7) !important; } #booking-form-widget:not(.bf-v13) button.tt-tab.active { background: var(--bf-main) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(16,24,40,.15) !important; } #booking-form-widget:not(.bf-v13) button.tt-tab.active .tt-main { font-weight: 700 !important; } /* Step ka "Step 2 / 3 / 4" label — upar steps pehle se dikhte hain */ #booking-form-widget .step-title-header .step-badge { display: none !important; } /* ---- Badges: chhote aur halke (form par bojh kam) ---- */ #booking-form-widget:not(.bf-v13) .trust-grid.tg3 { gap: 10px !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item { padding: 10px 12px !important; gap: 10px !important; border-radius: 12px !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .ti-ico { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; font-size: 14px !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item b { font-size: 14px !important; } #booking-form-widget:not(.bf-v13) .trust-grid.tg3 .trust-item .ti-txt > span { font-size: 12px !important; line-height: 1.35 !important; } /* ---- bf-gr: laptop par Luggage ke liye jagah — Date | Time | Passengers | Luggage | Child Seat | Stop ---- */ @media (min-width: 900px) { body #booking-form-widget.bf-v13.bf-gr .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row > .form-group:nth-child(1) { grid-row: 2 !important; grid-column: 1 / span 4 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols:not(.rt-on) #going_trip_fields_container > .dt-row > .form-group:nth-child(2) { grid-row: 2 !important; grid-column: 5 / span 4 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .form-group.psr-pax { grid-row: 2 !important; grid-column: 9 / span 4 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .form-group.psr-lug { grid-row: 2 !important; grid-column: 13 / span 4 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .form-group.psr-seat { grid-row: 2 !important; grid-column: 17 / span 4 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols:not(.rt-on) #going_trip_fields_container > #stop_picker_going { grid-row: 2 !important; grid-column: 21 / span 4 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols.is-hourly:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .form-group.psr-lug { grid-column: 13 / span 4 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols.is-hourly:not(.rt-on) #going_trip_fields_container > .pax-seat-row.has-lug > .form-group.psr-seat { grid-column: 17 / span 8 !important; } body #booking-form-widget.bf-v13.bf-gr .trip-cols:not(.rt-on) #going_trip_fields_container > .lug-note { grid-row: 5 !important; grid-column: 1 / -1 !important; margin: 0 0 8px !important; } } body #booking-form-widget.bf-v13.bf-gr .trip-cols .pax-seat-row.has-lug { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Purani sites, mobile: Trip 2, 3… bhi Trip 1 jaisi — Date | Time, Passengers | Luggage, Child Seat neeche */ @media (min-width: 386px) and (max-width: 600px) { #booking-form-widget:not(.bf-v13) .xtrip .xt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #booking-form-widget:not(.bf-v13) .xtrip .xt-grid > .form-group:nth-child(3), #booking-form-widget:not(.bf-v13) .xtrip .xt-grid > .form-group:nth-child(4) { grid-column: 1 / -1 !important; } #booking-form-widget:not(.bf-v13) .xtrip .xt-cnt-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #booking-form-widget:not(.bf-v13) .xtrip .xt-cnt-row > .form-group:nth-child(3) { grid-column: 1 / -1 !important; } #booking-form-widget:not(.bf-v13) .xtrip .xt-cnt-row > .form-group:nth-child(-n+2) .cg-lbl { padding-left: 8px !important; font-size: 11.5px !important; letter-spacing: -.1px !important; text-overflow: clip !important; } #booking-form-widget:not(.bf-v13) .xtrip .xt-cnt-row > .form-group:nth-child(-n+2) .counter-btn { flex: 0 0 26px !important; width: 26px !important; } #booking-form-widget:not(.bf-v13) .xtrip .xt-cnt-row > .form-group:nth-child(-n+2) input { flex: 0 0 24px !important; width: 24px !important; } } /* ===================================================================== v15: Child seat dropdown (sab sites), stop note, Add Another Trip sirf Multi-Trip mein ===================================================================== */ /* "Add Another Trip" — One Way / Round Trip mein kabhi na dikhe */ #booking-form-widget button.xt-add-btn[style*="none"] { display: none !important; } /* Stops ke neeche note */ #booking-form-widget .stop-wait-note { display: flex !important; align-items: flex-start !important; gap: 7px !important; margin: 4px 0 8px !important; padding: 0 2px !important; font-size: 12px !important; line-height: 1.4 !important; color: #5d6b70 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } #booking-form-widget .stop-wait-note[style*="none"] { display: none !important; } #booking-form-widget .stop-wait-note i { flex: 0 0 auto !important; margin-top: 2px !important; font-size: 11px !important; color: var(--bf-main) !important; } #booking-form-widget .trip-cols.is-hourly #stop_wait_note_going { display: none !important; } /* Purani sites: child seat dropdown, baqi khanon jaisa (label andar) */ #booking-form-widget:not(.bf-v13) .sp-lbl { display: none !important; } #booking-form-widget:not(.bf-v13) .sp button.sp-btn { height: 40px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 13px !important; color: #4a5568 !important; } #booking-form-widget:not(.bf-v13) .sp:not(.has) .sp-val { color: #6b7f7d !important; } #booking-form-widget:not(.bf-v13) .sp.has button.sp-btn { color: var(--bf-main) !important; } #booking-form-widget:not(.bf-v13) .xtrip .sp button.sp-btn, #booking-form-widget:not(.bf-v13) .return-trip-box .sp button.sp-btn { height: 40px !important; } @keyframes lahSheet { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (max-width: 760px) { #booking-form-widget:not(.bf-v13) .sp.open::before { content: "" !important; position: fixed !important; inset: 0 !important; background: rgba(10,20,20,.45) !important; z-index: 99998 !important; } #booking-form-widget:not(.bf-v13) .sp.open .sp-pop { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: none !important; border-radius: 18px 18px 0 0 !important; border: 0 !important; padding: 10px 18px calc(14px + env(safe-area-inset-bottom)) !important; z-index: 99999 !important; box-shadow: 0 -10px 30px rgba(0,0,0,.18) !important; animation: lahSheet .22s ease-out !important; max-height: 80vh !important; overflow-y: auto !important; } #booking-form-widget:not(.bf-v13) .sp.open .sp-pop::before { content: "" !important; display: block !important; width: 36px !important; height: 4px !important; border-radius: 4px !important; background: #d5dfdd !important; margin: 0 auto 12px !important; } #booking-form-widget:not(.bf-v13) .sp .sp-row { padding: 12px 0 !important; } } /* ===================================================================== v16: Luggage note khane ke neeche, Stops popup (sab sites), stop par time, logo naam ===================================================================== */ #booking-form-widget .psr-lug .lug-note.lug-note-s1 { margin: 5px 0 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; align-items: flex-start !important; gap: 6px !important; } #booking-form-widget .psr-lug .lug-note.lug-note-s1 i { width: 18px !important; height: 18px !important; font-size: 9px !important; flex: 0 0 18px !important; margin-top: -1px !important; } /* Stops: purana "+ Add Stop" link band, us ki jagah popup */ #booking-form-widget .stp-link-off { display: none !important; } #booking-form-widget .stp-old { margin: 8px 0 8px !important; } #booking-form-widget .trip-cols.is-hourly #stop_picker_going { display: none !important; } #booking-form-widget:not(.bf-v13) .stp-old .sp:not(.has) .sp-val { color: var(--bf-main) !important; font-weight: 700 !important; } #booking-form-widget:not(.bf-v13) .stp-old .sp:not(.has) .sp-ico::before { content: "\2b" !important; font-weight: 900 !important; } #booking-form-widget:not(.bf-v13) .stp-old .sp button.sp-btn { border-style: dashed !important; border-color: var(--bf-line, #cfdcd9) !important; background: #fff !important; } #booking-form-widget:not(.bf-v13) .stp-old .sp.has button.sp-btn { border-style: solid !important; background: var(--bf-tint) !important; border-color: var(--bf-main) !important; } /* Stop par kitni der: "Time at stop" */ #booking-form-widget .stop-row .stop-wait-lbl { font-size: 11.5px !important; font-weight: 700 !important; color: #5d6b70 !important; white-space: nowrap !important; margin: 0 0 0 4px !important; align-self: center !important; text-transform: none !important; letter-spacing: 0 !important; } #booking-form-widget .stop-row .stop-wait-lbl[style*="none"] { display: none !important; } /* Logo: laptop par poora naam, mobile par chhota — kabhi khaali nahi */ /* Header mein har screen par sirf chhota code — poora naam kabhi nahi */ body #booking-form-widget:not(.bf-v13) .top-support-banner a.bf-logo > span { display: inline-block !important; min-width: 0 !important; } body #booking-form-widget:not(.bf-v13) a.bf-logo span.nm-full { display: none !important; } body #booking-form-widget:not(.bf-v13) a.bf-logo span.nm-short { display: inline !important; } @media (max-width: 760px) { body #booking-form-widget:not(.bf-v13) .top-support-banner a.bf-logo > span { display: inline-block !important; min-width: 0 !important; } body #booking-form-widget:not(.bf-v13) .top-support-banner a.bf-logo span.nm-full { display: none !important; } body #booking-form-widget:not(.bf-v13) .top-support-banner a.bf-logo span.nm-short { display: inline !important; font-size: 17px !important; } } /* Purani sites: stop ki line — upar stop, neeche "Time at stop" */ #booking-form-widget:not(.bf-v13) .stop-line { flex-wrap: wrap !important; row-gap: 6px !important; } #booking-form-widget:not(.bf-v13) .stop-line select.stop-type { flex: 1 1 calc(100% - 44px) !important; order: 1 !important; } #booking-form-widget:not(.bf-v13) .stop-line .remove-stop { order: 2 !important; } #booking-form-widget:not(.bf-v13) .stop-line .stop-wait-lbl { order: 3 !important; flex: 0 0 auto !important; margin: 0 4px 0 2px !important; } #booking-form-widget:not(.bf-v13) .stop-line select.stop-wait { order: 4 !important; flex: 1 1 0 !important; min-width: 0 !important; } /* bf-gr: "Time at stop" → time → ✕ (aik tarteeb mein) */ #booking-form-widget.bf-v13 .stop-line .stop-wait-lbl { order: 7 !important; } #booking-form-widget.bf-v13 .stop-line select.stop-wait { order: 8 !important; } #booking-form-widget.bf-v13 .stop-line .remove-stop { order: 9 !important; } /* Time at stop ke option mein qeemat bhi — chhoti screen par jagah */ @media (max-width: 420px) { #booking-form-widget .stop-line select.stop-wait { font-size: 12.5px !important; padding-left: 8px !important; padding-right: 20px !important; } body #booking-form-widget.bf-v13 .stop-line select.stop-wait, body #booking-form-widget.bf-v13.bf-gr .stop-line select.stop-wait { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } #booking-form-widget.bf-v13 .stop-line .remove-stop { flex: 0 0 auto !important; } } /* ===================================================================== v19: CORPORATE CLASS card (step 4) — naya content. Select / Unselect wahi. ===================================================================== */ #booking-form-widget { --cc-brand: #0b1633; --cc-gold: #c9a24b; } #booking-form-widget.bf-nogold label.corp-card.cc2 { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 16px !important; padding: 18px 20px !important; margin: 6px 0 16px !important; background: #ffffff !important; border: 1px solid #e7dcc0 !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(16,24,40,.06) !important; color: var(--cc-brand) !important; cursor: pointer !important; text-align: left !important; transform: none !important; } #booking-form-widget.bf-nogold label.corp-card.cc2:hover { box-shadow: 0 8px 22px rgba(16,24,40,.10) !important; border-color: var(--cc-gold) !important; } #booking-form-widget.bf-nogold label.corp-card.cc2.on { background: #fffdf7 !important; border: 1.5px solid var(--cc-gold) !important; box-shadow: 0 0 0 3px rgba(201,162,75,.22), 0 8px 22px rgba(16,24,40,.08) !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-ico { width: 54px !important; height: 54px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--cc-brand) !important; box-shadow: inset 0 0 0 2px var(--cc-gold), 0 0 0 3px rgba(201,162,75,.18) !important; flex: 0 0 54px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-ico svg { display: block !important; width: 28px !important; height: 28px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-body { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; min-width: 0 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-title { font-family: Georgia, 'Times New Roman', serif !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: .4px !important; color: var(--cc-brand) !important; line-height: 1.2 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-label { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: var(--cc-gold) !important; line-height: 1 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 4px 10px !important; border-radius: 999px !important; background: #f8f5ec !important; border: 1px solid #ece2c8 !important; color: var(--cc-brand) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip::before { content: "\2713" !important; color: var(--cc-gold) !important; font-weight: 900 !important; font-size: 11px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 2px !important; padding: 7px 12px !important; border-radius: 10px !important; background: var(--cc-brand) !important; color: #ffffff !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.35 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl-star { color: var(--cc-gold) !important; font-size: 13px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .corp-btn { border-color: var(--cc-brand) !important; color: var(--cc-brand) !important; background: #fff !important; white-space: nowrap !important; width: auto !important; } #booking-form-widget.bf-nogold label.corp-card.cc2:hover .corp-btn { background: #f8f5ec !important; } #booking-form-widget.bf-nogold label.corp-card.cc2.on .corp-btn { background: var(--cc-brand) !important; color: #fff !important; border-color: var(--cc-brand) !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .corp-box { border-color: var(--cc-brand) !important; } #booking-form-widget.bf-nogold label.corp-card.cc2.on .corp-box { background: #fff !important; border-color: #fff !important; } #booking-form-widget.bf-nogold label.corp-card.cc2.on .corp-box::after { color: var(--cc-brand) !important; } @media (max-width: 599px) { #booking-form-widget.bf-nogold label.corp-card.cc2 { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; text-align: center !important; gap: 12px !important; padding: 18px 14px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-body { align-items: center !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chips { justify-content: center !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip { white-space: normal !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl { justify-content: center !important; text-align: center !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .corp-btn { width: 100% !important; justify-content: center !important; } } #booking-form-widget.bf-nogold label.corp-card.cc2::before, #booking-form-widget.bf-nogold label.corp-card.cc2::after { display: none !important; content: none !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-ico { grid-column: 1 !important; grid-row: 1 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-body { grid-column: 2 !important; grid-row: 1 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .corp-btn { grid-column: 3 !important; grid-row: 1 !important; } @media (max-width: 599px) { #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-ico, #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-body, #booking-form-widget.bf-nogold label.corp-card.cc2 > .corp-btn { grid-column: 1 !important; grid-row: auto !important; } } /* ===== v20: Corporate Class — mobile par chhota aur saaf (kam height) ===== */ @media (max-width: 599px) { #booking-form-widget.bf-nogold label.corp-card.cc2 { grid-template-columns: 40px minmax(0, 1fr) !important; justify-items: stretch !important; text-align: left !important; align-items: center !important; column-gap: 10px !important; row-gap: 8px !important; padding: 12px 12px 12px !important; margin: 4px 0 12px !important; border-radius: 14px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-ico { grid-column: 1 !important; grid-row: 1 !important; width: 40px !important; height: 40px !important; flex-basis: 40px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-ico svg { width: 21px !important; height: 21px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-body { display: contents !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-title { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; margin-top: 2px !important; font-size: 17px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-label { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin-bottom: 3px !important; font-size: 9.5px !important; letter-spacing: 1.2px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chips { grid-column: 1 / -1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 10px !important; justify-content: stretch !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: normal !important; align-items: flex-start !important; gap: 4px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip::before { font-size: 10px !important; line-height: 1.5 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl { grid-column: 1 / -1 !important; grid-row: 3 !important; margin: 0 !important; padding: 6px 10px !important; border-radius: 8px !important; font-size: 11.5px !important; line-height: 1.3 !important; justify-content: flex-start !important; text-align: left !important; gap: 6px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl-star { font-size: 11px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .corp-btn { grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100% !important; min-height: 0 !important; height: 36px !important; padding: 0 12px !important; justify-content: center !important; font-size: 12px !important; } } /* ===================================================================== v21: iPhone / Safari — date ki field time jitni, aur field par tap se zoom nahi ===================================================================== */ /* Safari date field ka apna design hata kar baqi fields jaisa (height aur chaurai barabar) */ #booking-form-widget input[type="date"], #booking-form-widget input[type="time"] { -webkit-appearance: none !important; appearance: none !important; display: block !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; line-height: normal !important; text-align: left !important; background-clip: padding-box !important; } #booking-form-widget input[type="date"]::-webkit-date-and-time-value { text-align: left !important; margin: 0 !important; min-height: 1.2em !important; } #booking-form-widget input[type="date"]::-webkit-datetime-edit { padding: 0 !important; } #booking-form-widget .date-wrap { display: block !important; width: 100% !important; min-width: 0 !important; } #booking-form-widget .dt-row > .form-group, #booking-form-widget .return-trip-box > div[style*="display: flex"] > .form-group { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } /* Do baar tap par zoom band */ #booking-form-widget, .acc-modal, .corp-modal, .acc-menu { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* iPhone 16px se chhoti likhai wali field par tap karte hi zoom karta hai — mobile par sab fields 16px */ @media (max-width: 760px) { #booking-form-widget input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), #booking-form-widget select, #booking-form-widget textarea, .acc-modal input, .acc-modal select, .acc-modal textarea, .corp-modal input { font-size: 16px !important; } #booking-form-widget .date-wrap .date-ph { font-size: 15px !important; } } /* ===================================================================== v22: Corporate Class — step 4 card (naya layout) + har step par header ke neeche chhoti patti ===================================================================== */ /* ---- Step 4 card: upar icon + naam + Select, neeche 3 khanon mein features, aakhir mein Sprinter patti ---- */ #booking-form-widget.bf-nogold label.corp-card.cc2 { display: grid !important; grid-template-columns: 54px minmax(0, 1fr) auto !important; align-items: center !important; justify-items: stretch !important; column-gap: 14px !important; row-gap: 12px !important; padding: 18px 20px !important; text-align: left !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-body { display: contents !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-ico { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; width: 54px !important; height: 54px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-ico svg { width: 26px !important; height: 26px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-title { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin: 0 !important; font-family: inherit !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--cc-brand) !important; line-height: 1.15 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-label { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin: 0 !important; font-size: 11px !important; letter-spacing: 1.3px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .corp-btn { grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: center !important; width: auto !important; height: 38px !important; padding: 0 18px !important; font-size: 13px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chips { grid-column: 1 / -1 !important; grid-row: 3 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 12px !important; border-radius: 6px !important; background: #f8f6ef !important; border: 1px solid #ece4cc !important; color: #24302f !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip::before { content: "\2713" !important; color: #b8975a !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1 !important; flex: 0 0 auto !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl { grid-column: 1 / -1 !important; grid-row: 4 !important; display: flex !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 700 !important; gap: 10px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl-star { font-size: 15px !important; } @media (max-width: 599px) { #booking-form-widget.bf-nogold label.corp-card.cc2 { grid-template-columns: 48px minmax(0, 1fr) auto !important; column-gap: 12px !important; row-gap: 10px !important; padding: 14px 14px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-ico { width: 48px !important; height: 48px !important; flex-basis: 48px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-ico svg { width: 23px !important; height: 23px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-title { font-size: 18px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-label { font-size: 10px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .corp-btn { grid-column: 3 !important; grid-row: 1 / span 2 !important; width: auto !important; height: 36px !important; padding: 0 14px !important; font-size: 12.5px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip { padding: 8px 9px !important; font-size: 12px !important; gap: 6px !important; white-space: normal !important; background: #f8f6ef !important; border: 1px solid #ece4cc !important; border-radius: 6px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip::before { font-size: 12px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-hl { padding: 9px 12px !important; font-size: 12.5px !important; } } /* ---- Har step par header ke neeche chhoti patti ---- */ #booking-form-widget .cc-bar { display: flex !important; align-items: center !important; gap: 14px !important; margin: 10px 0 12px !important; padding: 12px 16px !important; background: #ffffff !important; border: 1px solid #e2cf9c !important; border-radius: 12px !important; box-shadow: 0 2px 10px rgba(16,24,40,.05) !important; } #booking-form-widget .cc-bar.on { background: #fffdf7 !important; border-color: var(--cc-gold) !important; box-shadow: 0 0 0 2px rgba(201,162,75,.2) !important; } #booking-form-widget .cc-bar .cc-ico { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--cc-brand) !important; box-shadow: inset 0 0 0 2px var(--cc-gold) !important; } #booking-form-widget .cc-bar .cc-ico svg { width: 22px !important; height: 22px !important; display: block !important; } #booking-form-widget .cc-bar-txt { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; flex: 1 1 auto !important; } #booking-form-widget .cc-bar-title { font-size: 18px !important; font-weight: 700 !important; color: var(--cc-brand) !important; line-height: 1.15 !important; } #booking-form-widget .cc-bar-label { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; color: #b8975a !important; line-height: 1 !important; } #booking-form-widget button.cc-bar-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 16px !important; border: 1.5px solid var(--cc-brand) !important; border-radius: 999px !important; background: #fff !important; color: var(--cc-brand) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .6px !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: none !important; line-height: 1 !important; } #booking-form-widget button.cc-bar-btn:hover { background: #f8f5ec !important; } #booking-form-widget button.cc-bar-btn .corp-box { width: 15px !important; height: 15px !important; border: 1.5px solid var(--cc-brand) !important; border-radius: 4px !important; background: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #booking-form-widget .cc-bar.on button.cc-bar-btn { background: var(--cc-brand) !important; color: #fff !important; } #booking-form-widget .cc-bar.on button.cc-bar-btn .corp-box { background: #fff !important; border-color: #fff !important; } #booking-form-widget .cc-bar.on button.cc-bar-btn .corp-box::after { content: "\2713" !important; color: var(--cc-brand) !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; } #booking-form-widget button.cc-bar-btn .cc-on, #booking-form-widget .cc-bar.on button.cc-bar-btn .cc-off { display: none !important; } #booking-form-widget .cc-bar.on button.cc-bar-btn .cc-on { display: inline !important; } @media (max-width: 599px) { #booking-form-widget .cc-bar { gap: 10px !important; padding: 10px 12px !important; margin: 8px 0 10px !important; } #booking-form-widget .cc-bar .cc-ico { flex-basis: 38px !important; width: 38px !important; height: 38px !important; } #booking-form-widget .cc-bar .cc-ico svg { width: 19px !important; height: 19px !important; } #booking-form-widget .cc-bar-title { font-size: 16px !important; } #booking-form-widget .cc-bar-label { font-size: 9.5px !important; } #booking-form-widget button.cc-bar-btn { height: 34px !important; padding: 0 12px !important; font-size: 12px !important; } } @media (max-width: 599px) { #booking-form-widget.bf-nogold label.corp-card.cc2 { grid-template-columns: 42px minmax(0, 1fr) auto !important; column-gap: 10px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .cc-ico { width: 42px !important; height: 42px !important; flex-basis: 42px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-ico svg { width: 20px !important; height: 20px !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-title { font-size: 17px !important; white-space: nowrap !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-label { white-space: nowrap !important; } #booking-form-widget.bf-nogold label.corp-card.cc2 > .corp-btn { padding: 0 10px !important; font-size: 11.5px !important; gap: 6px !important; height: 34px !important; } #booking-form-widget .cc-bar-title, #booking-form-widget .cc-bar-label { white-space: nowrap !important; } } /* ===== v23: Corporate patti — step 4 par nahi; laptop par 4 features; mobile step 4 card mein 4 features ===== */ #booking-form-widget .cc-bar.cc-bar-hide, #booking-form-widget:has(#step4.active) .cc-bar { display: none !important; } #booking-form-widget .cc-bar-txt { flex: 0 0 auto !important; } #booking-form-widget .cc-bar-feats { display: none !important; } @media (min-width: 900px) { #booking-form-widget .cc-bar-feats { display: grid !important; grid-template-columns: repeat(2, minmax(0, max-content)) !important; gap: 4px 22px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 6px 0 10px !important; padding-left: 18px !important; border-left: 1px solid #ece2c8 !important; align-content: center !important; } #booking-form-widget .cc-bar-feat { display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: #3b4645 !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #booking-form-widget .cc-bar-feat::before { content: "\2713" !important; color: #b8975a !important; font-weight: 700 !important; font-size: 12px !important; flex: 0 0 auto !important; } #booking-form-widget button.cc-bar-btn { margin-left: auto !important; } } @media (max-width: 599px) { #booking-form-widget.bf-nogold label.corp-card.cc2 .cc-chip:nth-child(n+5) { display: none !important; } } #booking-form-widget .cc-bar button.cc-bar-btn { margin-left: auto !important; } /* ===================================================================== v24 (HGSS): khali field laal + message, Continue button upar (laptop), mobile calendar ===================================================================== */ /* ---- Khali field: laal border + neeche "This field is required" ---- */ #booking-form-widget input.error-outline, #booking-form-widget select.error-outline, #booking-form-widget textarea.error-outline, #booking-form-widget .counter-group.error-outline, #booking-form-widget .date-wrap.error-outline input, #booking-form-widget .lah-tsel.error-outline select { border-color: #d92d20 !important; box-shadow: 0 0 0 3px rgba(217,45,32,.12) !important; background-color: #fffafa !important; } #booking-form-widget .error-text { display: block !important; margin: 5px 2px 0 !important; color: #d92d20 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; } #booking-form-widget .error-text::before { content: "\26A0\FE0E " !important; } /* ---- Laptop: Continue button Add a stop ki line ke aakhir mein (One Way, Point to Point) ---- */ @media (min-width: 900px) { #booking-form-widget .trip-cols:not(.rt-on) #going_trip_fields_container > .step1-nav.nav-in-grid { grid-row: 2 !important; grid-column: 19 / span 6 !important; align-self: end !important; justify-self: end !important; display: flex !important; justify-content: flex-end !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; background: none !important; } #booking-form-widget #going_trip_fields_container > .step1-nav.nav-in-grid .btn-next-custom { margin: 0 !important; width: auto !important; height: 46px !important; padding: 0 22px !important; white-space: nowrap !important; } } /* ---- Mobile: date field (phone ka calendar nahi, hamara chhota calendar) ---- */ #booking-form-widget .date-wrap.lah-mdate input { color: transparent !important; caret-color: transparent !important; cursor: pointer !important; -webkit-user-select: none !important; user-select: none !important; } #booking-form-widget .date-wrap.lah-mdate .date-disp { position: absolute !important; left: 12px !important; right: 34px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; font-size: 15px !important; color: #1f2a37 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #booking-form-widget .date-wrap.lah-mdate.is-empty .date-disp { display: none !important; } #booking-form-widget .date-wrap.lah-mdate .date-ph { display: block !important; pointer-events: none !important; } #booking-form-widget .date-wrap.lah-mdate:not(.is-empty) .date-ph { display: none !important; } #booking-form-widget .date-wrap.lah-mdate .date-ico { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--bf-main) !important; font-size: 14px !important; pointer-events: none !important; } html.lah-cal-open, html.lah-cal-open body { overflow: hidden !important; } .lah-cal-ov { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; background: rgba(10,16,30,.45) !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; } .lah-cal-ov[style*="none"] { display: none !important; } .lah-cal { width: 100% !important; max-width: 480px !important; background: #fff !important; border-radius: 18px 18px 0 0 !important; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -10px 30px rgba(0,0,0,.18) !important; animation: lahSheet .22s ease-out !important; font-family: inherit !important; color: #1f2a37 !important; } .lah-cal-grab { width: 36px !important; height: 4px !important; border-radius: 4px !important; background: #d5dbe3 !important; margin: 2px auto 10px !important; } .lah-cal-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 8px !important; } .lah-cal-title { font-size: 16px !important; font-weight: 700 !important; color: var(--bf-main, #050E25) !important; } .lah-cal button { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; min-height: 0 !important; margin: 0 !important; } .lah-cal-nav { width: 38px !important; height: 38px !important; padding: 0 !important; border: 1px solid #e3e7ee !important; border-radius: 10px !important; background: #fff !important; color: #1f2a37 !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer !important; } .lah-cal-nav:disabled { opacity: .35 !important; cursor: default !important; } .lah-cal-wk, .lah-cal-days { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; text-align: center !important; } .lah-cal-wk span { font-size: 11px !important; font-weight: 700 !important; color: #8a94a3 !important; padding: 2px 0 4px !important; } .lah-cal-days button { height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #1f2a37 !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; } .lah-cal-days button.today { box-shadow: inset 0 0 0 1.5px #c9d3e0 !important; } .lah-cal-days button.on { background: var(--bf-main, #050E25) !important; color: #fff !important; } .lah-cal-days button:disabled { color: #c3c9d2 !important; cursor: default !important; } .lah-cal-foot { display: flex !important; justify-content: space-between !important; gap: 10px !important; margin-top: 10px !important; } .lah-cal-foot button { flex: 1 1 0 !important; height: 42px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; } .lah-cal-today { background: #fff !important; border: 1.5px solid var(--bf-main, #050E25) !important; color: var(--bf-main, #050E25) !important; } .lah-cal-close { background: var(--bf-main, #050E25) !important; border: 1.5px solid var(--bf-main, #050E25) !important; color: #fff !important; } #booking-form-widget .date-wrap.error-outline, #booking-form-widget .lah-tsel.error-outline, #booking-form-widget .lah-time-box.error-outline { border: 0 !important; box-shadow: none !important; background: none !important; outline: 0 !important; }