/**
 * Shared admin shell for every Bus Booking Manager hub screen.
 *
 * Registered by the free plugin as the `wbbm-admin-shell` handle; the Pro
 * plugin enqueues the same handle so both sides render one design system.
 * Tokens mirror assets/admin/bus-configuration.css, which remains the
 * reference implementation for the Bus Configuration screen.
 *
 * Everything is scoped under .wbbm-hub so no rule can leak into the rest of
 * wp-admin. Legacy module markup is normalised inside .wbbm-hub-panel only.
 */

.wbbm-hub {
    --wbbm-accent: #b30c3b;
    --wbbm-accent-dark: #8e0930;
    --wbbm-ink: #172033;
    --wbbm-muted: #64748b;
    --wbbm-line: #e2e8f0;
    --wbbm-soft: #f8fafc;
    --wbbm-danger: #dc2626;
    --wbbm-ok: #047857;
    --wbbm-warn: #b45309;

    margin: 20px 20px 0 0;
    color: var(--wbbm-ink);
}

/* ------------------------------------------------------------------ shell */
.wbbm-hub-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.wbbm-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fff 0%, #fffaf6 100%);
}

.wbbm-hub-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.wbbm-hub-mark {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    background: var(--wbbm-accent);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(179, 12, 59, .22);
}

.wbbm-hub-mark .dashicons {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.wbbm-hub-heading h1 {
    margin: 0;
    padding: 0;
    color: var(--wbbm-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.wbbm-hub-heading p {
    margin: 4px 0 0;
    color: var(--wbbm-muted);
    font-size: 13px;
}

.wbbm-hub-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ------------------------------------------------------------------- tabs */
.wbbm-hub-tabs {
    display: flex;
    overflow-x: auto;
    padding: 0 16px;
    gap: 4px;
    background: #fff;
    border-top: 1px solid var(--wbbm-line);
    border-bottom: 1px solid var(--wbbm-line);
    scrollbar-width: thin;
}

.wbbm-hub-tabs a {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 52px;
    padding: 0 15px;
    gap: 8px;
    color: var(--wbbm-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.wbbm-hub-tabs a:hover {
    color: var(--wbbm-ink);
}

.wbbm-hub-tabs a[aria-current="page"] {
    color: var(--wbbm-accent-dark);
}

.wbbm-hub-tabs a[aria-current="page"]::after {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 3px;
    background: var(--wbbm-accent);
    border-radius: 3px 3px 0 0;
    content: "";
}

.wbbm-hub-tabs .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.wbbm-hub-tabs a:focus-visible,
.wbbm-hub-button:focus-visible,
.wbbm-hub-panel :focus-visible {
    outline: 3px solid rgba(179, 12, 59, .28);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- subtitle */
/* ---------------------------------------------------------------- notices */
.wbbm-hub-notice {
    display: flex;
    align-items: center;
    margin: 16px 24px 0;
    padding: 11px 14px;
    gap: 8px;
    border-radius: 8px;
    font-weight: 600;
}

.wbbm-hub-notice.is-success {
    color: var(--wbbm-ok);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.wbbm-hub-notice.is-error {
    color: var(--wbbm-danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.wbbm-hub-notice.is-info {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

/* ---------------------------------------------------------------- buttons */
.wbbm-hub-button {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    gap: 7px;
    color: var(--wbbm-ink);
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s, transform .18s;
}

.wbbm-hub-button:hover,
.wbbm-hub-button:focus {
    color: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent);
    outline: none;
}

.wbbm-hub-button.is-primary {
    color: #fff;
    background: var(--wbbm-accent);
    border-color: var(--wbbm-accent);
}

.wbbm-hub-button.is-primary:hover,
.wbbm-hub-button.is-primary:focus {
    color: #fff;
    background: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent-dark);
    transform: translateY(-1px);
}

.wbbm-hub-button .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* ------------------------------------------------------------ empty state */
.wbbm-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 54px 20px;
    gap: 6px;
    color: var(--wbbm-muted);
    text-align: center;
}

.wbbm-hub-empty .dashicons {
    width: 32px;
    height: 32px;
    color: var(--wbbm-line);
    font-size: 32px;
}

.wbbm-hub-empty strong {
    color: var(--wbbm-ink);
    font-size: 15px;
}

/* =========================================================================
   Panel: normalises legacy module markup rendered inside a hub tab.
   Scoped to .wbbm-hub-panel so wp-admin elsewhere is untouched.
   ========================================================================= */
.wbbm-hub-panel {
    padding: 20px 24px 24px;
}

/* Legacy modules open their own .wrap; neutralise its admin margins. */
.wbbm-hub-panel .wrap,
.wbbm-hub-panel .wbbm_page_wrapper {
    margin: 0;
    padding: 0;
    max-width: none;
}

/* Module <h1>/<h2> duplicate the hub header; demote them. */
.wbbm-hub-panel > .wrap > h1:first-child,
.wbbm-hub-panel > h1:first-child {
    margin: 0 0 14px;
    padding: 0;
    color: var(--wbbm-ink);
    font-size: 18px;
    font-weight: 700;
}

.wbbm-hub-panel h2 {
    margin: 22px 0 10px;
    color: var(--wbbm-ink);
    font-size: 16px;
    font-weight: 700;
}

.wbbm-hub-panel h2:first-child {
    margin-top: 0;
}

.wbbm-hub-panel h3 {
    margin: 18px 0 8px;
    color: var(--wbbm-ink);
    font-size: 14px;
    font-weight: 700;
}

/* Cards ------------------------------------------------------------------ */
.wbbm-hub-card {
    margin: 0 0 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
}

.wbbm-hub-card > :first-child { margin-top: 0; }
.wbbm-hub-card > :last-child { margin-bottom: 0; }

/* Stat tiles ------------------------------------------------------------- */
.wbbm-hub-stats {
    display: grid;
    margin: 0 0 18px;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.wbbm-hub-stat {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    gap: 4px;
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
}

.wbbm-hub-stat span {
    color: var(--wbbm-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wbbm-hub-stat strong {
    color: var(--wbbm-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

/* Tables ----------------------------------------------------------------- */
.wbbm-hub-panel table.widefat,
.wbbm-hub-panel table.wp-list-table,
.wbbm-hub-panel table.wbbm-hub-table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-collapse: separate;
    border-radius: 12px;
    border-spacing: 0;
    box-shadow: none;
}

.wbbm-hub-panel table.widefat th,
.wbbm-hub-panel table.wp-list-table th,
.wbbm-hub-panel table.wbbm-hub-table th {
    padding: 13px 16px;
    color: var(--wbbm-muted);
    background: #fbfdff;
    border-bottom: 1px solid var(--wbbm-line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

.wbbm-hub-panel table.widefat td,
.wbbm-hub-panel table.wp-list-table td,
.wbbm-hub-panel table.wbbm-hub-table td {
    padding: 14px 16px;
    color: #334155;
    border-bottom: 1px solid var(--wbbm-line);
    vertical-align: middle;
}

.wbbm-hub-panel table.widefat tbody tr:last-child td,
.wbbm-hub-panel table.wp-list-table tbody tr:last-child td,
.wbbm-hub-panel table.wbbm-hub-table tbody tr:last-child td {
    border-bottom: 0;
}

.wbbm-hub-panel table.widefat tbody tr:hover td,
.wbbm-hub-panel table.wbbm-hub-table tbody tr:hover td {
    background: #fffdfb;
}

/* Wide tables scroll inside their own container, never the page. */
.wbbm-hub-tablewrap {
    overflow-x: auto;
    max-width: 100%;
}

/* Forms ------------------------------------------------------------------ */
.wbbm-hub-panel .form-table th {
    padding: 16px 16px 16px 0;
    color: var(--wbbm-ink);
    font-weight: 600;
}

.wbbm-hub-panel .form-table td {
    padding: 12px 0;
}

.wbbm-hub-panel input[type="text"],
.wbbm-hub-panel input[type="search"],
.wbbm-hub-panel input[type="email"],
.wbbm-hub-panel input[type="url"],
.wbbm-hub-panel input[type="number"],
.wbbm-hub-panel input[type="date"],
.wbbm-hub-panel input[type="datetime-local"],
.wbbm-hub-panel input[type="password"],
.wbbm-hub-panel select,
.wbbm-hub-panel textarea {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--wbbm-ink);
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
    box-shadow: none;
}

.wbbm-hub-panel textarea {
    min-height: 90px;
}

.wbbm-hub-panel input:focus,
.wbbm-hub-panel select:focus,
.wbbm-hub-panel textarea:focus {
    background: #fff;
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 2px rgba(179, 12, 59, .12);
    outline: none;
}

/* Native WP buttons inside a panel adopt the hub look. */
.wbbm-hub-panel .button-primary {
    color: #fff;
    background: var(--wbbm-accent);
    border-color: var(--wbbm-accent);
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
}

.wbbm-hub-panel .button-primary:hover,
.wbbm-hub-panel .button-primary:focus {
    background: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent-dark);
    box-shadow: none;
}

.wbbm-hub-panel .button,
.wbbm-hub-panel .button-secondary {
    border-radius: 8px;
}

/* Status pills ----------------------------------------------------------- */
.wbbm-hub-pill {
    display: inline-flex;
    padding: 5px 10px;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.wbbm-hub-pill.is-ok { color: var(--wbbm-ok); background: #ecfdf5; }
.wbbm-hub-pill.is-warn { color: var(--wbbm-warn); background: #fffbeb; }
.wbbm-hub-pill.is-bad { color: var(--wbbm-danger); background: #fef2f2; }

/* ============================================================== responsive */
@media screen and (max-width: 782px) {
    .wbbm-hub {
        margin: 12px 12px 0 0;
    }

    .wbbm-hub-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .wbbm-hub-header-actions,
    .wbbm-hub-header-actions .wbbm-hub-button {
        width: 100%;
    }

    .wbbm-hub-panel {
        padding: 16px 14px 20px;
    }

    .wbbm-hub-panel .form-table th,
    .wbbm-hub-panel .form-table td {
        display: block;
        width: auto;
        padding: 8px 0;
    }

    .wbbm-hub-panel input[type="text"],
    .wbbm-hub-panel input[type="search"],
    .wbbm-hub-panel input[type="email"],
    .wbbm-hub-panel input[type="number"],
    .wbbm-hub-panel input[type="date"],
    .wbbm-hub-panel select,
    .wbbm-hub-panel textarea {
        width: 100%;
        min-height: 44px;
    }

    .wbbm-hub-panel .button,
    .wbbm-hub-panel .button-primary {
        min-height: 44px;
    }

    /* Every hub table collapses into labelled cards. */
    .wbbm-hub-panel table.wbbm-hub-table,
    .wbbm-hub-panel table.wbbm-hub-table tbody,
    .wbbm-hub-panel table.wbbm-hub-table tbody tr,
    .wbbm-hub-panel table.wbbm-hub-table tbody td {
        display: block;
        width: 100%;
    }

    .wbbm-hub-panel table.wbbm-hub-table thead {
        position: absolute;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        width: 1px;
        height: 1px;
    }

    .wbbm-hub-panel table.wbbm-hub-table tbody tr {
        margin: 0 0 12px;
        border: 1px solid var(--wbbm-line);
        border-radius: 10px;
    }

    .wbbm-hub-panel table.wbbm-hub-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        gap: 14px;
        text-align: right;
    }

    .wbbm-hub-panel table.wbbm-hub-table tbody td::before {
        flex: 0 0 auto;
        color: var(--wbbm-muted);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    .wbbm-hub-panel table.wbbm-hub-table tbody td:empty {
        display: none;
    }
}

/* =========================================================================
   Admin notices, anchored by <hr class="wp-header-end"> inside the shell.
   ========================================================================= */
.wbbm-hub .wp-header-end {
    margin: 0;
    border: 0;
    visibility: hidden;
}

.wbbm-hub > .notice,
.wbbm-hub-shell > .notice,
.wbbm-hub .wbbm-hub-shell > .updated,
.wbbm-hub .wbbm-hub-shell > .error {
    margin: 16px 24px 0;
    border-radius: 8px;
    box-shadow: none;
}

/* =========================================================================
   Legacy settings panel: adopt the hub palette instead of its own pink.
   Scoped to .wbbm-hub-panel, so the standalone page keeps its old look.
   ========================================================================= */
.wbbm-hub-panel .wbbm_settings_panel {
    display: flex;
    overflow: hidden;
    max-width: 100%;
    background: #fff;
    border: 0;
    border-radius: 6px;
}

/* Section navigation down the left. */
.wbbm-hub-panel .wbbm_settings_panel .nav-tab-wrapper {
    display: flex;
    flex: 0 0 230px;
    flex-direction: column;
    padding: 10px;
    gap: 2px;
    background: var(--wbbm-soft);
    border: 0;
    border-right: 1px solid var(--wbbm-line);
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab {
    margin: 0;
    padding: 11px 14px;
    color: var(--wbbm-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab:hover {
    color: var(--wbbm-ink);
    background: #fff;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab-active,
.wbbm-hub-panel .wbbm_settings_panel .nav-tab-active:hover {
    color: #fff;
    background: var(--wbbm-accent);
}

/* Option groups on the right. */
.wbbm-hub-panel .wbbm_settings_panel .metabox-holder {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 20px;
}

.wbbm-hub-panel .wbbm_settings_panel .group h2:first-of-type {
    margin: 0 0 14px;
    font-size: 17px;
}

.wbbm-hub-panel .wbbm_settings_panel .form-table {
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
}

.wbbm-hub-panel .wbbm_settings_panel .form-table tr {
    border-bottom: 1px solid var(--wbbm-line);
}

.wbbm-hub-panel .wbbm_settings_panel .form-table tr:last-child {
    border-bottom: 0;
}

.wbbm-hub-panel .wbbm_settings_panel .form-table th {
    width: 34%;
    padding: 16px 18px;
    background: #fbfdff;
    text-transform: none;
}

.wbbm-hub-panel .wbbm_settings_panel .form-table th label {
    color: var(--wbbm-ink);
    font-size: 13px;
    font-weight: 700;
}

.wbbm-hub-panel .wbbm_settings_panel .form-table td {
    padding: 16px 18px;
}

.wbbm-hub-panel .wbbm_settings_panel .form-table .description {
    margin-top: 6px;
    color: var(--wbbm-muted);
    font-size: 12px;
    font-style: normal;
}

/* The submit row. */
.wbbm-hub-panel .wbbm_settings_panel .submit,
.wbbm-hub-panel .wbbm_settings_panel p.submit {
    margin: 16px 0 0;
    padding: 0;
    text-align: right;
}

@media screen and (max-width: 782px) {
    .wbbm-hub-panel .wbbm_settings_panel {
        flex-direction: column;
    }

    .wbbm-hub-panel .wbbm_settings_panel .nav-tab-wrapper {
        flex: 1 1 auto;
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--wbbm-line);
    }

    .wbbm-hub-panel .wbbm_settings_panel .nav-tab {
        white-space: nowrap;
    }

    .wbbm-hub-panel .wbbm_settings_panel .form-table th,
    .wbbm-hub-panel .wbbm_settings_panel .form-table td {
        display: block;
        width: auto;
    }
}

/* -------------------------------------------------------------------------
   The hub palette follows the site's configured brand colour, which now
   defaults to the same orange (see MP_Global_Style.php). A site that picks
   its own colour in Style Settings recolours admin and frontend together,
   rather than the two drifting apart.
   ------------------------------------------------------------------------- */
.wbbm-hub {
    --wbbm-accent: var(--color_theme, #b30c3b);
    --wbbm-accent-dark: var(--color_theme_cc, #8e0930);
}

/* Beat `.wbbm_settings_panel p.submit input` on specificity. */
.wbbm-hub-panel .wbbm_settings_panel p.submit input,
.wbbm-hub-panel p.submit input.button-primary {
    padding: 10px 22px;
    background: var(--wbbm-accent);
    border-color: var(--wbbm-accent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.wbbm-hub-panel .wbbm_settings_panel p.submit input:hover,
.wbbm-hub-panel p.submit input.button-primary:hover {
    background: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent-dark);
}

/* =========================================================================
   Purchase Ticket module inside a hub.
   ========================================================================= */
.wbbm-hub-panel .wbbm-search-form-sec {
    margin: 0 0 18px;
    padding: 18px 20px;
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
    box-shadow: none;
}

.wbbm-hub-panel .search-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.wbbm-hub-panel .search-fields .fields-li {
    flex: 1 1 190px;
    min-width: 0;
}

.wbbm-hub-panel .search-fields label {
    display: block;
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-hub-panel .search-fields label .fa {
    margin-right: 4px;
    color: var(--wbbm-accent);
}

.wbbm-hub-panel .search-fields input[type="text"],
.wbbm-hub-panel .search-fields select {
    width: 100%;
    margin-top: 6px;
    background: #fff;
}

.wbbm-hub-panel .search-radio-sec {
    display: flex;
    margin-bottom: 8px;
    gap: 14px;
}

.wbbm-hub-panel .search-radio-sec label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wbbm-ink);
    font-size: 13px;
}

.wbbm-hub-panel .search-fields button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 20px;
    gap: 7px;
    color: #fff;
    background: var(--wbbm-accent);
    border: 1px solid var(--wbbm-accent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, transform .18s;
}

.wbbm-hub-panel .search-fields button[type="submit"]:hover {
    background: var(--wbbm-accent-dark);
    transform: translateY(-1px);
}

/* Results list: the red header bar is inline-styled, so override it. */
.wbbm-hub-panel .mage-search-res-wrapper {
    overflow: hidden;
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
}

.wbbm-hub-panel .mage-search-res-header {
    padding: 12px 16px;
    color: var(--wbbm-muted) !important;
    background: #fbfdff !important;
    border-bottom: 1px solid var(--wbbm-line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wbbm-hub-panel .mage-search-res-header span {
    color: var(--wbbm-muted);
}

.wbbm-hub-panel .mage-bus-booking-wrapper {
    padding: 16px;
    border-bottom: 1px solid var(--wbbm-line);
}

.wbbm-hub-panel .mage-bus-booking-wrapper:last-child {
    border-bottom: 0;
}

/* Empty states rendered by the module. */
.wbbm-hub-panel .wbbm-purchase-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px;
    gap: 6px;
    color: var(--wbbm-muted);
    text-align: center;
}

.wbbm-hub-panel .wbbm-purchase-empty .dashicons {
    width: 32px;
    height: 32px;
    color: var(--wbbm-line);
    font-size: 32px;
}

.wbbm-hub-panel .wbbm-purchase-empty strong {
    color: var(--wbbm-ink);
    font-size: 15px;
}

/* Reports module inside a hub: it already carries its own scoped styling,
   so only neutralise the outer spacing the hub panel now provides. */
.wbbm-hub-panel .wbbm-report-page {
    margin: 0;
}

.wbbm-hub-panel .wbbm-report-page .wbbm_page_filter_wrapper,
.wbbm-hub-panel .wbbm-report-page .wbbm_page_content_wrapper {
    box-shadow: none;
}

/* Search-result rows: neutral striping, hub-coloured action button. */
.wbbm-hub-panel .mage-search-res-wrapper .mage-search-brief-row {
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--wbbm-line);
}

.wbbm-hub-panel .mage-search-res-wrapper .mage-search-brief-row:nth-child(even) {
    background: var(--wbbm-soft);
}

.wbbm-hub-panel .mage-search-res-wrapper .mage-search-brief-row:last-child {
    border-bottom: 0;
}

.wbbm-hub-panel .mage-search-brief-row .mage-bus-detail-action {
    min-height: 40px;
    padding: 9px 16px;
    background: var(--wbbm-accent);
    border-radius: 8px;
    font-weight: 600;
}

.wbbm-hub-panel .mage-search-brief-row .mage-bus-detail-action:hover {
    background: var(--wbbm-accent-dark);
}

/* Radios and checkboxes keep WordPress core's own sizing and checkmark.
   Forcing a size here made the core tick (21px) overflow the box, so the
   only thing overridden is flex stretching inside a flex row. */
.wbbm-hub-panel input[type="radio"],
.wbbm-hub-panel input[type="checkbox"] {
    flex: 0 0 auto;
}

/* The frontend stylesheet forces `width: 40% !important` on these labels and
   shifts the row up 25px; both have to be undone with equal weight here. */
.wbbm-hub-panel .search-radio-sec {
    position: static !important;
    top: auto !important;
    display: flex !important;
    overflow: visible !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.wbbm-hub-panel .fields-li .search-radio-sec label,
.wbbm-hub-panel .search-fields .search-radio-sec label {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    width: auto !important;
    margin: 0 !important;
    gap: 7px;
    color: var(--wbbm-ink);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.wbbm-hub-panel .search-radio-sec input[type="radio"] {
    width: 17px !important;
    min-width: 17px;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The results header grid should not wrap its short labels. */
.wbbm-hub-panel .mage-search-res-header--img span,
.wbbm-hub-panel .mage-search-res-header--left span,
.wbbm-hub-panel .mage-search-res-header--right span {
    white-space: nowrap;
}

/* =========================================================================
   Pro platform modules (changes, validator, waitlist, fleet, analytics,
   webhooks) rendered inside a hub tab.
   ========================================================================= */
.wbbm-hub-panel .wbbm-pro-card,
.wbbm-hub-panel .wbbm-pro-panel {
    margin: 0 0 18px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
    box-sizing: border-box;
}

.wbbm-hub-panel .wbbm-pro-card > :first-child,
.wbbm-hub-panel .wbbm-pro-panel > :first-child { margin-top: 0; }
.wbbm-hub-panel .wbbm-pro-card > :last-child,
.wbbm-hub-panel .wbbm-pro-panel > :last-child { margin-bottom: 0; }

/* Field grids: each cell stacks its label above its control. */
.wbbm-hub-panel .wbbm-pro-grid {
    display: grid;
    margin: 0 0 16px;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.wbbm-hub-panel .wbbm-pro-grid > div,
.wbbm-hub-panel .wbbm-pro-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
}

.wbbm-hub-panel .wbbm-pro-grid label,
.wbbm-hub-panel .wbbm-pro-field label {
    display: block;
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-hub-panel .wbbm-pro-grid label strong,
.wbbm-hub-panel .wbbm-pro-field label strong {
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-hub-panel .wbbm-pro-grid select,
.wbbm-hub-panel .wbbm-pro-grid input,
.wbbm-hub-panel .wbbm-pro-field select,
.wbbm-hub-panel .wbbm-pro-field input {
    width: 100%;
    max-width: 100%;
}

.wbbm-hub-panel .wbbm-pro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wbbm-hub-panel .wbbm-pro-responsive-table {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.wbbm-hub-panel .wbbm-pro-responsive-table table {
    min-width: 0;
}

/* Status pills used across the modules. */
.wbbm-hub-panel .wbbm-pro-status {
    display: inline-flex;
    padding: 5px 10px;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.wbbm-hub-panel .wbbm-pro-status--active,
.wbbm-hub-panel .wbbm-pro-status--completed,
.wbbm-hub-panel .wbbm-pro-status--valid {
    color: var(--wbbm-ok);
    background: #ecfdf5;
}

.wbbm-hub-panel .wbbm-pro-status--cancelled,
.wbbm-hub-panel .wbbm-pro-status--rejected,
.wbbm-hub-panel .wbbm-pro-status--invalid {
    color: var(--wbbm-danger);
    background: #fef2f2;
}

.wbbm-hub-panel .wbbm-pro-notice {
    margin: 0 0 14px;
    padding: 11px 14px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-weight: 600;
}

.wbbm-hub-panel .wbbm-pro-metric {
    color: var(--wbbm-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

/* -------------------------------------------------------- toolbar/search */
.wbbm-hub-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    gap: 10px;
}

.wbbm-hub-search {
    position: relative;
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    max-width: 420px;
}

.wbbm-hub-search .dashicons {
    position: absolute;
    left: 12px;
    color: var(--wbbm-muted);
    pointer-events: none;
}

.wbbm-hub-search input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 8px 14px 8px 38px;
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
}

.wbbm-hub-search input[type="search"]:focus {
    background: #fff;
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 2px rgba(179, 12, 59, .12);
    outline: none;
}

.wbbm-hub-count {
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

/* Rows hidden by the live filter. */
.wbbm-hub-panel tr[data-wbbm-filtered="1"] {
    display: none;
}

/* ------------------------------------------------------ ticket validator */
.wbbm-hub-panel .wbbm-validator-row,
.wbbm-validator-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.wbbm-validator-field {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
}

.wbbm-validator-field label {
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-hub-panel .wbbm-validator-field input[type="text"] {
    width: 100%;
    min-height: 44px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.wbbm-validator-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.wbbm-validator-actions .wbbm-hub-button {
    min-height: 44px;
}

.wbbm-validator-preview,
.wbbm-validator-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 14px 0 0;
    padding: 12px 14px;
    gap: 10px 16px;
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
    color: var(--wbbm-muted);
    font-size: 13px;
}

.wbbm-validator-result {
    margin: 0 0 16px;
}

.wbbm-validator-result.is-ok { background: #ecfdf5; border-color: #a7f3d0; }
.wbbm-validator-result.is-warn { background: #fffbeb; border-color: #fde68a; }
.wbbm-validator-result.is-bad { background: #fef2f2; border-color: #fecaca; }

.wbbm-validator-result-badge {
    padding: 5px 12px;
    color: #fff;
    background: var(--wbbm-muted);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.wbbm-validator-result.is-ok .wbbm-validator-result-badge { background: var(--wbbm-ok); }
.wbbm-validator-result.is-warn .wbbm-validator-result-badge { background: var(--wbbm-warn); }
.wbbm-validator-result.is-bad .wbbm-validator-result-badge { background: var(--wbbm-danger); }

/*
 * "Checked in 12 May 2026 08:14 by Rahim" on a repeat scan. The result and
 * preview boxes are flex rows, so the note claims a full row of its own
 * rather than squeezing in beside the badge. display/width/box-sizing are
 * declared outright because PRO's admin stylesheet loads after this one.
 */
.wbbm-validator-result-note {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    color: var(--wbbm-ink, #172033);
    font-size: 12.5px;
    font-weight: 600;
}

.wbbm-validator-result-note[hidden] {
    display: none;
}

.wbbm-validator-result-meta,
.wbbm-validator-preview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    color: var(--wbbm-ink);
}

.wbbm-validator-camera {
    margin-top: 14px;
}

.wbbm-validator-camera video {
    width: 100%;
    max-width: 480px;
    border-radius: 10px;
}

@media screen and (max-width: 782px) {
    .wbbm-validator-actions,
    .wbbm-validator-actions .wbbm-hub-button {
        width: 100%;
    }

    .wbbm-hub-panel .wbbm-pro-grid {
        grid-template-columns: 1fr;
    }
}

/* The [hidden] attribute must beat the display rules above. */
.wbbm-hub-panel [hidden],
.wbbm-validator-preview[hidden],
.wbbm-validator-camera[hidden] {
    display: none !important;
}

.wbbm-hub-muted {
    color: var(--wbbm-muted);
}

/* An empty-state row is a placeholder, never a data row. */
.wbbm-hub-panel tr.wbbm-hub-empty-row td {
    padding: 0;
}

/* --------------------------------------------------------- analytics bar */
.wbbm-analytics-filters .wbbm-pro-grid {
    max-width: 620px;
}

.wbbm-analytics-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
    gap: 10px;
}

.wbbm-analytics-bar form {
    margin: 0;
}

@media screen and (max-width: 782px) {
    .wbbm-analytics-bar,
    .wbbm-analytics-bar .wbbm-pro-actions,
    .wbbm-analytics-bar form,
    .wbbm-analytics-bar .wbbm-hub-button {
        width: 100%;
    }
}

/* The purchase search card spans the panel; its fields share the full row. */
.wbbm-hub-panel .wbbm-search-form-sec {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.wbbm-hub-panel .wbbm-search-form-sec form {
    width: 100%;
    margin: 0;
}

.wbbm-hub-panel .search-fields {
    width: 100%;
}

.wbbm-hub-panel .search-fields > .fields-li {
    flex: 1 1 200px;
}

/* Radio row and submit sit together on the trailing edge of the row. */
.wbbm-hub-panel .search-fields > .fields-li:last-child {
    display: flex;
    flex: 1 1 260px;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.wbbm-hub-panel .search-fields > .fields-li:last-child button[type="submit"] {
    margin-left: auto;
}

/* wc_price() nests its own spans; make them inherit the stat tile's type. */
.wbbm-hub-stat strong .woocommerce-Price-amount,
.wbbm-hub-stat strong .woocommerce-Price-currencySymbol,
.wbbm-hub-stat strong bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Selects inside module toolbars must not clip their own text. */
.wbbm-hub-panel select {
    height: auto;
    min-height: 40px;
    line-height: 1.4;
}

/* =========================================================================
   Plugin-wide theme layer.

   The legacy stylesheets hardcode several palettes (green #22D02D /
   rgb(59,201,124), red #EA2330, blue #1924c6, pink #f9e9e9 / #e91e63).
   Rather than editing those vendor files, the colours are remapped here for
   plugin admin screens only, keyed off the body.wbbm-admin class.

   Semantics are preserved: primary ACTIONS become the brand colour, while
   success/warning/danger STATUS colours stay meaningful.
   ========================================================================= */
body.wbbm-admin {
    --wbbm-accent: var(--color_theme, #b30c3b);
    --wbbm-accent-dark: var(--color_theme_cc, #8e0930);
    --wbbm-ink: #172033;
    --wbbm-muted: #64748b;
    --wbbm-line: #e2e8f0;
    --wbbm-soft: #f8fafc;
    --wbbm-ok: #047857;
    --wbbm-warn: #b45309;
    --wbbm-danger: #dc2626;
}

/* --- primary action buttons: green/pink legacy -> brand ----------------- */
body.wbbm-admin .wbbm_btn_new,
body.wbbm-admin .wbbm_outer_export_csv,
body.wbbm-admin .wbbm-export-csv,
body.wbbm-admin .wbbm-passenger-export,
body.wbbm-admin .mage-bus-detail-action,
body.wbbm-admin .wbtm-button,
body.wbbm-admin .themeButton {
    background-color: var(--wbbm-accent);
    border-color: var(--wbbm-accent);
    border-radius: 8px;
    color: #fff;
}

body.wbbm-admin .wbbm_btn_new:hover,
body.wbbm-admin .wbbm_outer_export_csv:hover,
body.wbbm-admin .wbbm-export-csv:hover,
body.wbbm-admin .wbbm-passenger-export:hover,
body.wbbm-admin .mage-bus-detail-action:hover,
body.wbbm-admin .wbtm-button:hover,
body.wbbm-admin .themeButton:hover {
    background-color: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent-dark);
    color: #fff;
}

/* --- table heads: red legacy -> neutral -------------------------------- */
body.wbbm-admin table.wbbm-passenger-list th,
body.wbbm-admin table.wbbm-main-table th {
    color: var(--wbbm-muted) !important;
    background-color: #fbfdff;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- row striping: pink legacy -> neutral ------------------------------ */
body.wbbm-admin table.wbbm-passenger-list tr:nth-child(odd),
body.wbbm-admin table.wbbm-main-table tr:nth-child(odd) {
    background-color: transparent;
}

body.wbbm-admin table.wbbm-passenger-list tr:hover,
body.wbbm-admin table.wbbm-main-table tbody tr:hover {
    background-color: #fffdfb !important;
}

/* --- summary tiles: solid blue legacy -> neutral cards ----------------- */
body.wbbm-admin .wbbm-table-top .left .item {
    color: var(--wbbm-ink);
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
    box-shadow: none;
}

body.wbbm-admin .wbbm-table-top .left .item strong {
    color: var(--wbbm-muted);
}

body.wbbm-admin .wbbm-table-top .left .item span {
    color: var(--wbbm-ink);
}

/* --- filter chrome: pink legacy -> white ------------------------------- */
body.wbbm-admin .wbbm_page_filter_inner {
    background: #fff;
    border-color: var(--wbbm-line);
}

/* --- status pills keep their meaning ----------------------------------- */
body.wbbm-admin .wbbm-status-publish,
body.wbbm-admin .status-publish {
    color: var(--wbbm-ok);
    background: #ecfdf5;
}

/* --- ID-scoped legacy rules need ID-strength answers -------------------- */
body.wbbm-admin #csvExport,
body.wbbm-admin a#add-faq-row.button,
body.wbbm-admin a#add-bp-row.button,
body.wbbm-admin a#add-price-row.button,
body.wbbm-admin a#clone-operate-date.button,
body.wbbm-admin #wbbm-single-settings-meta .wbbm_add_more_pickpoint,
body.wbbm-admin #ttbm_add_meta_box .mpStyle .ppof-button,
body.wbbm-admin #ttbm_add_meta_box .mpStyle .dButton {
    background-color: var(--wbbm-accent);
    border-color: var(--wbbm-accent);
    border-radius: 8px;
    color: #fff;
}

body.wbbm-admin #csvExport:hover,
body.wbbm-admin a#add-faq-row.button:hover,
body.wbbm-admin a#add-bp-row.button:hover,
body.wbbm-admin a#add-price-row.button:hover,
body.wbbm-admin a#clone-operate-date.button:hover,
body.wbbm-admin #wbbm-single-settings-meta .wbbm_add_more_pickpoint:hover,
body.wbbm-admin #ttbm_add_meta_box .mpStyle .ppof-button:hover,
body.wbbm-admin #ttbm_add_meta_box .mpStyle .dButton:hover {
    background-color: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent-dark);
    color: #fff;
}

body.wbbm-admin #ttbm_add_meta_box .mpStyle [data-tabs-target].active,
body.wbbm-admin #ttbm_add_meta_box .mpStyle [data-tabs-target]:hover {
    background-color: var(--wbbm-accent);
    border-color: var(--wbbm-accent);
    color: #fff;
}

/* ------------------------------------------------- instant tab switching */
.wbbm-hub-panel {
    position: relative;
    min-height: 120px;
    transition: opacity .12s ease;
}

.wbbm-hub-panel.is-loading {
    opacity: .45;
    pointer-events: none;
}

/* A thin progress bar under the tab strip while a panel is fetching. */
.wbbm-hub-panel.is-loading::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--wbbm-accent), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: wbbm-hub-progress 900ms linear infinite;
    content: "";
}

@keyframes wbbm-hub-progress {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wbbm-hub-panel { transition: none; }
    .wbbm-hub-panel.is-loading::before { animation: none; }
}

/* =========================================================================
   Consistent panel rhythm.

   Legacy modules carry their own top margins (.wbbm_page_filter_wrapper has
   50px, .ticket-search 30px), which made each tab start at a different
   height. The panel owns the spacing; the first block inside it never adds
   its own.
   ========================================================================= */
.wbbm-hub-panel {
    padding-top: 16px;
}

/* First painted block in a panel: no stacked top margin, whatever it is. */
.wbbm-hub-panel > *:first-child,
.wbbm-hub-panel > *:first-child > *:first-child,
.wbbm-hub-panel .wrap > *:first-child,
.wbbm-hub-panel .wbbm_page_wrapper > *:first-child {
    margin-top: 0 !important;
}

/* The two legacy offenders, wherever they sit in the tree. */
.wbbm-hub-panel .wbbm_page_filter_wrapper,
.wbbm-hub-panel .ticket-search {
    margin-top: 0 !important;
}

/* ------------------------------------------- booking panel inside a hub */
/* The expanded row is inline-styled with a pink tint on the frontend. */
.wbbm-hub-panel .mage_search_list {
    background-color: #fff !important;
    border-top: 1px solid var(--wbbm-line);
}

.wbbm-hub-panel .mage_search_list .mage_bus_details,
.wbbm-hub-panel .mage_search_list .mage_book_now_area {
    border-color: var(--wbbm-line);
}

/* Book Now is a primary action: brand colour, not the legacy green. */
.wbbm-hub-panel .mage_book_now .mage_button,
.wbbm-hub-panel .mage_book_now_area .mage_button,
.wbbm-hub-panel .mage_button.mage_book_now,
.wbbm-hub-panel button.mage_book_now,
.wbbm-hub-panel .mage_book_now button {
    background: var(--wbbm-accent) !important;
    border-color: var(--wbbm-accent) !important;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 600;
}

.wbbm-hub-panel .mage_book_now .mage_button:hover,
.wbbm-hub-panel .mage_book_now_area .mage_button:hover,
.wbbm-hub-panel .mage_button.mage_book_now:hover,
.wbbm-hub-panel button.mage_book_now:hover,
.wbbm-hub-panel .mage_book_now button:hover {
    background: var(--wbbm-accent-dark) !important;
    border-color: var(--wbbm-accent-dark) !important;
}

/* Quantity stepper */
.wbbm-hub-panel .mage_form_group {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
}

.wbbm-hub-panel .mage_form_group .mage_qty_inc,
.wbbm-hub-panel .mage_form_group .mage_qty_dec {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--wbbm-ink);
    background: var(--wbbm-soft);
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s;
}

.wbbm-hub-panel .mage_form_group .mage_qty_inc:hover,
.wbbm-hub-panel .mage_form_group .mage_qty_dec:hover {
    color: #fff;
    background: var(--wbbm-accent);
}

.wbbm-hub-panel .mage_form_group .mage_qty_inc.mage_disabled,
.wbbm-hub-panel .mage_form_group .mage_qty_dec.mage_disabled {
    opacity: .4;
    cursor: not-allowed;
}

.wbbm-hub-panel .mage_form_group input.mage_form {
    width: 56px;
    min-height: 38px;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    text-align: center;
}

.wbbm-hub-panel .mage_form_group input.mage_form:focus {
    box-shadow: none;
}

/* Sub total */
.wbbm-hub-panel .mage_sub_total {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wbbm-ink);
    font-weight: 700;
}

.wbbm-hub-panel .mage_sub_total .mage_subtotal_figure {
    color: var(--wbbm-accent-dark);
    font-size: 18px;
}

.wbbm-hub-panel .mage_error {
    border-color: var(--wbbm-danger) !important;
}

/* --------------------------------------- counter-sale customer details */
.wbbm-hub-panel .wbbm-admin-customer {
    margin: 14px 0 0;
    padding: 14px 16px;
    background: var(--wbbm-soft);
    border: 1px solid var(--wbbm-line);
    border-radius: 10px;
}

.wbbm-hub-panel .wbbm-admin-customer-title {
    margin: 0 0 10px;
    color: var(--wbbm-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wbbm-hub-panel .wbbm-admin-customer-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* One block per seat. */
.wbbm-hub-panel .wbbm-admin-customer-row + .wbbm-admin-customer-row {
    padding-top: 12px;
    border-top: 1px dashed var(--wbbm-line);
}

.wbbm-hub-panel .wbbm-admin-customer-no {
    margin-bottom: 8px;
    color: var(--wbbm-accent-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wbbm-hub-panel .wbbm-admin-customer-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.wbbm-hub-panel .wbbm-admin-customer-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}

.wbbm-hub-panel .wbbm-admin-customer-grid label span {
    color: var(--wbbm-muted);
    font-size: 12px;
    font-weight: 600;
}

.wbbm-hub-panel .wbbm-admin-customer-grid input {
    width: 100%;
    min-height: 40px;
    background: #fff;
}

@media screen and (max-width: 782px) {
    .wbbm-hub-panel .wbbm-admin-customer-grid {
        grid-template-columns: 1fr;
    }
}

/* Sub total and Book Now sat flush against each other. The row that holds
   them is .mage_flex_equal; .mage_book_now is both the wrapper and the
   button, so the wrapper is addressed as a direct child of that row. */
.wbbm-hub-panel .mage_book_now_area .mage_flex_equal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.wbbm-hub-panel .mage_book_now_area .mage_sub_price {
    flex: 1 1 180px;
    margin: 0;
}

.wbbm-hub-panel .mage_book_now_area > .mage_flex_equal > div.mage_book_now {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

.wbbm-hub-panel .mage_book_now_area button.mage_book_now {
    min-width: 190px;
    min-height: 44px;
    padding: 10px 26px;
}


/* ===================================================== settings field rows */
/*
 * A settings form-table's <th> is the field LABEL, not a column heading, but
 * it was picking up the data-table treatment above (12px uppercase muted on a
 * tinted fill) -- so every option read as a caption and the description was
 * crammed in beside it. Data tables (.widefat, .wp-list-table) keep that
 * treatment; only the settings form is re-laid out here.
 */

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table th {
    width: 340px;
    padding: 18px 20px;
    background: #fff;
    color: var(--wbbm-ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: top;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table td {
    padding: 18px 20px;
    vertical-align: top;
}

/* the description is a sibling of the label text inside the same cell */
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table th .description {
    display: block;
    max-width: 300px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wbbm-muted);
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr:hover td,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr:hover th {
    background: var(--wbbm-soft);
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table th code {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--wbbm-soft);
    font-size: 11px;
}


/* --------------------------------------------------------- sticky save bar */
/*
 * Translations is 86 fields long, so the only Save button used to sit a very
 * long scroll away from whatever you just edited.
 */

.wbbm-hub-panel .wbbm_settings_panel p.submit {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px 0 0;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
    box-shadow: 0 -2px 14px rgba(23, 32, 51, 0.07);
}


/* ------------------------------------------------------------- on/off switch */
/*
 * Built by assets/admin/wbbm-settings-enhance.js from the two-option On/Off
 * <select> it replaces. The select stays in the form as the value that
 * submits, so nothing server-side changes.
 */

.wbbm-switch-field {
    display: flex;
    align-items: center;
    gap: 11px;
}

.wbbm-switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.16s ease;
}

.wbbm-switch[aria-checked="true"] {
    background: var(--wbbm-accent);
}

.wbbm-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(23, 32, 51, 0.25);
    transition: left 0.16s ease;
}

.wbbm-switch[aria-checked="true"]::after {
    left: 21px;
}

.wbbm-switch:focus-visible {
    outline: 2px solid var(--wbbm-accent);
    outline-offset: 3px;
}

.wbbm-switch-state {
    font-size: 13px;
    font-weight: 500;
    color: var(--wbbm-muted);
}

.wbbm-switch[aria-checked="true"] + .wbbm-switch-state {
    color: var(--wbbm-ink);
}

.wbbm-switch-field select {
    display: none;
}


/* ------------------------------------------------------- long-section search */

.wbbm-section-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
}

.wbbm-section-filter label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wbbm-muted);
}

.wbbm-section-filter input[type="search"] {
    flex: 1 1 260px;
    max-width: 420px;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--wbbm-line);
    border-radius: 8px;
    font-size: 14px;
}

.wbbm-section-filter input[type="search"]:focus {
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 3px rgba(179, 12, 59, 0.16);
    outline: none;
}

.wbbm-section-filter-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--wbbm-muted);
}

.wbbm-section-empty {
    padding: 36px 20px;
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--wbbm-muted);
}


/* ============================================================ field cards */
/*
 * Built by assets/admin/wbbm-settings-enhance.js, which redistributes a
 * section's flat form-table into titled cards. A section with no map in that
 * file keeps its single table and is unaffected.
 */

.wbbm-fieldset-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wbbm-fieldset {
    background: #fff;
    border: 1px solid var(--wbbm-line);
    border-radius: 12px;
    overflow: hidden;
}

.wbbm-fieldset-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--wbbm-line);
    text-align: left;
}

button.wbbm-fieldset-head {
    cursor: pointer;
}

button.wbbm-fieldset-head::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 1.6px solid var(--wbbm-muted);
    border-bottom: 1.6px solid var(--wbbm-muted);
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
}

button.wbbm-fieldset-head[aria-expanded="true"]::before {
    transform: rotate(45deg);
}

button.wbbm-fieldset-head:hover {
    background: var(--wbbm-soft);
}

.wbbm-fieldset-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wbbm-ink);
}

.wbbm-fieldset-desc {
    font-size: 12.5px;
    color: var(--wbbm-muted);
}

.wbbm-fieldset-count {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--wbbm-soft);
    font-size: 11px;
    font-weight: 600;
    color: var(--wbbm-muted);
}

.wbbm-fieldset .wbbm-hub-table {
    border: 0;
    border-radius: 0;
}

.wbbm-fieldset-body[hidden] {
    display: none;
}


/* --------------------------------------------------------- checkbox pills */

.wbbm-pill-set {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wbbm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--wbbm-line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: var(--wbbm-ink);
}

.wbbm-pill input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wbbm-pill-box {
    position: relative;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 1.5px solid #94a3b8;
    border-radius: 4px;
    background: #fff;
}

.wbbm-pill.is-on {
    border-color: var(--wbbm-accent);
    background: rgba(179, 12, 59, 0.06);
    color: var(--wbbm-accent);
    font-weight: 600;
}

.wbbm-pill.is-on .wbbm-pill-box {
    border-color: var(--wbbm-accent);
    background: var(--wbbm-accent);
}

.wbbm-pill.is-on .wbbm-pill-box::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.wbbm-pill:focus-within {
    outline: 2px solid var(--wbbm-accent);
    outline-offset: 2px;
}


/* ------------------------------------------------- changed-string marker */

.wbbm-filter-toggle {
    padding: 7px 14px;
    border: 1px solid var(--wbbm-line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: var(--wbbm-muted);
}

.wbbm-filter-toggle[aria-checked="true"] {
    border-color: var(--wbbm-accent);
    background: rgba(179, 12, 59, 0.06);
    color: var(--wbbm-accent);
    font-weight: 600;
}

tr.wbbm-row-changed td input[type="text"] {
    border-color: var(--wbbm-warn);
    background: #fffbeb;
}

tr.wbbm-row-changed th::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-radius: 999px;
    background: var(--wbbm-warn);
    vertical-align: middle;
}


/* ------------------------------------------------------- save bar state */

.wbbm-hub-panel .wbbm_settings_panel p.submit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wbbm-save-state {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-right: auto;
    font-size: 13px;
    color: var(--wbbm-muted);
}

.wbbm-save-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--wbbm-ok);
}

p.submit.is-dirty .wbbm-save-dot {
    background: var(--wbbm-warn);
}

p.submit.is-dirty .wbbm-save-state {
    color: var(--wbbm-ink);
    font-weight: 500;
}

.wbbm-hub-panel .wbbm_settings_panel p.submit .wbbm-discard {
    border-radius: 8px;
}


/* ================================================= settings chrome, part 2 */
/*
 * Brings the Settings hub in line with the approved design: quiet plugin
 * strip, segmented area tabs, a section rail that reads as a list rather than
 * a solid block, and rows on plain white.
 */


/* area tabs as a segmented control */
.wbbm-hub .wbbm-hub-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #e9ecf1;
    border: 0;
    border-radius: 10px;
}

.wbbm-hub .wbbm-hub-tabs a {
    padding: 9px 16px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--wbbm-muted);
    font-size: 13px;
    font-weight: 500;
}

.wbbm-hub .wbbm-hub-tabs a:hover {
    background: rgba(255, 255, 255, 0.55);
    color: var(--wbbm-ink);
}

.wbbm-hub .wbbm-hub-tabs a[aria-current="page"] {
    background: #fff;
    color: var(--wbbm-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(23, 32, 51, 0.16);
}

.wbbm-hub .wbbm-hub-tabs a[aria-current="page"]::after {
    display: none;
}


/* section rail: a list, not a filled block */
.wbbm-hub-panel .wbbm_settings_panel .nav-tab-wrapper {
    flex: 0 0 248px;
    padding: 8px;
    background: #fff;
    border-right: 1px solid var(--wbbm-line);
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab-wrapper::before {
    content: "Sections";
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wbbm-muted);
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--wbbm-ink);
    font-size: 13px;
    font-weight: 400;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #cbd5e1;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab:hover {
    background: var(--wbbm-soft);
    color: var(--wbbm-ink);
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab-active,
.wbbm-hub-panel .wbbm_settings_panel .nav-tab-active:hover {
    background: rgba(179, 12, 59, 0.07);
    color: var(--wbbm-accent);
    font-weight: 600;
    box-shadow: none;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab-active::before {
    background: var(--wbbm-accent);
}

/* row count, filled in by wbbm-settings-enhance.js */
.wbbm-hub-panel .wbbm_settings_panel .nav-tab .wbbm-tab-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab-active .wbbm-tab-count {
    color: var(--wbbm-accent);
}


/* rows sit on plain white; the card header carries the section name, so the
   framework's repeated <h2> inside the panel is redundant */
.wbbm-hub-panel .wbbm_settings_panel .group > form > h2 {
    display: none;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr td,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr th {
    background: #fff;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr:hover td,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr:hover th {
    background: #fcfdfe;
}

.wbbm-hub-panel .wbbm_settings_panel .group {
    padding: 22px;
}


/* --------------------------------------------------- chrome, specificity */
/*
 * Beats the fixed tab height set further up the file.
 */

.wbbm-hub .wbbm-hub-tabs a,
body.wbbm-admin .wbbm-hub .wbbm-hub-tabs a {
    min-height: 0;
    height: 36px;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab,
body.wbbm-admin .wbbm-hub-panel .wbbm_settings_panel .nav-tab {
    text-decoration: none;
    box-shadow: none;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab:focus,
.wbbm-hub-panel .wbbm_settings_panel .nav-tab:hover {
    text-decoration: none;
}


/* ================================================== spacing parity block */
/*
 * Exact values from the approved artboard. Everything above sets the look;
 * this sets the measurements, so any drift shows up as a diff against one
 * block rather than being scattered.
 *
 *   rail        252px   gap to content 20px   inner padding 8px
 *   rail item   10px 12px, radius 5, 10px gap, 6px dot
 *   card        1px #dcdcde, radius 6, 16px between cards
 *   card head   18px 22px, hairline #f0f0f1
 *   field row   label column 340px, 24px gutter, 18px 22px, hairline #f0f0f1
 *   control     34px tall, 10px inset, radius 4
 *   save bar    14px 22px, radius 6
 */

.wbbm-hub-panel .wbbm_settings_panel .nav-tab-wrapper {
    /* a flex item's min-width:auto lets it grow past its basis, which is why
       the rail measured wider than the 252px it was given */
    box-sizing: border-box;
    flex: 0 0 252px;
    width: 252px;
    min-width: 252px;
    max-width: 252px;
    gap: 2px;
    padding: 8px;
    /* the shorthand also clears the border-right divider set further up, so
       the rail gets one outline rather than a doubled edge */
    border: 1px solid #ddd;
    border-radius: 10px;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab-wrapper::before {
    padding: 8px 12px 6px;
}

.wbbm-hub-panel .wbbm_settings_panel .nav-tab {
    gap: 10px;
    padding: 10px 12px;
    border-radius: 5px;
}

.wbbm-hub-panel .wbbm_settings_panel .group {
    padding: 20px;
}

.wbbm-fieldset-stack {
    gap: 16px;
}

.wbbm-fieldset,
.wbbm-hub-panel .wbbm_settings_panel p.submit,
.wbbm-section-filter,
.wbbm-section-empty {
    border-color: #dcdcde;
    border-radius: 6px;
}

.wbbm-fieldset-head {
    gap: 10px;
    padding: 18px 22px;
    border-bottom-color: #f0f0f1;
}

.wbbm-fieldset-title {
    font-size: 15px;
}

.wbbm-fieldset-desc {
    font-size: 13px;
}

/* label column 340px with a 24px gutter: 12px of padding from each side */
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table th {
    box-sizing: border-box;
    width: 340px;
    padding: 18px 12px 18px 22px;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table td {
    padding: 18px 22px 18px 12px;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table th .description {
    max-width: 306px;
    margin-top: 4px;
    font-size: 12px;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr td,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr th {
    border-bottom: 1px solid #f0f0f1;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr:last-child td,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table tbody tr:last-child th {
    border-bottom: 0;
}

/* controls */
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table input[type="text"],
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table input[type="number"],
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table input[type="email"],
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table input[type="url"],
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table select {
    box-sizing: border-box;
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
    line-height: 32px;
    color: #1d2327;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table select {
    padding-right: 26px;
}

.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table input[type="text"]:focus,
.wbbm-hub-panel .wbbm_settings_panel table.form-table.wbbm-hub-table select:focus {
    border-color: var(--wbbm-accent);
    box-shadow: 0 0 0 3px rgba(179, 12, 59, 0.14);
    outline: none;
}

/* pills and switches to artboard measurements */
.wbbm-pill {
    gap: 8px;
    padding: 8px 14px;
}

.wbbm-pill-box {
    width: 15px;
    height: 15px;
    border-radius: 4px;
}

.wbbm-switch-field {
    gap: 11px;
}

/* save bar */
.wbbm-hub-panel .wbbm_settings_panel p.submit {
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 22px;
    box-shadow: 0 -2px 10px rgba(29, 35, 39, 0.05);
}

.wbbm-hub-panel .wbbm_settings_panel p.submit input,
.wbbm-hub-panel p.submit input.button-primary {
    padding: 9px 22px;
    border-radius: 4px;
    font-size: 13px;
}

.wbbm-hub-panel .wbbm_settings_panel p.submit .wbbm-discard {
    padding: 9px 16px;
    border-radius: 4px;
    font-size: 13px;
}

/* filter bar */
.wbbm-section-filter {
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
}

.wbbm-section-filter input[type="search"] {
    height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    border-color: #dcdcde;
}

/* section being fetched by wbbm-settings-enhance.js */
.wbbm-hub-panel.wbbm-section-loading .wbbm_settings_panel {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* the postbox is only a wrapper here; wp-admin's own padding on it doubles up
   with .metabox-holder's and the section card's */
.wbbm_settings_panel .metabox-holder .postbox {
    padding: 0;
}


/* ------------------------------------------- rail / content top alignment */
/*
 * The rail sat flush against the panel while .metabox-holder carried its own
 * 18px of padding, so the first card always started lower than "SECTIONS".
 * The inset and the gutter now live on the panel, which is the one box both
 * children share, so their top edges line up by construction.
 */

.wbbm-hub-panel .wbbm_settings_panel {
    gap: 20px;
    padding: 20px;
    overflow: visible;
}

.wbbm-hub-panel .wbbm_settings_panel .metabox-holder {
    padding: 0;
}

.wbbm-hub-panel .wbbm_settings_panel .group {
    padding: 0;
}

/*
 * class-mage-settings.php prints "#wpbody-content .metabox-holder{padding-top:5px}"
 * inline. That is ID strength, so it beat the class-based reset above and left
 * the first card 5px below the rail. Matched here rather than edited there,
 * since that block is shared with the standalone settings page.
 */
#wpbody-content .wbbm-hub-panel .wbbm_settings_panel .metabox-holder {
    padding: 0;
}

/*
 * The save bar used to sit in a div with an inline padding-left:10px, which
 * pushed it 10px right of the cards above it and only on one side. The wrapper
 * is a plain hook now so the bar lines up with the section cards.
 */
.wbbm-hub-panel .wbbm_settings_panel .wbbm-submit-wrap {
    padding: 0;
}


/* ============================================================== area tabs */
/*
 * Same language as the section rail below it: a white bordered track, a
 * tinted pill for the current tab, icons carrying the colour. Go PRO is the
 * one promotional item, so it gets a gold mark rather than a louder fill.
 */

.wbbm-hub .wbbm-hub-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin: 0 0 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: visible;
}

.wbbm-hub .wbbm-hub-tabs a,
body.wbbm-admin .wbbm-hub .wbbm-hub-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    min-height: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wbbm-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.wbbm-hub .wbbm-hub-tabs a .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    color: #a7aaad;
    transition: color 0.16s ease;
}

.wbbm-hub .wbbm-hub-tabs a:hover,
body.wbbm-admin .wbbm-hub .wbbm-hub-tabs a:hover {
    background: var(--wbbm-soft);
    color: var(--wbbm-ink);
    box-shadow: none;
}

.wbbm-hub .wbbm-hub-tabs a:hover .dashicons {
    color: var(--wbbm-muted);
}

.wbbm-hub .wbbm-hub-tabs a[aria-current="page"],
body.wbbm-admin .wbbm-hub .wbbm-hub-tabs a[aria-current="page"] {
    background: rgba(179, 12, 59, 0.07);
    color: var(--wbbm-accent);
    font-weight: 600;
    box-shadow: none;
}

.wbbm-hub .wbbm-hub-tabs a[aria-current="page"] .dashicons {
    color: var(--wbbm-accent);
}

.wbbm-hub .wbbm-hub-tabs a[aria-current="page"]::after {
    display: none;
}

/* the upsell reads as an aside, not a competing section */
.wbbm-hub .wbbm-hub-tabs a[data-wbbm-tab="go-pro"] .dashicons {
    color: #dba617;
}

.wbbm-hub .wbbm-hub-tabs a[data-wbbm-tab="go-pro"]:hover,
body.wbbm-admin .wbbm-hub .wbbm-hub-tabs a[data-wbbm-tab="go-pro"]:hover {
    background: #fdf8e7;
    color: #8a6616;
}

.wbbm-hub .wbbm-hub-tabs a:focus-visible {
    outline: 2px solid var(--wbbm-accent);
    outline-offset: 2px;
}


/* ------------------------------------------------ shared left edge */
/*
 * The mark, the area tabs and the section rail all start on the header's
 * 24px inset. Previously each had its own: the mark at 25 (header padding),
 * the tab track at 1 (flush), the rail at 45 (panel padding plus its own).
 *
 * The horizontal inset belongs to .wbbm-hub-panel, which already has 24px,
 * so the settings panel keeps only its top gap -- that is what holds the
 * rail and the first card on one top edge.
 */

.wbbm-hub .wbbm-hub-tabs {
    margin-left: 24px;
}

.wbbm-hub-panel .wbbm_settings_panel {
    padding: 20px 0 0;
}


/* ==================================================================
   PRO-locked controls
   ------------------------------------------------------------------
   Features that need the PRO plugin stay visible so they are
   discoverable, rendered inert with a PRO badge rather than hidden.

   These live in the hub shell stylesheet, not the Bookings one: the
   locked tabs appear in the hub nav on every tab, and the locked
   panel renders on a tab where the Bookings sheet is not enqueued.
   ================================================================== */

.wbbm-pro-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--sh-primary, #b30c3b);
    color: #fff;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.wrap .btn.wbbm-pro-locked,
.wrap .btn.wbbm-pro-locked:hover {
    /* keep the button's shape, drop every affordance that says "clickable" */
    background: #f1f5f9 !important;
    background-image: none !important;
    border-color: var(--sh-border, #e6e9ef) !important;
    color: var(--sh-text-soft, #64748b) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
    opacity: 1;
}

.wrap .btn.wbbm-pro-locked .wbbm-pro-badge {
    background: var(--sh-text-soft, #64748b);
}

/* ---- locked hub tab ---- */
.wbbm-hub-tabs .wbbm-hub-tab-locked {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: not-allowed;
    opacity: .72;
}

.wbbm-hub-tabs .wbbm-hub-tab-locked .wbbm-pro-badge {
    background: var(--sh-text-soft, #64748b);
}

/* ---- panel shown if a locked tab is reached by direct URL ---- */
.wbbm-hub-locked-panel {
    padding: 56px 24px;
    text-align: center;
    color: var(--sh-text-soft, #64748b);
}

.wbbm-hub-locked-panel .dashicons {
    width: 34px;
    height: 34px;
    font-size: 34px;
    color: var(--sh-primary, #b30c3b);
}

.wbbm-hub-locked-panel h2 {
    margin: 12px 0 6px;
    font-size: 18px;
    color: var(--sh-text-main, #17203a);
}

.wbbm-hub-locked-panel p {
    margin: 0;
    font-size: 13.5px;
}

/* Row action buttons are small squares, so the PRO marker rides the
   corner as a dot rather than sitting beside the icon as a word. */
.wrap .action-btn.wbbm-pro-locked {
    position: relative;
    cursor: not-allowed;
    opacity: .55;
}

.wrap .action-btn.wbbm-pro-locked .wbbm-pro-badge--dot {
    position: absolute;
    top: -5px;
    right: -6px;
    margin: 0;
    padding: 1px 4px;
    font-size: 8px;
    letter-spacing: .04em;
}


/* ------------------------------------------- Purchase Ticket search bar */
/*
 * The route search on the Purchase Ticket screen (wbbm_bus_search_fileds() in
 * woocommerce-bus.php). It is a search bar, not a settings form: one row of
 * fields, each a small caption over its control, ending in the action.
 *
 * Scoped on .wbbm-admin-search rather than .search-fields / .fields-li --
 * the front-end search form uses those same names with different markup, and
 * this stylesheet is admin-only, so both layers keep it off the front end.
 *
 * Properties PRO's admin_style.css sets on generic names (flex-direction,
 * width, box-sizing) are declared explicitly: PRO loads second and wins ties.
 */

.wbbm-admin-search {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid var(--wbbm-line);
    border-radius: 14px;
    /* Tinted, so the white fields read as raised out of the bar. A white bar
       would need the field fill to carry the separation, and no tint light
       enough to sit under white text gets near a usable contrast ratio -- the
       border would be doing all the work on its own. */
    background: #f1f5f9;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.wbbm-admin-search .fields-li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 170px;
    min-width: 150px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    width: auto;
}

.wbbm-admin-search .fields-li.is-hidden {
    display: none;
}

.wbbm-admin-search .fields-li label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

.wbbm-admin-search .wbbm-as-cap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.6;
    /* 11px bold is small text, so it needs 4.5:1 -- --wbbm-muted (#64748b)
       lands at 4.34:1 on the tinted bar and just misses. */
    color: #475569;
    white-space: nowrap;
}

.wbbm-admin-search .wbbm-as-cap [class*="fa-"] {
    font-size: 12px;
    color: var(--wbbm-accent);
}

/*
 * Fields sit on a white card, so they are filled and given a border with real
 * contrast rather than a hairline: an unfilled field with a near-white border
 * does not read as something you can type in. This also has to be at least as
 * strong as wp-admin's own #8c8f94 select border, which these rules override.
 *
 * Both select2 skins are covered. PRO enqueues select2 v3.4.8 from a CDN
 * (wbtm-pro.php) while the free plugin ships v4 -- their markup is completely
 * different (v3: .select2-choice/.select2-chosen/.select2-arrow, v4:
 * .select2-selection--single/__rendered/__arrow), so whichever initialises,
 * the field still matches the ones beside it.
 */
.wbbm-admin-search select,
.wbbm-admin-search input[type="text"],
.wbbm-admin-search .select2-container .select2-selection--single,
.wbbm-admin-search .select2-container .select2-choice {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    /* A shade darker than wp-admin's own #8c8f94 field border, because this
       boundary has to clear WCAG 1.4.11's 3:1 on BOTH sides -- against the
       white fill inside (3.47:1) and against the tinted bar outside (3.17:1),
       where #8c8f94 itself lands at 2.96:1 and just misses. The slate tones
       that suit the rest of this palette are nowhere near: #cbd5e1 is 1.48:1
       and #94a3b8 is 2.56:1, both leaving the field edge guesswork. */
    border: 1px solid #868a90;
    border-radius: 10px;
    background-color: #fff;
    background-image: none;
    font-size: 13px;
    /* Only the select2 skins and the text inputs take a line-height; a native
       <select> must not (see the rule below). */
    line-height: 38px;
    color: var(--wbbm-ink);
    text-decoration: none;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/*
 * The native select loses its arrow with background-image:none above, so it is
 * drawn back on -- without it the control looks like a read-only text field.
 *
 * line-height is reset because browsers centre a select's own text vertically
 * inside a fixed-height control, and an explicit line-height overrides that and
 * pushes it off-centre. The engines do not even disagree quietly: Firefox
 * ignores line-height on a select altogether, so with one set, Firefox centres
 * the text and Chrome does not.
 */
.wbbm-admin-search select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: normal;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 30px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--wbbm-muted) 50%),
        linear-gradient(135deg, var(--wbbm-muted) 50%, transparent 50%);
    /* `center` on the vertical axis rather than a hard-coded offset: the mark
       then stays centred whatever the control's height, instead of being
       correct only at 40px. */
    background-position: calc(100% - 17px) center, calc(100% - 12px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.wbbm-admin-search .select2-container {
    width: 100% !important;
}

/* v4 */
.wbbm-admin-search .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 38px;
    color: var(--wbbm-ink);
}

.wbbm-admin-search .select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

/* v3 */
.wbbm-admin-search .select2-container .select2-choice .select2-chosen {
    margin: 0;
    line-height: 38px;
    color: var(--wbbm-ink);
}

.wbbm-admin-search .select2-container .select2-choice .select2-arrow {
    border: 0;
    background: none;
    border-radius: 0;
}

.wbbm-admin-search select:hover,
.wbbm-admin-search input[type="text"]:hover {
    border-color: #94a3b8;
}

/* Focus fills white and lifts the border to the accent, so the active field is
   unmistakable against the four resting ones. */
.wbbm-admin-search select:focus,
.wbbm-admin-search input[type="text"]:focus,
.wbbm-admin-search .select2-container--focus .select2-selection--single,
.wbbm-admin-search .select2-container-active .select2-choice {
    border-color: var(--wbbm-accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(179, 12, 59, .12);
    outline: none;
}

/* Trip type and the submit sit together and do not stretch like the fields. */
.wbbm-admin-search .wbbm-as-actions {
    flex: 0 0 auto;
    min-width: 0;
}

/* Segmented control rather than loose radios: two mutually exclusive choices
   read faster as one switch than as two separate checkable rows. */
.wbbm-admin-search .search-radio-sec {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 3px;
    border: 1px solid #868a90;
    border-radius: 10px;
    /* Matches the fields beside it: white, on the tinted bar. */
    background: #fff;
}

.wbbm-admin-search .search-radio-sec label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 14px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--wbbm-muted);
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/*
 * The segmented look needs :has() -- the radio is INSIDE its label, so no
 * sibling selector can reach the label from the checked input.
 *
 * It is all gated on support because the two halves only work together:
 * hiding the radio without :has() would leave the control with no visible
 * checked state at all. Without support the radios simply stay visible inside
 * the pill, which is plain but never ambiguous.
 */
@supports selector(:has(*)) {
    .wbbm-admin-search .search-radio-sec input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        pointer-events: none;
    }

    .wbbm-admin-search .search-radio-sec label:has(input:checked) {
        background: var(--wbbm-accent);
        color: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
    }

    .wbbm-admin-search .search-radio-sec label:has(input:focus-visible) {
        outline: 2px solid var(--wbbm-accent);
        outline-offset: 1px;
    }
}

/* Fallback state: the radio is visible, so it carries the answer itself. */
.wbbm-admin-search .search-radio-sec input[type="radio"] {
    margin: 0 6px 0 0;
}

.wbbm-admin-search .search-radio-sec input[type="radio"]:checked + * {
    color: var(--wbbm-accent);
}

.wbbm-admin-search .wbbm-as-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The caption above Trip keeps the row's baseline, but the control sits beside
   the button rather than under the caption. */
.wbbm-admin-search .wbbm-as-actions > .wbbm-as-cap {
    flex-basis: 100%;
}

.wbbm-admin-search button[type="submit"] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 22px;
    border: 1px solid var(--wbbm-accent);
    border-radius: 10px;
    background: var(--wbbm-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(179, 12, 59, .22);
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wbbm-admin-search button[type="submit"]:hover {
    background: var(--wbbm-accent-dark);
    border-color: var(--wbbm-accent-dark);
    box-shadow: 0 4px 12px rgba(179, 12, 59, .28);
    transform: translateY(-1px);
}

.wbbm-admin-search button[type="submit"] [class*="fa-"] {
    font-size: 13px;
}

/* Below this the row cannot hold four fields plus the action without each one
   becoming too narrow to read its own value. */
@media (max-width: 960px) {
    .wbbm-admin-search .fields-li {
        flex: 1 1 100%;
    }

    .wbbm-admin-search button[type="submit"] {
        flex: 1 1 auto;
    }
}


/*
 * Reclaiming the two route selects from PRO.
 *
 * PRO's assets/css/admin_style.css targets these exact elements with
 *
 *     select.seat_type.select2:not(#wbbm-single-settings-meta select.seat_type.select2)
 *
 * which scores (1,4,2): :not() takes the specificity of its argument, and that
 * argument contains an ID. Nothing written with classes can outrank it, so the
 * properties it forces -- border:none, line-height:40px, width:200px -- were
 * winning over every rule above, whatever they declared. That is why the two
 * fields had no visible edge and sat off-centre while the date inputs beside
 * them, which PRO does not target this way, looked correct.
 *
 * !important is the only lever left short of adding an id to the markup, and
 * it is confined to the four properties PRO actually forces.
 */
.wbbm-admin-search select.seat_type {
    /* PRO: border: none */
    border: 1px solid #868a90 !important;
    /* PRO: width: 200px -- breaks the flex sizing of the bar */
    width: 100% !important;
    /* PRO: line-height: 40px on a 38px content box, pushing the text down.
       The browser centres a select's text on its own once nothing overrides
       it, which is what `normal` restores. */
    line-height: normal !important;
    /* PRO: .fields-li label select { margin-top: 5px } -- (0,2,1), which also
       outranks the rules above, and drops the field below its neighbours. */
    margin-top: 0 !important;
}

.wbbm-admin-search select.seat_type:focus {
    border-color: var(--wbbm-accent) !important;
}

/*
 * PRO also forces `.fields-li label { display: block !important; width: 100%
 * !important }`. An !important declaration beats any normal one regardless of
 * specificity, so the label's column layout above was never applying either --
 * the caption and control only *looked* stacked because both happen to be
 * block-level, which left the flex `gap` doing nothing and the spacing coming
 * from PRO's margin-top instead.
 *
 * This is the only !important PRO uses anywhere that can reach this form.
 */
.wbbm-admin-search .fields-li label {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px;
    overflow: visible;
}