.mpsb_shuttle_search_card { --mpsb-accent: #ff6e00; --mpsb-accent-dark: #e86200; --mpsb-highlight: #fff7ed; --mpsb-surface: #ffffff; --mpsb-surface-soft: #f8fafc; --mpsb-border: #e8eaef; --mpsb-text: #1f2937; --mpsb-text-soft: #6b7280; --mpsb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --mpsb-shadow-md: 0 10px 28px -18px rgba(15, 23, 42, 0.18); background: var(--mpsb-surface); border: 0; border-radius: 0; padding: 0; max-width: 1280px; margin: 0 auto; position: relative; overflow: visible; box-shadow: none; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .mpsb_shuttle_search_form, .mpsb_search_heading { position: relative; z-index: 1; } .mpsb_notice { max-width: 1400px; margin: 0 auto 18px; padding: 16px 18px; border-radius: 10px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .mpsb_notice_warning { background: #fff8e5; border-color: #f0c36d; color: #7a4b00; } .mpsb_notice .dashicons { font-size: 22px; width: 22px; height: 22px; color: #dba617; margin-top: 1px; } .mpsb_notice_content strong { display: block; font-size: 15px; margin-bottom: 4px; color: #5f3b00; } .mpsb_notice_content p { margin: 0; font-size: 14px; line-height: 1.5; color: #7a4b00; } .mpsb_search_heading { margin-bottom: 22px; text-align: left; } .mpsb_search_eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff7ed; color: var(--mpsb-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mpsb_search_eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mpsb-accent); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.14); } .mpsb_search_title { margin: 12px 0 6px; font-size: clamp(1.55rem, 2.8vw, 2.2rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.035em; color: var(--mpsb-text); text-transform: none; } .mpsb_search_subtitle { margin: 0; max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--mpsb-text-soft); } .mpsb_form_grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; } .mpsb_field_group { position: relative; grid-column: span 3; } /* Pickup Point is the search form's entry field now (it identifies the route implicitly - see render_search_form()) so it keeps the wider column Select Route used to have. */ .mpsb_field_group_pickup { grid-column: span 4; } .mpsb_field_group_dropoff_stop { grid-column: span 4; } .mpsb_field_group_date { grid-column: span 4; } .mpsb_submit_group { grid-column: span 3; align-self: center; margin-top: 9px; } /* * Search composer: pickup, drop-off, date and submit sit in one * Airbnb-style bar instead of four separate cards. Scoped to the * trip search form so the pass purchase grid keeps the 12-column * layout above. */ /* * The search bar reads as one pill by default: a white tray with * borderless cells inside it. A theme that wants discrete boxed * fields instead sets the --mpsb-field-* and --mpsb-bar-* custom * properties below rather than re-declaring these rules, which is * what stops a theme's override from un-hiding the native selects * or collapsing the connector column. */ .mpsb_shuttle_search_form .mpsb_search_bar { background: var(--mpsb-bar-bg, #ffffff); border: 1px solid var(--mpsb-bar-border, var(--mpsb-border)); border-radius: var(--mpsb-bar-radius, 12px); padding: var(--mpsb-bar-padding, 6px); box-shadow: var(--mpsb-bar-shadow, 0 8px 24px -16px rgba(15, 23, 42, 0.22)); } /* * The 32px track is the journey connector's column. A theme that * sets --mpsb-connector-display to none must supply a template * without that track too, which is why both are one decision here. */ .mpsb_shuttle_search_form .mpsb_form_grid { grid-template-columns: var(--mpsb-form-grid-columns, minmax(0, 1.2fr) 32px minmax(0, 1.2fr) minmax(168px, 0.9fr) auto); gap: var(--mpsb-form-grid-gap, 0); align-items: var(--mpsb-form-grid-align, stretch); } .mpsb_shuttle_search_form .mpsb_field_group, .mpsb_shuttle_search_form .mpsb_field_group_pickup, .mpsb_shuttle_search_form .mpsb_field_group_dropoff_stop, .mpsb_shuttle_search_form .mpsb_field_group_date, .mpsb_shuttle_search_form .mpsb_submit_group { grid-column: auto; margin-top: 0; padding: var(--mpsb-field-cell-padding, 12px 18px 12px 16px); border-right: 0; border-radius: 0; align-self: stretch; background: transparent; transition: none; } /* * The button is a button, not a slab. Stretched to the bar's full * height it came out as an ~86px block of flat orange that weighed * more than the three fields next to it put together; centred at a * fixed height it reads as the one thing to press. */ /* * The button lines up with the fields' *inputs*, not with their * cells: every field cell is a label above a control, so a button * centred in the cell floats a label's height too high, and one * stretched to the cell's full height is the 86px slab this * replaced. Same 12px bottom inset the field cells use, so the * button and the date input sit on one line. * * .mpsb_field_group is a column flex, so justify-content is the * vertical axis here - align-items only moves it across. */ /* * The submit cell keeps its own inset because the button lines up * with the fields' inputs, not with their cells — a cell has a * label above its control. A theme that zeroes the field cells has * to zero this one too, hence its own property. */ .mpsb_shuttle_search_form .mpsb_submit_group { padding: var(--mpsb-submit-cell-padding, 12px 16px 12px 6px); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; } .mpsb_shuttle_search_form .mpsb_field_group:hover, .mpsb_shuttle_search_form .mpsb_field_group:focus-within, .mpsb_shuttle_search_form .mpsb_submit_group:hover, .mpsb_shuttle_search_form .mpsb_submit_group:focus-within { background: transparent; } .mpsb_shuttle_search_form .mpsb_field_group:first-child, .mpsb_shuttle_search_form .mpsb_submit_group { border-radius: 0; } .mpsb_shuttle_search_form .mpsb_field_group_dropoff_stop, .mpsb_shuttle_search_form .mpsb_field_group_date { position: relative; } /* Hairlines between cells; meaningless once the fields are boxed. */ .mpsb_shuttle_search_form .mpsb_field_group_dropoff_stop::after, .mpsb_shuttle_search_form .mpsb_field_group_date::after { content: ''; display: var(--mpsb-field-divider-display, block); position: absolute; top: 12px; bottom: 12px; right: 0; width: 1px; background: #e5e7eb; } .mpsb_journey_connector { display: var(--mpsb-connector-display, flex); align-items: center; justify-content: center; position: relative; z-index: 2; width: 32px; pointer-events: none; } .mpsb_journey_connector::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 1px; height: auto; background: #e5e7eb; opacity: 1; transform: translateX(-50%); } .mpsb_journey_connector::after { content: '\2192'; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #e5e7eb; background: #f3f4f6; box-shadow: none; color: #9ca3af; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; } .mpsb_field_group label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 600; color: #9ca3af; font-size: 10px; letter-spacing: var(--mpsb-field-label-tracking, 0.08em); text-transform: var(--mpsb-field-label-transform, uppercase); } .mpsb_shuttle_search_form .mpsb_field_group label { margin-bottom: var(--mpsb-field-label-gap, 6px); font-size: var(--mpsb-field-label-size, 10px); font-weight: 600; /* #9ca3af measures about 2.5:1 on white — a theme that puts the label on its own surface should darken it. */ color: var(--mpsb-field-label-color, #9ca3af); } .mpsb_field_icon.dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; color: var(--mpsb-accent); vertical-align: -2px; } /* Route Selection tabs (Shared City Shuttle / Private Shuttle / Airport Transfer) - same segmented-control language as the admin list page's own service-class tabs, themed to this form's own tokens: a tinted track behind plain pill buttons, the active one filled solid. */ /* * A segmented control by default — one tinted track holding tabs * that share its width. --mpsb-tab-* turns it into free-standing * pills for themes that want them; see the search bar above. */ .mpsb_route_type_tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--mpsb-tab-gap, 4px); margin-bottom: 10px; padding: var(--mpsb-tab-track-padding, 5px); border-radius: var(--mpsb-tab-track-radius, 12px); background: var(--mpsb-tab-track-bg, #f3f4fe); box-shadow: none; } .mpsb_route_type_tab { flex: var(--mpsb-tab-flex, 1 1 0); display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; min-height: var(--mpsb-tab-min-height, 0); padding: var(--mpsb-tab-padding, 11px 14px); border: var(--mpsb-tab-border, none); border-radius: var(--mpsb-tab-radius, 8px); background: var(--mpsb-tab-bg, transparent); color: var(--mpsb-tab-color, #555555); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none; transition: color 0.18s ease, background-color 0.18s ease; } .mpsb_route_type_tab .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; color: currentColor; } .mpsb_route_type_tab:hover { color: var(--mpsb-tab-hover-color, #333333); background: var(--mpsb-tab-hover-bg, rgba(255, 255, 255, 0.55)); border-color: var(--mpsb-tab-hover-border, transparent); } .mpsb_route_type_tab.is-active { color: var(--mpsb-tab-active-color, #ffffff); background: var(--mpsb-tab-active-bg, var(--mpsb-accent)); border-color: var(--mpsb-tab-active-border, transparent); box-shadow: none; } .mpsb_route_type_tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mpsb-focus-ring, rgba(255, 110, 0, 0.22)); } .mpsb_route_type_tabs .mpsb_route_type_tab:not(:only-child):last-child { position: static; margin-left: 0; } .mpsb_route_type_tabs .mpsb_route_type_tab:not(:only-child):last-child::before { content: none; } /* Tabs sit on the card; the search bar below is the bordered control. Pass purchase reuses this section for the same tab bar. */ .mpsb_route_type_section { margin-bottom: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .mpsb_route_type_section .mpsb_route_type_tabs { margin-top: 12px; margin-bottom: 12px; } .mpsb_route_type_section .mpsb_form_grid { margin-top: 0; } .mpsb_shuttle_search_form .mpsb_route_type_section .mpsb_route_type_hint { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: var(--mpsb-hint-margin, 0 0 14px); padding: var(--mpsb-hint-padding, 5px 12px); border-radius: var(--mpsb-hint-radius, 999px); background: var(--mpsb-hint-bg, #fff4ea); border: var(--mpsb-hint-border, 1px solid #fdba74); font-size: 12px; font-weight: var(--mpsb-hint-weight, 600); line-height: 1.3; color: var(--mpsb-hint-color, var(--mpsb-accent)); box-shadow: none; } .mpsb_route_type_hint::before { content: ''; display: var(--mpsb-hint-dot-display, block); width: 6px; height: 6px; border-radius: 50%; background: var(--mpsb-accent); box-shadow: none; } /* Shown by applyRouteTypeFilter() in shuttle-search.js only when it clears Pickup Point because the tab just clicked doesn't offer it - explains the reset instead of leaving Drop-off Stop silently stuck on "No stops available". [hidden] needs its own rule here since the class below sets its own `display`, which would otherwise outrank the browser's default `[hidden] { display: none }`. */ .mpsb_shuttle_search_form .mpsb_route_type_section .mpsb_route_type_reset_notice { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: #fef2f2; border: 1px solid #fca5a5; font-size: 12px; font-weight: 600; line-height: 1.3; color: #b91c1c; box-shadow: none; } .mpsb_route_type_reset_notice .dashicons { font-size: 14px; width: 14px; height: 14px; color: #b91c1c; } .mpsb_shuttle_search_form .mpsb_route_type_section .mpsb_route_type_reset_notice[hidden] { display: none; } .mpsb_field_group .form-control { width: 100%; padding: 0 16px; border: 1.5px solid var(--mpsb-border); border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--mpsb-text); background: #ffffff; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; box-sizing: border-box; min-height: 50px; appearance: none; } .mpsb_field_group .form-control:hover { border-color: #cbd5e1; } .mpsb_field_group .form-control:focus { border-color: var(--mpsb-accent); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.14); outline: none; } .mpsb_field_group .form-control:disabled { background: #f8fafc !important; color: var(--mpsb-field-disabled-color, #94a3b8); border-color: var(--mpsb-border); cursor: not-allowed; box-shadow: none; } .mpsb_field_group_date .form-control[readonly] { background-color: #ffffff; cursor: pointer; } .mpsb_field_group select.form-control { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--mpsb-text-soft) 50%), linear-gradient(135deg, var(--mpsb-text-soft) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .mpsb_field_group select.form-control.mpsb_custom_select_ready { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } .mpsb_custom_select { position: relative; } .mpsb_custom_select_trigger { width: 100%; min-height: 50px; padding: 0 42px 0 16px; border: none; border-radius: 12px; background: #ffffff; color: var(--mpsb-text); font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; transition: box-shadow 0.18s ease; position: relative; } /* * One declaration for all three controls, so the two custom-select * triggers and the date input cannot drift apart: they are different * elements (button vs input) and each has its own base rule above, * which is exactly how their backgrounds diverged before. */ .mpsb_shuttle_search_form .mpsb_search_bar .mpsb_custom_select_trigger, .mpsb_shuttle_search_form .mpsb_search_bar .form-control { min-height: var(--mpsb-field-min-height, 28px); padding: var(--mpsb-field-padding, 0); border: var(--mpsb-field-border, none); border-radius: var(--mpsb-field-radius, 0); background: var(--mpsb-field-bg, transparent); box-shadow: none; font-size: var(--mpsb-field-font-size, 16px); font-weight: 600; color: #1f2937; } .mpsb_shuttle_search_form .mpsb_search_bar .mpsb_custom_select_trigger { padding-right: 22px; } .mpsb_shuttle_search_form .mpsb_search_bar .mpsb_custom_select.is-open .mpsb_custom_select_trigger, .mpsb_shuttle_search_form .mpsb_search_bar .mpsb_custom_select_trigger:focus, .mpsb_shuttle_search_form .mpsb_search_bar .form-control:focus, .mpsb_shuttle_search_form .mpsb_search_bar .form-control:hover { border: none; box-shadow: none; outline: none; } .mpsb_shuttle_search_form .mpsb_search_bar .mpsb_custom_select.is-disabled .mpsb_custom_select_trigger, .mpsb_shuttle_search_form .mpsb_search_bar .form-control:disabled { background: var(--mpsb-field-disabled-bg, transparent) !important; border: var(--mpsb-field-border, none); } .mpsb_custom_select_trigger:hover { border: none; } .mpsb_custom_select_trigger::before { display: none; } .mpsb_custom_select_trigger::after { content: ''; position: absolute; top: 50%; right: 4px; width: 7px; height: 7px; background: none; border-right: 1.5px solid #9ca3af; border-bottom: 1.5px solid #9ca3af; border-radius: 0; transform: translateY(-70%) rotate(45deg); transition: border-color 0.18s ease, transform 0.18s ease; } .mpsb_custom_select.is-open .mpsb_custom_select_trigger, .mpsb_custom_select_trigger:focus { border: none; box-shadow: none; outline: none; } .mpsb_custom_select.is-open .mpsb_custom_select_trigger::before, .mpsb_custom_select.is-open .mpsb_custom_select_trigger::after, .mpsb_custom_select_trigger:focus::before, .mpsb_custom_select_trigger:focus::after { background: none; border-color: var(--mpsb-accent); } .mpsb_custom_select.is-open .mpsb_custom_select_trigger::after { transform: translateY(-20%) rotate(225deg); } .mpsb_custom_select.is-disabled .mpsb_custom_select_trigger { background: #f8fafc; color: var(--mpsb-field-disabled-color, #94a3b8); border: none; box-shadow: none; cursor: not-allowed; } .mpsb_custom_select.is-disabled .mpsb_custom_select_trigger::after { background: none; border-color: #cbd5e1; } .mpsb_custom_select_label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpsb_custom_select_dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; display: none; flex-direction: column; padding: 8px; border: 1px solid var(--mpsb-border); border-radius: 14px; background: #ffffff; box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06); max-height: 320px; } .mpsb_custom_select.is-open .mpsb_custom_select_dropdown { display: flex; } .mpsb_custom_select_search { flex: 0 0 auto; margin-bottom: 6px; } .mpsb_custom_select_search.is-hidden { display: none; } .mpsb_custom_select_search_input { display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--mpsb-border); border-radius: 8px; background: #f8fafc; color: var(--mpsb-text); font-size: 13px; font-weight: 500; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .mpsb_custom_select_search_input:focus { border-color: rgba(249, 115, 22, 0.55); background: #ffffff; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12); } .mpsb_custom_select_options { flex: 1 1 auto; overflow-y: auto; } .mpsb_custom_select_no_results { padding: 11px 12px; color: #94a3b8; font-size: 13px; font-style: italic; } .mpsb_custom_select_no_results.is-hidden { display: none; } .mpsb_custom_select_option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; margin: 2px 0; border: 0; border-radius: 9px; background: transparent; color: var(--mpsb-text); font-size: 14px; font-weight: 500; line-height: 1.45; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .mpsb_stop_name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpsb_stop_type_badges { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .mpsb_stop_type_badge { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid rgba(31, 41, 55, 0.08); border-radius: 999px; background: #eef1f6; color: #475569; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .mpsb_custom_select_option.is-selected .mpsb_stop_type_badge, .mpsb_custom_select_option:hover .mpsb_stop_type_badge, .mpsb_custom_select_option:focus .mpsb_stop_type_badge { background: #ffffff; border-color: rgba(232, 98, 0, 0.18); } /* Airport gets its own accent - the one Stop Type the plugin already treats as structurally special (see route_touches_airport_stop() in Mpsb_ShuttleSearchClass.php), so it stays easy to spot at a glance among plainer types. */ .mpsb_stop_type_badge--airport { border-color: rgba(29, 78, 216, 0.14); background: #e6f0ff; color: #1d4ed8; } .mpsb_custom_select_option:hover, .mpsb_custom_select_option:focus { background: var(--mpsb-highlight); color: var(--mpsb-accent-dark); outline: none; } .mpsb_custom_select_option.is-selected { background: var(--mpsb-highlight); color: var(--mpsb-accent-dark); font-weight: 700; } .mpsb_custom_select_option.is-disabled { color: #90a19b; cursor: not-allowed; } .mpsb_custom_select_option.is-hidden { display: none; } .mpsb_field_group input[readonly] { color: var(--mpsb-text); } .mpsb_search_btn { background: var(--mpsb-accent); color: #fff; border: none; padding: 0 28px; border-radius: 8px; font-size: 15px; cursor: pointer; width: 100%; font-weight: var(--mpsb-btn-weight, 700); min-height: 48px; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; box-shadow: none; transition: background-color 0.18s ease; } .mpsb_search_btn .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; transition: none; } .mpsb_shuttle_search_form .mpsb_search_btn { min-height: 52px; min-width: 176px; padding: 0 30px; border-radius: 12px; background: var(--mpsb-btn-bg, linear-gradient(180deg, #ff7d1a 0%, var(--mpsb-accent) 55%, #f26600 100%)); color: #fff; border: 0; font-size: 15px; letter-spacing: -0.01em; box-shadow: var(--mpsb-btn-shadow, 0 1px 1px rgba(255, 255, 255, 0.28) inset, 0 8px 18px -10px rgba(234, 88, 12, 0.85)); } .mpsb_shuttle_search_form .mpsb_search_btn .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 18px; opacity: 0.92; } .mpsb_shuttle_search_form .mpsb_search_btn:hover { background: var(--mpsb-btn-hover-bg, linear-gradient(180deg, var(--mpsb-accent) 0%, #ec6100 55%, #dd5a00 100%)); box-shadow: var(--mpsb-btn-hover-shadow, 0 1px 1px rgba(255, 255, 255, 0.22) inset, 0 10px 22px -10px rgba(234, 88, 12, 0.9)); } .mpsb_shuttle_search_form .mpsb_search_btn:active { background: linear-gradient(180deg, #e35d00 0%, #d95900 100%); box-shadow: 0 2px 6px -3px rgba(234, 88, 12, 0.7) inset; } .mpsb_search_btn:hover { color: #fff; background: var(--mpsb-accent-dark); box-shadow: none; transform: none; } .mpsb_search_btn:hover .dashicons { transform: none; } .mpsb_search_btn:active { transform: none; box-shadow: none; } .mpsb_search_btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 110, 0, 0.22); } .mpsb_field_hint { margin-top: 8px; color: var(--mpsb-accent-dark); font-size: 12px; line-height: 1.5; min-height: 18px; font-weight: 600; } .mpsb_field_hint.is-error { color: #d63638; } /* "Valid for any departure" notice - a Shared City Shuttle booked while "Departure Time for Shared Trips" is Flexible has no pickup time to ask for at all, on the results list card and the Review Your Trip step alike (see render_flexible_shared_time_notice() in Mpsb_ShuttleSearchClass.php). */ .mpsb_flexible_time_notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 14px 16px; border-radius: 10px; background: var(--mpsb-highlight); } .mpsb_flexible_time_field--no-input .mpsb_flexible_time_notice { margin-top: 0; } .mpsb_flexible_time_notice__icon { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; color: var(--mpsb-accent-dark); font-size: 18px; } .mpsb_flexible_time_notice__body { min-width: 0; } .mpsb_flexible_time_notice__title { margin: 0 0 4px; color: var(--mpsb-accent-dark); font-size: 13.5px; font-weight: 700; line-height: 1.4; } .mpsb_flexible_time_notice__desc { margin: 0; color: var(--mpsb-text); font-size: 12.5px; line-height: 1.55; } .mpsb_flexible_time_notice__times { margin: 8px 0 0; color: var(--mpsb-text); font-size: 13px; font-weight: 700; line-height: 1.6; } .mpsb_flexible_time_notice__sep { margin: 0 7px; color: var(--mpsb-accent-dark); font-weight: 400; } #shuttle_qty::-webkit-outer-spin-button, #shuttle_qty::-webkit-inner-spin-button { margin: 0; } .ui-datepicker { border: 1px solid #e2e8f0 !important; border-radius: 16px !important; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important; overflow: hidden; padding: 12px !important; background: #ffffff !important; width: 320px !important; z-index: 9999 !important; } .ui-datepicker .ui-datepicker-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; margin-bottom: 10px; padding: 0 40px; background: #f8fafc !important; border: 0 !important; border-radius: 12px !important; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .ui-datepicker .ui-datepicker-prev { left: 6px; } .ui-datepicker .ui-datepicker-next { right: 6px; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: #fff7ed; border-color: #fdba74; transform: translateY(-1px); } .ui-datepicker .ui-datepicker-prev.ui-state-disabled, .ui-datepicker .ui-datepicker-next.ui-state-disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; text-indent: -9999px; overflow: hidden; } .ui-datepicker .ui-datepicker-prev span::before, .ui-datepicker .ui-datepicker-next span::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid #475569; border-right: 2px solid #475569; } .ui-datepicker .ui-datepicker-prev span::before { transform: translate(-30%, -50%) rotate(-135deg); } .ui-datepicker .ui-datepicker-next span::before { transform: translate(-70%, -50%) rotate(45deg); } .ui-datepicker .ui-datepicker-title { font-size: 15px; font-weight: 700; color: var(--mpsb-text, #0f172a); line-height: 1.2; } .ui-datepicker .ui-datepicker-month, .ui-datepicker .ui-datepicker-year { color: inherit; } .ui-datepicker table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; } .ui-datepicker thead th { padding: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; } .ui-datepicker thead span { display: inline-flex; align-items: center; justify-content: center; width: 100%; } .ui-datepicker td { padding: 2px; } .ui-datepicker .ui-state-default { display: flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 auto; border: 0 !important; border-radius: 10px; background: transparent !important; color: #0f172a !important; font-size: 13px; font-weight: 600; text-align: center; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ui-datepicker td a.ui-state-default:hover, .ui-datepicker td a.ui-state-default:focus { background: #fff7ed !important; color: var(--mpsb-accent-dark, #ea580c) !important; transform: translateY(-1px); outline: none; } .ui-datepicker .ui-datepicker-current-day .ui-state-active, .ui-datepicker .ui-state-active { /* jQuery UI appends the calendar popup to , outside .mpsb_shuttle_search_card where these custom properties are defined - without a fallback, var() resolves to nothing here, so the background drops out and this becomes white text on a transparent/white cell (invisible selected day). */ background: var(--mpsb-accent, #f97316) !important; color: #ffffff !important; } .ui-datepicker .ui-datepicker-today .ui-state-default { box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.28); } .ui-datepicker td.ui-state-disabled .ui-state-default, .ui-datepicker td.ui-datepicker-unselectable .ui-state-default { color: #cbd5e1 !important; background: transparent !important; } .ui-datepicker td.ui-datepicker-other-month .ui-state-default { opacity: 0.2; } .ui-datepicker td.mpsb-booked-date span { color: transparent !important; background: #fef2f2 !important; box-shadow: inset 0 0 0 1px #fecaca; position: relative; } .ui-datepicker td.mpsb-booked-date span::after { content: '×'; color: #dc2626; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* A day the service does not run. Deliberately grey rather than the red of a sold-out day: nothing went wrong and nothing sold out, the shuttle simply is not running, and a red cross reads as "you just missed it". The date stays legible, struck through. */ .ui-datepicker td.mpsb-closed-date span { color: #94a3b8 !important; background: #f1f5f9 !important; box-shadow: inset 0 0 0 1px #e2e8f0; position: relative; } .ui-datepicker td.mpsb-closed-date span::after { content: ''; position: absolute; top: 50%; left: 22%; right: 22%; height: 1px; background: #94a3b8; transform: rotate(-12deg); } @media (max-width: 768px) { .mpsb_shuttle_search_card { padding: 0; border-radius: 0; } .mpsb_search_heading { margin-bottom: 18px; } .mpsb_search_subtitle { font-size: 14px; line-height: 1.6; } .mpsb_form_grid { grid-template-columns: 1fr; gap: 14px; } .mpsb_route_type_section { padding: 0; } .mpsb_field_group, .mpsb_field_group_pickup, .mpsb_field_group_dropoff_stop, .mpsb_field_group_date, .mpsb_field_group_passengers, .mpsb_submit_group { grid-column: span 1; } .mpsb_field_group .form-control, .mpsb_search_btn, .mpsb_custom_select_trigger { min-height: var(--mpsb-field-min-height, 46px); border-radius: var(--mpsb-field-radius, 10px); } .mpsb_route_type_tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mpsb_route_type_tab { flex: var(--mpsb-tab-flex, 1 0 auto); } .mpsb_route_type_tabs::-webkit-scrollbar { display: none; } .mpsb_shuttle_search_form .mpsb_form_grid { grid-template-columns: 1fr; gap: 0; } .mpsb_shuttle_search_form .mpsb_field_group, .mpsb_shuttle_search_form .mpsb_field_group_pickup, .mpsb_shuttle_search_form .mpsb_field_group_dropoff_stop, .mpsb_shuttle_search_form .mpsb_field_group_date, .mpsb_shuttle_search_form .mpsb_submit_group { grid-column: 1 / -1; border-right: 0; border-radius: 0; border-bottom: 1px solid var(--mpsb-border); } .mpsb_shuttle_search_form .mpsb_field_group_dropoff_stop::after, .mpsb_shuttle_search_form .mpsb_field_group_date::after { display: none; } .mpsb_shuttle_search_form .mpsb_field_group:first-child { border-radius: 0; } .mpsb_shuttle_search_form .mpsb_submit_group { border-bottom: 0; border-radius: 0; padding: 10px; } .mpsb_shuttle_search_form .mpsb_search_btn { min-height: 48px; min-width: 0; width: 100%; border-radius: 8px; } .mpsb_journey_connector { width: 100%; height: 24px; border-bottom: 0; } .mpsb_journey_connector::before { left: 16px; right: 16px; top: 50%; bottom: auto; width: auto; height: 1px; transform: none; background: #e5e7eb; } } .mpsb_shuttle_booking_summary { /* Re-declares the accent/border/text tokens from .mpsb_shuttle_search_card so form-control styling reused here (the billing details fields below the trip review) inherits real values instead of falling back to unstyled/borderless inputs - custom properties don't cross into this section otherwise since it's a sibling, not a descendant, of the search card. */ --mpsb-accent: #f97316; --mpsb-accent-dark: #ea580c; --mpsb-highlight: #fff7ed; --mpsb-surface: #ffffff; --mpsb-surface-soft: #f8fafc; --mpsb-border: #e2e8f0; --mpsb-text: #0f172a; --mpsb-text-soft: #64748b; max-width: 1280px; margin: 30px auto; font-family: 'Segoe UI', sans-serif; } .mpsb_review_heading { margin-bottom: 24px; } .mpsb_review_eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(29, 92, 77, 0.08); color: #1d5c4d; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .mpsb_review_eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f3b34c; box-shadow: 0 0 0 4px rgba(243, 179, 76, 0.18); } .mpsb_shuttle_booking_summary h3 { margin: 14px 0 8px; color: #14231e; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; text-align: left; } .mpsb_review_heading p { margin: 0; max-width: 700px; color: #5f6f69; font-size: 15px; line-height: 1.7; } .mpsb_shuttle_results_heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow action" "title action" "meta ."; align-items: center; column-gap: 24px; row-gap: 0; margin-bottom: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .mpsb_shuttle_results_heading .mpsb_review_eyebrow { grid-area: eyebrow; justify-self: start; gap: 6px; margin: 0; padding: 5px 10px; border-radius: 6px; background: #f8e6d8; color: #9a4a16; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; } .mpsb_shuttle_results_heading .mpsb_review_eyebrow::before { width: 6px; height: 6px; background: #e07a2f; box-shadow: none; } .mpsb_shuttle_booking_summary .mpsb_shuttle_results_heading h3 { grid-area: title; margin: 10px 0 0; color: #111827; font-family: inherit; font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .mpsb_shuttle_results_heading p { grid-area: meta; margin: 6px 0 0; max-width: none; color: #6b7280; font-size: 14px; font-weight: 400; line-height: 1.4; } .mpsb_shuttle_results_heading .mpsb_back_link, .mpsb_modify_search { grid-area: action; display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; flex: 0 0 auto; margin: 0; padding: 8px 16px; border: 1px solid #1f2937; border-radius: 999px; background: #eef2f6; color: #111827; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-align: center; text-decoration: none; box-shadow: none; transition: background-color 0.18s ease, border-color 0.18s ease; } .mpsb_shuttle_results_heading .mpsb_back_link .dashicons, .mpsb_modify_search .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 1; } .mpsb_shuttle_results_heading .mpsb_back_link:hover, .mpsb_modify_search:hover { background: #ffffff; color: #111827; border-color: #111827; transform: none; } .mpsb_trip_card { background: linear-gradient(145deg, #fefefe 0%, #f6fbf9 100%); border-radius: 24px; box-shadow: 0 24px 70px rgba(20, 35, 30, 0.12); display: flex; overflow: hidden; border: 1px solid rgba(29, 92, 77, 0.12); } .mpsb_trip_main { flex: 2; padding: 32px; } .mpsb_trip_action { flex: 1; padding: 32px; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(245,248,247,0.98)); border-left: 1px solid rgba(29, 92, 77, 0.1); display: flex; flex-direction: column; justify-content: center; } .mpsb_trip_badge { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(29, 92, 77, 0.08); color: #1d5c4d; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .mpsb_trip_header h4 { margin: 0; font-size: 30px; line-height: 1.08; color: #14231e; font-weight: 800; letter-spacing: -0.03em; } .mpsb_trip_route_name { margin: 10px 0 0; color: #1d5c4d; font-size: 15px; font-weight: 700; } .mpsb_trip_details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px 0 28px; font-size: 14px; } .mpsb_detail_item { display: flex; align-items: flex-start; justify-content: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(29, 92, 77, 0.1); border-radius: 16px; background: rgba(255, 255, 255, 0.72); color: #5f6f69; } .mpsb_detail_item .dashicons { font-size: 18px; height: 18px; width: 18px; color: #1d5c4d; margin-top: 5px; } .mpsb_detail_item strong { color: #14231e; } .mpsb_route_visual { display: flex; align-items: last baseline; justify-content: space-between; gap: 26px; margin-top: 10px; padding: 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(29, 92, 77, 0.1); } .mpsb_stop_info { position: relative; display: flex; align-items: last baseline; gap: 14px; } .mpsb_dot { height: 14px; width: 14px; border-radius: 50%; border: 3px solid #1d5c4d; background: #fff; margin-top: 22px; z-index: 2; box-shadow: 0 0 0 6px rgba(29, 92, 77, 0.08); } .mpsb_dot.start { background: #1d5c4d; border-color: #1d5c4d; } .mpsb_dot.end { border-color: #f3b34c; } .mpsb_line { height: 3px; background: linear-gradient(90deg, rgba(29, 92, 77, 0.22), rgba(243, 179, 76, 0.36)); flex: 0 0 64px; margin-top: 35px; position: relative; border-radius: 999px; align-self: center; } .mpsb_line::after { content: ''; position: absolute; top: 50%; right: -1px; width: 12px; height: 12px; border-top: 3px solid rgba(243, 179, 76, 0.78); border-right: 3px solid rgba(243, 179, 76, 0.78); transform: translateY(-54%) rotate(45deg); border-radius: 4px; } .mpsb_stop_time { font-size: 13px; color: #1d5c4d; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .mpsb_stop_content strong { display: block; font-size: 20px; color: #14231e; line-height: 1.2; } .mpsb_sub_point { font-size: 13px; color: #5f6f69; margin-top: 5px; } .mpsb_trip_type_toggle { display: flex; gap: 10px; margin-bottom: 14px; } .mpsb_trip_type_option { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(29, 92, 77, 0.18); cursor: pointer; font-weight: 600; font-size: 14px; } .mpsb_trip_type_option:has(input:checked) { background: rgba(29, 92, 77, 0.1); border-color: #1d5c4d; color: #1d5c4d; } .mpsb_return_info { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(29, 92, 77, 0.06); font-size: 13.5px; color: #1d5c4d; } .mpsb_pricing_summary { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(29, 92, 77, 0.1); margin-bottom: 18px; } .mpsb_price_heading { margin-bottom: 16px; } .mpsb_price_label { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: rgba(243, 179, 76, 0.14); color: #8a5b08; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mpsb_price_row { display: flex; justify-content: space-between; font-size: 14px; color: #5f6f69; margin-bottom: 10px; gap: 14px; } .mpsb_price_row strong { color: #14231e; } .mpsb_price_row.mpsb_subtotal { margin-top: 14px; padding-top: 16px; border-top: 1px dashed rgba(29, 92, 77, 0.18); color: #14231e; font-size: 16px; font-weight: 700; } .mpsb_price_row.mpsb_subtotal strong { color: #1d5c4d; font-size: 22px; } .mpsb_book_btn { background: linear-gradient(135deg, #1f6a58 0%, #153f35 100%); color: #fff; text-decoration: none; padding: 0 22px; border-radius: 18px; font-weight: 700; display: block; transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; margin-bottom: 16px; text-align: center; width: 100%; min-height: 56px; border: 0; box-shadow: 0 18px 34px rgba(21, 63, 53, 0.24); } .mpsb_book_btn:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 24px 38px rgba(21, 63, 53, 0.3); color: #fff; } .mpsb_back_link { font-size: 13px; color: #1d5c4d; text-decoration: none; text-align: center; display: block; font-weight: 700; } /* "Available Shuttles" search results - one card per departure, laid out like a ticket: schedule on the left, fare + Select on the right. */ .mpsb_shuttle_result_list { display: flex; flex-direction: column; gap: 12px; margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .mpsb_shuttle_result_card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 0; padding: 0; border: 1px solid #e6ddd4; border-radius: 12px; background: #ffffff; box-shadow: none; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .mpsb_shuttle_result_card:hover { border-color: #e0d4c8; box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.22); } .mpsb_shuttle_result_card.is-sold-out { opacity: 0.72; } .mpsb_shuttle_result_card.is-chosen { border-color: #1d5c4d; box-shadow: 0 0 0 2px rgba(29, 92, 77, 0.18); } .mpsb_shuttle_result_card .dashicons { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .mpsb_shuttle_result_main { min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 22px 24px 22px 22px; } .mpsb_shuttle_result_intro { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .mpsb_shuttle_result_photo { flex: 0 0 96px; width: 96px; height: 72px; margin: 0; overflow: hidden; border-radius: 10px; background: #f3f4f6; } .mpsb_shuttle_result_photo img, .mpsb_shuttle_result_photo_img { display: block; width: 100%; height: 100%; object-fit: cover; } .mpsb_shuttle_result_header { min-width: 0; flex: 1 1 auto; } .mpsb_shuttle_result_badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; } .mpsb_shuttle_result_type { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.25; } .mpsb_shuttle_result_type { background: #e8f1ff; color: #1d4ed8; } .mpsb_shuttle_result_type .dashicons { font-size: 13px; width: 13px; height: 13px; } .mpsb_shuttle_result_type[data-service="shared-city-shuttle"] { background: #e8f1ff; color: #1d4ed8; } .mpsb_shuttle_result_type[data-service="private-shuttle"] { background: #f5f3ff; color: #6d28d9; } .mpsb_shuttle_result_type[data-service="airport-transfer"] { background: #fff7ed; color: #c2410c; } .mpsb_shuttle_result_kind { background: #f1f5f9; color: #64748b; } .mpsb_shuttle_result_card .mpsb_shuttle_result_title { margin: 0; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #111827; } .mpsb_shuttle_result_subtitle { margin: 3px 0 0; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: #6b7280; } .mpsb_shuttle_result_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; /* .mpsb_shuttle_result_intro is the only row that actually has the photo in it - this and .mpsb_shuttle_result_footer below are full-width siblings of that row within the column layout, so without this they start flush with the photo's own left edge instead of lining up with the badge/title/subtitle text beside it. 96px photo + 14px .mpsb_shuttle_result_intro gap. */ margin-left: 110px; } .mpsb_shuttle_result_schedule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 420px; } .mpsb_shuttle_result_schedule.is-duration-only { grid-template-columns: minmax(0, auto); max-width: none; } .mpsb_shuttle_result_schedule_label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #9ca3af; line-height: 1.3; } .mpsb_shuttle_result_schedule_value { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #111827; line-height: 1.2; } .mpsb_shuttle_result_tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 0 0 16px; list-style: none; border-left: 1px solid #e5e7eb; } .mpsb_shuttle_result_tags li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #e8f1ff; color: #2563eb; font-size: 12px; font-weight: 600; line-height: 1.25; } .mpsb_shuttle_result_tags .dashicons { font-size: 13px; width: 13px; height: 13px; color: currentColor; } .mpsb_shuttle_result_footer { display: flex; flex-direction: column; gap: 0; margin-top: 16px; padding-top: 0; /* Same reasoning as .mpsb_shuttle_result_meta's own margin-left above - lines this up with the text beside the photo instead of the photo's own left edge. */ margin-left: 110px; } .mpsb_shuttle_result_times_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .mpsb_shuttle_result_times_label { font-size: 12px; font-weight: 600; line-height: 1.3; color: #9a4a16; letter-spacing: 0; } .mpsb_shuttle_result_times { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; /* Now a