/* Theme/WooCommerce block-theme content wrapper on My Account, Cart, and
   Checkout -- enforced here (not just left to the theme's own stylesheet)
   since this file already loads on all three of those pages for staff
   members (MPWPB_Dependencies::staff_dashboard_enqueue_scripts(), called
   from global_enqueue() on every front-end request) and needs to win
   reliably regardless of theme load order. */
.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
    max-width: 1320px !important;
}

/* User Dashboard Styles */
.mpwpb-user-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* WooCommerce My Account page layout -- top bar nav + full-width content
   below it (was: classic two-column float split, nav at 22%/content at 75%,
   which left the booking list/filter cramped into three-quarters width). */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
    margin: 0 0 20px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    list-style: none;
    padding: 1px 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    clear: both;
}

/* WooCommerce My Account navigation -- icon + pill-active top bar.
   Icon codepoints below are read directly from the Font Awesome 6.7.2 Free
   build this plugin actually loads site-wide (mp_global/assets/admin/all.min.css,
   enqueued unconditionally on every front-end page by
   MPWPB_Global_File_Load::frontend_enqueue()) -- not guessed, so they're
   guaranteed to match what's really available rather than risking a
   version-mismatched icon. */
.woocommerce-MyAccount-navigation {
    background: #eef1fb;
    border-radius: 12px;
    padding: 10px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

.woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #1e3a8a;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

@media (max-width: 782px) {
    .woocommerce-MyAccount-navigation ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.woocommerce-MyAccount-navigation-link a:hover {
    background: rgba(29, 63, 184, .08);
}

.woocommerce-MyAccount-navigation-link a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 15px;
    width: 18px;
    flex: 0 0 auto;
    text-align: center;
}

.woocommerce-MyAccount-navigation-link.is-active a {
    background: #1d3fb8;
    color: #fff;
    box-shadow: 0 4px 10px rgba(29, 63, 184, .25);
}

.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f00a"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\f07a"; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f019"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f2bb"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f007"; }
.woocommerce-MyAccount-navigation-link--mpwpb-gdpr a::before { content: "\f3ed"; }
.woocommerce-MyAccount-navigation-link--mpwpb-my-service a::before { content: "\f0ad"; }
.woocommerce-MyAccount-navigation-link--mpwpb-my-appointment a::before { content: "\f133"; }
.woocommerce-MyAccount-navigation-link--mpwpb-my-schedule a::before { content: "\f017"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; }

/* WooCommerce My Account > Dashboard. WooCommerce intentionally provides
   only two plain paragraphs here; keep their content and links, but present
   them as a modern welcome panel with useful endpoint shortcuts. */
.mpwpb-account-dashboard .woocommerce-MyAccount-content {
    --mpwpb-account-primary: #1d3fb8;
    --mpwpb-account-ink: #172033;
    --mpwpb-account-muted: #64748b;
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 42px) !important;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(29, 63, 184, .10), transparent 34%),
        #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

.mpwpb-account-dashboard .woocommerce-MyAccount-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #1d3fb8, #4f75e8 55%, #8ba5f4);
}

.mpwpb-account-dashboard .woocommerce-MyAccount-content > p:first-of-type {
    position: relative;
    min-height: 52px;
    margin: 0 0 14px !important;
    padding: 5px 0 0 68px;
    color: var(--mpwpb-account-ink);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 500;
    line-height: 1.35;
}

.mpwpb-account-dashboard .woocommerce-MyAccount-content > p:first-of-type::before {
    content: "\f2bd";
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #1d3fb8, #4f75e8);
    box-shadow: 0 8px 18px rgba(29, 63, 184, .24);
    color: #fff;
    font-family: "Font Awesome 6 Free";
    font-size: 22px;
    font-weight: 900;
}

.mpwpb-account-dashboard .woocommerce-MyAccount-content > p:first-of-type strong {
    font-weight: 750;
}

.mpwpb-account-dashboard .woocommerce-MyAccount-content > p:first-of-type a {
    color: var(--mpwpb-account-primary);
    font-size: 13px;
    font-weight: 650;
    text-underline-offset: 3px;
}

.mpwpb-account-dashboard .woocommerce-MyAccount-content > p:nth-of-type(2) {
    max-width: 900px;
    margin: 0 0 30px !important;
    color: var(--mpwpb-account-muted);
    font-size: 15px;
    line-height: 1.7;
}

.mpwpb-account-dashboard .woocommerce-MyAccount-content > p:nth-of-type(2) a {
    color: var(--mpwpb-account-primary);
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.mpwpb-account-overview {
    padding-top: 25px;
    border-top: 1px solid #e8edf5;
}

.mpwpb-account-overview__heading {
    margin-bottom: 16px;
}

.mpwpb-account-overview__heading > span {
    display: block;
    margin-bottom: 4px;
    color: var(--mpwpb-account-primary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mpwpb-account-overview__heading h2 {
    margin: 0 !important;
    color: var(--mpwpb-account-ink);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.35;
}

.mpwpb-account-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.mpwpb-account-action {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e3e8f1;
    border-radius: 13px;
    background: rgba(248, 250, 252, .82);
    color: var(--mpwpb-account-ink) !important;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

.mpwpb-account-action:hover,
.mpwpb-account-action:focus-visible {
    border-color: #b9c7f2;
    background: #fff;
    box-shadow: 0 10px 24px rgba(29, 63, 184, .10);
    transform: translateY(-2px);
}

.mpwpb-account-action:focus-visible {
    outline: 3px solid rgba(29, 63, 184, .18);
    outline-offset: 2px;
}

.mpwpb-account-action__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    background: #e9eefc;
    color: var(--mpwpb-account-primary);
}

.mpwpb-account-action__icon::before {
    font-family: "Font Awesome 6 Free";
    font-size: 16px;
    font-weight: 900;
}

.mpwpb-account-action--orders .mpwpb-account-action__icon::before { content: "\f07a"; }
.mpwpb-account-action--addresses .mpwpb-account-action__icon::before { content: "\f3c5"; }
.mpwpb-account-action--account .mpwpb-account-action__icon::before { content: "\f007"; }

.mpwpb-account-action__copy {
    min-width: 0;
}

.mpwpb-account-action__copy strong,
.mpwpb-account-action__copy small {
    display: block;
}

.mpwpb-account-action__copy strong {
    margin-bottom: 3px;
    color: var(--mpwpb-account-ink);
    font-size: 14px;
    line-height: 1.35;
}

.mpwpb-account-action__copy small {
    color: var(--mpwpb-account-muted);
    font-size: 12px;
    line-height: 1.45;
}

.mpwpb-account-action__arrow {
    color: #94a3b8;
    font-size: 18px;
    transition: color .18s ease, transform .18s ease;
}

.mpwpb-account-action:hover .mpwpb-account-action__arrow,
.mpwpb-account-action:focus-visible .mpwpb-account-action__arrow {
    color: var(--mpwpb-account-primary);
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .mpwpb-account-overview__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .mpwpb-account-dashboard .woocommerce-MyAccount-content {
        padding: 24px 18px !important;
        border-radius: 14px;
    }

    .mpwpb-account-dashboard .woocommerce-MyAccount-content > p:first-of-type {
        min-height: 44px;
        padding-left: 56px;
        font-size: 19px;
    }

    .mpwpb-account-dashboard .woocommerce-MyAccount-content > p:first-of-type::before {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 18px;
    }

    .mpwpb-account-action {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        padding: 14px;
    }

    .mpwpb-account-action__icon {
        width: 38px;
        height: 38px;
    }
}

/* Tabs Navigation */
.mpwpb-dashboard-tabs {
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
}

.mpwpb-tabs-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mpwpb-tabs-nav li {
    margin: 0;
    padding: 0;
}

.mpwpb-tabs-nav li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.mpwpb-tabs-nav li.active a {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

.mpwpb-tabs-nav li a:hover {
    color: #0073aa;
    background-color: #f9f9f9;
}

/* Bookings Table */
.mpwpb-bookings-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.mpwpb-bookings-table th,
.mpwpb-bookings-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

.mpwpb-bookings-table th {
    background-color: #f5f5f5;
    font-weight: 600;
    color: #333;
}

.mpwpb-bookings-table tr:hover {
    background-color: #f9f9f9;
}

/* Status Badges */
.mpwpb-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.mpwpb-status-completed {
    background-color: #dff0d8;
    color: #3c763d;
}

.mpwpb-status-processing {
    background-color: #d9edf7;
    color: #31708f;
}

.mpwpb-status-pending {
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.mpwpb-status-cancelled {
    background-color: #f2dede;
    color: #a94442;
}

.mpwpb-status-on-hold {
    background-color: #f5f5f5;
    color: #777;
}

/* Action Buttons */
.mpwpb-btn {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px 5px 0;
    border: none;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mpwpb-btn:hover {
    background-color: #e5e5e5;
}

.mpwpb-cancel-btn {
    background-color: #f44336;
    color: white;
}

.mpwpb-cancel-btn:hover {
    background-color: #d32f2f;
}

.mpwpb-reschedule-btn {
    background-color: #ff9800;
    color: white;
}

.mpwpb-reschedule-btn:hover {
    background-color: #f57c00;
}

.mpwpb-view-btn {
    background-color: #2196f3;
    color: white;
}

.mpwpb-view-btn:hover {
    background-color: #1976d2;
}

.mpwpb-payment-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: 13px;
}

.mpwpb-payment-status-due strong {
    color: #b35c00;
}

.mpwpb-pay-balance-btn {
    background-color: #4caf50;
    color: white;
}

.mpwpb-pay-balance-btn:hover {
    background-color: #388e3c;
}

.mpwpb-submit-btn {
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
}

.mpwpb-submit-btn:hover {
    background-color: #388e3c;
}

/* Upcoming Appointments */
.mpwpb-appointments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.mpwpb-appointment-card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mpwpb-appointment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.mpwpb-appointment-image {
    height: 150px;
    overflow: hidden;
    background-color: #f5f5f5;
}

.mpwpb-appointment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpwpb-appointment-details {
    padding: 15px;
}

.mpwpb-appointment-details h4 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.mpwpb-appointment-details p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}

.mpwpb-appointment-details i {
    margin-right: 5px;
    color: #999;
}

.mpwpb-appointment-actions {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}

/* User Profile Form */
.mpwpb-profile-form {
    max-width: 800px;
}

/* Grid (not flex) so a label that wraps to 2 lines in one column (e.g.
   "New Password (leave blank to keep current)") only grows the shared
   label row itself -- both inputs still start on the next grid row, at
   the same Y position, instead of one sitting lower than the other.
   .mpwpb-form-group becomes `display:contents` (its label/input become
   direct grid items of the row), so nth-child picks each column's pair
   and pins them to that column's grid-column explicitly. */
.mpwpb-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 6px;
    margin-bottom: 22px;
}

.mpwpb-form-row .mpwpb-form-group {
    display: contents;
}

.mpwpb-form-row .mpwpb-form-group:nth-child(1) label { grid-column: 1; grid-row: 1; }
.mpwpb-form-row .mpwpb-form-group:nth-child(1) input,
.mpwpb-form-row .mpwpb-form-group:nth-child(1) select { grid-column: 1; grid-row: 2; }
.mpwpb-form-row .mpwpb-form-group:nth-child(2) label { grid-column: 2; grid-row: 1; }
.mpwpb-form-row .mpwpb-form-group:nth-child(2) input,
.mpwpb-form-row .mpwpb-form-group:nth-child(2) select { grid-column: 2; grid-row: 2; }

.mpwpb-form-group {
    /* Only takes effect for standalone groups (e.g. Service Preferences,
       the GDPR request form) -- inside a .mpwpb-form-row this element is
       display:contents (see above), which drops its own box entirely, so
       this padding/margin is a no-op there and column-gap handles spacing
       instead. */
    min-width: 0;
    padding: 0 10px;
    margin-bottom: 15px;
}

.mpwpb-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

@media (max-width: 600px) {
    .mpwpb-form-row {
        grid-template-columns: 1fr;
    }
    /* Cancel the desktop rule's fixed column/row pinning so items fall back
       to plain DOM order (label1, input1, label2, input2) stacked in a
       single column instead of two columns' worth overlapping each other. */
    .mpwpb-form-row .mpwpb-form-group:nth-child(1) label,
    .mpwpb-form-row .mpwpb-form-group:nth-child(1) input,
    .mpwpb-form-row .mpwpb-form-group:nth-child(1) select,
    .mpwpb-form-row .mpwpb-form-group:nth-child(2) label,
    .mpwpb-form-row .mpwpb-form-group:nth-child(2) input,
    .mpwpb-form-row .mpwpb-form-group:nth-child(2) select {
        grid-column: 1;
        grid-row: auto;
    }
}

.mpwpb-form-group input,
.mpwpb-form-group select,
.mpwpb-form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 14px;
}

.mpwpb-form-group input:focus,
.mpwpb-form-group select:focus,
.mpwpb-form-group textarea:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* Radio/checkbox choice rows (e.g. the GDPR data-request form) -- the
   width:100% rule above is meant for text/email/tel/password/textarea
   fields and otherwise stretches a checkbox/radio to fill the whole row,
   which is what pushed the visible box away from its own label text. */
.mpwpb-form-group label.mpwpb-inline-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}

.mpwpb-form-group input[type="checkbox"],
.mpwpb-form-group input[type="radio"] {
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
}

.mpwpb-form-group .description {
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}

/* ---------------------------------------------------------------------- *
 *  My Profile -- card-based layout (Personal Information / Address
 *  Details / Security / Service Preferences) with a summary sidebar.
 * ---------------------------------------------------------------------- */
.mpwpb-profile-header {
    margin-bottom: 20px;
}

.mpwpb-profile-header h3 {
    margin: 0 0 4px;
}

.mpwpb-profile-subtitle {
    margin: 0;
    color: #777;
    font-size: 13.5px;
}

.mpwpb-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 24px;
    align-items: start;
}

.mpwpb-profile-v2 .mpwpb-profile-form {
    max-width: none;
}

.mpwpb-profile-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-top: 3px solid #2196f3;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.mpwpb-profile-card-security {
    border-top-color: #f44336;
}

.mpwpb-profile-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef1f6;
}

.mpwpb-profile-card-head .fas {
    color: #2196f3;
    font-size: 15px;
}

.mpwpb-profile-card-security .mpwpb-profile-card-head .fas {
    color: #f44336;
}

.mpwpb-profile-card-head h4 {
    margin: 0;
    font-size: 15px;
}

.mpwpb-profile-card-body {
    padding: 18px;
}

.mpwpb-profile-card-body .mpwpb-form-row:last-child,
.mpwpb-profile-card-body .mpwpb-form-group:last-child {
    margin-bottom: 0;
}

.mpwpb-profile-card-body .mpwpb-form-group input{width: 95% !important; }

.mpwpb-form-group-full {
    padding: 0 10px;
    margin-bottom: 15px;
}

.mpwpb-field-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #888;
}

.mpwpb-profile-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Sidebar */
.mpwpb-profile-sidebar .mpwpb-profile-card {
    padding: 0;
}

.mpwpb-profile-summary-card {
    text-align: center;
    padding: 24px 18px;
    border-top-color: #2196f3;
}

.mpwpb-profile-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2196f3, #6dc0ff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.mpwpb-profile-name {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.mpwpb-profile-role {
    font-size: 12.5px;
    color: #888;
    margin: 2px 0 10px;
}

.mpwpb-profile-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: #eafaf0;
    color: #1c9a5b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.mpwpb-profile-summary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mpwpb-profile-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
}

.mpwpb-profile-summary-row strong {
    color: #222;
}

.mpwpb-btn-outline {
    background: transparent;
    border: 1px solid #2196f3;
    color: #2196f3;
}

.mpwpb-btn-outline:hover {
    background: #eaf4fe;
}

.mpwpb-profile-sidebar-link {
    display: block;
    margin: 0 18px 18px;
    text-align: center;
    width: calc(100% - 36px);
}

@media (max-width: 782px) {
    .mpwpb-profile-layout {
        grid-template-columns: 1fr;
    }
}

/* Modal */
.mpwpb-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.mpwpb-modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}

.mpwpb-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.mpwpb-close:hover {
    color: #333;
}

/* Customer cancellation request modal. */
.mpwpb-cancel-modal {
    z-index: 100000;
    padding: 24px;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(4px);
}

.mpwpb-cancel-modal__content {
    width: min(640px, 100%);
    max-width: 640px;
    margin: 4vh auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dfe5ef;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .28);
}

.mpwpb-cancel-modal .mpwpb-close {
    top: 16px;
    right: 18px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font: 400 25px/32px Arial, sans-serif;
    text-align: center;
}

.mpwpb-cancel-modal .mpwpb-close:hover,
.mpwpb-cancel-modal .mpwpb-close:focus-visible {
    background: #e2e8f0;
    color: #0f172a;
}

.mpwpb-cancel-modal__heading {
    display: flex;
    gap: 16px;
    padding: 26px 64px 22px 26px;
    border-bottom: 1px solid #edf1f6;
    background: linear-gradient(135deg, #fff 60%, #fff1f2);
}

.mpwpb-cancel-modal__icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 19px;
}

.mpwpb-cancel-modal__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #dc2626;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpwpb-cancel-modal__heading h3 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 22px;
}

.mpwpb-cancel-modal__heading p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.mpwpb-cancel-modal__loading {
    padding: 44px 26px;
    color: #64748b;
    text-align: center;
}

.mpwpb-cancel-modal__message {
    display: none;
    margin: 20px 26px 0;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.mpwpb-cancel-modal__message.success { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.mpwpb-cancel-modal__message.error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

#mpwpb-cancel-form {
    padding: 22px 26px 26px;
}

.mpwpb-cancel-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #e5eaf1;
}

.mpwpb-cancel-summary > div {
    min-width: 0;
    padding: 12px 14px;
    background: #f8fafc;
}

.mpwpb-cancel-summary dt {
    margin-bottom: 3px;
    color: #64748b;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mpwpb-cancel-summary dd {
    margin: 0;
    overflow: hidden;
    color: #1e293b;
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpwpb-cancel-summary [data-cancel-detail="appointment"] {
    line-height: 1.5;
    white-space: normal;
}

.mpwpb-cancel-policy {
    display: flex;
    gap: 9px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12px;
    line-height: 1.5;
}

.mpwpb-cancel-policy i { margin-top: 2px; }

.mpwpb-cancel-reason-field {
    padding: 0;
    margin-bottom: 15px;
}

.mpwpb-cancel-reason-field label {
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
}

.mpwpb-cancel-reason-field label span { color: #dc2626; }

.mpwpb-cancel-reason-field textarea {
    box-sizing: border-box;
    min-height: 104px;
    resize: vertical;
    border-color: #cbd5e1;
    background: #fff;
}

.mpwpb-cancel-reason-field small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
}

.mpwpb-cancel-confirmation {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 20px;
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}

.mpwpb-cancel-confirmation input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.mpwpb-cancel-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.mpwpb-cancel-modal__actions .mpwpb-btn {
    margin: 0;
    padding: 10px 15px;
    border-radius: 8px;
}

.mpwpb-cancel-modal__actions .mpwpb-btn-secondary {
    border: 1px solid #d9e0ea;
    background: #fff;
    color: #475569;
}

.mpwpb-cancel-modal__actions .mpwpb-submit-cancellation {
    background: #dc2626;
    color: #fff;
}

.mpwpb-cancel-modal__actions .mpwpb-submit-cancellation:hover { background: #b91c1c; }

.mpwpb-cancellation-pending {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0 6px 6px 0;
    padding: 7px 10px;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
    font-weight: 650;
}

.mpwpb-wc-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

/* WooCommerce View Order: recurring occurrences belonging to one order. */
.mpwpb-recurring-account {
    margin: 28px 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .09);
}

.mpwpb-recurring-account__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 28px;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(135deg, #eef4ff 0%, #f4f7ff 52%, #f6f1ff 100%);
}

.mpwpb-recurring-account__header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #2563eb, #7c3aed);
}

.mpwpb-recurring-account__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .1);
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mpwpb-recurring-account__header h2 {
    margin: 0 0 4px !important;
    color: #0f172a;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.mpwpb-recurring-account__header p {
    margin: 0;
    color: #64748b;
    font-size: 13.5px;
}

.mpwpb-recurring-account__count {
    display: grid;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 12px 26px rgba(29, 78, 216, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.mpwpb-recurring-account__list {
    display: grid;
    gap: 12px;
    padding: 22px;
}

.mpwpb-recurring-occurrence {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px 16px 22px;
    border: 1px solid #e6ebf2;
    border-radius: 15px;
    background: #fff;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.mpwpb-recurring-occurrence::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: #c7d2fe;
}

.mpwpb-recurring-occurrence:hover {
    border-color: #c7d7f7;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.mpwpb-recurring-occurrence__number {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4338ca;
    font-size: 16px;
    font-weight: 800;
}

.mpwpb-recurring-occurrence > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    align-items: baseline;
    min-width: 0;
}

.mpwpb-recurring-occurrence small {
    flex-basis: 100%;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpwpb-recurring-occurrence strong { color: #0f172a; font-size: 15.5px; font-weight: 750; }
.mpwpb-recurring-occurrence > div > span { color: #64748b; font-size: 13px; font-weight: 600; }

.mpwpb-recurring-occurrence__services {
    display: inline-flex;
    flex-basis: 100%;
    gap: 7px;
    align-items: center;
    max-width: 100%;
    margin-top: 3px;
    padding: 5px 11px;
    border-radius: 9px;
    background: #f1f5f9;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpwpb-recurring-occurrence__services i { flex: 0 0 auto; color: #6366f1; }

.mpwpb-recurring-occurrence .mpwpb-status {
    align-self: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: capitalize;
    white-space: nowrap;
}

.mpwpb-recurring-occurrence__actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.mpwpb-recurring-edit,
.mpwpb-recurring-pay {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #c7d7f7;
    border-radius: 10px;
    background: #fff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.mpwpb-recurring-edit:hover,
.mpwpb-recurring-pay:hover { border-color: #2563eb; background: #eff6ff; color: #1e40af; box-shadow: 0 5px 14px rgba(37, 99, 235, .16); }
.mpwpb-recurring-pay { border-color: #a7f3d0; color: #047857; background: #f0fdf9; }
.mpwpb-recurring-pay:hover { border-color: #10b981; background: #ecfdf5; color: #065f46; box-shadow: 0 5px 14px rgba(16, 185, 129, .18); }

.mpwpb-recurring-locked {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 13px;
    border: 1px dashed #dbe2ea;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

.mpwpb-recurring-locked i { color: #cbd5e1; }

.mpwpb-recurring-account__payment {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    align-items: stretch;
    padding: 18px 22px;
    border-top: 1px solid #eef2f7;
    background: linear-gradient(180deg, #fbfcfe, #fff);
}

.mpwpb-recurring-account__payment > div {
    display: flex;
    flex: 1 1 160px;
    min-width: 140px;
    flex-direction: column;
    gap: 4px;
    padding: 13px 16px;
    border: 1px solid #e8edf4;
    border-radius: 13px;
    background: #fff;
}

.mpwpb-recurring-account__payment small { color: #94a3b8; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mpwpb-recurring-account__payment strong { color: #0f172a; font-size: 19px; font-weight: 800; }
.mpwpb-recurring-account__payment > div:first-child strong { color: #059669; }
.mpwpb-recurring-account__payment .mpwpb-btn { flex: 0 0 auto; margin: auto 0 auto auto; align-self: center; }

.mpwpb-recurring-add { display: inline-flex !important; gap: 8px; align-items: center; }
.mpwpb-recurring-limit { display: inline-flex; gap: 9px; align-items: flex-start; max-width: 620px; padding: 12px 15px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: #64748b; font-size: 12px; line-height: 1.55; }
.mpwpb-recurring-limit i { margin-top: 2px; color: #2563eb; }
.mpwpb-recurring-account.is-targeted { animation: mpwpbRecurringTarget 1.1s ease; }
@keyframes mpwpbRecurringTarget { 0%,45% { box-shadow: 0 0 0 4px rgba(37,99,235,.2), 0 10px 30px rgba(15,23,42,.07); } 100% { box-shadow: 0 10px 30px rgba(15,23,42,.07); } }

/* Recurring occurrence editor: intentionally independent from the legacy
   #mpwpb-reschedule-modal because this workflow also edits service data and
   must enforce Date -> Time -> Services in that order. */
.mpwpb-recurring-editor {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    overflow: auto;
    padding: 28px 16px;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(4px);
}

.mpwpb-recurring-editor.is-open { display: block; }
.mpwpb-recurring-editor__panel {
    position: relative;
    width: min(720px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .3);
}

.mpwpb-recurring-editor__close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.mpwpb-recurring-editor__close:hover { background: rgba(255,255,255,.28); }
.mpwpb-recurring-editor__header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 22px 62px 20px 24px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #0f766e);
    color: #fff;
}

.mpwpb-recurring-editor__icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 13px;
    background: rgba(255,255,255,.15);
    font-size: 18px;
}

.mpwpb-recurring-editor__header > div > span { display: block; margin-bottom: 2px; color: #bfdbfe; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.mpwpb-recurring-editor__header h3 { margin: 0 !important; color: #fff !important; font-size: 21px !important; line-height: 1.25; }
.mpwpb-recurring-editor__header p { margin: 4px 0 0; color: #dbeafe; font-size: 12px; line-height: 1.45; }

.mpwpb-recurring-editor__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 24px;
    border-bottom: 1px solid #e5eaf1;
    background: #f8fafc;
}

.mpwpb-recurring-editor__steps span {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    padding: 13px 8px 11px;
    border-bottom: 3px solid transparent;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 750;
}

.mpwpb-recurring-editor__steps b { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #e2e8f0; color: #64748b; font-size: 10px; }
.mpwpb-recurring-editor__steps span.is-active { border-color: #2563eb; color: #1d4ed8; }
.mpwpb-recurring-editor__steps span.is-active b { background: #2563eb; color: #fff; }
.mpwpb-recurring-editor__steps span.is-complete { color: #047857; }
.mpwpb-recurring-editor__steps span.is-complete b { background: #d1fae5; color: #047857; }

.mpwpb-recurring-editor__stage { min-height: 280px; padding: 22px 24px; }
.mpwpb-recurring-editor__stage[hidden] { display: none !important; }
.mpwpb-recurring-editor__stage-heading { position: relative; margin-bottom: 16px; }
.mpwpb-recurring-editor__stage-heading > span { display: block; color: #2563eb; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mpwpb-recurring-editor__stage-heading h4 { margin: 2px 0 0 !important; color: #172033; font-size: 17px !important; }
.mpwpb-recurring-editor__stage-heading button { position: absolute; top: 4px; right: 0; padding: 5px 8px; border: 0; background: transparent; color: #2563eb; font-size: 11px; font-weight: 700; cursor: pointer; }

.mpwpb-recurring-editor__date-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.mpwpb-recurring-editor__date-grid > button {
    display: flex;
    min-height: 82px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid #dce3ec;
    border-radius: 11px;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
}
.mpwpb-recurring-editor__date-grid > button:hover { border-color: #93b4f5; background: #eff6ff; }
.mpwpb-recurring-editor__date-grid > button.is-selected { border-color: #2563eb; background: #2563eb; color: #fff; box-shadow: 0 7px 16px rgba(37,99,235,.2); }
.mpwpb-recurring-editor__date-grid small { font-size: 10px; font-weight: 700; }
.mpwpb-recurring-editor__date-grid strong { margin: 1px 0; color: inherit; font-size: 20px; line-height: 1.1; }
.mpwpb-recurring-editor__date-grid span { font-size: 10px; }

.mpwpb-recurring-editor__time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.mpwpb-recurring-editor__time-grid > button { min-height: 44px; padding: 8px; border: 1px solid #d7dfea; border-radius: 9px; background: #fff; color: #334155; font-size: 12px; font-weight: 700; cursor: pointer; }
.mpwpb-recurring-editor__time-grid > button:hover { border-color: #2563eb; color: #1d4ed8; }
.mpwpb-recurring-editor__time-grid > button.is-selected { border-color: #2563eb; background: #2563eb; color: #fff; }
.mpwpb-recurring-editor__empty { grid-column: 1/-1; padding: 22px; border-radius: 10px; background: #fff7ed; color: #9a3412; text-align: center; }

.mpwpb-recurring-editor__help { margin: -5px 0 14px; color: #64748b; font-size: 12px; }
.mpwpb-recurring-editor__service-list { display: grid; gap: 8px; max-height: 310px; overflow: auto; padding-right: 3px; }
.mpwpb-recurring-editor__service {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}
.mpwpb-recurring-editor__service:hover { border-color: #b8c9ed; background: #f8fbff; }
.mpwpb-recurring-editor__service.is-selected { border-color: #8cb0f4; background: #eff6ff; }
.mpwpb-recurring-editor__service > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.mpwpb-recurring-editor__check { display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #cbd5e1; border-radius: 7px; background: #fff; color: transparent; font-size: 10px; }
.mpwpb-recurring-editor__service.is-selected .mpwpb-recurring-editor__check { border-color: #2563eb; background: #2563eb; color: #fff; }
.mpwpb-recurring-editor__service-copy { display: flex; min-width: 0; flex-direction: column; }
.mpwpb-recurring-editor__service-copy strong { overflow: hidden; color: #1e293b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mpwpb-recurring-editor__service-copy small { color: #64748b; font-size: 10px; }
.mpwpb-recurring-editor__price { color: #0f766e; font-size: 12px; font-weight: 800; white-space: nowrap; }
.mpwpb-recurring-editor__qty { box-sizing: border-box; width: 52px !important; min-height: 34px !important; padding: 5px !important; border: 1px solid #cbd5e1 !important; border-radius: 7px !important; text-align: center; }

.mpwpb-recurring-editor__message { display: none; margin: 0 24px 16px; padding: 10px 12px; border-radius: 9px; font-size: 12px; }
.mpwpb-recurring-editor__message.is-error { display: block; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }
.mpwpb-recurring-editor__message.is-success { display: block; border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; }
.mpwpb-recurring-editor__footer { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 15px 24px; border-top: 1px solid #e5eaf1; background: #f8fafc; }
.mpwpb-recurring-editor__footer > div { display: flex; flex-direction: column; }
.mpwpb-recurring-editor__footer small { color: #64748b; font-size: 10px; text-transform: uppercase; }
.mpwpb-recurring-editor__footer strong { color: #172033; font-size: 16px; }
.mpwpb-recurring-editor__footer .mpwpb-btn { min-width: 170px; margin: 0; border: 0; background: #2563eb; color: #fff; }
.mpwpb-recurring-editor__footer .mpwpb-btn:disabled { opacity: .45; cursor: not-allowed; }

.mpwpb-recurring-account__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 20px 22px;
    border-top: 1px solid #eef2f7;
    background: linear-gradient(180deg, #fff, #fbfcfe);
}

.mpwpb-recurring-account__actions .mpwpb-btn { margin: 0; }

.mpwpb-recurring-account__actions .mpwpb-recurring-add {
    padding: 11px 20px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 750;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
    transition: transform .16s ease, box-shadow .16s ease;
}

.mpwpb-recurring-account__actions .mpwpb-recurring-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(37, 99, 235, .34);
}

.mpwpb-recurring-account__actions .mpwpb-reorder-btn {
    margin-left: auto;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #fff;
    color: #475569;
    font-weight: 700;
}

.mpwpb-recurring-account__actions .mpwpb-reorder-btn:hover { border-color: #c7d2fe; background: #f8faff; color: #1d4ed8; }

.mpwpb-recurring-account__actions .mpwpb-cancel-btn {
    border: 1px solid #fecdd3;
    border-radius: 11px;
    background: #fff5f6;
    color: #e11d48;
    font-weight: 700;
}

.mpwpb-recurring-account__actions .mpwpb-cancel-btn:hover { border-color: #fb7185; background: #ffe4e8; color: #be123c; }

@media (max-width: 600px) {
    .mpwpb-recurring-account__header { padding: 20px 18px; }
    .mpwpb-recurring-account__count { flex-basis: 48px; width: 48px; height: 48px; font-size: 18px; }
    .mpwpb-recurring-account__list { padding: 14px; }
    .mpwpb-recurring-occurrence { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 15px; }
    .mpwpb-recurring-occurrence__number { width: 40px; height: 40px; }
    .mpwpb-recurring-occurrence > .mpwpb-status { grid-column: 2; justify-self: start; }
    .mpwpb-recurring-occurrence__actions { grid-column: 2; justify-self: start; flex-wrap: wrap !important; }
    .mpwpb-recurring-account__payment { align-items: stretch; flex-direction: column; padding: 15px 16px; }
    .mpwpb-recurring-account__payment > div { flex: 0 0 auto; min-width: 0; }
    .mpwpb-recurring-account__payment .mpwpb-btn { width: 100%; margin: 0; box-sizing: border-box; text-align: center; }
    .mpwpb-recurring-account__actions { align-items: stretch; flex-direction: column; padding: 16px; }
    .mpwpb-recurring-account__actions .mpwpb-btn,
    .mpwpb-recurring-account__actions .mpwpb-cancellation-pending { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
}

@media (max-width: 600px) {
    .mpwpb-recurring-editor { padding: 8px; }
    .mpwpb-recurring-editor__panel { border-radius: 14px; }
    .mpwpb-recurring-editor__header { padding: 18px 50px 17px 16px; }
    .mpwpb-recurring-editor__icon { flex-basis: 38px; width: 38px; height: 38px; }
    .mpwpb-recurring-editor__header h3 { font-size: 18px !important; }
    .mpwpb-recurring-editor__steps { padding: 0 10px; }
    .mpwpb-recurring-editor__steps span { padding-inline: 3px; font-size: 10px; }
    .mpwpb-recurring-editor__stage { min-height: 300px; padding: 18px 14px; }
    .mpwpb-recurring-editor__date-grid { grid-template-columns: repeat(3, 1fr); }
    .mpwpb-recurring-editor__time-grid { grid-template-columns: repeat(3, 1fr); }
    .mpwpb-recurring-editor__service { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .mpwpb-recurring-editor__qty { grid-column: 2/4; width: 100% !important; }
    .mpwpb-recurring-editor__footer { padding: 13px 14px; }
    .mpwpb-recurring-editor__footer .mpwpb-btn { min-width: 145px; }
    .mpwpb-recurring-editor__message { margin-inline: 14px; }
}

@media (max-width: 600px) {
    .mpwpb-cancel-modal { padding: 10px; }
    .mpwpb-cancel-modal__content { margin: 1vh auto; border-radius: 14px; }
    .mpwpb-cancel-modal__heading { padding: 22px 52px 18px 18px; }
    .mpwpb-cancel-modal__icon { flex-basis: 42px; width: 42px; height: 42px; }
    .mpwpb-cancel-modal__heading h3 { font-size: 19px; }
    #mpwpb-cancel-form { padding: 18px; }
    .mpwpb-cancel-summary { grid-template-columns: 1fr; }
    .mpwpb-cancel-modal__actions { align-items: stretch; flex-direction: column-reverse; }
    .mpwpb-cancel-modal__actions .mpwpb-btn { width: 100%; text-align: center; }
}

/* Messages */
.mpwpb-message {
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 4px;
    display: none;
}

.mpwpb-message.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
    display: block;
}

.mpwpb-message.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
    display: block;
}

.mpwpb-message.info {
    background-color: #d9edf7;
    color: #31708f;
    border: 1px solid #bce8f1;
    display: block;
}

.mpwpb-no-bookings {
    padding: 30px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 8px;
    color: #666;
    font-size: 16px;
}

/* Login Form */
.mpwpb-login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.mpwpb-login-form h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.mpwpb-login-form .login-username,
.mpwpb-login-form .login-password {
    margin-bottom: 15px;
}

.mpwpb-login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.mpwpb-login-form input[type="text"],
.mpwpb-login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.mpwpb-login-form .login-remember {
    margin-bottom: 15px;
}

.mpwpb-login-form .login-submit input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #2196f3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.mpwpb-login-form .login-submit input[type="submit"]:hover {
    background-color: #1976d2;
}

.mpwpb-login-form p {
    text-align: center;
    margin-top: 15px;
    color: #666;
}

.mpwpb-login-form a {
    color: #2196f3;
    text-decoration: none;
}

.mpwpb-login-form a:hover {
    text-decoration: underline;
}

.mpwpb-service-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.mpwpb-service-staff_card {
    background: #f7f9fc;
    border: 1px solid #e1e4e8;
    border-radius: 10px;
    padding: 16px;
    width: 220px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.mpwpb-service-staff_card:hover {
    transform: scale(1.02);
}

.mpwpb-service-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #efe9e9;
}

.mpmw_staff_button_primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #0073aa;
    color: #fff;
    font-size: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 10px !important;
}

.mpmw_staff_button_primary:hover {
    background-color: #005f8d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.mpmw_staff_button_primary:active {
    background-color: #004f78;
}

/* ------------------------------------------------------------------ *
 *  "My Schedule" (Admin/MPWPB_Staff_DashBoard.php::render_my_schedule_tab())
 *  Reuses Admin/MPWPB_Staff_Members.php's own panel/table markup (built
 *  for the wp-admin Staff Members screen, styled there by admin-only CSS
 *  that isn't loaded here) -- these rules restyle that same markup for
 *  the front-end account pages, scoped to .mpwpb-staff-schedule so the
 *  admin screen's own styling is never touched.
 * ------------------------------------------------------------------ */
.mpwpb-staff-schedule .mpwpb-schedule-intro {
    color: #666;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.mpwpb-staff-schedule .mpPanel {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
}

.mpwpb-staff-schedule .mpPanelHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: #f9f9f9;
    border-bottom: 1px solid #e5e5e5;
}

.mpwpb-staff-schedule .mpPanelHeader h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: none;
}

/* No JS wires the collapse toggle on the front-end (that's admin-only
   behaviour) -- hide the +/- icon rather than show a control that does
   nothing when clicked. */
.mpwpb-staff-schedule .mpPanelHeader [data-icon] {
    display: none;
}

.mpwpb-staff-schedule .mpPanelBody {
    padding: 18px;
}

.mpwpb-staff-schedule .mpwpb_staff_schedule_header_actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hidden on this front-end page only -- the button itself is rendered by
   the shared Admin/MPWPB_Staff_Members.php::schedule_settings(), also used
   by the real wp-admin Staff Members screen where it's still wanted, so
   it's hidden here via CSS rather than removed from that shared PHP. */
.mpwpb-staff-schedule .mpwpb_copy_monday_btn {
    display: none;
}

.mpwpb-staff-schedule .mpwpb_staff_format_badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #777;
    font-size: 11px;
    font-weight: 600;
}

.mpwpb-staff-schedule .mpwpb_staff_format_badge.is-on {
    background: #d9edf7;
    color: #31708f;
}

.mpwpb-staff-schedule .mpPanelBody > table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mpwpb-staff-schedule .mpPanelBody > table th,
.mpwpb-staff-schedule .mpPanelBody > table td {
    padding: 5px 2px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: middle;
}

.mpwpb-staff-schedule .mpPanelBody > table thead th {
    background: #f8fafc;
    font-size: 11.5px;
    font-weight: 700;
    color: #55606e;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mpwpb-staff-schedule .mpPanelBody > table tbody tr:hover {
    background: #f8fafc;
}

/* Day + Status are short, fixed-content columns -- give them just enough
   room and let the actual Start/End/Break Time selects take the rest,
   instead of all seven columns splitting the width evenly. */
.mpwpb-staff-schedule .mpPanelBody > table tbody th {
    width: 88px;
    white-space: nowrap;
    font-weight: 600;
    color: #333;
}

.mpwpb-staff-schedule .mpPanelBody > table td.mpwpb_staff_row_status {
    width: 84px;
}

/* Start/End Time are the primary columns -- give them more of the
   remaining width than the (usually unset) Break Time pair, instead of
   letting table-layout:fixed split the leftover space evenly. */
.mpwpb-staff-schedule .mpPanelBody > table td.mpwpb_start_time,
.mpwpb-staff-schedule .mpPanelBody > table td.mpwpb_end_time {
    width: 23%;
}

.mpwpb-staff-schedule .mpPanelBody > table td.mpwpb_start_break_time,
.mpwpb-staff-schedule .mpPanelBody > table td.mpwpb_end_break_time {
    width: 16%;
}

/* The "To" cells are just a connector word between two selects, not real
   data -- shrinking them gives the selects noticeably more breathing room
   instead of seven visually-equal columns. */
.mpwpb-staff-schedule .mpPanelBody > table td.textCenter {
    width: 26px;
    padding: 14px 2px;
    text-align: center;
}

.mpwpb-staff-schedule .mpPanelBody > table td.textCenter strong {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #98a2ae;
}

.mpwpb-staff-schedule .mpwpb_staff_status_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    background: #f5f5f5;
    color: #777;
}

.mpwpb-staff-schedule .mpwpb_staff_status_badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.mpwpb-staff-schedule .mpwpb_staff_status_badge.is-active {
    background: #e6f4ea;
    color: #1e8e3e;
}

.mpwpb-staff-schedule select.formControl {
    width: 100%;
    min-width: 80px;
    padding: 8px 4px;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #333;
}

/* Overrides the inline style="background-color:#e3d3d3" the shared
   render function hardcodes on break-time cells -- the redesigned table
   keeps every cell on the same flat white ground, so this cancels the
   inline style out rather than swapping it for a different tint. */
.mpwpb-staff-schedule .mpwpb_start_break_time,
.mpwpb-staff-schedule .mpwpb_end_break_time {
    background-color: #fff !important;
}

.mpwpb-staff-schedule .dFlex {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.mpwpb-staff-schedule ._fs_label_w_200 {
    flex: 0 0 auto;
    min-width: 90px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding-top: 6px;
}

.mpwpb-staff-schedule .groupCheckBox {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mpwpb-staff-schedule .customCheckboxLabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}

.mpwpb-staff-schedule .customCheckboxLabel input[type="checkbox"] {
    margin: 0;
}

.mpwpb-staff-schedule .divider {
    height: 1px;
    background: #f0f0f0;
    margin: 16px 0;
}

.mpwpb-staff-schedule .mp_settings_area {
    display: flex;
    flex-direction: column;
    flex: 1 1 130px;
}

/* "Add New Off date" is rendered before the hidden row-template in the
   shared markup (also used by the wp-admin Staff Members screen, so not
   reordered there) -- flex order moves it after the template here without
   touching that shared PHP. */
.mpwpb-staff-schedule .mp_settings_area > .mp_item_insert {
    order: 1;
}

.mpwpb-staff-schedule .mp_settings_area > .mpwpb_hidden_content {
    order: 2;
}

.mpwpb-staff-schedule .mp_settings_area > ._themeButton_xs_mT_xs {
    order: 3;
}

.mpwpb-staff-schedule .mp_remove_area {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.mpwpb-staff-schedule .mp_remove_area .formControl {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.mpwpb-staff-schedule .justifyBetween {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.mpwpb-staff-schedule .allCenter,
.mpwpb-staff-schedule .buttonGroup {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mpwpb-staff-schedule ._themeButton_xs,
.mpwpb-staff-schedule ._themeButton_xs_mT_xs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #333;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.mpwpb-staff-schedule ._themeButton_xs:hover,
.mpwpb-staff-schedule ._themeButton_xs_mT_xs:hover {
    background: #f5f5f5;
}

.mpwpb-staff-schedule ._themeButton_xs_mT_xs {
    margin-top: 8px;
}

/* Toolbar: intro copy left, Save action right -- matches the reference
   layout (title/description + primary action on one row) instead of the
   save button trailing at the very bottom of the page. */
.mpwpb-staff-schedule .mpwpb-schedule-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mpwpb-staff-schedule .mpwpb-schedule-toolbar h3 {
    margin: 0 0 6px;
}

.mpwpb-staff-schedule .mpwpb-schedule-toolbar .mpwpb-schedule-intro {
    margin: 0;
    max-width: 60ch;
}

.mpwpb-staff-schedule #saveScheduleBtn {
    flex: 0 0 auto;
    margin-top: 0;
    background: #0f172a;
    color: #fff;
}

.mpwpb-staff-schedule #saveScheduleBtn:hover {
    background: #1e293b;
}

/* Two-column layout: weekly hours table takes the majority width, off
   days/dates sit alongside in a sidebar column -- collapses to one
   column on narrower screens (see media query below). */
.mpwpb-staff-schedule .mpwpb-schedule-grid {
    display: inline;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

.mpwpb-staff-schedule .mpwpb-schedule-main .mpPanel {
    margin-bottom: 0;
}

/* Re-enables the panel-header icon specifically for the schedule table
   (overridden further above for panels in general, since nothing wires
   its collapse behaviour on the front-end) as a colour badge. The
   underlying element only ever carries fa-plus (the collapse toggle
   glyph, meaningless here), so the glyph itself is swapped for a clock
   via a higher-specificity ::before rather than shown as-is. */
.mpwpb-staff-schedule .mpwpb-schedule-main .mpPanelHeader [data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e3f2fd;
    color: transparent;
    margin: 0 10px 0 0;
    flex: 0 0 auto;
}

.mpwpb-staff-schedule .mpwpb-schedule-main .mpPanelHeader [data-icon]::before {
    content: "\f017";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #0073aa;
    font-size: 14px;
}

.mpwpb-staff-schedule .mpwpb_staff_status_badge.is-off {
    background: #f2dede;
    color: #a94442;
}

/* The first table row is always the "Default" fallback schedule every
   other day inherits from when left blank -- call it out visually. */
.mpwpb-staff-schedule .mpwpb-schedule-main .mpPanelBody > table tbody tr:first-child th {
    color: #0073aa;
    font-weight: 700;
}

/* Sidebar: strip the outer panel's own chrome (it would otherwise wrap
   the two cards below in a third, redundant card) and let
   mpwpb_off_day_card (Weekly Off Days / Exception Dates) be the visible
   cards instead. */
.mpwpb-staff-schedule .mpwpb-schedule-sidebar .mpPanel {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.mpwpb-staff-schedule .mpwpb-schedule-sidebar .mpPanelHeader {
    display: none;
}

.mpwpb-staff-schedule .mpwpb-schedule-sidebar .mpPanelBody {
    padding: 0;
}

.mpwpb-staff-schedule .mpwpb_off_day_cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mpwpb-staff-schedule .mpwpb_off_day_card.dFlex {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 16px 18px;
    margin-top: 15px;
}

.mpwpb-staff-schedule .mpwpb_off_day_card > ._fs_label_w_200 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    padding-top: 0;
}

/* Matches the Time Schedule Settings panel's icon-badge treatment --
   calendar glyph in a colour chip instead of the plain dot this used to
   be, with the same red/blue split calling out the first card. */
.mpwpb-staff-schedule .mpwpb_off_day_card > ._fs_label_w_200::before {
    content: "\f073";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e3f2fd;
    color: #0073aa;
    font-size: 14px;
    flex: 0 0 auto;
}

.mpwpb-staff-schedule .mpwpb_off_day_card:first-child > ._fs_label_w_200::before {
    background: #fde8e8;
    color: #e53935;
}

@media (max-width: 782px) {
    .mpwpb-staff-schedule .mpPanelBody > table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .mpwpb-staff-schedule .mpwpb-schedule-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ *
 *  "My Appointment" date-range filter
 *  (Admin/MPWPB_Staff_DashBoard.php::render_my_appointment_tab())
 * ------------------------------------------------------------------ */
.mpwpb-staff-appointments .mpwpb-appt-filter {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 18px;
    margin: 0 0 20px;
}

.mpwpb-staff-appointments .mpwpb-appt-filter label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 200px;
    max-width: 260px;
}

.mpwpb-staff-appointments .mpwpb-appt-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.mpwpb-staff-appointments .mpwpb-appt-filter input[type="date"] {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #333;
    font-family: inherit;
}

.mpwpb-staff-appointments .mpwpb-appt-filter input[type="date"]:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.mpwpb-staff-appointments .mpwpb-appt-filter select {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #333;
    font-family: inherit;
}

.mpwpb-staff-appointments .mpwpb-appt-filter select:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.mpwpb-staff-appointments .mpwpb-appt-filter button[type="submit"] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 22px;
    background: #1d3fb8;
    color: #fff;
    font-size: 14px;
}

.mpwpb-staff-appointments .mpwpb-appt-filter button[type="submit"]:hover {
    background: #17348f;
}

.mpwpb-staff-appointments .mpwpb-appt-clear-link {
    flex: 0 0 auto;
    align-self: center;
    font-size: 13px;
    color: #666;
    text-decoration: underline;
}

.mpwpb-staff-appointments .mpwpb-appt-clear-link:hover {
    color: #333;
}

@media (max-width: 600px) {
    .mpwpb-staff-appointments .mpwpb-appt-filter {
        align-items: stretch;
    }

    .mpwpb-staff-appointments .mpwpb-appt-filter label {
        max-width: none;
    }
}

/* ------------------------------------------------------------------ *
 *  "My Appointment" -- toolbar / card table / pagination / stat row
 * ------------------------------------------------------------------ */
.mpwpb-appt-toolbar {
    display: inline;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mpwpb-appt-toolbar h3 {
    margin: 0 0 4px;
}

.mpwpb-appt-subtitle {
    margin: 0;
    color: #777;
    font-size: 13px;
}

.mpwpb-appt-toolbar .mpwpb-appt-filter {
    margin: 20px 0px;
}

.mpwpb-appt-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 18px;
    margin-bottom: 20px;
}

/* Ajax filter/pagination refresh -- fades the list while a request is in
   flight instead of a jarring instant swap or full page reload. */
#mpwpb-appt-list-wrap {
    transition: opacity .15s ease;
}

#mpwpb-appt-list-wrap.mpwpb-appt-loading {
    opacity: .5;
    pointer-events: none;
}

.mpwpb-appt-table-scroll {
    overflow-x: auto;
}

.mpwpb-appt-table {
    margin-top: 0;
    min-width: 720px;
}

.mpwpb-appt-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    background: transparent;
    border-bottom: 1px solid #eef1f6;
}

.mpwpb-appt-table td {
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
    color: #334155;
}

.mpwpb-appt-table tbody tr:last-child td {
    border-bottom: 0;
}

.mpwpb-appt-id {
    font-weight: 700;
    color: #1d3fb8;
}

.mpwpb-appt-customer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mpwpb-appt-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8ecfb;
    color: #1d3fb8;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mpwpb-appt-table .mpwpb-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mpwpb-appt-table .mpwpb-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Service Status inline editor -- lets a staff member update the status
   directly from the appointments list, no separate page needed. */
.mpwpb-appt-status-edit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mpwpb-appt-status-select {
    padding: 6px 8px;
    border: 1px solid #d8dce5;
    border-radius: 6px;
    background: #fff;
    font-size: 12.5px;
    color: #333;
    font-family: inherit;
}

.mpwpb-appt-status-select:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.mpwpb-appt-status-save {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #d8dce5;
    border-radius: 6px;
    background: #fff;
    color: #1d3fb8;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.mpwpb-appt-status-save:hover {
    border-color: #1d3fb8;
}

.mpwpb-appt-status-save:disabled {
    opacity: .6;
    cursor: default;
}

.mpwpb-appt-view-btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #d8dce5;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.mpwpb-appt-view-btn:hover {
    border-color: #1d3fb8;
    color: #1d3fb8;
}

/* Actions column now holds View + Notes side by side */
.mpwpb-appt-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mpwpb-appt-notes-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #d8dce5;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.mpwpb-appt-notes-btn:hover {
    border-color: #1d3fb8;
    color: #1d3fb8;
}

.mpwpb-appt-notes-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #e53e3e;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* Internal Notes modal thread -- reuses .mpwpb-modal/.mpwpb-modal-content
   for the dialog chrome, these are just the thread-specific bits. */
#mpwpb-notes-modal .mpwpb-notes-thread {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
    padding-right: 2px;
}

#mpwpb-notes-modal .mpwpb-notes-empty {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
    padding: 12px 0;
}

#mpwpb-notes-modal .mpwpb-note-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.4;
}

#mpwpb-notes-modal .mpwpb-note-own {
    align-self: flex-end;
    background: #e3f2fd;
    color: #1e293b;
    border-bottom-right-radius: 2px;
}

#mpwpb-notes-modal .mpwpb-note-other {
    align-self: flex-start;
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 2px;
}

#mpwpb-notes-modal .mpwpb-note-meta {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
}

#mpwpb-notes-modal .mpwpb-note-message {
    white-space: pre-wrap;
    word-break: break-word;
}

#mpwpb-notes-modal textarea#mpwpb-notes-input {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13.5px;
    font-family: inherit;
    box-sizing: border-box;
}

#mpwpb-notes-modal textarea#mpwpb-notes-input:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* Send Review Request modal -- same dialog chrome as Internal Notes above,
   plus a flat (non-bubble) history list since this is a one-way send log,
   not a two-party conversation. */
#mpwpb-review-request-modal .mpwpb-review-request-history {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
    padding-right: 2px;
}

#mpwpb-review-request-modal .mpwpb-notes-empty {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
    padding: 12px 0;
}

#mpwpb-review-request-modal .mpwpb-review-request-history-item {
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #eef0f3;
    font-size: 13px;
}

#mpwpb-review-request-modal .mpwpb-note-meta {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
}

#mpwpb-review-request-modal .mpwpb-note-message {
    white-space: pre-wrap;
    word-break: break-word;
}

#mpwpb-review-request-modal textarea#mpwpb-review-request-body {
    min-height: 120px;
    resize: vertical;
}

.mpwpb-notes-error {
    display: block;
    font-size: 12px;
    color: #c62828;
    margin-top: -4px;
}

.mpwpb-appt-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.mpwpb-appt-pagination-summary {
    font-size: 12.5px;
    color: #94a3b8;
}

.mpwpb-appt-pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mpwpb-appt-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
}

.mpwpb-appt-page-btn:hover {
    background: #f1f5f9;
}

.mpwpb-appt-page-btn.is-active {
    background: #1d3fb8;
    color: #fff;
}

.mpwpb-appt-page-btn.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.mpwpb-appt-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mpwpb-appt-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.mpwpb-appt-stat-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.mpwpb-appt-stat-icon-blue {
    background: #e8ecfb;
    color: #1d3fb8;
}

.mpwpb-appt-stat-icon-amber {
    background: #fef3e2;
    color: #b8720a;
}

.mpwpb-appt-stat-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: 3px;
}

.mpwpb-appt-stat-value {
    font-size: 15px;
    color: #1e293b;
}

.mpwpb-appt-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0f172a;
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: background-color .15s ease;
}

.mpwpb-appt-quick-action:hover {
    background: #1e293b;
}

.mpwpb-appt-quick-action-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.mpwpb-appt-quick-action-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 3px;
}

.mpwpb-appt-quick-action strong {
    color: #fff;
    font-size: 14px;
}

.mpwpb-appt-quick-action > .fa-chevron-right {
    margin-left: auto;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
}

@media (max-width: 900px) {
    .mpwpb-appt-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .mpwpb-appt-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Post-status colors these general .mpwpb-status pills didn't have yet --
   the existing set (completed/processing/pending/cancelled/on-hold) covers
   booking order statuses, not WP post statuses like "My Service" needs. */
.mpwpb-status-publish {
    background-color: #dff0d8;
    color: #3c763d;
}

.mpwpb-status-draft {
    background-color: #f5f5f5;
    color: #777;
}

/* ------------------------------------------------------------------ *
 *  "My Service" -- toolbar / stat row / card table / pagination
 * ------------------------------------------------------------------ */
.mpwpb-service-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mpwpb-service-toolbar h3 {
    margin: 0 0 4px;
}

.mpwpb-service-subtitle {
    margin: 0;
    color: #777;
    font-size: 13px;
}

.mpwpb-service-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    background: #1d3fb8;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.mpwpb-service-new-btn:hover {
    background: #17348f;
}

.mpwpb-service-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.mpwpb-service-stat-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.mpwpb-service-stat-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.mpwpb-service-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.mpwpb-service-stat-value-green {
    color: #3c763d;
}

.mpwpb-service-stat-value-muted {
    color: #94a3b8;
}

.mpwpb-service-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 18px;
}

.mpwpb-service-table-scroll {
    overflow-x: auto;
}

.mpwpb-service-table {
    margin-top: 0;
    min-width: 620px;
}

.mpwpb-service-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    background: transparent;
    border-bottom: 1px solid #eef1f6;
}

.mpwpb-service-table td {
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
    color: #334155;
}

.mpwpb-service-table tbody tr:last-child td {
    border-bottom: 0;
}

.mpwpb-service-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mpwpb-service-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #1d3fb8;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.mpwpb-service-name {
    font-weight: 600;
    color: #1e293b;
}

.mpwpb-service-id {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 1px;
}

.mpwpb-service-category-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8ecfb;
    color: #1d3fb8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.mpwpb-service-category-empty {
    color: #cbd5e1;
}

@media (max-width: 900px) {
    .mpwpb-service-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mpwpb-service-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mpwpb-service-stats {
        grid-template-columns: 1fr;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .mpwpb-tabs-nav {
        flex-wrap: wrap;
    }
    
    .mpwpb-tabs-nav li {
        flex: 1 0 33.33%;
        text-align: center;
    }
    
    .mpwpb-bookings-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .mpwpb-tabs-nav li {
        flex: 1 0 100%;
    }
    
    .mpwpb-appointments-grid {
        grid-template-columns: 1fr;
    }

    .mpwpb-modal-content {
        width: 90%;
        margin: 20% auto;
    }
}

/* ============================================================
   WooCommerce My Account order-action buttons
   (Orders list cells + the View Order "Actions:" row). The active
   theme renders these as plain black .wp-element-button boxes with
   no spacing, so they overlap. Restyle them into clean, semantic
   MagePeople buttons. This stylesheet only loads on account pages,
   so these rules never leak onto unrelated WooCommerce buttons.
   ============================================================ */
.woocommerce-orders-table__cell-order-actions,
.woocommerce-table--order-details tfoot td:has(a[class*="mpwpb_"]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}
/* The View Order "Actions:" value cell lives in the narrow Total column;
   let its inline button row overflow left into the empty space instead of
   wrapping, so all actions stay on one line. Matched on our own mpwpb_*
   classes (always present) rather than WooCommerce's order-actions-button
   class, which is not reliably emitted. */
.woocommerce-table--order-details tfoot td:has(a[class*="mpwpb_"]) {
    overflow: visible;
}
.woocommerce-table--order-details tfoot td:has(a[class*="mpwpb_"]) > a.button {
    flex: 0 0 auto;
}
.woocommerce-table--order-details tfoot td:has(.order-actions-button) {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.woocommerce-orders-table__cell-order-actions a.button,
a.order-actions-button,
a.button.mpwpb_reorder,
a.button.mpwpb_manage_recurring,
a.button.mpwpb_cancel,
a.button.mpwpb_cancel_pending,
a.button.mpwpb_pay_balance,
a.button.mpwpb_reschedule {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    margin: 0 !important;
    padding: 9px 16px !important;
    border: 1px solid #d6ddea !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.woocommerce-orders-table__cell-order-actions a.button:hover,
a.order-actions-button:hover,
a.button.mpwpb_reorder:hover,
a.button.mpwpb_reschedule:hover {
    border-color: #c7d2fe !important;
    background: #f5f8ff !important;
    color: #1d4ed8 !important;
}

/* Primary — View + Manage Recurring */
.woocommerce-orders-table__cell-order-actions a.button.view,
a.button.mpwpb_manage_recurring {
    border-color: transparent !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .24) !important;
}
.woocommerce-orders-table__cell-order-actions a.button.view:hover,
a.button.mpwpb_manage_recurring:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(37, 99, 235, .32) !important;
}

/* Success — Pay Balance */
a.button.mpwpb_pay_balance {
    border-color: transparent !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, .24) !important;
}
a.button.mpwpb_pay_balance:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(16, 185, 129, .3) !important; }

/* Danger — Cancel / Cancel Series */
a.button.mpwpb_cancel {
    border-color: #fecdd3 !important;
    background: #fff5f6 !important;
    color: #e11d48 !important;
}
a.button.mpwpb_cancel:hover { border-color: #fb7185 !important; background: #ffe4e8 !important; color: #be123c !important; }

/* Cancellation pending — muted, non-interactive look */
a.button.mpwpb_cancel_pending {
    border-color: #e6ebf2 !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: default !important;
    box-shadow: none !important;
}
a.button.mpwpb_cancel_pending:hover { transform: none; }

@media (max-width: 600px) {
    .woocommerce-orders-table__cell-order-actions,
    .woocommerce-table--order-details tfoot td:has(a[class*="mpwpb_"]) {
        flex-wrap: wrap !important;
        justify-content: flex-start;
        white-space: normal;
    }
}