:root {
    --bus-primary: #b30c3b;
    --bus-primary-hover: #8e0930;
    --bus-bg: #f8fafc;
    --bus-card-bg: #ffffff;
    --bus-border: #e2e8f0;
    --bus-text: #1e293b;
    --bus-text-light: #64748b;
    --bus-success: #22c55e;
    --bus-draft: #94a3b8;
}

/* Full Screen Mode */
@media screen and (min-width: 782px) {

    body.wbbm-full-screen-mode {
        --bus-page-width: 80%;
        --bus-page-gutter: 10%;
    }

    body.wbbm-full-screen-mode #adminmenumain,
    body.wbbm-full-screen-mode #wpadminbar,
    body.wbbm-full-screen-mode #wpfooter {
        display: none !important;
    }

    body.wbbm-full-screen-mode #wpcontent,
    body.wbbm-full-screen-mode #wpfooter {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body.wbbm-full-screen-mode #wpbody-content {
        padding-bottom: 0 !important;
    }

    body.wbbm-full-screen-mode .bus-edit-wrap {
        margin: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    body.wbbm-full-screen-mode .bus-container {
        /* The editor sits in a centred 80% column rather than full-bleed.
           --bus-page-gutter is the matching (100% - 80%) / 2 inset used by
           the fixed header and footer below, so all three stay in step if
           the width is ever changed -- change the width here only. */
        width: var(--bus-page-width) !important;
        max-width: var(--bus-page-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 0 !important;
        min-height: 100vh;
        box-sizing: border-box;
        padding-bottom: 80px !important;
        padding-top: 40px !important;
        /* Space for sticky header */
    }

    body.wbbm-full-screen-mode .bus-edit-header {
        position: fixed;
        top: 0;
        left: var(--bus-page-gutter);
        right: var(--bus-page-gutter);
        z-index: 101;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        margin-bottom: 0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    body.wbbm-full-screen-mode .bus-edit-footer {
        position: fixed;
        bottom: 0;
        left: var(--bus-page-gutter);
        right: var(--bus-page-gutter);
        z-index: 101;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        margin: 0 !important;
        padding: 15px 30px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }

    body.wbbm-full-screen-mode .bus-steps-nav {
        margin-top: 20px;
    }
}

.bus-edit-wrap {
    margin: 20px 20px 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--bus-text);
}

.bus-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.bus-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Anchors the absolutely-centered <h2> below to this bar rather than
       the page, so it stays visually centered no matter how wide the
       back-button or header-actions groups on either side are. */
    position: relative;
    background: var(--bus-card-bg);
    padding: 15px 25px;
    border-radius: 12px;
    border: 1px solid var(--bus-border);
    margin-bottom: 25px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.bus-edit-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: var(--bus-text);
    text-decoration: none;
    transition: all 0.2s;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    gap: 5px;
}

.back-btn:hover {
    background: #e2e8f0;
    color: var(--bus-primary);
}

.back-btn .dashicons {
    font-size: 14px;
    height: initial;
}

.bus-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-publish {
    background: #dcfce7;
    color: #166534;
}

.status-draft {
    background: #f1f5f9;
    color: #475569;
}

.status-new {
    background: #ffedd5;
    color: #9a3412;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Steps Navigation */
.bus-steps-nav {
    background: var(--bus-card-bg);
    border-radius: 12px;
    border: 1px solid var(--bus-border);
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.bus-steps-list {
    display: flex;
    justify-content: center;
    /* Was flex items at flex:1 spread edge-to-edge with justify-content:
       space-between -- fine with 6 steps, but with the Features/Tax/Custom
       Fields merge down to 4 steps that stretched each item across a much
       wider share of the bar, pushing the outer circles way in from the
       edges and leaving the connector line below (anchored to the bar's
       own edges, not the circles) overshooting past both ends. Sizing this
       row to its own content and centering it keeps the steps grouped
       together regardless of the step count. */
    width: fit-content;
    margin: 0 auto;
    gap: 90px;
    position: relative;
}

.bus-steps-list::before {
    content: '';
    position: absolute;
    top: 18px;
    /* Half the 36px step-number circle, so the line starts/ends at the
       first/last circle's own center instead of the row's outer edge. */
    left: 18px;
    right: 18px;
    height: 2px;
    background: #e2e8f0;
    z-index: 1;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    position: relative;
}

.step-number {
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--bus-text-light);
    margin-bottom: 8px;
    transition: all 0.3s;
}

.step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bus-text-light);
    transition: all 0.3s;
}

.step-item.active .step-number {
    background: var(--bus-primary);
    border-color: var(--bus-primary);
    color: #fff;
    box-shadow: 0 0 0 4px #ffedd5;
}

.step-item.active .step-label {
    color: var(--bus-primary);
    font-weight: 700;
}

.step-item.completed .step-number {
    background: var(--bus-success);
    border-color: var(--bus-success);
    color: #fff;
    cursor: pointer;
}

/* PRO Badge in Navigation */
.pro-badge-nav {
    background: #FFD700;
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

/* PRO Placeholder Content */
/* ---- PRO upsell placeholder (Custom Fields, and anywhere else a PRO-only
   feature needs an inline upgrade prompt): was a heavy dashed-border box
   with a huge bare lock icon, a badge overlapping it, and a CTA shadowed
   in blue -- inconsistent with this plugin's actual orange brand color
   and busier than a "this needs an upgrade" notice needs to be. Redesigned
   for a quieter, single solid-border card with a small icon chip (same
   treatment as .wbbm-bm-card-icon elsewhere), a plain uppercase label
   instead of a badge, and a CTA in the real brand color. ---- */
.pro-placeholder-content {
    padding: 48px 24px;
    text-align: center;
    background: var(--bus-card-bg);
    border: 1px solid var(--bus-border);
    border-radius: 12px;
}

.pro-placeholder-inner {
    max-width: 380px;
    margin: 0 auto;
}

.pro-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #94a3b8;
    margin-bottom: 16px;
}

.pro-icon-wrap .dashicons-lock {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.pro-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bus-primary);
    background: #fff1e6;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 12px;
}

.pro-placeholder-inner h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bus-text);
    margin: 0 0 8px;
    border: none !important;
    padding: 0 !important;
}

.pro-placeholder-inner p {
    font-size: 13.5px;
    color: var(--bus-text-light);
    line-height: 1.6;
    margin: 0 0 24px;
}

.btn-pro-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    background: var(--bus-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none;
    transition: background-color .15s;
}

.btn-pro-upgrade .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.btn-pro-upgrade:hover {
    background: var(--bus-primary-hover) !important;
}

/* Layout */
.bus-edit-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 25px;
    /* Grid columns stretch to match the tallest one by default -- harmless
       on its own, but on steps where one side has much less content (e.g.
       Features: one small card on the left next to three stacked cards on
       the right) it left a big block of empty space under the shorter
       column before the next section could start. Each column should only
       be as tall as its own content. */
    align-items: start;
}

.bus-card {
    background: var(--bus-card-bg);
    border-radius: 12px;
    border: 1px solid var(--bus-border);
    padding: 24px;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.bus-card h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
}

/* ---- "Advanced" step: Features, Tax and Custom Fields stacked one after
   another instead of on their own separate steps. Each keeps its own
   render_step_* markup/cards unchanged; this just labels and separates
   the three groups so it still reads as three sections, not one blob. ---- */
.bus-advanced-section + .bus-advanced-section {
    margin-top: 10px;
    padding-top: 30px;
    border-top: 1px solid var(--bus-border);
}

.bus-advanced-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bus-text);
}

.bus-advanced-section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--bus-primary);
    flex-shrink: 0;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
}

.required {
    color: #ef4444;
    margin-left: 2px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px !important;
    height: 40px;
    font-size: 14px;
    color: #1e293b;
    background-color: #f8fafc;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
    cursor: pointer;
    height: 40px;
    border-radius: 8px;
    line-height: initial;
}

.form-control:hover {
    border-color: #cbd5e1;
    background-color: #fff;
}

.form-control:focus {
    border-color: var(--bus-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(179, 12, 59, 0.15);
    outline: none;
}

.form-control::placeholder {
    color: #94a3b8;
}

.bus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Switches — Unified for Step 1 (.bus-switch) and Step 6 (label.switch) */
.bus-switches {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.switch-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #eef1f6;
    border-radius: 10px;
    background: #fbfcfe;
    transition: background-color .15s ease, border-color .15s ease;
}

.switch-group:hover {
    border-color: #e2e8f0;
    background: #f6f8fb;
}

/* A subtle tint when the setting is on, so the row itself reflects state
   at a glance -- not just the switch. */
.switch-group:has(input:checked) {
    background: color-mix(in srgb, var(--bus-primary) 6%, #fff);
    border-color: color-mix(in srgb, var(--bus-primary) 30%, #eef1f6);
}

.switch-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switch-label .switch-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    color: #7a8296;
    transition: background-color .15s ease, color .15s ease;
}

.switch-group:has(input:checked) .switch-icon {
    background: color-mix(in srgb, var(--bus-primary) 16%, #fff);
    color: var(--bus-primary);
}

.switch-label .switch-icon .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
}

.switch-label strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bus-text, #172033);
}

.switch-label p {
    margin: 2px 0 0 0;
    font-size: 12.5px;
    color: var(--bus-text-light);
    line-height: 1.4;
}

/*
 * Was scoped to ".bus-edit-wrap ..." (the bus edit screen's own wrapper),
 * which silently broke every switch rendered anywhere else -- the
 * WooCommerce gateway toggles on the Payments settings section included,
 * which live under ".wbbm-hub" instead. Not scoped to a page wrapper at
 * all now, since bus-edit.css is loaded on both screens on purpose.
 */
.bus-switch,
label.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.bus-switch input,
label.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.bus-switch .slider,
label.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e2e8f0;
    transition: .4s;
    border-radius: 24px;
}

.bus-switch .slider:before,
label.switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bus-switch input:checked+.slider,
label.switch input:checked+.slider {
    background-color: var(--bus-primary);
}

.bus-switch input:focus+.slider,
label.switch input:focus+.slider {
    box-shadow: 0 0 0 4px rgba(179, 12, 59, 0.15);
}

.bus-switch input:checked+.slider:before,
label.switch input:checked+.slider:before {
    transform: translateX(24px);
}

/* Inline Taxonomy Add (Step 1 Sidebar) */
.inline-taxonomy-add {
    padding: 10px 0;
    border-top: 1px solid var(--bus-border);
    margin-top: 15px;
}

.inline-taxonomy-list-wrap {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding-right: 5px;
}

.inline-taxonomy-list-wrap::-webkit-scrollbar {
    width: 5px;
}

.inline-taxonomy-list-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.inline-taxonomy-list-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.inline-taxonomy-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.inline-taxonomy-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #475569;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.inline-taxonomy-list li:hover {
    background: #fff;
    border-color: var(--bus-primary);
    color: var(--bus-primary);
}

.inline-taxonomy-list li .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #94a3b8;
}

.inline-taxonomy-list li:hover .dashicons {
    color: var(--bus-primary);
}

.inline-taxonomy-list li.no-stops,
.inline-taxonomy-list li.no-points {
    justify-content: center;
    background: transparent;
    color: var(--bus-text-light);
    font-style: italic;
}

#inline-stop-message {
    transition: all 0.3s;
}

/* Inline Pickup Points (Step 2) -- was a flat, muddy gray box sitting
   flush against the fields above it with tight 6px gaps between rows;
   redesigned as a proper white card with clear separation from what's
   above, an actual header row, and consistent spacing throughout. */
.route-pickup-points-wrap {
    margin-top: 18px;
    background: var(--bus-card-bg);
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--bus-border);
}

.route-pickup-points-wrap h4 {
    margin: 0;
    font-size: 13px;
    color: var(--bus-text);
    font-weight: 700;
}

.pickup-points-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pickup-points-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-pickup-points {
    min-width: 32px;
    padding: 5px !important;
}

.toggle-pickup-points .dashicons {
    transition: transform 0.2s ease;
}

.toggle-pickup-points .dashicons.active {
    transform: rotate(180deg);
}

.route-pickup-points-wrap.is-collapsed .pickup-points-list {
    display: none;
}

.pickup-points-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bus-border);
}

.pickup-point-item {
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 120px 32px;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--bus-border);
    transition: all 0.2s;
}

.pickup-point-item:hover {
    border-color: var(--bus-primary);
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.pickup-point-item .form-control.sm {
    height: 32px;
    font-size: 12.5px;
    padding: 4px 8px;
    border-radius: 6px;
}

.pickup-point-item .remove-inline-pickup-item {
    color: #ef4444;
    padding: 5px !important;
    min-width: 32px;
}

.wbbm-time-field-wrap {
    position: relative;
    width: 100%;
}

.wbbm-time-field-wrap .wbbm-timepicker-field {
    padding-right: 34px;
}

.wbbm-time-field-wrap .dashicons-clock {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: #94a3b8;
    pointer-events: none;
}

.wbbm-time-popup {
    position: absolute;
    z-index: 100000;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.16);
    padding: 10px;
    min-width: 190px;
}

.wbbm-time-popup-head {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.wbbm-time-popup-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.wbbm-time-popup-grid span {
    color: #64748b;
    font-weight: 700;
}

.wbbm-time-popup-grid select {
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 8px;
    background: #f8fafc;
}

.wbbm-time-popup-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

/* Thumbnail */
.bus-thumbnail-box {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}

.bus-thumbnail-box:hover {
    border-color: var(--bus-primary);
    background: #f1f5f9;
}

.bus-thumbnail-placeholder {
    text-align: center;
    color: var(--bus-text-light);
}

.bus-thumbnail-placeholder span {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
}

.bus-thumbnail-preview {
    width: 100%;
    height: 100%;
    position: relative;
}

.bus-thumbnail-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bus-thumbnail-preview p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    margin: 0;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.bus-thumbnail-preview:hover p {
    opacity: 1;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 14px;
}

.btn-primary {
    background: var(--bus-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--bus-primary-hover);
}

.btn-secondary {
    background: #f1f5f9;
    color: var(--bus-text);
}

.btn-secondary:hover {
    background: #e2e8f0;
}

/* Footer */
.bus-edit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: #fff;
    border-top: 1px solid var(--bus-border);
    margin-top: 30px;
}

/* Adjust margin for non-full screen if needed, but for now let's keep it consistent */
.bus-container {
    padding: 30px;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.saving-status {
    font-size: 14px;
    color: var(--bus-text-light);
}

/* Step Transitions */
.bus-step-content {
    display: none;
}

.bus-step-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

/* Step 2: Route & Price -- stops as a vertical timeline (numbered circle
   markers connected by a line, like the step nav at the top of this page
   but running down instead of across) instead of a plain stacked list of
   bordered boxes. The number itself is a CSS counter, not written by PHP
   or JS anywhere -- it's automatically correct after adding, removing or
   drag-reordering stops with zero extra code to keep it in sync. */
#route-items-container {
    counter-reset: route-stop;
}

/* Shared "add another item" affordance for any repeated-field list in this
   editor (route stops, operational dates, off-day slots, ...) -- sits
   below the list instead of up in the card's title row, so the list of
   items reads top-to-bottom and this is clearly "add one more" rather
   than a header-level action. */
.btn-repeater-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 13px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--bus-text-light) !important;
    background: #f8fafc !important;
    border: 1.5px dashed var(--bus-border) !important;
    border-radius: 10px !important;
    transition: color .15s, border-color .15s, background-color .15s;
}

.btn-repeater-add .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.btn-repeater-add:hover {
    color: var(--bus-primary) !important;
    border-color: var(--bus-primary) !important;
    background: #fff8f2 !important;
}

.route-item {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0 0 20px 46px;
    overflow: visible;
}

.route-item:last-child {
    padding-bottom: 0;
}

/* The connecting line, drawn from just below one marker to the next. */
.route-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--bus-border);
}

.route-item:last-child::before {
    display: none;
}

/* The numbered circle marker itself. */
.route-item::after {
    counter-increment: route-stop;
    content: counter(route-stop);
    position: absolute;
    left: 0;
    top: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bus-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.route-item-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f8fafc;
    border: 1px solid var(--bus-border);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}

.drag-handle {
    color: var(--bus-text-light);
    margin-right: 15px;
    cursor: move;
}

.stop-name-display {
    font-weight: 600;
    flex-grow: 1;
}

/* Time + Type summary shown right on the collapsed header row, so every
   stop's schedule is scannable at a glance without expanding each one. */
.route-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
    flex-shrink: 0;
}

.route-meta-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bus-text-light);
    font-variant-numeric: tabular-nums;
}

.route-meta-time .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.route-meta-type {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
    white-space: nowrap;
}

.route-meta-type.type-bp {
    background: #ecfdf5;
    color: #059669;
}

.route-meta-type.type-dp {
    background: #fef2f2;
    color: #dc2626;
}

.route-meta-type.type-both {
    background: #eff6ff;
    color: #2563eb;
}

.route-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.route-item-actions button {
    background: none;
    border: none;
    color: var(--bus-text-light);
    cursor: pointer;
    padding: 2px;
}

.route-item-actions button:hover {
    color: #ef4444;
}

.toggle-route-item {
    transition: transform 0.3s;
}

.toggle-route-item.active {
    transform: rotate(180deg);
}

.route-item-body {
    padding: 20px;
    display: none;
    background: #fff;
    border: 1px solid var(--bus-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.next-day-wrap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--bus-border);
}

.next-day-wrap label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

/* Pricing Matrix */
.pricing-matrix-table-wrap {
    overflow-x: auto;
}

.pricing-matrix-table {
    width: 100%;
    border-collapse: collapse;
}

.pricing-matrix-table th {
    text-align: left;
    background: #f8fafc;
    padding: 12px;
    font-size: 13px;
    color: var(--bus-text-light);
    border-bottom: 2px solid var(--bus-border);

    &:first-child {
        width: 200px;
    }
}

.pricing-matrix-table td {
    padding: 12px;
    border-bottom: 1px solid var(--bus-border);
}

.route-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
}

.route-pair .from {
    color: var(--bus-primary);
}

.route-pair .to {
    color: var(--bus-success);
}

.route-pair .dashicons {
    font-size: 16px;
    color: var(--bus-text-light);
}

.form-control.sm {
    padding: 6px 10px;
    font-size: 13px;
}

#pricing-matrix-container.loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

#pricing-matrix-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid var(--bus-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Field Validation Errors */
.field-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    animation: fieldShake 0.4s ease;
}

.field-error:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

.field-error-msg {
    display: block;
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
}

@keyframes fieldShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* Validation Toast */
.bus-validation-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.15);
    opacity: 0;
    transition: all 0.3s ease;
}

.bus-validation-toast .dashicons {
    color: #ef4444;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.bus-validation-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step 3: Pickup Point */
.pickup-city-box {
    animation: fadeIn 0.4s ease;
}

.pickup-item {
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid var(--bus-border);
    margin-bottom: 10px;
}

.pickup-item .bus-grid {
    grid-template-columns: 2fr 1.5fr 50px !important;
    gap: 15px;
    margin-bottom: 0;
}

.remove-pickup-item {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* Step 7: Passenger List */
.passenger-list-table-wrap {
    overflow-x: auto;
}

.passenger-list-table {
    width: 100%;
    border-collapse: collapse;
}

.passenger-list-table th {
    text-align: left;
    background: #f8fafc;
    padding: 12px;
    font-size: 13px;
    color: var(--bus-text-light);
    border-bottom: 2px solid var(--bus-border);
}

.passenger-list-table td {
    padding: 12px;
    border-bottom: 1px solid var(--bus-border);
    font-size: 13px;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-completed {
    background: #dcfce7;
    color: #166534;
}

.status-processing {
    background: #fef9c3;
    color: #854d0e;
}

.status-pending {
    background: #dbeafe;
    color: #1e40af;
}

.status-on-hold {
    background: #fef3c7;
    color: #92400e;
}

.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--bus-border) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--bus-primary) !important;
    box-shadow: 0 0 0 3px #ffedd5 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bus-primary) !important;
    border-color: var(--bus-primary-hover) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    margin-top: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 5px !important;
}

/* Step 4: Day Schedule */
.days-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.day-checkbox {
    cursor: pointer;
}

.day-checkbox input {
    display: none;
}

.day-checkbox span {
    display: block;
    padding: 8px 16px;
    background: #f1f5f9;
    border: 1px solid var(--bus-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bus-text-light);
    transition: all 0.2s;
}

.day-checkbox input:checked+span {
    background: var(--bus-primary);
    border-color: var(--bus-primary);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(179, 12, 59, 0.2);
}

.offday-item {
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid var(--bus-border);
    margin-bottom: 15px;
}

.offday-item .bus-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 40px !important;
    gap: 12px;
}

.bus-card-heading-row,
.bus-on-date-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bus-card-heading-row h3 {
    margin-bottom: 4px;
}

.bus-card-heading-row p {
    margin: 0 0 18px;
    color: var(--bus-text-light);
}

.bus-on-date-item {
    max-width: 420px;
    margin-bottom: 10px;
}

.bus-on-date-item .form-control {
    flex: 1;
}

@media (max-width: 1024px) {
    .bus-edit-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bus-edit-right {
        width: 100%;
    }

    .pricing-matrix-table-wrap,
    .passenger-list-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pricing-matrix-table,
    .passenger-list-table {
        min-width: 720px;
    }
}

@media (max-width: 782px) {
    .wbbm-full-screen-mode #wpcontent,
    .wbbm-full-screen-mode #wpbody-content {
        padding-left: 0;
    }

    .bus-edit-header,
    .bus-edit-footer,
    .bus-card-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    /* The centered <h2> is absolutely positioned for desktop's 3-slot
       layout (back button / title / actions all on one row) -- that
       breaks the column stack above, so drop back to a normal in-flow,
       centered block once things wrap. */
    .bus-edit-header h2 {
        position: static;
        transform: none;
        text-align: center;
        white-space: normal;
        margin: 8px 0;
    }

    .bus-steps-list {
        gap: 24px;
        flex-wrap: wrap;
        row-gap: 16px;
    }

    .bus-grid,
    .offday-item .bus-grid,
    .extra-service-item .bus-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bus-on-date-item {
        max-width: none;
    }

    .footer-buttons,
    .footer-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .bus-card,
    .route-item-body {
        padding: 14px;
    }

    .pickup-point-item {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bus-on-date-item {
        align-items: stretch;
    }
}

/* Step 5: Features & Extra Services */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}

.feature-item {
    cursor: pointer;
    border: 1px solid var(--bus-border);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    background: #fff;
    position: relative;
    user-select: none;
}

.feature-item input {
    position: absolute;
    opacity: 0;
}

.feature-item .feature-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.feature-item .feature-content>span:first-child {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--bus-text-light);
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--bus-text);
}

.feature-item:hover {
    border-color: var(--bus-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.feature-item.active {
    border-color: var(--bus-primary);
    background: #fff7ed;
}

.feature-item.active .feature-content>span:first-child {
    color: var(--bus-primary);
}

.feature-item.active span {
    color: var(--bus-primary);
    font-weight: 600;
}

.extra-service-item {
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid var(--bus-border);
    margin-bottom: 15px;
}

.extra-service-item .bus-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 40px !important;
    gap: 12px;
}

.remove-extra-service {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* ============================================================
   Payment Method: notice banner, sidebar summary, and popup --
   same split used for this in booking-and-rental-manager-for-woocommerce.
   ============================================================ */

/* ---- Notice banner (under the step bar) ---- */
.wbbm-payment-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 24px;
    margin: 0 0 16px;
    background: linear-gradient(90deg, #fef2f2 0%, #fff7f7 100%);
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #7f1d1d;
    line-height: 1.4;
    text-align: center;
}

.wbbm-payment-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 2px 6px rgba(220, 38, 38, .3);
}

.wbbm-payment-notice__icon .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 1;
    color: #fff;
}

.wbbm-payment-notice__text {
    flex: 0 1 auto;
    color: #7f1d1d;
}

.wbbm-payment-notice-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .25);
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wbbm-payment-notice-link .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 1;
    color: inherit;
    transition: transform .15s ease;
}

.wbbm-payment-notice-link:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .32);
    transform: translateY(-1px);
}

.wbbm-payment-notice-link:hover .dashicons {
    transform: translateX(2px);
}

@media (max-width: 640px) {
    .wbbm-payment-notice-link {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ---- Sidebar summary card ---- */
.wbbm-payment-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 14px;
}

.wbbm-payment-summary-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff1e6;
    color: var(--bus-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wbbm-payment-summary-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.wbbm-payment-summary strong {
    display: block;
    font-size: 14px;
    color: var(--bus-text);
}

.wbbm-payment-summary small {
    display: block;
    color: var(--bus-text-light);
    font-weight: 400;
    font-size: 12px;
    margin-top: 1px;
}

/* "Open payment settings" action row.
   Every property PRO's generic .btn / .btn-outline sets is declared here, and
   the rules are scoped under .wbbm-payment-card so they out-specify PRO's
   single-class ones -- PRO loads second and would otherwise win on a tie. */
.wbbm-payment-card .wbbm-payment-configure-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid var(--bus-border);
    border-radius: 10px;
    background: #fff;
    color: var(--bus-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Echoes .wbbm-payment-summary-icon above it, one size down, so the card's
   two rows read as the same component. */
.wbbm-payment-card .wbbm-payment-configure-btn__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff1e6;
    color: var(--bus-primary);
    transition: background-color .15s ease, color .15s ease;
}

.wbbm-payment-card .wbbm-payment-configure-btn__icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.wbbm-payment-card .wbbm-payment-configure-btn__label {
    flex: 1 1 auto;
    min-width: 0;
}

.wbbm-payment-card .wbbm-payment-configure-btn__arrow {
    flex: 0 0 auto;
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    color: var(--bus-text-light);
    transition: transform .15s ease, color .15s ease;
}

.wbbm-payment-card .wbbm-payment-configure-btn:hover,
.wbbm-payment-card .wbbm-payment-configure-btn:focus {
    border-color: var(--bus-primary);
    background: #fff8f4;
    color: var(--bus-primary);
    box-shadow: 0 4px 12px rgba(179, 12, 59, .13);
    transform: translateY(-1px);
}

.wbbm-payment-card .wbbm-payment-configure-btn:hover .wbbm-payment-configure-btn__icon,
.wbbm-payment-card .wbbm-payment-configure-btn:focus .wbbm-payment-configure-btn__icon {
    background: var(--bus-primary);
    color: #fff;
}

.wbbm-payment-card .wbbm-payment-configure-btn:hover .wbbm-payment-configure-btn__arrow,
.wbbm-payment-card .wbbm-payment-configure-btn:focus .wbbm-payment-configure-btn__arrow {
    color: var(--bus-primary);
    transform: translateX(3px);
}

/* Keyboard users still get a ring -- the rule above replaces WP's default
   a:focus box-shadow, so restore a visible focus indicator explicitly. */
.wbbm-payment-card .wbbm-payment-configure-btn:focus-visible {
    outline: 2px solid var(--bus-primary);
    outline-offset: 2px;
}

/* ---- Popup modal ---- */
.wbbm-payment-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 100001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wbbm-payment-modal-box {
    background: #fff;
    border-radius: 12px;
    max-width: 640px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.wbbm-payment-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bus-border);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.wbbm-payment-modal-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--bus-text);
}

.wbbm-payment-modal-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--bus-text-light);
    padding: 4px 8px;
}

.wbbm-payment-modal-close:hover {
    color: var(--bus-text);
}

.wbbm-payment-modal-body {
    padding: 20px 24px 8px;
}

.wbbm-payment-modal-body .description {
    margin: 0 0 16px;
    color: var(--bus-text-light);
    font-size: 13px;
}

.wbbm-payment-modal-empty {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px dashed var(--bus-border);
    border-radius: 10px;
    background: var(--bus-bg);
    color: var(--bus-text-light);
    font-size: 12.5px;
    line-height: 1.6;
}

.wbbm-payment-modal-foot {
    padding: 14px 24px 22px;
    display: flex;
    justify-content: flex-end;
}

/* Small link-style trigger sitting in a card's title row (top-right
   corner), e.g. "+ Add Stoppage" on the Route Management card. */
.btn-add-stoppage-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Right-aligned under the Stop select instead of left -- margin-left:
       auto pushes this shrink-wrapped flex box to the right edge of its
       .form-group without needing the parent to be a flex container. */
    width: fit-content;
    margin: 6px 0 0 auto;
    background: none;
    border: none;
    padding: 4px 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bus-primary);
    cursor: pointer;
}

.btn-add-stoppage-link:hover {
    color: var(--bus-primary-hover);
    text-decoration: underline;
}

.btn-add-stoppage-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Small generic prompt modal (Add Stoppage today, reusable for any future
   "one field, quick add" popup) -- same chrome as .wbbm-payment-modal but
   sized for a single form field rather than a whole settings form. */
.wbbm-stop-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wbbm-stop-modal.is-open {
    display: flex;
}

.wbbm-stop-modal-box {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    max-height: 86vh;
    overflow-y: auto;
}

/* Wider variant for content-heavier modals (e.g. the Offline Payment
   Configure modal, which also carries the Payment Types repeater). */
.wbbm-stop-modal-wide .wbbm-stop-modal-box {
    max-width: 560px;
}

/* Custom Payment Method Configure modals (Offline/Stripe/PayPal) can be
   opened from within the per-bus Payment Method popup
   (.wbbm-payment-modal, z-index 100001), so they need to paint above it --
   and above the WooCommerce gateway iframe Configure modal (100010) too,
   since both live in the same settings page. */
.wbbm-cgw-modal {
    z-index: 100020;
}

.wbbm-stop-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bus-border);
}

.wbbm-stop-modal-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bus-text);
}

.wbbm-stop-modal-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--bus-text-light);
    padding: 4px 8px;
}

.wbbm-stop-modal-close:hover {
    color: var(--bus-text);
}

.wbbm-stop-modal-body {
    padding: 18px 20px 4px;
}

.wbbm-stop-modal-body .description {
    margin: 0 0 16px;
    color: var(--bus-text-light);
    font-size: 13px;
}

.wbbm-stop-modal-foot {
    padding: 14px 20px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Mode-selector cards, reused inside the modal */
.wbbm-bm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wbbm-bm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1.5px solid var(--bus-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.wbbm-bm-card input[type="radio"] {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
}

.wbbm-bm-card:hover {
    border-color: #cbd5e1;
}

.wbbm-bm-card.is-selected {
    border-color: var(--bus-primary);
    background: #fff8f2;
    box-shadow: 0 0 0 3px rgba(179, 12, 59, .12);
}

.wbbm-bm-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #eef2f7;
    color: #7a8296;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.wbbm-bm-card.is-selected .wbbm-bm-card-icon {
    background: #ffe4cc;
    color: var(--bus-primary-hover);
}

.wbbm-bm-card strong {
    font-size: 14px;
    color: var(--bus-text);
}

.wbbm-bm-card small {
    font-size: 12px;
    color: var(--bus-text-light);
    line-height: 1.4;
}

.wbbm-bm-card-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f59e0b, #8e0930);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.3;
    box-shadow: 0 3px 8px rgba(234, 88, 12, .28);
    transition: box-shadow .15s ease, transform .15s ease;
    /* Stays fully readable even inside a dimmed .is-disabled card -- this
       is the one thing on that card that isn't just informational, it's
       the actionable next step. */
    opacity: 1;
}

.wbbm-bm-card-cta .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.wbbm-bm-card-cta:hover {
    color: #fff;
    box-shadow: 0 5px 12px rgba(234, 88, 12, .36);
    transform: translateY(-1px);
}

/* A disabled card dims everything except the CTA (see comment above) --
   the individual elements are dimmed directly rather than the card as a
   whole, so the install button stays at full strength. */
.wbbm-bm-card.is-disabled > input,
.wbbm-bm-card.is-disabled > .wbbm-bm-card-icon,
.wbbm-bm-card.is-disabled > strong,
.wbbm-bm-card.is-disabled > small {
    opacity: .55;
}

@media (max-width: 560px) {
    .wbbm-bm-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Payments settings tab (Settings → Payments)
   ============================================================ */

.wbbm-pay-intro {
    background: #f0f7ff;
    border: 1px solid #cfe3fb;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    max-width: 820px;
}

.wbbm-pay-intro h4 {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wbbm-pay-intro ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.wbbm-pay-intro li {
    flex: 1 1 200px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--bus-text-light);
    line-height: 1.5;
}

.wbbm-pay-intro-num {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Payments tab shows selection via the ACTIVE badge instead of the
   raw radio dot (the per-bus modal, which has no badge, still shows it). */
#wbbm-pay-mode-cards .wbbm-bm-card input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.wbbm-bm-card-active {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 100px;
    background: #ecfdf5;
    color: #059669;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.wbbm-bm-card-active::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.wbbm-pay-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 13px;
    color: #9a3412;
}

.wbbm-pay-warning .dashicons {
    color: #dc2626;
    flex: 0 0 auto;
}

.wbbm-pay-configuring {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #1e3a8a;
}

.wbbm-pay-configuring .dashicons {
    color: #2563eb;
}

.wbbm-gw-accordion {
    border: 1px solid var(--bus-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.wbbm-gw-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}

.wbbm-gw-accordion-header.is-collapsed .dashicons {
    transform: rotate(180deg);
}

.wbbm-gw-accordion-body {
    padding: 16px;
}

.wbbm-gw-row {
    border: 1px solid var(--bus-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.wbbm-gw-row:last-child {
    margin-bottom: 0;
}

.wbbm-gw-row-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wbbm-gw-row-top strong {
    font-size: 14px;
    color: var(--bus-text);
}

.wbbm-gw-status {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 9px;
    border-radius: 100px;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
}

.wbbm-gw-status.is-on {
    background: #ecfdf5;
    color: #059669;
}

/* Toggled on but still missing the API keys it needs to actually take a
   payment -- distinct from a plain "ENABLED" so it's never mistaken for
   already working (see WBBM_Settings_Hub::render_offline_payment_section()). */
.wbbm-gw-status.is-needs-setup {
    background: #fffbeb;
    color: #b45309;
}

.wbbm-gw-configure {
    margin-left: auto;
}

.wbbm-gw-desc {
    margin: 8px 0 0 60px;
    font-size: 12.5px;
    color: var(--bus-text-light);
}

/* ---- Per-gateway "Configure" modal: loads WooCommerce's own settings
   screen for that gateway in an iframe instead of navigating/opening a new
   tab, so the admin never leaves this page. ---- */
.wbbm-gw-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 100010;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wbbm-gw-modal.is-open {
    display: flex;
}

.wbbm-gw-modal-box {
    background: #fff;
    border-radius: 14px;
    width: min(1100px, 94vw);
    height: min(820px, 88vh);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wbbm-gw-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bus-border, #e5e7eb);
    flex-shrink: 0;
}

.wbbm-gw-modal-head strong {
    font-size: 14px;
    color: var(--bus-text);
}

.wbbm-gw-modal-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wbbm-gw-modal-open-tab,
.wbbm-gw-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--bus-border, #e5e7eb);
    background: #fff;
    color: var(--bus-text-light);
    cursor: pointer;
    text-decoration: none;
}

.wbbm-gw-modal-open-tab:hover,
.wbbm-gw-modal-close:hover {
    background: #f8fafc;
    color: var(--bus-text);
}

.wbbm-gw-modal-body {
    position: relative;
    flex: 1;
    min-height: 0;
}

.wbbm-gw-modal-loading {
    position: absolute;
    inset: 0;
    /* Was un-stacked (no z-index), so with the iframe coming after it in
       the DOM, the iframe painted on top of this "cover" the whole time --
       the real WooCommerce page (sidebar menu included) was flashing
       through underneath instead of staying hidden behind it. This has to
       sit above the iframe for the whole load, not just visually first. */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bus-text-light);
    background: #fff;
}

.wbbm-gw-modal-loading .spinner {
    float: none;
    margin: 0;
}

.wbbm-gw-modal-body iframe {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    /* Kept invisible until the chrome-trim style is injected on load, so
       nothing inside it -- however briefly -- ever has a chance to paint
       before it's been stripped down to just the settings form. */
    visibility: hidden;
}

.wbbm-gw-modal-body iframe.is-ready {
    visibility: visible;
}

body.wbbm-modal-open {
    overflow: hidden;
}

/* ---- Offline Payment: Enable toggle + Payment Types repeater ---- */
.wbbm-offline-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--bus-border);
    border-radius: 10px;
    margin-bottom: 20px;
}

.wbbm-offline-toggle-row strong {
    display: block;
    font-size: 14px;
    color: var(--bus-text);
}

.wbbm-offline-toggle-row p.description {
    margin: 4px 0 0;
}

.wbbm-pm-repeater {
    margin: 4px 0 0;
}

.wbbm-pm-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 12px;
}

.wbbm-pm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border: 1px solid var(--bus-border);
    border-radius: 8px;
}

.wbbm-pm-enabled-switch {
    flex-shrink: 0;
}

.wbbm-pm-row .form-control {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 5px 10px;
    font-size: 13px;
}

.wbbm-pm-remove {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bus-border);
    border-radius: 6px;
    background: #fff;
    color: #dc2626;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.wbbm-pm-remove:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

.wbbm-pay-saved-msg {
    margin-left: 10px;
    font-size: 12.5px;
    font-weight: 600;
}

.wbbm-pay-saved-msg.is-ok {
    color: #059669;
}

.wbbm-pay-saved-msg.is-error {
    color: #dc2626;
}

/* ---- WooCommerce install/activate progress modal (shared markup+JS is
   duplicated on the two screens that show the "Requires WooCommerce"
   button -- the CSS here is the one shared piece). ---- */
.wbbm-wc-install-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 100010;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wbbm-wc-install-modal.is-open {
    display: flex;
}

.wbbm-wc-install-box {
    background: #fff;
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    padding: 30px 26px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.wbbm-wc-install-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1e6;
    color: var(--bus-primary);
}

.wbbm-wc-install-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.wbbm-wc-install-box h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--bus-text);
}

.wbbm-wc-install-box p {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--bus-text-light);
}

.wbbm-wc-install-progress-track {
    height: 8px;
    border-radius: 100px;
    background: #f1f5f9;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

.wbbm-wc-install-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--bus-primary), #fb923c);
    /* Width is driven from JS as a real (simulated-until-response) percentage
       now, not a CSS keyframe -- see wbbm-wc-install-pct for the number. */
    transition: width .35s ease;
}

.wbbm-wc-install-progress-bar.is-done {
    width: 100%;
}

.wbbm-wc-install-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wbbm-wc-install-status {
    font-size: 12.5px;
    color: var(--bus-text-light);
    min-height: 18px;
    text-align: left;
}

.wbbm-wc-install-pct {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bus-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wbbm-wc-install-status.is-error {
    color: #dc2626;
    font-weight: 600;
}

.wbbm-wc-install-status.is-success {
    color: #059669;
    font-weight: 600;
}