.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.
             */
            .mpsb_shuttle_search_form .mpsb_search_bar {
                background: #ffffff;
                border: 1px solid var(--mpsb-border);
                border-radius: 12px;
                padding: 6px;
                box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.22);
            }

            .mpsb_shuttle_search_form .mpsb_form_grid {
                grid-template-columns: minmax(0, 1.2fr) 32px minmax(0, 1.2fr) minmax(168px, 0.9fr) auto;
                gap: 0;
                align-items: 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: 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.
             */
            .mpsb_shuttle_search_form .mpsb_submit_group {
                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;
            }

            .mpsb_shuttle_search_form .mpsb_field_group_dropoff_stop::after,
            .mpsb_shuttle_search_form .mpsb_field_group_date::after {
                content: '';
                position: absolute;
                top: 12px;
                bottom: 12px;
                right: 0;
                width: 1px;
                background: #e5e7eb;
            }

            .mpsb_journey_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: 0.08em;
                text-transform: uppercase;
            }

            .mpsb_shuttle_search_form .mpsb_field_group label {
                margin-bottom: 6px;
                font-size: 10px;
                font-weight: 600;
                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. */
            .mpsb_route_type_tabs {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch;
                gap: 4px;
                margin-bottom: 10px;
                padding: 5px;
                border-radius: 12px;
                background: #f3f4fe;
                box-shadow: none;
            }

            .mpsb_route_type_tab {
                flex: 1 1 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin: 0;
                padding: 11px 14px;
                border: none;
                border-radius: 8px;
                background: transparent;
                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: #333333;
                background: rgba(255, 255, 255, 0.55);
            }

            .mpsb_route_type_tab.is-active {
                color: #ffffff;
                background: var(--mpsb-accent);
                box-shadow: none;
            }

            .mpsb_route_type_tab:focus-visible {
                outline: none;
                box-shadow: 0 0 0 3px 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-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: 0 0 14px;
                padding: 5px 12px;
                border-radius: 999px;
                background: #fff4ea;
                border: 1px solid #fdba74;
                font-size: 12px;
                font-weight: 600;
                line-height: 1.3;
                color: var(--mpsb-accent);
                box-shadow: none;
            }

            .mpsb_route_type_hint::before {
                content: '';
                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: #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;
            }

            .mpsb_shuttle_search_form .mpsb_search_bar .mpsb_custom_select_trigger,
            .mpsb_shuttle_search_form .mpsb_search_bar .form-control {
                min-height: 28px;
                padding: 0;
                border: none;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                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: transparent !important;
            }

            .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: #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: 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: linear-gradient(180deg, #ff7d1a 0%, var(--mpsb-accent) 55%, #f26600 100%);
                color: #fff;
                border: 0;
                font-size: 15px;
                letter-spacing: -0.01em;
                box-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: linear-gradient(180deg, var(--mpsb-accent) 0%, #ec6100 55%, #dd5a00 100%);
                box-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 <body>, 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: 46px;
                    border-radius: 10px;
                }

                .mpsb_route_type_tabs {
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;
                }

                .mpsb_route_type_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 <ul> (see render_shuttle_results_list()) - it's an
                   informational list of operating times, not a picker, but
                   still no bullets/indent wanted for it. */
                padding: 0;
                list-style: none;
            }

            .mpsb_shuttle_result_seats {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 4px 9px;
                border-radius: 999px;
                background: #f8e6d8;
                color: #9a4a16;
                font-size: 11px;
                font-weight: 600;
                line-height: 1.3;
            }

            .mpsb_shuttle_result_seats.is-sold-out {
                background: #fef2f2;
                color: #b91c1c;
            }

            .mpsb_shuttle_result_seats .dashicons {
                font-size: 13px;
                width: 13px;
                height: 13px;
            }

            .mpsb_shuttle_result_aside {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 22px 40px;
                border-left: 1px solid #e6ddd4;
            }

            /* Pinned to the card's own top-right corner (see the `position:
               relative` added to .mpsb_shuttle_result_card) rather than laid
               out as a normal flex child of the aside - that column centers
               its other children (price/note/Select) vertically as a group,
               which this pill sitting level with the service-type badge on
               the opposite side must not shift. */
            .mpsb_shuttle_result_aside .mpsb_shuttle_result_seats {
                position: absolute;
                top: 18px;
                right: 18px;
                margin: 0;
            }

            .mpsb_shuttle_result_price {
                font-size: 28px;
                font-weight: 700;
                letter-spacing: -0.02em;
                line-height: 1.1;
                color: #9a3412;
            }

            .mpsb_shuttle_result_price .woocommerce-Price-amount,
            .mpsb_shuttle_result_price .woocommerce-Price-amount * {
                color: inherit;
                font-size: inherit;
                font-weight: inherit;
                font-family: inherit;
                letter-spacing: inherit;
                line-height: inherit;
            }

            .mpsb_shuttle_result_price_note {
                margin: 2px 0 0;
                font-size: 12px;
                font-weight: 400;
                line-height: 1.3;
                color: #9ca3af;
            }

            .mpsb_shuttle_result_until {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                margin: 10px 0 0;
                padding: 4px 8px;
                border-radius: 999px;
                background: #f3f4f6;
                font-size: 12px;
                font-weight: 500;
                line-height: 1.3;
                color: #6b7280;
            }

            .mpsb_shuttle_result_until[hidden] {
                display: none;
            }

            .mpsb_shuttle_result_until .dashicons {
                font-size: 13px;
                width: 13px;
                height: 13px;
            }

            /* Private Shuttle result card: no departure-time buttons to show
               (see is_flexible_time in render_shuttle_results_list()) - this
               note stands in where they'd otherwise be. */
            .mpsb_shuttle_result_flexible_note {
                display: flex;
                align-items: flex-start;
                gap: 6px;
                margin: 8px 0 0;
                font-size: 12.5px;
                line-height: 1.45;
                color: #6b7280;
            }

            .mpsb_shuttle_result_flexible_note .dashicons {
                flex: 0 0 auto;
                margin-top: 1px;
                font-size: 14px;
                width: 14px;
                height: 14px;
                color: #9ca3af;
            }

            .mpsb_shuttle_result_select {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-top: 14px;
                width: 100%;
                min-height: 40px;
                padding: 0 20px;
                border-radius: 8px;
                background: #9a3412;
                color: #ffffff;
                font-family: inherit;
                font-size: 14px;
                font-weight: 600;
                line-height: 1;
                letter-spacing: 0;
                text-decoration: none;
                box-shadow: none;
                transition: background-color 0.18s ease;
            }

            .mpsb_shuttle_result_select:hover,
            .mpsb_shuttle_result_select:focus {
                background: #7c2d12;
                color: #ffffff;
                transform: none;
                box-shadow: none;
            }

            .mpsb_shuttle_result_select.is-disabled {
                background: #e5e7eb;
                color: #9ca3af;
                box-shadow: none;
                cursor: not-allowed;
                pointer-events: none;
            }

            .mpsb_time_option {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 7px 11px;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                background: #ffffff;
                color: #6b7280;
                font-family: inherit;
                font-size: 12px;
                font-weight: 600;
                line-height: 1.2;
                letter-spacing: 0;
                text-decoration: none;
                cursor: pointer;
                transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
            }

            .mpsb_time_option .dashicons {
                color: #9ca3af;
                font-size: 14px;
                width: 14px;
                height: 14px;
                transition: color 0.15s ease;
            }

            a.mpsb_time_option:hover {
                border-color: #9a3412;
                background: #ffffff;
                color: #9a3412;
            }

            a.mpsb_time_option:hover .dashicons {
                color: #9a3412;
            }

            .mpsb_time_option.is-selected,
            a.mpsb_time_option.is-selected:hover {
                border-color: #9a3412;
                border-width: 1.5px;
                background: #ffffff;
                color: #9a3412;
                box-shadow: none;
                padding: 6.5px 10.5px;
            }

            .mpsb_time_option.is-selected .dashicons,
            a.mpsb_time_option.is-selected:hover .dashicons {
                color: #9a3412;
            }

            .mpsb_time_option.is-static {
                cursor: default;
            }

            .mpsb_time_option.is-disabled {
                opacity: 0.45;
                cursor: not-allowed;
            }

            /* Review Your Trip drawer: the departure-time picker
               (render_trip_time_field()) and the editable date field next
               to it (render_trip_review()'s $date_change_base_url). The
               time picker reuses .mpsb_time_option's own look via
               .mpsb_trip_time_option - a plain radio+label pair needing no
               JS of its own; the browser's own :checked state is what moves
               the "selected" look (the date field's own change handler, in
               shuttle-search.js, is the only JS either one needs). */
            .mpsb_trip_time_picker {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .mpsb_trip_time_option_input {
                position: absolute;
                opacity: 0;
                width: 1px;
                height: 1px;
                pointer-events: none;
            }

            .mpsb_trip_time_option {
                flex-direction: column;
                align-items: flex-start;
                gap: 2px;
            }

            .mpsb_trip_time_option_meta {
                font-size: 10px;
                font-weight: 500;
                color: #9ca3af;
            }

            .mpsb_trip_time_option_input:checked + .mpsb_trip_time_option,
            .mpsb_trip_time_option_input:checked + .mpsb_trip_time_option:hover {
                border-color: #9a3412;
                border-width: 1.5px;
                background: #ffffff;
                color: #9a3412;
                padding: 6.5px 10.5px;
            }

            .mpsb_trip_time_option_input:checked + .mpsb_trip_time_option .dashicons {
                color: #9a3412;
            }

            .mpsb_trip_time_option_input:focus-visible + .mpsb_trip_time_option {
                outline: 2px solid #9a3412;
                outline-offset: 2px;
            }

            .mpsb_trip_date_input,
            .mpsb_trip_seats_input {
                border: none;
                background: transparent;
                padding: 0;
                margin: 0;
                font: inherit;
                color: inherit;
                cursor: pointer;
                width: auto;
                max-width: 140px;
            }

            .mpsb_trip_date_input:focus,
            .mpsb_trip_seats_input:focus {
                outline: 2px solid currentColor;
                outline-offset: 2px;
            }

            @media (max-width: 720px) {
                .mpsb_shuttle_results_heading {
                    grid-template-columns: minmax(0, 1fr);
                    grid-template-areas:
                        "eyebrow"
                        "title"
                        "meta"
                        "action";
                }

                .mpsb_shuttle_results_heading .mpsb_back_link,
                .mpsb_modify_search {
                    justify-self: start;
                    margin-top: 12px;
                }

                .mpsb_shuttle_booking_summary .mpsb_shuttle_results_heading h3 {
                    font-size: 26px;
                }

                .mpsb_shuttle_result_card {
                    grid-template-columns: 1fr;
                }

                .mpsb_shuttle_result_main {
                    padding: 18px 16px;
                }

                .mpsb_shuttle_result_photo {
                    flex-basis: 72px;
                    width: 72px;
                    height: 56px;
                    border-radius: 8px;
                }

                /* The narrower photo above changes the indent this would
                   need to line up with, and there is much less width to
                   spare for one at all here - back to flush with the
                   card's own edge like every other narrow-viewport row. */
                .mpsb_shuttle_result_meta,
                .mpsb_shuttle_result_footer {
                    margin-left: 0;
                }

                .mpsb_shuttle_result_aside {
                    align-items: stretch;
                    text-align: center;
                    padding: 16px 16px 18px;
                    border-left: 0;
                    border-top: 1px solid #e6ddd4;
                }

                /* The card stacks to one column here, so main and aside sit
                   one above the other - a pill still pinned to the whole
                   card's top-right corner (see the base rule) would land on
                   top of the main content's badge instead of the aside.
                   Back to a normal, in-flow flex child at this width. */
                .mpsb_shuttle_result_aside .mpsb_shuttle_result_seats {
                    position: static;
                    align-self: center;
                    margin: 0 0 10px;
                }

                .mpsb_shuttle_result_select {
                    width: 100%;
                    margin-top: 12px;
                }

                .mpsb_shuttle_result_schedule {
                    max-width: none;
                    gap: 12px;
                }

                .mpsb_shuttle_result_tags {
                    padding-left: 0;
                    border-left: 0;
                }

                .mpsb_shuttle_result_times_head {
                    flex-wrap: wrap;
                }
            }

            .mpsb_error {
                padding: 14px 16px;
                border-radius: 14px;
                background: #fff1f1;
                border: 1px solid #f2c8c8;
                color: #a13535;
            }

            .mpsb_native_checkout_form {
                display: flex;
                flex-direction: column;
                gap: 18px;
                margin: 22px 0 16px;
                padding: 28px;
                border-radius: 24px;
                background: linear-gradient(145deg, #fefefe 0%, #f6fbf9 100%);
                border: 1px solid rgba(29, 92, 77, 0.12);
                box-shadow: 0 24px 70px rgba(20, 35, 30, 0.08);
            }

            .mpsb_native_checkout_form .mpsb_field_group {
                grid-column: unset;
            }

            .mpsb_native_checkout_form .mpsb_field_group label {
                color: #14231e;
            }

            .mpsb_native_checkout_form .form-control {
                border-color: rgba(29, 92, 77, 0.16);
                background: rgba(255, 255, 255, 0.85);
                color: #14231e;
            }

            .mpsb_native_checkout_form .form-control:focus {
                border-color: #1d5c4d;
                box-shadow: 0 0 0 3px rgba(29, 92, 77, 0.14);
            }

            .mpsb_payment_method_box {
                padding: 18px 20px;
                border-radius: 16px;
                background: rgba(243, 179, 76, 0.1);
                border: 1px solid rgba(243, 179, 76, 0.3);
                color: #5f6f69;
                font-size: 14px;
                line-height: 1.6;
            }

            .mpsb_payment_method_box strong {
                color: #14231e;
            }

            .mpsb_payment_method_box p {
                margin: 8px 0 0;
            }

            /*
             * Choosing between payment methods.
             *
             * Only rendered when there is more than one, so a site running
             * Offline alone keeps the plain single-method box above and never
             * sees a radio button with nothing to compare it to.
             *
             * Each option is a card, all of which is clickable: on a phone a
             * bare radio button is a few-millimetre target sitting next to the
             * one control that completes a purchase.
             */
            .mpsb_payment_choice > strong {
                display: block;
                margin-bottom: 12px;
                color: #14231e;
                font-size: 15px;
            }

            .mpsb_payment_option {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                padding: 14px 16px;
                margin-bottom: 10px;
                border: 1px solid rgba(20, 35, 30, 0.14);
                border-radius: 12px;
                background: #fff;
                cursor: pointer;
                transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
            }

            .mpsb_payment_option:last-child {
                margin-bottom: 0;
            }

            .mpsb_payment_option:hover {
                border-color: rgba(20, 35, 30, 0.3);
            }

            .mpsb_payment_option input[type="radio"] {
                margin: 3px 0 0;
                width: 18px;
                height: 18px;
                flex: 0 0 auto;
                accent-color: #1d5c4d;
            }

            /* The chosen method must be obvious at a glance: this is the last
               thing a customer checks before paying. */
            .mpsb_payment_option:has(input[type="radio"]:checked) {
                border-color: #1d5c4d;
                background: rgba(29, 92, 77, 0.06);
                box-shadow: inset 0 0 0 1px #1d5c4d;
            }

            /* Keyboard focus lands on the card, not just the dot. */
            .mpsb_payment_option:focus-within {
                outline: 2px solid #1d5c4d;
                outline-offset: 2px;
            }

            .mpsb_payment_option_body {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }

            .mpsb_payment_option_label {
                font-weight: 600;
                color: #14231e;
                font-size: 15px;
                line-height: 1.35;
            }

            .mpsb_payment_option_desc {
                color: #5f6f69;
                font-size: 13px;
                line-height: 1.5;
            }

            @media (max-width: 600px) {
                .mpsb_trip_card {
                    flex-direction: column;
                }

                .mpsb_trip_action {
                    border-left: none;
                    border-top: 1px solid rgba(29, 92, 77, 0.1);
                    padding: 22px 18px;
                }

                .mpsb_trip_main {
                    padding: 22px 18px;
                }

                .mpsb_trip_details {
                    grid-template-columns: 1fr;
                }

                .mpsb_route_visual {
                    flex-direction: column;
                    gap: 18px;
                    padding: 18px;
                }

                .mpsb_line {
                    width: 3px;
                    height: 42px;
                    margin: 0 0 0 6px;
                    flex: 0 0 42px;
                    background: linear-gradient(180deg, rgba(29, 92, 77, 0.22), rgba(243, 179, 76, 0.36));
                }

                .mpsb_line::after {
                    top: auto;
                    bottom: -1px;
                    left: 50%;
                    right: auto;
                    transform: translateX(-50%) rotate(135deg);
                }
            }

/* In-page booking flow.
   The wrapper exists only so the script has a stable node to swap; it must not
   participate in layout, or it becomes the block editor's constrained child
   instead of the card and the form renders at the wrong width. display:contents
   removes its box while keeping it in the DOM for replaceWith(). */
.mpsb_shuttle_flow {
    display: contents;
}

.mpsb_shuttle_flow.is-loading > * {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* Right-hand booking drawer. Compact panel that matches the search-results
   cards: Inter, tight spacing, brown-orange actions, no ornamental card. */
body.mpsb-booking-modal-open {
    overflow: hidden;
}

/* Route Plan - "View route plan" trigger on a Shared City Shuttle result
   card, and the centered popup it opens (see render_route_plan_trigger()/
   render_route_plan_modal_shell() in Mpsb_ShuttleSearchClass.php). Its own
   small, self-contained modal - deliberately not .mpsb_booking_modal, since
   it never needs to survive a step re-render the way the booking drawer
   does. */
body.mpsb-route-plan-modal-open {
    overflow: hidden;
}

.mpsb_shuttle_result_route_plan_trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9a3412;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.mpsb_shuttle_result_route_plan_trigger:hover,
.mpsb_shuttle_result_route_plan_trigger:focus-visible {
    text-decoration: underline;
}

.mpsb_shuttle_result_route_plan_trigger .dashicons {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.mpsb_route_plan_modal {
    --mpsb-accent-dark: #9a3412;
    --mpsb-border: #e8eaef;
    --mpsb-text: #111827;
    --mpsb-text-soft: #6b7280;
    --mpsb-surface: #ffffff;
    --mpsb-surface-soft: #f8fafc;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--mpsb-text);
}

.mpsb_route_plan_modal[hidden] {
    display: none;
}

.mpsb_route_plan_modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(17, 24, 39, 0.45);
    cursor: pointer;
}

.mpsb_route_plan_modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(440px, 100%);
    max-height: min(560px, 100%);
    border-radius: 14px;
    background: var(--mpsb-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    animation: mpsb-route-plan-in 0.18s ease both;
}

@keyframes mpsb-route-plan-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.mpsb_route_plan_modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 16px 18px;
    border-bottom: 1px solid var(--mpsb-border);
}

.mpsb_route_plan_modal__header h2 {
    margin: 0;
    color: var(--mpsb-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mpsb_route_plan_modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid var(--mpsb-border);
    border-radius: 8px;
    background: var(--mpsb-surface);
    color: #4b5563;
    cursor: pointer;
}

.mpsb_route_plan_modal__close:hover,
.mpsb_route_plan_modal__close:focus-visible {
    background: var(--mpsb-surface-soft);
    border-color: #d1d5db;
    color: var(--mpsb-text);
}

.mpsb_route_plan_modal__close .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.mpsb_route_plan_modal__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
}

.mpsb_route_plan__meta {
    margin: 0 0 16px;
    color: var(--mpsb-text-soft);
    font-size: 12.5px;
    font-weight: 600;
}

.mpsb_route_plan__meta_sep {
    margin: 0 6px;
}

.mpsb_route_plan__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mpsb_route_plan__stop {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 20px;
}

.mpsb_route_plan__stop:last-child {
    padding-bottom: 0;
}

.mpsb_route_plan__marker {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
}

.mpsb_route_plan__marker::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
}

.mpsb_route_plan__stop:not(:last-child) .mpsb_route_plan__marker::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 4.5px;
    bottom: -20px;
    width: 1px;
    background: #e2e8f0;
}

.mpsb_route_plan__stop.is-pickup .mpsb_route_plan__marker::before,
.mpsb_route_plan__stop.is-dropoff .mpsb_route_plan__marker::before {
    top: 1px;
    width: 10px;
    height: 10px;
    background: var(--mpsb-accent-dark);
}

.mpsb_route_plan__stop_body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
}

.mpsb_route_plan__stop_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.mpsb_route_plan__stop_name {
    color: var(--mpsb-text);
    font-size: 13.5px;
    font-weight: 600;
}

.mpsb_route_plan__stop.is-pickup .mpsb_route_plan__stop_name,
.mpsb_route_plan__stop.is-dropoff .mpsb_route_plan__stop_name {
    font-weight: 700;
}

.mpsb_route_plan__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: var(--mpsb-accent-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mpsb_route_plan__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.mpsb_route_plan__time {
    display: block;
    margin-top: 4px;
    color: var(--mpsb-text-soft);
    font-size: 12px;
}

.mpsb_route_plan__stop.is-pickup .mpsb_route_plan__time,
.mpsb_route_plan__stop.is-dropoff .mpsb_route_plan__time {
    color: var(--mpsb-accent-dark);
    font-weight: 700;
}

.mpsb_booking_modal {
    --mpsb-accent: #ff6e00;
    --mpsb-accent-dark: #9a3412;
    --mpsb-border: #e8eaef;
    --mpsb-text: #111827;
    --mpsb-text-soft: #6b7280;
    --mpsb-surface: #ffffff;
    --mpsb-surface-soft: #f8fafc;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    justify-content: flex-end;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--mpsb-text);
}

body.admin-bar .mpsb_booking_modal {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .mpsb_booking_modal {
        top: 46px;
    }
}

.mpsb_booking_modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(17, 24, 39, 0.4);
    cursor: pointer;
}

/*
 * 440px was too narrow for what the drawer actually has to hold once a trip is
 * a round trip: outbound and return times, a fare summary with both legs, and
 * a passenger form per seat all had to stack into one column and the return
 * half went out of sight. It is a working surface, so it gets the width of
 * one - still a drawer, never the whole screen.
 */
.mpsb_booking_modal__drawer {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    height: 100%;
    background: var(--mpsb-surface);
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.16);
    animation: mpsb-booking-drawer-in 0.22s ease both;
}

/*
 * Below that, 760px would leave a 20px sliver of backdrop - which reads as a
 * broken drawer rather than a deliberate one - so it becomes a full-width
 * sheet, the right shape for a phone or a narrow tablet anyway.
 */
@media (max-width: 900px) {
    .mpsb_booking_modal__drawer {
        width: 100%;
    }
}

@keyframes mpsb-booking-drawer-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.mpsb_booking_modal__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mpsb-border);
    background: var(--mpsb-surface);
    z-index: 2;
}

.mpsb_booking_modal__toolbar h2 {
    margin: 0;
    color: var(--mpsb-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.mpsb_booking_modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--mpsb-border);
    border-radius: 8px;
    background: var(--mpsb-surface);
    color: #4b5563;
    text-decoration: none;
    flex: 0 0 auto;
}

.mpsb_booking_modal__close:hover,
.mpsb_booking_modal__close:focus {
    background: var(--mpsb-surface-soft);
    border-color: #d1d5db;
    color: var(--mpsb-text);
}

.mpsb_booking_modal__close .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

.mpsb_booking_modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    /*
     * The sticky "Proceed to Booking" footer bleeds to the drawer edges with
     * negative side margins, which is 36px wider than its own column - enough
     * to give the drawer a horizontal scrollbar it should never have. The
     * bleed is deliberate; the sideways scroll is not.
     */
    overflow-x: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.mpsb_booking_modal .mpsb_shuttle_booking_summary {
    max-width: none;
    margin: 0;
}

.mpsb_booking_modal[data-mpsb-booking-modal-step="review"] .mpsb_review_heading,
.mpsb_booking_modal .mpsb-route-map-card {
    display: none;
}

.mpsb_booking_modal .mpsb_trip_card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--mpsb-surface);
    box-shadow: none;
    overflow: visible;
}

.mpsb_booking_modal .mpsb_trip_main {
    padding: 16px 18px 14px;
    background: var(--mpsb-surface);
}

.mpsb_booking_modal .mpsb_trip_header {
    margin: 0 0 12px;
}

.mpsb_booking_modal .mpsb_trip_badge {
    display: inline-flex;
    margin: 0 0 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mpsb_booking_modal .mpsb_trip_header h4 {
    margin: 0;
    color: var(--mpsb-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.mpsb_booking_modal .mpsb_trip_route_name {
    margin: 3px 0 0;
    color: var(--mpsb-text-soft);
    font-size: 12px;
    font-weight: 500;
}

.mpsb_booking_modal .mpsb_route_visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid var(--mpsb-border);
    border-radius: 10px;
    background: var(--mpsb-surface-soft);
}

.mpsb_booking_modal .mpsb_stop_info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.mpsb_booking_modal .mpsb_dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 6px 0 0;
    border: 2px solid #9a3412;
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
}

.mpsb_booking_modal .mpsb_dot.start {
    background: #9a3412;
    border-color: #9a3412;
}

.mpsb_booking_modal .mpsb_dot.end {
    background: #fff;
    border-color: #d97706;
}

.mpsb_booking_modal .mpsb_line {
    flex: none;
    width: 100%;
    height: 2px;
    margin: 9px 0 0;
    background: #e5e7eb;
    border-radius: 999px;
}

.mpsb_booking_modal .mpsb_line::after {
    display: none;
}

.mpsb_booking_modal .mpsb_stop_time {
    margin: 0 0 2px;
    color: #9a3412;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mpsb_booking_modal .mpsb_stop_content strong {
    display: block;
    color: var(--mpsb-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

.mpsb_booking_modal .mpsb_sub_point {
    margin-top: 2px;
    color: var(--mpsb-text-soft);
    font-size: 11px;
}

.mpsb_booking_modal .mpsb_trip_details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    font-size: 12px;
}

.mpsb_booking_modal .mpsb_detail_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--mpsb-border);
    border-radius: 8px;
    background: var(--mpsb-surface);
    color: var(--mpsb-text);
}

.mpsb_booking_modal .mpsb_detail_item .dashicons {
    display: none;
}

.mpsb_booking_modal .mpsb_detail_item strong {
    color: var(--mpsb-text-soft);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mpsb_booking_modal .mpsb_detail_item > span:last-child {
    color: var(--mpsb-text);
    font-size: 13px;
    font-weight: 600;
}

/* The Date detail item's value is now an <input>, and Seats a <select> for
   a Shared shuttle (see render_trip_review()) - not a <span> either way, so
   the rule above no longer matches them; they need their own copy of the
   same look. */
.mpsb_booking_modal .mpsb_detail_item .mpsb_trip_date_input,
.mpsb_booking_modal .mpsb_detail_item .mpsb_trip_seats_input {
    color: var(--mpsb-text);
    font-size: 13px;
    font-weight: 600;
}

.mpsb_booking_modal .mpsb_trip_action {
    position: static;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: flex-start;
    min-width: 0;
    padding: 0 18px 18px;
    border: 0;
    background: var(--mpsb-surface);
}

.mpsb_booking_modal .mpsb_shuttle_add_to_cart_form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mpsb_booking_modal .mpsb_trip_type_toggle {
    gap: 6px;
    margin: 0;
}

.mpsb_booking_modal .mpsb_trip_type_option {
    padding: 8px 10px;
    border-radius: 8px;
    border-color: var(--mpsb-border);
    font-size: 12px;
}

.mpsb_booking_modal .mpsb_trip_type_option:has(input:checked) {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

.mpsb_booking_modal .mpsb_pricing_summary {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--mpsb-border);
    border-radius: 10px;
    background: var(--mpsb-surface-soft);
}

.mpsb_booking_modal .mpsb_price_heading {
    margin: 0 0 8px;
}

.mpsb_booking_modal .mpsb_price_label {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--mpsb-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.mpsb_booking_modal .mpsb_price_row {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--mpsb-text-soft);
}

.mpsb_booking_modal .mpsb_price_row strong {
    color: var(--mpsb-text);
    font-weight: 600;
    text-align: right;
}

.mpsb_booking_modal .mpsb-passenger-fare-line {
    font-size: 12px;
}

.mpsb_booking_modal .mpsb_price_row.mpsb_subtotal {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--mpsb-border);
    font-size: 13px;
}

.mpsb_booking_modal .mpsb_price_row.mpsb_subtotal strong,
.mpsb_booking_modal .mpsb_price_row.mpsb_subtotal .woocommerce-Price-amount {
    color: var(--mpsb-text);
    font-size: 16px;
    font-weight: 700;
}

.mpsb_booking_modal .mpsb-passenger-details {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--mpsb-border);
    border-radius: 10px;
    background: var(--mpsb-surface);
}

.mpsb_booking_modal .mpsb-passenger-details > legend {
    margin: 0 0 8px;
    padding: 0;
    color: var(--mpsb-text);
    font-size: 12px;
    font-weight: 700;
}

.mpsb_booking_modal .mpsb-passenger-details__grid {
    gap: 8px;
}

.mpsb_booking_modal .mpsb_field_group {
    margin: 0;
}

.mpsb_booking_modal .mpsb_field_group label {
    display: block;
    margin: 0 0 4px;
    color: var(--mpsb-text-soft);
    font-size: 11px;
    font-weight: 600;
}

.mpsb_booking_modal .mpsb_field_group .form-control,
.mpsb_booking_modal .form-control {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--mpsb-border);
    border-radius: 8px;
    background: var(--mpsb-surface);
    color: var(--mpsb-text);
    font-size: 13px;
    box-sizing: border-box;
}

.mpsb_booking_modal textarea.form-control {
    min-height: 64px;
    padding: 8px 10px;
    resize: vertical;
}

.mpsb_booking_modal .mpsb_field_group .form-control:focus,
.mpsb_booking_modal .form-control:focus {
    border-color: var(--mpsb-accent);
    box-shadow: 0 0 0 3px rgba(255, 110, 0, 0.12);
    outline: none;
}

.mpsb_booking_modal .mpsb_note_field {
    margin: 0;
}

.mpsb_booking_modal .mpsb_field_hint {
    margin-left: 4px;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 500;
}

.mpsb_booking_modal .mpsb_trip_cta {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px -18px -18px;
    padding: 12px 18px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 28%);
}

.mpsb_booking_modal .mpsb_book_btn,
.mpsb_booking_modal .mpsb_trip_cta .mpsb_book_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #9a3412;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    transform: none;
}

.mpsb_booking_modal .mpsb_book_btn:hover,
.mpsb_booking_modal .mpsb_book_btn:focus {
    background: #7c2d12;
    box-shadow: none;
    color: #fff;
    filter: none;
    transform: none;
}

.mpsb_booking_modal .mpsb_trip_action .mpsb_back_link {
    display: block;
    margin: 25px 0 0;
    color: var(--mpsb-text-soft);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.mpsb_booking_modal .mpsb_trip_action .mpsb_back_link:hover {
    color: var(--mpsb-text);
}

.mpsb_booking_modal .mpsb_native_checkout {
    max-width: none;
    margin: 0;
    padding: 16px 18px 18px;
}

.mpsb_booking_modal .mpsb_native_checkout .mpsb_review_heading {
    display: block;
    margin: 0 0 12px;
}

.mpsb_booking_modal.is-loading .mpsb_booking_modal__body {
    position: relative;
    min-height: 180px;
}

.mpsb_booking_modal.is-loading .mpsb_booking_modal__body > *:not(.mpsb_booking_modal__spinner) {
    visibility: hidden;
    pointer-events: none;
}

.mpsb_booking_modal.is-loading .mpsb_booking_modal__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -14px 0 0 -14px;
    z-index: 3;
}

.mpsb_wc_drawer_notice {
    margin: 12px 18px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
}

/*
 * No per-step width. The drawer used to narrow to 560px for checkout, so it
 * changed size under the customer between Review, Checkout and Confirmed -
 * and it did it in the wrong direction: the checkout step carries the widest
 * content there is (payment fields, order review, a gateway's own form) and
 * got the least room for it. One width, every step.
 */

.mpsb_booking_modal[data-mpsb-booking-modal-step="checkout"] .mpsb_booking_modal__body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

.mpsb_wc_drawer_checkout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    gap: 0;
}

.mpsb_wc_drawer_back {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid var(--mpsb-border, #e8eaef);
    background: #fff;
    color: var(--mpsb-accent-dark, #9a3412);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.mpsb_wc_drawer_back:hover,
.mpsb_wc_drawer_back:focus {
    text-decoration: underline;
}

.mpsb_wc_drawer_frame {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    background: #fff;
}

.mpsb_booking_modal__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #fed7aa;
    border-top-color: #9a3412;
    border-radius: 50%;
    animation: mpsb-booking-spin 0.7s linear infinite;
}

@keyframes mpsb-booking-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
    .mpsb_booking_modal__drawer {
        width: 100%;
    }

    .mpsb_booking_modal .mpsb-passenger-details__grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Travel passes on the booking form

   The `passes` option on [mpsb_shuttle_search] adds a Travel pass tab to the
   same Shuttle type tab bar (.mpsb_route_type_tabs/.mpsb_route_type_tab -
   see render_search_form() in Mpsb_ShuttleSearchClass.php and
   render_mode_switch() in Mpsb_PassPurchaseClass.php) and, behind it, a
   one-step purchase card. No dedicated switch styling needed any more - both
   tab bars now share one set of rules.
--------------------------------------------------------------------------- */

.mpsb_pass_form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mpsb_pass_plans {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.mpsb_pass_plan_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.mpsb_pass_plan_filters button {
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid #dce4ed;
    border-radius: 999px;
    background: #fff;
    color: #536174;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.mpsb_pass_plan_filters button:hover,
.mpsb_pass_plan_filters button.is-active {
    border-color: #f97316;
    background: #fff7ed;
    color: #c2410c;
}

.mpsb_pass_plan_filters button:focus-visible {
    outline: 3px solid rgba(249, 115, 22, .2);
    outline-offset: 2px;
}

.mpsb_pass_plans legend {
    padding: 0;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: .01em;
}

.mpsb_pass_plan_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
    gap: 14px;
    justify-content: start;
}

.mpsb_pass_plan[hidden] {
    display: none !important;
}

.mpsb_pass_plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 184px;
    padding: 18px;
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .055);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.mpsb_pass_plan:hover {
    border-color: #fb923c;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
    transform: translateY(-2px);
}

.mpsb_pass_plan:focus-within {
    border-color: #f97316;
    outline: 3px solid rgba(249, 115, 22, .2);
    outline-offset: 2px;
}

.mpsb_pass_plan:has(input:checked) {
    border-color: #f97316;
    background: linear-gradient(145deg, #fffaf5 0%, #fff7ed 100%);
    box-shadow: 0 8px 24px rgba(234, 88, 12, .12), inset 0 0 0 1px #f97316;
}

.mpsb_pass_plan_input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mpsb_pass_plan_top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 15px;
}

.mpsb_pass_plan_duration {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.mpsb_pass_plan_scope {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: right;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.mpsb_pass_plan:has(input:checked) .mpsb_pass_plan_duration {
    background: #ffedd5;
    color: #c2410c;
}

.mpsb_pass_plan_check {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.mpsb_pass_plan_check::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 7px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) scale(.6);
    transition: opacity .18s ease, transform .18s ease;
}

.mpsb_pass_plan_input:checked ~ .mpsb_pass_plan_top .mpsb_pass_plan_check {
    border-color: #f97316;
    background: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, .12);
}

.mpsb_pass_plan_input:checked ~ .mpsb_pass_plan_top .mpsb_pass_plan_check::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.mpsb_pass_plan_body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.mpsb_pass_plan_name {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 750;
    color: #0f172a;
}

.mpsb_pass_plan_desc {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

.mpsb_pass_plan_footer {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: auto;
    padding-top: 16px;
}

.mpsb_pass_plan_price {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #c2410c;
    white-space: nowrap;
}

.mpsb_pass_plan_price_note {
    color: #7c8798;
    font-size: 11px;
    font-weight: 600;
}

.mpsb_pass_form_section {
    padding: 20px;
    border: 1px solid #e5eaf0;
    border-radius: 16px;
    background: #fbfcfd;
}

.mpsb_pass_section_heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 17px;
}

.mpsb_pass_section_number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #fff1e6;
    color: #c2410c;
    font-size: 12px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .16);
}

.mpsb_pass_section_heading h4 {
    margin: 0;
    color: #172033;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 750;
    text-transform: none;
}

.mpsb_pass_section_heading p {
    margin: 3px 0 0;
    color: #6b778a;
    font-size: 12px;
    line-height: 1.45;
}

.mpsb_pass_form > .mpsb_notice {
    max-width: none;
    margin: 0;
    padding: 15px 17px;
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.55;
}

.mpsb_pass_form > .mpsb_notice_info {
    align-items: center;
    background: #f8fafc;
    border-color: #dfe6ee;
    color: #334155;
}

.mpsb_pass_form > .mpsb_notice_info::before {
    content: 'i';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff1e6;
    color: #c2410c;
    font-size: 13px;
    font-weight: 800;
}














@media print {
    .mpsb_pass_actions {
        display: none;
    }
}

@media (max-width: 600px) {
    .mpsb_pass_plan_grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mpsb_pass_plan {
        min-height: 170px;
    }

    .mpsb_pass_code_value {
        font-size: 26px;
    }

    .mpsb_pass_form_section {
        padding: 17px 14px;
    }
}

/* The pass submit sits outside the search form's grid, so the
   `.mpsb_submit_group { grid-column: span 3 }` rule never applies to it and it
   would otherwise stretch the full width of the card. */
.mpsb_pass_submit {
    margin-top: 0;
}

.mpsb_pass_submit .mpsb_search_btn {
    min-width: 220px;
    width: auto;
}

@media (max-width: 600px) {
    .mpsb_pass_submit .mpsb_search_btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mpsb_route_type_tab,
    .mpsb_pass_plan,
    .mpsb_pass_plan_duration,
    .mpsb_pass_plan_check,
    .mpsb_pass_plan_check::after,
    .mpsb_search_btn,
    .mpsb_search_btn .dashicons {
        transition: none;
    }

    .mpsb_pass_plan:hover,
    .mpsb_search_btn:hover,
    .mpsb_shuttle_result_select:hover {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   Travel pass — the finished pass

   Styled as a ticket rather than a receipt: the code is the thing the
   passenger shows, so it is the largest element on the card. Colours are the
   plugin's own orange accent over slate ink, matching the admin.
--------------------------------------------------------------------------- */

.mpsb_pass_result_head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.mpsb_pass_result_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}

.mpsb_pass_result_icon.is-ok {
    background: #dcfce7;
    color: #15803d;
}

.mpsb_pass_result_icon.is-pending {
    background: #fdf1dd;
    color: #b8791f;
}

.mpsb_pass_result_title {
    margin: 2px 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.mpsb_pass_result_sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
}

/* --------------------------------------------------------------- Ticket */

.mpsb_pass_ticket {
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.mpsb_pass_ticket_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid #eef2f7;
}

.mpsb_pass_ticket_brand {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.mpsb_pass_chip {
    padding: 5px 13px;
    border-radius: 40px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mpsb_pass_chip.is-active {
    background: #dcfce7;
    color: #15803d;
}

.mpsb_pass_chip.is-pending {
    background: #fdf1dd;
    color: #b8791f;
}

.mpsb_pass_ticket_route {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 22px 0;
    font-size: 17px;
    font-weight: 700;
    color: #16213f;
    text-align: center;
}

.mpsb_pass_ticket_route i {
    color: #f97316;
    font-style: normal;
    font-size: 20px;
}

.mpsb_pass_code_box {
    margin: 18px 22px 20px;
    padding: 20px;
    text-align: center;
    background: #fff7ed;
    border: 2px dashed #fdba74;
    border-radius: 14px;
}

.mpsb_pass_code_label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #b45309;
}

.mpsb_pass_code_value {
    display: block;
    margin-top: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #0f172a;
    word-break: break-all;
}

/* The tear line, as on a paper ticket. */
.mpsb_pass_ticket_perf {
    height: 0;
    margin: 0 22px;
    border-top: 2px dashed #e4e9f2;
}

.mpsb_pass_summary {
    list-style: none;
    margin: 0;
    padding: 6px 22px 18px;
}

.mpsb_pass_summary li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #f2f5f9;
    font-size: 14px;
}

.mpsb_pass_summary li:last-child {
    border-bottom: 0;
}

.mpsb_pass_summary li span {
    color: #64748b;
}

.mpsb_pass_summary li strong {
    color: #0f172a;
    text-align: right;
}

.mpsb_pass_summary li.is-total {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #e4e9f2;
    font-size: 16px;
}

.mpsb_pass_summary li.is-total strong,
/* WooCommerce wraps a formatted price in its own span, which carries the
   theme's colour — so the accent has to reach the descendant too. */
.mpsb_pass_summary li.is-total strong * {
    color: #ea580c;
    font-size: 18px;
}

/* -------------------------------------------------------------- Actions */

.mpsb_pass_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.mpsb_pass_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.mpsb_pass_btn--primary {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
}

.mpsb_pass_btn--primary:hover {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
}

.mpsb_pass_btn--ghost {
    background: #fff;
    border-color: #cbd5e1;
    color: #475569;
}

.mpsb_pass_btn--ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}

/* Locked, not hidden — the same treatment the admin gives a Pro-only action. */
.mpsb_pass_btn--locked {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #b45309;
}

.mpsb_pass_btn--locked:hover {
    background: #ffedd5;
    color: #9a3412;
}

.mpsb_pass_pro {
    padding: 3px 9px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fb923c, #ea580c);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

@media print {
    .mpsb_pass_actions {
        display: none;
    }

    .mpsb_pass_ticket {
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    .mpsb_pass_code_value {
        font-size: 26px;
    }

    .mpsb_pass_actions .mpsb_pass_btn {
        flex: 1 1 100%;
    }
}

/* Dynamic passenger controls extend the existing booking visual language. */
.mpsb-passenger-selector,
.mpsb-passenger-details {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.mpsb-passenger-selector > legend,
.mpsb-passenger-details > legend {
    width: 100%;
    margin: 0 0 10px;
    color: #17233c;
    font-size: 14px;
    font-weight: 700;
}

.mpsb-passenger-fare-line {
    display: block;
}

/* ---------------------------------------------------------------------------
   Passenger control

   One collapsed field that opens a panel of counters, so this cell is the same
   height as Route, Date and Time no matter how many passenger types are
   configured. The trigger deliberately borrows the exact metrics and caret of
   .mpsb_custom_select_trigger: to a customer this is the fourth dropdown in the
   row, and anything close-but-not-identical would read as a mistake.
   --------------------------------------------------------------------------- */
.mpsb_form_grid .mpsb_field_group_passengers {
    min-width: 0;
}

.mpsb-pax {
    position: relative;
}

.mpsb_form_grid .mpsb_field_group_passengers .mpsb-passenger-selector > legend {
    margin-bottom: 8px;
    color: var(--mpsb-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.mpsb-pax__toggle {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 0 42px 0 14px;
    border: 1px solid var(--mpsb-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--mpsb-text);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mpsb-pax__summary {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Same two-bar chevron the selects use, built from the one element available. */
.mpsb-pax__caret::before,
.mpsb-pax__caret::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 7px;
    height: 2px;
    background: var(--mpsb-accent);
    border-radius: 999px;
    transition: transform 0.25s ease;
}

.mpsb-pax__caret::before {
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
}

.mpsb-pax__caret::after {
    right: 14px;
    transform: translateY(-50%) rotate(-45deg);
}

.mpsb-pax.is-open .mpsb-pax__caret::before {
    transform: translateY(-50%) rotate(-45deg);
}

.mpsb-pax.is-open .mpsb-pax__caret::after {
    transform: translateY(-50%) rotate(45deg);
}

.mpsb-pax.is-open .mpsb-pax__toggle,
.mpsb-pax__toggle:focus-visible {
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
    outline: none;
}

/* Floats over the fields below rather than pushing them down, so opening it
   never reflows the row. Same z-index as the select dropdowns. */
.mpsb-pax__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--mpsb-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.mpsb-pax__panel[hidden] {
    display: none;
}

.mpsb-pax__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
}

.mpsb-pax__row + .mpsb-pax__row {
    border-top: 1px solid var(--mpsb-border);
}

.mpsb-pax__label {
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.mpsb-pax__label strong {
    display: block;
    color: var(--mpsb-text);
    font-size: 14px;
    font-weight: 500;
}

.mpsb-pax__label small {
    display: block;
    margin-top: 2px;
    color: var(--mpsb-text-soft);
    font-size: 11px;
}

.mpsb-pax__stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mpsb-pax__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--mpsb-border);
    border-radius: 8px;
    background: var(--mpsb-surface-soft);
    color: var(--mpsb-accent-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mpsb-pax__step:hover {
    border-color: var(--mpsb-accent);
    background: var(--mpsb-highlight);
}

.mpsb-pax__step:focus-visible {
    outline: 2px solid var(--mpsb-accent);
    outline-offset: 1px;
}

/* The departure is full. The seat badge above already says how many are left,
   so this only has to stop reading as clickable. */
.mpsb-pax__step:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mpsb-pax__step:disabled:hover {
    border-color: var(--mpsb-border);
    background: var(--mpsb-surface-soft);
}

/* Beats `.mpsb_field_group .form-control`, which is a full-width 48px field. */
.mpsb_form_grid .mpsb_field_group_passengers .mpsb-pax__stepper input.form-control {
    width: 46px;
    min-width: 46px;
    min-height: 30px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

/* Hide the native spinners: the steppers are the control now, and the arrows
   sat on top of them at this width. */
.mpsb-pax__stepper input.form-control::-webkit-outer-spin-button,
.mpsb-pax__stepper input.form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mpsb-pax__stepper input.form-control {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---- Seat hint ---------------------------------------------------------- */

/* A badge rather than a line of text, and coloured by what it says: "21 seats
   available" and "1 seat available" previously looked identical. */
.mpsb_form_grid .mpsb_field_group_passengers .mpsb_field_hint {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    min-height: 0;
    background: var(--mpsb-surface-soft);
    color: var(--mpsb-text-soft);
}

.mpsb_form_grid .mpsb_field_group_passengers .mpsb_field_hint.is-ok {
    background: #ecfdf5;
    color: #047857;
}

.mpsb_form_grid .mpsb_field_group_passengers .mpsb_field_hint.is-low {
    background: var(--mpsb-highlight);
    color: var(--mpsb-accent-dark);
}

.mpsb_form_grid .mpsb_field_group_passengers .mpsb_field_hint.is-error {
    background: #fef2f2;
    color: #b91c1c;
}

.mpsb_form_grid .mpsb_field_group_passengers .mpsb_field_hint:empty {
    display: none;
}

.mpsb-passenger-details {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.mpsb-passenger-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 640px) {
    .mpsb-passenger-details__grid {
        grid-template-columns: 1fr;
    }
}

/* Native checkout: three-step trip, passenger, and payment flow. */
.mpsb_native_checkout {
    --mpsb-checkout-green-900: #123b2e;
    --mpsb-checkout-green-700: #1b5c46;
    --mpsb-checkout-green-100: #e6efe9;
    --mpsb-checkout-cream: #fbf3e4;
    --mpsb-checkout-line: #e2e5e2;
    --mpsb-checkout-ink: #16211c;
    --mpsb-checkout-muted: #54615a;
    max-width: 760px;
    margin: 36px auto 54px;
    color: var(--mpsb-checkout-ink);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.mpsb_native_checkout .mpsb_review_heading {
    margin-bottom: 22px;
}

.mpsb_native_checkout .mpsb_review_eyebrow {
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--mpsb-checkout-green-100);
    color: var(--mpsb-checkout-green-700);
    font-size: 11px;
    letter-spacing: .06em;
}

.mpsb_native_checkout__heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
}

.mpsb_native_checkout .mpsb_review_heading h3 {
    margin: 0 0 5px;
    color: var(--mpsb-checkout-ink);
    font-size: clamp(30px, 5vw, 38px);
    letter-spacing: -.03em;
}

.mpsb_native_checkout .mpsb_review_heading p {
    margin: 0;
    color: var(--mpsb-checkout-muted);
    font-size: 14px;
    line-height: 1.45;
}

.mpsb_native_checkout__total {
    flex: 0 0 auto;
    min-width: 145px;
    padding: 12px 17px;
    border-radius: 12px;
    background: var(--mpsb-checkout-green-900);
    color: #fff;
    text-align: right;
}

.mpsb_native_checkout__total span {
    display: block;
    opacity: .72;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpsb_native_checkout__total strong {
    display: block;
    margin-top: 2px;
    font-size: 20px;
    line-height: 1.2;
}

.mpsb_native_checkout__steps {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    padding: 16px 22px;
    border: 1px solid var(--mpsb-checkout-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 59, 46, .06);
}

.mpsb_native_checkout__step {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 0;
    min-width: 0;
}

.mpsb_native_checkout__step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 2px solid #e2e5e2;
    border-radius: 50%;
    background: #f1f3f1;
    color: #8a948e;
    font-size: 13px;
    font-weight: 700;
}

.mpsb_native_checkout__step small,
.mpsb_native_checkout__step strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpsb_native_checkout__step small {
    color: #8a948e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mpsb_native_checkout__step strong {
    color: #8a948e;
    font-size: 13px;
    line-height: 1.25;
}

.mpsb_native_checkout__steps > i {
    width: 42px;
    height: 2px;
    margin: 0 8px;
    background: #e2e5e2;
}

.mpsb_native_checkout__step.is-active > span {
    border-color: var(--mpsb-checkout-green-700);
    background: var(--mpsb-checkout-green-700);
    color: #fff;
}

.mpsb_native_checkout__step.is-active small {
    color: var(--mpsb-checkout-green-700);
}

.mpsb_native_checkout__step.is-active strong,
.mpsb_native_checkout__step.is-complete strong {
    color: var(--mpsb-checkout-ink);
}

.mpsb_native_checkout__step.is-complete > span {
    border-color: var(--mpsb-checkout-green-700);
    background: var(--mpsb-checkout-green-100);
    color: var(--mpsb-checkout-green-700);
}

.mpsb_native_checkout__step.is-complete > span::before {
    content: "✓";
}

.mpsb_native_checkout__step.is-complete > span {
    font-size: 0;
}

.mpsb_native_checkout__step.is-complete > span::before {
    font-size: 16px;
}

.mpsb_native_checkout__panel {
    animation: mpsb-native-checkout-in .24s ease both;
}

@keyframes mpsb-native-checkout-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.mpsb_native_checkout .mpsb_native_checkout_form {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mpsb_native_checkout__panel > .mpsb_native_checkout__panel-heading,
.mpsb_native_checkout__panel > .mpsb_native_checkout__review,
.mpsb_native_checkout__panel > .mpsb_payment_method_box,
.mpsb_native_checkout__panel > .mpsb_native_checkout__passengers,
.mpsb_native_checkout__panel > .mpsb_native_checkout__customer-fields {
    box-sizing: border-box;
}

.mpsb_native_checkout__panel-heading,
.mpsb_native_checkout__panel > .mpsb_payment_method_box,
.mpsb_native_checkout__review,
.mpsb_native_checkout__passengers,
.mpsb_native_checkout__customer-fields {
    border-right: 1px solid var(--mpsb-checkout-line);
    border-left: 1px solid var(--mpsb-checkout-line);
    background: #fff;
}

.mpsb_native_checkout__panel-heading {
    padding: 26px 28px 18px;
    border-top: 1px solid var(--mpsb-checkout-line);
    border-radius: 18px 18px 0 0;
}

.mpsb_native_checkout__panel-heading h4 {
    margin: 0 0 4px;
    color: var(--mpsb-checkout-ink);
    font-size: 20px;
}

.mpsb_native_checkout__panel-heading p {
    margin: 0;
    color: var(--mpsb-checkout-muted);
    font-size: 13.5px;
}

.mpsb_native_checkout .mpsb_trip_card {
    display: block;
    overflow: visible;
    border: 1px solid var(--mpsb-checkout-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 59, 46, .06);
}

.mpsb_native_checkout .mpsb_trip_main {
    padding: 28px;
}

.mpsb_native_checkout .mpsb_trip_header h4 {
    color: var(--mpsb-checkout-ink);
    font-size: 22px;
}

.mpsb_native_checkout .mpsb_trip_route_name {
    color: var(--mpsb-checkout-green-700);
}

.mpsb_native_checkout .mpsb_trip_details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.mpsb_native_checkout .mpsb_detail_item {
    justify-content: flex-start;
    padding: 13px 14px;
    border-color: var(--mpsb-checkout-line);
    border-radius: 9px;
    background: #f7f8f7;
}

.mpsb_native_checkout .mpsb_detail_item:last-child {
    grid-column: 1 / -1;
}

.mpsb_native_checkout .mpsb_detail_item strong,
.mpsb_native_checkout .mpsb_detail_item > span:last-child,
.mpsb_native_checkout .mpsb_detail_item .mpsb_trip_date_input,
.mpsb_native_checkout .mpsb_detail_item .mpsb_trip_seats_input {
    display: block;
}

.mpsb_native_checkout .mpsb_detail_item strong {
    color: var(--mpsb-checkout-muted);
    font-size: 11px;
}

.mpsb_native_checkout .mpsb_detail_item > span:last-child {
    margin-top: 2px;
    color: var(--mpsb-checkout-ink);
    font-size: 13px;
    font-weight: 700;
}

/* The Date detail item's value is now an <input>, and Seats a <select> for
   a Shared shuttle (see render_trip_review()) - not a <span> either way, so
   the rule above no longer matches them; they need their own copy of the
   same look. */
.mpsb_native_checkout .mpsb_detail_item .mpsb_trip_date_input,
.mpsb_native_checkout .mpsb_detail_item .mpsb_trip_seats_input {
    margin-top: 2px;
    color: var(--mpsb-checkout-ink);
    font-size: 13px;
    font-weight: 700;
}

.mpsb_native_checkout .mpsb_pricing_summary {
    margin: 0;
    padding: 16px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.mpsb_native_checkout .mpsb_price_row.mpsb_subtotal {
    margin: 0;
    padding-top: 15px;
    border-top-color: #cbd1cc;
}

.mpsb_native_checkout .mpsb_price_row.mpsb_subtotal strong {
    color: var(--mpsb-checkout-green-700);
}

.mpsb_native_checkout__passengers,
.mpsb_native_checkout__customer-fields {
    padding: 0 28px;
}

.mpsb_native_checkout__passengers > .mpsb-passenger-details {
    margin: 0 0 18px;
    padding: 18px;
    border-color: var(--mpsb-checkout-line);
    border-radius: 12px;
    background: #f7f8f7;
}

.mpsb_native_checkout__passengers > .mpsb-passenger-details > legend {
    color: var(--mpsb-checkout-green-700);
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mpsb_native_checkout__customer-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 28px;
}

.mpsb_native_checkout__customer-fields .mpsb_field_group {
    margin: 0;
}

.mpsb_native_checkout__customer-fields .mpsb_field_group:first-child,
.mpsb_native_checkout__customer-fields .mpsb_field_group:nth-child(n + 4) {
    grid-column: 1 / -1;
}

.mpsb_native_checkout .mpsb_native_checkout__customer-fields .form-control,
.mpsb_native_checkout .mpsb_native_checkout__passengers .form-control {
    min-height: 44px;
    border-color: #cbd1cc;
    border-radius: 8px;
    background: #fff;
}

.mpsb_native_checkout__review {
    padding: 16px 28px 6px;
    border-top: 1px solid var(--mpsb-checkout-line);
}

.mpsb_native_checkout__review > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #eef0ee;
    font-size: 13px;
}

.mpsb_native_checkout__review span {
    color: var(--mpsb-checkout-muted);
}

.mpsb_native_checkout__review strong {
    color: var(--mpsb-checkout-ink);
    text-align: right;
}

.mpsb_native_checkout__review-total {
    margin-top: 4px;
    border-bottom: 0 !important;
    font-size: 15px !important;
}

.mpsb_native_checkout__review-total strong {
    color: var(--mpsb-checkout-green-700);
    font-size: 19px;
}

.mpsb_native_checkout .mpsb_payment_method_box {
    margin: 18px 0 0;
    padding: 18px 28px 28px;
    border-top: 1px solid #ecd8ac;
    border-bottom: 1px solid var(--mpsb-checkout-line);
    border-radius: 0;
    background: var(--mpsb-checkout-cream);
}

.mpsb_native_checkout .mpsb_payment_option {
    border-color: var(--mpsb-checkout-line);
    border-radius: 10px;
}

.mpsb_native_checkout .mpsb_payment_option:has(input[type="radio"]:checked) {
    border-color: var(--mpsb-checkout-green-700);
    background: #f2f7f4;
    box-shadow: inset 0 0 0 1px var(--mpsb-checkout-green-700);
}

.mpsb_native_checkout__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.mpsb_native_checkout__actions .mpsb_book_btn {
    flex: 1;
    min-height: 48px;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(18, 59, 46, .24);
}

.mpsb_native_checkout__actions .mpsb_back_link,
.mpsb_native_checkout__back {
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #cbd1cc;
    border-radius: 8px;
    background: #fff;
    color: var(--mpsb-checkout-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 42px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.mpsb_native_checkout__back {
    cursor: pointer;
}

@media (max-width: 600px) {
    .mpsb_native_checkout {
        margin: 24px auto 40px;
    }

    .mpsb_native_checkout__heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .mpsb_native_checkout__total {
        text-align: left;
    }

    .mpsb_native_checkout__steps {
        justify-content: space-between;
        padding: 14px 16px;
    }

    .mpsb_native_checkout__step {
        flex: 0 0 auto;
    }

    .mpsb_native_checkout__step > div {
        display: none;
    }

    .mpsb_native_checkout__steps > i {
        flex: 1;
        width: auto;
    }

    .mpsb_native_checkout .mpsb_trip_main,
    .mpsb_native_checkout__panel-heading,
    .mpsb_native_checkout__passengers,
    .mpsb_native_checkout__customer-fields,
    .mpsb_native_checkout__review {
        padding-right: 18px;
        padding-left: 18px;
    }

    .mpsb_native_checkout__customer-fields,
    .mpsb_native_checkout .mpsb_trip_details {
        grid-template-columns: 1fr;
    }

    .mpsb_native_checkout__customer-fields .mpsb_field_group {
        grid-column: 1 / -1;
    }

    .mpsb_native_checkout__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .mpsb_native_checkout__actions .mpsb_back_link,
    .mpsb_native_checkout__back {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   Narrow-container layout
   -------------------------------------------------------------------------
   The booking grid is a 12-column desktop layout, but every breakpoint above
   keys on the *viewport*. Themes that drop the shortcode into a constrained
   column (Bookingly's .hv-content-narrow caps content at 760px) therefore
   keep the full desktop layout on a large screen and squeeze seven fields
   into it, truncating labels to "Select Rout..." and "Ad...".

   Container queries measure the card instead of the window, so the form
   reflows on its own width in any theme. Browsers without @container support
   simply ignore these blocks and keep the viewport behaviour, so there is no
   regression. .mpsb_shuttle_flow cannot host the container - it is
   display:contents and generates no box - and the pass purchase form reuses
   .mpsb_shuttle_search_card, so it is covered by the same rules.
   --------------------------------------------------------------------- */
.mpsb_shuttle_search_card {
    container-type: inline-size;
    container-name: mpsb-card;
}

/* Two fields per row: the 12-column split needs ~900px to keep labels intact. */
@container mpsb-card (max-width: 860px) {
    .mpsb_form_grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .mpsb_form_grid > .mpsb_field_group,
    .mpsb_form_grid > .mpsb_submit_group {
        grid-column: span 6;
    }

    /* Primary action reads better on its own row than beside a half-width field. */
    .mpsb_form_grid > .mpsb_submit_group {
        grid-column: span 12;
    }

    .mpsb_shuttle_search_form .mpsb_form_grid {
        grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    }

    .mpsb_shuttle_search_form .mpsb_form_grid > .mpsb_field_group,
    .mpsb_shuttle_search_form .mpsb_form_grid > .mpsb_submit_group {
        grid-column: auto;
    }

    .mpsb_shuttle_search_form .mpsb_field_group_date,
    .mpsb_shuttle_search_form .mpsb_submit_group {
        grid-column: 1 / -1;
        border-right: 0;
        border-top: 1px solid var(--mpsb-border);
        border-radius: 0;
    }

    .mpsb_shuttle_search_form .mpsb_field_group_date::after {
        display: none;
    }

    .mpsb_shuttle_search_form .mpsb_submit_group {
        border-radius: 0;
    }

    .mpsb_shuttle_search_form .mpsb_search_btn {
        min-height: 48px;
        width: 100%;
        border-radius: 8px;
    }
}

/* One field per row, matching the existing small-viewport treatment. */
@container mpsb-card (max-width: 520px) {
    .mpsb_form_grid > .mpsb_field_group,
    .mpsb_form_grid > .mpsb_submit_group {
        grid-column: span 12;
    }

    .mpsb_shuttle_search_form .mpsb_form_grid {
        grid-template-columns: 1fr;
    }

    .mpsb_shuttle_search_form .mpsb_form_grid > .mpsb_field_group,
    .mpsb_shuttle_search_form .mpsb_form_grid > .mpsb_submit_group,
    .mpsb_shuttle_search_form .mpsb_field_group_date {
        grid-column: 1 / -1;
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid var(--mpsb-border);
        border-radius: 0;
    }

    .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;
    }

    .mpsb_shuttle_search_form .mpsb_field_group_dropoff_stop::after,
    .mpsb_shuttle_search_form .mpsb_field_group_date::after {
        display: none;
    }

    .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;
    }
}

/* Pages that load this plugin: the WordPress post/page title starts on the
   same left edge as the plugin content (1280px, start-aligned). Themes often
   centre the title or constrain it to a narrower column than the search
   card, which makes the two look offset. */
:is(
    body.mpsb-frontend,
    body:has(.mpsb_shuttle_flow),
    body:has(.mpsb_shuttle_search_card),
    body:has(.mpsb_shuttle_booking_summary),
    body:has(.mpsb_shuttle_list_wrapper),
    body:has(.mpsb-mb),
    body:has(.mpsb-shuttle-detail-wrapper)
) {
    --mpsb-content-max: 1280px;
}

:is(
    body.mpsb-frontend,
    body:has(.mpsb_shuttle_flow),
    body:has(.mpsb_shuttle_search_card),
    body:has(.mpsb_shuttle_booking_summary),
    body:has(.mpsb_shuttle_list_wrapper),
    body:has(.mpsb-mb),
    body:has(.mpsb-shuttle-detail-wrapper)
) :is(
    .entry-header,
    .page-header,
    .wp-block-post-title,
    h1.entry-title,
    h1.page-title,
    .page-title,
    .nv-page-title,
    .ast-page-title,
    .wp-block-query-title
) {
    display: block;
    width: 100%;
    max-width: var(--mpsb-content-max, 1280px);
    margin-left: auto;
    margin-right: auto;
    text-align: start;
}

:is(
    body.mpsb-frontend,
    body:has(.mpsb_shuttle_flow),
    body:has(.mpsb_shuttle_search_card),
    body:has(.mpsb_shuttle_booking_summary),
    body:has(.mpsb_shuttle_list_wrapper),
    body:has(.mpsb-mb),
    body:has(.mpsb-shuttle-detail-wrapper)
) :is(
    .entry-title,
    .page-title,
    .wp-block-post-title,
    .wp-block-query-title
) {
    text-align: start;
}

.mpsb_shuttle_search_card,
.mpsb_shuttle_booking_summary,
.mpsb_shuttle_list_wrapper,
.mpsb-shuttle-detail-wrapper,
.mpsb-mb__card {
    text-align: start;
}

/* ==========================================================================
   Order received
   --------------------------------------------------------------------------
   The confirmation is the whole page now, not a drawer over a results list,
   so it reads at a receipt's measure rather than at the 1280px the review
   step uses to sit beside that list.
   ========================================================================== */
.mpsb_confirmation_page {
    max-width: 780px;
    margin: 0 auto;
}

.mpsb_confirmation_page .mpsb_shuttle_booking_summary {
    max-width: none;
    margin: 0;
}

.mpsb_confirmation_page__again {
    margin: 26px 0 0;
}

.mpsb_confirmation_page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 0;
}

.mpsb_confirmation_page__primary,
.mpsb_confirmation_page__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--mpsb-accent, #ff6e00);
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.mpsb_confirmation_page__primary {
    background: var(--mpsb-accent, #ff6e00);
    color: #fff;
}

.mpsb_confirmation_page__secondary {
    background: #fff;
    color: var(--mpsb-accent-dark, #9a3412);
}

.mpsb_confirmation_page__primary:hover,
.mpsb_confirmation_page__primary:focus {
    background: var(--mpsb-accent-dark, #ea580c);
    color: #fff;
    text-decoration: none;
}

.mpsb_confirmation_page__secondary:hover,
.mpsb_confirmation_page__secondary:focus {
    background: #fff7ed;
    color: var(--mpsb-accent-dark, #9a3412);
    text-decoration: none;
}

.mpsb_booking_modal[data-mpsb-booking-modal-step="confirmed"] .mpsb_booking_modal__body {
    padding: 18px;
}