:root {
    --wd-form-height: 42px;
    --wd-form-brd-width: 1px;
    --wd-form-brd-color: #e2e8f0;
    --wd-form-brd-radius: 6px;
    --wd-form-bg: #fff;
    --wd-form-color: #1e293b;

    /* SBM & WoodMart Design Tokens */
    --sbm-primary: var(--wd-primary-color, #2b6cb0);
    --sbm-primary-hover: var(--wd-primary-color-hover, #1d4ed8);
    --sbm-bg-card: #ffffff;
    --sbm-border-color: #e2e8f0;
    --sbm-border-subtle: #f1f5f9;
    --sbm-radius-card: 10px;
    --sbm-radius-btn: 6px;
    --sbm-radius-pill: 9999px;
    --sbm-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    --sbm-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   WoodMart SBM Wrap & Layout
   ========================================================================== */
.sbm-wrap,
.sbm-woodmart-container {
    max-width: 100%;
    margin: 0;
    font-family: inherit;
    color: var(--wd-form-color, #1e293b);
}

/* Sub-Navigation Tabs Bar (Top of SBM My Account Pages - Hidden) */
.sbm-myaccount-nav {
    display: none !important;
}

.sbm-tab-bar {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 10px;
    gap: 4px;
    flex-wrap: wrap;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.sbm-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    line-height: 1.3;
}

.sbm-tab-link:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.6);
}

.sbm-tab-link.sbm-tab-active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sbm-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.sbm-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    color: #334155;
    line-height: 1;
}

.sbm-tab-link.sbm-tab-active .sbm-tab-count {
    background: var(--sbm-primary, #1e293b);
    color: #ffffff;
}

/* Page Header */
.sbm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sbm-border-color, #e2e8f0);
}

.sbm-page-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sbm-header-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sbm-primary, #1e293b);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sbm-page-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0 !important;
    line-height: 1.25;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sbm-page-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0 !important;
    line-height: 1.4;
}

.sbm-header-branch-pill {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.sbm-order-top-nav {
    margin-bottom: 16px;
}

.sbm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 6px 12px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.sbm-back-link:hover {
    background: #f1f5f9;
    color: #0f172a !important;
    border-color: #cbd5e1;
    transform: translateX(-2px);
}

/* ==========================================================================
   WoodMart Styled Cards & Containers
   ========================================================================== */
.sbm-card {
    background: #ffffff;
    border: 1px solid var(--sbm-border-color, #e2e8f0);
    border-radius: var(--sbm-radius-card, 10px);
    padding: 24px;
    margin: 0 0 24px;
    box-shadow: var(--sbm-shadow-card);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    box-sizing: border-box;
}

.sbm-card:hover {
    box-shadow: var(--sbm-shadow-hover);
}

.sbm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sbm-border-subtle, #f1f5f9);
}

.sbm-card-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
}

.sbm-card-header-title svg {
    color: var(--sbm-primary, #1e293b);
    flex-shrink: 0;
}

.sbm-card-header-title h3,
.sbm-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.sbm-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.sbm-cancel-link {
    font-size: 13px;
    color: #dc2626 !important;
    font-weight: 600;
    text-decoration: underline !important;
}

.sbm-cancel-link:hover {
    color: #b91c1c !important;
}

/* Empty States */
.sbm-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.sbm-empty-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    margin-bottom: 16px;
}

.sbm-empty-state h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.sbm-empty-state p {
    font-size: 14px;
    color: #64748b;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ==========================================================================
   Form Controls (WoodMart Integration)
   ========================================================================== */
.sbm-modern-form {
    display: block;
    width: 100%;
}

.sbm-form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
}

.sbm-form-section-title:first-child {
    margin-top: 0;
}

.sbm-form-section-title span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sbm-primary, #1e293b);
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sbm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.sbm-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.sbm-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sbm-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {

    .sbm-grid-2,
    .sbm-grid-3,
    .sbm-grid-4 {
        grid-template-columns: 1fr;
    }
}

.sbm-field {
    margin-bottom: 14px;
}

.sbm-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.sbm-field label .required {
    color: #ef4444;
}

.sbm-field-hint {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

input[type="date"],
.sbm-wrap input[type="date"],
.sbm-form-control,
.sbm-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.sbm-field select,
.sbm-select,
.sbm-filter-item select,
.sbm-filter-item input[type="date"] {
    padding: 0 14px;
    max-width: 100%;
    width: 100%;
    height: var(--wd-form-height, 42px);
    border: var(--wd-form-brd-width, 1px) solid var(--wd-form-brd-color, #e2e8f0);
    border-radius: var(--wd-form-brd-radius, 6px);
    background-color: var(--wd-form-bg, #fff);
    box-shadow: none;
    color: var(--wd-form-color, #1e293b);
    vertical-align: middle;
    font-size: 14px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.sbm-field textarea,
textarea.sbm-form-control {
    padding: 10px 14px;
    max-width: 100%;
    width: 100%;
    min-height: 80px;
    border: var(--wd-form-brd-width, 1px) solid var(--wd-form-brd-color, #e2e8f0);
    border-radius: var(--wd-form-brd-radius, 6px);
    background-color: var(--wd-form-bg, #fff);
    box-shadow: none;
    color: var(--wd-form-color, #1e293b);
    vertical-align: middle;
    font-size: 14px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

input[type="date"]:focus,
.sbm-wrap input[type="date"]:focus,
.sbm-form-control:focus,
.sbm-field input:focus,
.sbm-field textarea:focus,
.sbm-field select:focus,
.sbm-select:focus,
.sbm-filter-item select:focus,
.sbm-filter-item input[type="date"]:focus {
    border-color: var(--sbm-primary, #1e293b);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

/* Order Mode Selector Cards */
.sbm-order-mode-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sbm-mode-option {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
    margin: 0;
}

.sbm-mode-option input[type="radio"] {
    margin-top: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}

.sbm-mode-option:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}

.sbm-mode-option.sbm-mode-selected,
.sbm-mode-option:has(input[type="radio"]:checked) {
    border-color: var(--sbm-primary, #1e293b);
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.1);
}

.sbm-mode-content {
    flex: 1;
}

.sbm-mode-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 14px;
    color: #0f172a;
}

.sbm-mode-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
}

.sbm-mode-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

.sbm-info-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    margin-bottom: 18px;
}

.sbm-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

/* ==========================================================================
   WoodMart & WooCommerce Shop Tables
   ========================================================================== */
.sbm-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sbm-table,
.woocommerce-orders-table.sbm-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: none !important;
}

.sbm-table th,
.woocommerce-orders-table.sbm-table th {
    background: #f8fafc;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    padding: 13px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    text-align: left;
    white-space: nowrap;
}

.sbm-table td,
.woocommerce-orders-table.sbm-table td {
    padding: 15px 16px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 14px;
    color: #1e293b;
    transition: background 0.15s ease;
}

.sbm-table tr:last-child td,
.woocommerce-orders-table.sbm-table tr:last-child td {
    border-bottom: none;
}

.sbm-table tr:hover td,
.woocommerce-orders-table.sbm-table tr:hover td {
    background-color: #fafbfc;
}

.sbm-row-editing td {
    background-color: #f0fdf4 !important;
}

/* Table cells specific formatting */
.sbm-branch-title-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sbm-branch-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.sbm-branch-addr {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #475569;
}

.sbm-branch-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.sbm-contact-pill {
    font-size: 12px;
    color: #64748b;
}

.sbm-users-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: #eff6ff;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.sbm-users-badge-link:hover {
    background: #dbeafe;
    color: #1e40af !important;
}

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

.sbm-avatar-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.sbm-manager-sub {
    font-size: 12px;
    color: #64748b;
}

.sbm-code-pill {
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #334155;
    font-family: monospace;
    border: 1px solid #e2e8f0;
}

.sbm-email-link {
    color: #2563eb !important;
    text-decoration: none !important;
}

.sbm-email-link:hover {
    text-decoration: underline !important;
}

.sbm-order-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sbm-order-number-link {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a !important;
    text-decoration: none !important;
}

.sbm-order-number-link:hover {
    color: var(--sbm-primary, #2563eb) !important;
    text-decoration: underline !important;
}

.sbm-date-text {
    font-size: 13px;
    color: #475569;
}

.sbm-branch-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #334155 !important;
    text-decoration: none !important;
}

.sbm-branch-badge-link:hover {
    color: #0f172a !important;
    text-decoration: underline !important;
}

.sbm-total-price {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

/* ==========================================================================
   WoodMart Action Buttons System
   ========================================================================== */
.sbm-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.sbm-btn,
.button.btn.btn-default.wc-forward.sbm-btn,
.btn.btn-style-default.sbm-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 14px !important;
    height: auto !important;
    min-height: 34px !important;
    border-radius: var(--sbm-radius-btn, 6px) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    line-height: normal !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* Primary Action */
.sbm-btn-primary,
.button.btn.btn-default.wc-forward.sbm-btn-primary,
.sbm-success,
.button.btn.btn-default.wc-forward.sbm-success {
    background: var(--sbm-primary, #0f172a) !important;
    border: 1px solid var(--sbm-primary, #0f172a) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.sbm-btn-primary:hover,
.button.btn.btn-default.wc-forward.sbm-btn-primary:hover,
.sbm-success:hover,
.button.btn.btn-default.wc-forward.sbm-success:hover {
    background: var(--sbm-primary-hover, #1e293b) !important;
    border-color: var(--sbm-primary-hover, #1e293b) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Outline / Default Action */
.sbm-btn-outline {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.sbm-btn-outline:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-1px);
}

/* Danger / Delete Action */
.sbm-btn-danger-outline,
.sbm-danger,
.button.btn.btn-default.wc-forward.sbm-danger {
    background: #ffffff !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

.sbm-btn-danger-outline:hover,
.sbm-danger:hover,
.button.btn.btn-default.wc-forward.sbm-danger:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
    transform: translateY(-1px);
}

/* Pay / Approve Action (Emerald Green) */
.sbm-btn-pay,
.sbm-pay,
.button.btn.btn-default.wc-forward.sbm-pay {
    background: #10b981 !important;
    border: 1px solid #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2) !important;
}

.sbm-btn-pay:hover,
.sbm-pay:hover,
.button.btn.btn-default.wc-forward.sbm-pay:hover {
    background: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3) !important;
}

/* Edit in Cart Action (Indigo) */
.sbm-btn-purple,
.sbm-purple,
.button.btn.btn-default.wc-forward.sbm-purple {
    background: #6366f1 !important;
    border: 1px solid #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.2) !important;
}

.sbm-btn-purple:hover,
.sbm-purple:hover,
.button.btn.btn-default.wc-forward.sbm-purple:hover {
    background: #4f46e5 !important;
    border-color: #4338ca !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3) !important;
}

/* ==========================================================================
   Modern Status Badges & Pills
   ========================================================================== */
.sbm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--sbm-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sbm-badge-awaiting {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.sbm-badge-review {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

.sbm-badge-approved {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.sbm-badge-rejected {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.sbm-badge-info {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.sbm-badge-neutral {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.sbm-alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

button.button.btn.btn-default.wc-forward.sbm-cancel-edit-btn {
    border-radius: var(--btn-default-brd-radius) !important;
}

.sbm-alert-success {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;
}

.sbm-approval-notice {
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
    color: #1e40af;
    font-size: 14px;
    line-height: 1.5;
}

.sbm-cart-banner {
    background: #f8f9fa;
    border: 2px solid #2271b1;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

/* Global Main Content & Header Banner Wrapper & Elements */
.sbm-site-banner-wrapper,
.sbm-site-banner-wrapper.sbm-header-banner-wrap,
.sbm-site-banner-wrapper.sbm-main-content-banner-wrap {
    width: 100%;
    padding: 16px 20px 0;
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    z-index: 99;
}

.sbm-cart-banner-global,
.sbm-cart-banner.sbm-cart-banner-global,
.sbm-site-banner-wrapper .sbm-cart-banner-global {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 18px auto;
    background: #f0f7ff;
    border: 2px solid #2271b1;
    border-radius: 8px;
    padding: 14px 18px;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(34, 113, 177, 0.12);
}

.sbm-banner-content-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.sbm-banner-text {
    flex: 1 1 300px;
}

.sbm-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sbm-btn.sbm-purple,
a.sbm-btn.sbm-purple {
    background-color: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

.sbm-btn.sbm-purple:hover,
a.sbm-btn.sbm-purple:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

.sbm-cancel-edit-btn,
.button.sbm-cancel-edit-btn,
button.sbm-cancel-edit-btn,
.btn.sbm-cancel-edit-btn {
    background: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    background-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    border: 1px solid var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border-radius: var(--sbm-radius-btn, 6px) !important;
}

.sbm-cancel-edit-btn:hover,
.button.sbm-cancel-edit-btn:hover,
button.sbm-cancel-edit-btn:hover,
.btn.sbm-cancel-edit-btn:hover {
    background: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    background-color: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    border-color: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    color: #ffffff !important;
}

/* Checkout Address Card & Order Edit Details */
.sbm-card.sbm-checkout-address-card,
.sbm-checkout-address-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px 28px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Order-Pay Page (/checkout/order-pay/): Centered and constrained address card */
body.woocommerce-order-pay #sbm-checkout-address-card,
.woocommerce-order-pay #sbm-checkout-address-card,
body.woocommerce-checkout.woocommerce-order-pay #sbm-checkout-address-card,
.woocommerce-page.woocommerce-order-pay #sbm-checkout-address-card,
#sbm-checkout-address-card.sbm-order-pay-card,
#sbm-checkout-address-card[data-context="checkout_pay"] {
    margin: 0 auto !important;
    max-width: 600px !important;
}

.sbm-address-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.sbm-address-header-title {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.sbm-address-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 9%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 20%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.sbm-address-icon svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    width: 22px !important;
    height: 22px !important;
}

.sbm-address-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.sbm-branch-badge {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    border: 1px solid #bfdbfe !important;
    display: inline-block !important;
    margin-top: 4px !important;
}

.sbm-edit-address-btn {
    background: #0f172a !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    transition: background 0.15s ease !important;
}

.sbm-edit-address-btn:hover {
    background: #1e293b !important;
}

.sbm-address-view-section {
    width: 100% !important;
    margin-top: 20px !important;
}

.sbm-address-block {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 20px 22px !important;
    box-sizing: border-box !important;
}

.sbm-address-block-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid #edf2f7 !important;
    padding-bottom: 12px !important;
}

.sbm-address-block-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.sbm-address-block-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

.sbm-address-text {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: #475569 !important;
}

.sbm-address-text strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.sbm-address-text .sbm-muted {
    color: inherit !important;
    font-style: normal !important;
}

.sbm-address-text .sbm-muted strong {
    color: #0f172a !important;
}

.sbm-edit-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.sbm-btn-sm {
    padding: 5px 11px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

.sbm-autofill-branch-btn {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 600;
}

.sbm-autofill-branch-btn:hover {
    background: #cbd5e1 !important;
}

.sbm-cancel-btn {
    background: #64748b !important;
    color: #fff !important;
}

.sbm-cancel-btn:hover {
    background: #475569 !important;
}

.sbm-alert-error {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 15px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.sbm-field input:focus,
.sbm-field textarea:focus,
.sbm-field select:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

@media (max-width: 700px) {
    .sbm-table {
        font-size: 13px;
    }

    .sbm-table th,
    .sbm-table td {
        padding: 7px;
    }

    .sbm-address-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Locked checkout fields and branch banner */
.sbm-checkout-branch-banner {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #2563eb;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.sbm-checkout-branch-banner .sbm-branch-badge {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #2563eb;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.sbm-checkout-branch-banner .sbm-branch-info {
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.5;
}

/* Locked checkout fields for branch users */
.woocommerce-checkout .sbm-locked-field input,
.woocommerce-checkout .sbm-locked-field textarea,
.woocommerce-checkout .sbm-locked-field select,
.woocommerce-checkout .sbm-locked-field .select2-container,
.woocommerce-checkout .sbm-locked-field .select2-selection,
body.sbm-is-branch-user .woocommerce-billing-fields input,
body.sbm-is-branch-user .woocommerce-billing-fields textarea,
body.sbm-is-branch-user .woocommerce-billing-fields select,
body.sbm-is-branch-user .woocommerce-billing-fields .select2,
body.sbm-is-branch-user .woocommerce-billing-fields .select2-container,
body.sbm-is-branch-user .woocommerce-billing-fields .select2-selection {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Overlay preventing any interactions with billing fields for branch users */
body.sbm-is-branch-user .woocommerce-billing-fields {
    position: relative;
}

body.sbm-is-branch-user .woocommerce-billing-fields__field-wrapper {
    position: relative;
}

body.sbm-is-branch-user .woocommerce-billing-fields__field-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    cursor: not-allowed;
    background: rgba(241, 245, 249, 0.2);
    pointer-events: all;
}

/* Hide ship to different address checkbox and fields for branch users if same address */
body.sbm-is-branch-user:not(.sbm-has-separate-shipping) #ship-to-different-address,
body.sbm-is-branch-user:not(.sbm-has-separate-shipping) .woocommerce-shipping-fields {
    display: none !important;
}

body.sbm-is-branch-user.sbm-has-separate-shipping #ship-to-different-address {
    pointer-events: none !important;
}

body.sbm-is-branch-user.sbm-has-separate-shipping .woocommerce-shipping-fields input,
body.sbm-is-branch-user.sbm-has-separate-shipping .woocommerce-shipping-fields select {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Hide edit address button in My Account addresses list for branch users */
body.sbm-is-branch-user .woocommerce-Address-title a.edit,
body.sbm-is-branch-user a.edit[href*="edit-address"] {
    display: none !important;
}

/* Locked account fields and notice for branch users */
body.sbm-is-branch-user form.edit-account input#account_first_name,
body.sbm-is-branch-user form.edit-account input#account_last_name,
body.sbm-is-branch-user form.edit-account input#account_display_name,
body.sbm-is-branch-user form.edit-account input#account_email,
body.sbm-is-branch-user form.woocommerce-EditAccountForm input#account_first_name,
body.sbm-is-branch-user form.woocommerce-EditAccountForm input#account_last_name,
body.sbm-is-branch-user form.woocommerce-EditAccountForm input#account_display_name,
body.sbm-is-branch-user form.woocommerce-EditAccountForm input#account_email,
.sbm-locked-field,
input.sbm-locked-field,
body.sbm-is-branch-user input#billing_company,
body.sbm-is-branch-user input#shipping_company,
input[name="billing_company"].sbm-locked-field,
input[name="shipping_company"].sbm-locked-field {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    border-color: #cbd5e1 !important;
    user-select: none !important;
    pointer-events: none !important;
}

.sbm-account-lock-notice {
    background-color: #f8fafc;
    border-left: 4px solid #0284c7;
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Order Date Filter Bar Styles (WoodMart Integration)
   ========================================================================== */
.sbm-order-filter-card {
    background: #ffffff !important;
    border: 1px solid var(--sbm-border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.sbm-order-filter-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Card Header with Subtitle and Icon (Filter Orders / Orders) */
.sbm-card-header-with-sub {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

.sbm-card-header-icon {
    flex-shrink: 0 !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1px !important;
}

.sbm-card-header-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: var(--wd-primary-color, var(--sbm-primary, currentColor)) !important;
    color: var(--wd-primary-color, var(--sbm-primary, currentColor)) !important;
    display: block !important;
}

.sbm-card-header-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.sbm-card-main-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

.sbm-card-subtitle {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 3px 0 0 0 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

.sbm-card-header-badge {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

.sbm-total-items-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 14px !important;
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    border: 1px solid #dbeafe !important;
    white-space: nowrap !important;
}

.sbm-filter-active-tag {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* Modern Filter Fields Grid */
.sbm-filter-fields-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

.sbm-filter-fields-4col {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 992px) {

    .sbm-filter-fields-row,
    .sbm-filter-fields-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {

    .sbm-filter-fields-row,
    .sbm-filter-fields-4col {
        grid-template-columns: 1fr !important;
    }
}

.sbm-filter-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.sbm-filter-col label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Input Icon Box & Select Icon Box */
.sbm-input-icon-box,
.sbm-select-icon-box {
    position: relative !important;
    width: 100% !important;
}

.sbm-field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    pointer-events: none !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 1 !important;
}

.sbm-select-chevron {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    pointer-events: none !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 1 !important;
}

.sbm-input-date {
    padding-left: 42px !important;
    padding-right: 14px !important;
    height: 44px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    color: #1e293b !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sbm-input-date:focus {
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 18%, transparent) !important;
}

.sbm-select-custom {
    padding: 0 38px 0 14px !important;
    height: 44px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    color: #1e293b !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sbm-select-custom:focus {
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 18%, transparent) !important;
}

/* Filter Submit Button & Reset */
.sbm-filter-btn-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

.sbm-filter-submit-btn,
.btn.btn-color-primary.sbm-filter-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    background-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border: 1px solid var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    min-height: 40px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

.sbm-filter-submit-btn:hover,
.btn.btn-color-primary.sbm-filter-submit-btn:hover {
    background: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    background-color: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    border-color: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 35%, transparent) !important;
    transform: translateY(-1px) !important;
}

.sbm-filter-submit-btn svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

.sbm-filter-reset-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border-radius: 7px !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.15s ease !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
}

.sbm-filter-reset-link:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Legacy Filter Grid Fallback */
.sbm-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
    align-items: flex-end;
    gap: 14px;
}

@media (max-width: 900px) {
    .sbm-filter-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.sbm-filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sbm-filter-item label {
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

.sbm-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 1px;
}

/* ==========================================================================
   Orders Card & Table Layout
   ========================================================================== */
.sbm-orders-list-card {
    background: #ffffff !important;
    border: 1px solid var(--sbm-border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.sbm-orders-table,
.woocommerce-orders-table.sbm-orders-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    border: none !important;
}

.sbm-orders-table th,
.woocommerce-orders-table.sbm-orders-table th,
.woocommerce-orders-table.shop_table th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 13px 18px !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-align: left !important;
}

.sbm-orders-table td,
.woocommerce-orders-table.sbm-orders-table td,
.woocommerce-orders-table.shop_table td {
    padding: 16px 18px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    color: #1e293b !important;
    background: transparent !important;
}

.sbm-orders-table tr:hover td,
.woocommerce-orders-table.sbm-orders-table tr:hover td,
.woocommerce-orders-table.shop_table tr:hover td {
    background-color: #f8fafc !important;
}

.sbm-orders-table tr:last-child td,
.woocommerce-orders-table.sbm-orders-table tr:last-child td {
    border-bottom: none !important;
}

/* Order Number */
.sbm-order-number-text {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.sbm-order-number-text:hover {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    text-decoration: underline !important;
}

/* Status Pills with Check/Clock Icons */
.sbm-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

.sbm-status-pill .sbm-status-icon {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* Completed & Approved: Green */
.sbm-status-pill.sbm-status-completed,
.sbm-status-pill.sbm-status-approved {
    background-color: #ecfdf5 !important;
    color: #16a34a !important;
    border: 1px solid #d1fae5 !important;
}

/* Processing */
.sbm-status-pill.sbm-status-processing {
    background-color: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 10%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 22%, #ffffff) !important;
}

/* Pending / On-Hold: Amber */
.sbm-status-pill.sbm-status-pending,
.sbm-status-pill.sbm-status-on-hold,
.sbm-status-pill.sbm-status-awaiting-approval {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fef3c7 !important;
}

/* Cancelled / Failed: Red */
.sbm-status-pill.sbm-status-cancelled,
.sbm-status-pill.sbm-status-failed,
.sbm-status-pill.sbm-status-rejected {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fee2e2 !important;
}

/* Default / Under Review */
.sbm-status-pill.sbm-status-under-review,
.sbm-status-pill.sbm-status-info {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Total Price & Items Subtitle */
.sbm-order-total-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.sbm-order-total-cell .sbm-total-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.sbm-order-total-cell .sbm-total-sub-items {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

/* Action View Pill Button */
.sbm-btn-view-pill,
.woocommerce-orders-table__cell-order-actions a.woocommerce-button.view,
.woocommerce-orders-table__cell-order-actions a.button.view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 16px !important;
    background-color: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 8%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 22%, #ffffff) !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    white-space: nowrap !important;
    min-height: 32px !important;
}

.sbm-btn-view-pill:hover,
.woocommerce-orders-table__cell-order-actions a.woocommerce-button.view:hover,
.woocommerce-orders-table__cell-order-actions a.button.view:hover {
    background-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 28%, transparent) !important;
    transform: translateY(-1px) !important;
}

.sbm-btn-view-pill svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
}

.sbm-pagination-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* ==========================================================================
   Branch Selector Toolbar Card (Branch Users Page)
   ========================================================================== */
.sbm-selector-toolbar-card {
    padding: 16px 20px;
    margin-bottom: 24px;
}

.sbm-selector-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.sbm-selector-field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 320px;
}

.sbm-selector-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    margin: 0;
    white-space: nowrap;
}

.sbm-selector-field form {
    margin: 0;
    flex: 1 1 240px;
    max-width: 360px;
}

.sbm-active-branch-info {
    text-align: right;
}

@media (max-width: 650px) {
    .sbm-active-branch-info {
        text-align: left;
        width: 100%;
    }
}

.sbm-active-branch-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.sbm-active-branch-sub {
    font-size: 12px;
    color: #64748b;
}

/* ==========================================================================
   Order Details KPI Stat Cards (4 Grid)
   ========================================================================== */
.sbm-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

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

@media (max-width: 500px) {
    .sbm-stats-grid {
        grid-template-columns: 1fr;
    }
}

.sbm-stat-card {
    background: #ffffff;
    border: 1px solid var(--sbm-border-color, #e2e8f0);
    border-radius: var(--sbm-radius-card, 10px);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--sbm-shadow-card);
    transition: all 0.2s ease;
}

.sbm-stat-card:hover {
    box-shadow: var(--sbm-shadow-hover);
    transform: translateY(-2px);
}

.sbm-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sbm-primary, #1e293b);
    flex-shrink: 0;
}

.sbm-stat-content {
    flex: 1;
    overflow: hidden;
}

.sbm-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 4px;
}

.sbm-stat-val {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}

.sbm-stat-price {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

/* Items Table details */
.sbm-items-table th.sbm-th-price,
.sbm-items-table th.sbm-th-qty,
.sbm-items-table th.sbm-th-total {
    text-align: right;
}

.sbm-items-table td[data-title="Unit Price"],
.sbm-items-table td[data-title="Quantity"],
.sbm-items-table td[data-title="Line Total"] {
    text-align: right;
}

.sbm-thumb-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbm-qty-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.sbm-unit-price {
    font-size: 14px;
    color: #475569;
}

.sbm-line-total {
    font-size: 14px;
    color: #0f172a;
}

.sbm-footer-total {
    font-size: 17px;
    color: #0f172a;
}

/* Order Actions Card */
.sbm-order-actions-card {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.sbm-order-actions-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Salon Owner Checkout Branch Address Selector Card */
.sbm-checkout-owner-address-card {
    border-left: 4px solid #2563eb;
    background: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sbm-owner-address-header {
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.sbm-address-mode-switcher {
    display: inline-flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sbm-mode-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s ease;
    user-select: none;
    margin: 0;
}

.sbm-mode-pill input[type="radio"] {
    display: none;
}

.sbm-mode-pill.sbm-active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sbm-branch-preview-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 12px;
}

.sbm-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.sbm-applied-badge {
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.sbm-preview-text {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
}

/* Cart Edit Mode: Checkout & Cancel Edit Buttons */
.sbm-update-checkout-btn {
    position: relative;
    transition: all 0.25s ease;
}

.sbm-cancel-edit-wrap {
    margin-top: 10px;
    width: 100%;
    display: block;
    clear: both;
}

/* Prevent any accidental injection into breadcrumbs, header, or step indicators */
.step-checkout .sbm-cancel-edit-wrap,
[class*="step-checkout"] .sbm-cancel-edit-wrap,
.checkout-steps .sbm-cancel-edit-wrap,
.woocommerce-breadcrumb .sbm-cancel-edit-wrap,
.breadcrumbs .sbm-cancel-edit-wrap,
header .sbm-cancel-edit-wrap,
nav .sbm-cancel-edit-wrap {
    display: none !important;
}

.sbm-cancel-edit-btn,
.button.sbm-cancel-edit-btn,
button.sbm-cancel-edit-btn,
.btn.sbm-cancel-edit-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 18px !important;
    background: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    background-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    border: 1px solid var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border-radius: var(--sbm-radius-btn, 6px) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: normal !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.sbm-cancel-edit-btn:hover,
.button.sbm-cancel-edit-btn:hover,
button.sbm-cancel-edit-btn:hover,
.btn.sbm-cancel-edit-btn:hover {
    background: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    background-color: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    border-color: var(--wd-primary-color-hover, var(--sbm-primary-hover, color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 85%, #000000))) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 28%, transparent) !important;
}

.sbm-cancel-edit-btn:active,
.button.sbm-cancel-edit-btn:active,
button.sbm-cancel-edit-btn:active,
.btn.sbm-cancel-edit-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.sbm-banner-actions .sbm-cancel-edit-btn,
.sbm-cart-banner .sbm-cancel-edit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 8px 16px !important;
}


/* ==========================================================================
   Modern My Account Dashboard & Sidebar Navigation (WoodMart Theme Integration)
   ========================================================================== */

:root {
    --sbm-dash-primary: var(--wd-primary-color, #2b6cb0);
    --sbm-dash-primary-hover: var(--wd-primary-color-hover, #1d4ed8);
    --sbm-dash-primary-tint: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 9%, #ffffff);
    --sbm-dash-primary-tint-hover: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 15%, #ffffff);
    --sbm-dash-primary-border: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 28%, #e2e8f0);
    --sbm-dash-title: var(--wd-title-color, #0f172a);
    --sbm-dash-text: var(--wd-text-color, #64748b);
    --sbm-dash-border: #e2e8f0;
    --sbm-dash-card-bg: #ffffff;
}

/* Hide WoodMart's default plain/duplicate dashboard links list and cards */
.woocommerce-MyAccount-content .wd-my-account-links,
.woocommerce-MyAccount-content .wd-my-acc-links,
.woocommerce-MyAccount-content .wd-nav-my-acc,
.woocommerce-MyAccount-content ul.wd-nav-my-acc,
.woocommerce-MyAccount-content ul.wd-my-account-links,
.woocommerce-MyAccount-content ul.wd-my-acc-links,
.woocommerce-MyAccount-content ul[class*="wd-my-acc"],
.woocommerce-MyAccount-content ul[class*="wd-nav-my-acc"],
.woocommerce-MyAccount-content ul.woocommerce-MyAccount-navigation-link,
.woocommerce-MyAccount-content nav.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content div.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content .wd-my-account-nav,
.woocommerce-MyAccount-content li[class*="wd-my-acc"],
.woocommerce-MyAccount-content li[class*="woocommerce-MyAccount-navigation-link"],
.woocommerce-MyAccount-content .wd-my-acc-nav-icon,
.woocommerce-MyAccount-content .wd-nav-icon,
.woocommerce-MyAccount-content a[class*="wd-my-acc"] {
    display: none !important;
}

/* Hide WoodMart's default cog/font icon pseudo-elements to use our SVG system cleanly */
.woocommerce-MyAccount-navigation a::before,
.woocommerce-MyAccount-navigation a::after,
.woocommerce-MyAccount-navigation .wd-nav-icon {
    display: none !important;
}

/* --------------------------------------------------------------------------
   1. Left Sidebar Navigation (.woocommerce-MyAccount-navigation)
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation.sbm-account-navigation,
.woocommerce-MyAccount-navigation {
    margin-bottom: 30px;
}

.sbm-nav-header {
    display: none !important;
}

.woocommerce-MyAccount-navigation ul.sbm-nav-list,
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.woocommerce-MyAccount-navigation ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.woocommerce-MyAccount-navigation ul li a,
.sbm-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    background-color: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    position: relative;
    user-select: none;
}

.sbm-nav-link-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.sbm-nav-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.sbm-nav-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.sbm-nav-title {
    font-size: 14px;
    font-weight: inherit;
    color: inherit;
}

.sbm-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sbm-nav-arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* Sidebar Item Hover */
.woocommerce-MyAccount-navigation ul li a:hover,
.sbm-nav-link:hover {
    background-color: #f8fafc !important;
    color: var(--sbm-dash-primary, #2b6cb0) !important;
}

.woocommerce-MyAccount-navigation ul li a:hover .sbm-nav-icon,
.sbm-nav-link:hover .sbm-nav-icon {
    color: var(--sbm-dash-primary, #2b6cb0);
}

.woocommerce-MyAccount-navigation ul li a:hover .sbm-nav-arrow,
.sbm-nav-link:hover .sbm-nav-arrow {
    color: var(--sbm-dash-primary, #2b6cb0);
    transform: translateX(3px);
}

/* Sidebar Item Active State */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.active a,
.sbm-nav-link.sbm-nav-link-active {
    background-color: #eff6ff !important;
    background-color: var(--sbm-dash-primary-tint) !important;
    color: var(--sbm-dash-primary, #2b6cb0) !important;
    font-weight: 600 !important;
}

.woocommerce-MyAccount-navigation ul li.is-active .sbm-nav-icon,
.woocommerce-MyAccount-navigation ul li.active .sbm-nav-icon,
.sbm-nav-link.sbm-nav-link-active .sbm-nav-icon {
    color: var(--sbm-dash-primary, #2b6cb0) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active .sbm-nav-arrow,
.woocommerce-MyAccount-navigation ul li.active .sbm-nav-arrow,
.sbm-nav-link.sbm-nav-link-active .sbm-nav-arrow {
    color: var(--sbm-dash-primary, #2b6cb0) !important;
}

/* --------------------------------------------------------------------------
   Responsive Hamburger Menu for Phone & Tablet (<= 1024px)
   Inline with .woocommerce-MyAccount-title / .entry-title
   -------------------------------------------------------------------------- */

/* Desktop defaults: Hide hamburger button, backdrop, and drawer header */
@media (min-width: 1025px) {

    #sbm-account-nav-toggle,
    .sbm-nav-hamburger-btn,
    #sbm-account-nav-backdrop,
    .sbm-nav-backdrop,
    .sbm-nav-drawer-header {
        display: none !important;
    }

    .sbm-title-hamburger-wrapper {
        display: block;
        width: 100%;
    }
}

/* Phone and Tablet view: Convert navigation into drawer and dock hamburger inline with title */
@media (max-width: 1024px) {

    /* Prevent background scrolling when navigation drawer is open */
    body.sbm-nav-drawer-active {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Container putting title and hamburger button inline on the same row */
    .sbm-title-hamburger-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 22px !important;
        padding: 7px 11px !important;
        background-color: #fff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
    }

    /* Remove WoodMart default bottom border on title in phone view */
    .woocommerce-account .wd-builder-off .woocommerce-MyAccount-title,
    .wd-builder-off .woocommerce-MyAccount-title,
    .sbm-title-hamburger-wrapper .woocommerce-MyAccount-title,
    .sbm-title-hamburger-wrapper .entry-title,
    .sbm-title-hamburger-wrapper h1,
    .sbm-title-hamburger-wrapper h2 {
        border-bottom: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        flex: 1 1 auto !important;
        word-break: break-word !important;
    }

    /* Hamburger Toggle Button placed inline with title */
    #sbm-account-nav-toggle,
    .sbm-nav-hamburger-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px 14px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        color: #1e293b !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
        flex-shrink: 0 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        outline: none !important;
        text-decoration: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    #sbm-account-nav-toggle:hover,
    .sbm-nav-hamburger-btn:hover,
    #sbm-account-nav-toggle:focus-visible,
    .sbm-nav-hamburger-btn:focus-visible {
        background: #f8fafc !important;
        border-color: var(--sbm-dash-primary, #2b6cb0) !important;
        color: var(--sbm-dash-primary, #2b6cb0) !important;
        box-shadow: 0 2px 6px rgba(43, 108, 176, 0.16) !important;
    }

    #sbm-account-nav-toggle.is-active,
    .sbm-nav-hamburger-btn.is-active {
        background: var(--sbm-dash-primary-tint, #eff6ff) !important;
        border-color: var(--sbm-dash-primary, #2b6cb0) !important;
        color: var(--sbm-dash-primary, #2b6cb0) !important;
    }

    /* 3-Bar Animated Hamburger Icon */
    .sbm-hamburger-icon {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 17px !important;
        height: 13px !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    .sbm-hamburger-bar {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #1e293b !important;
        border-radius: 2px !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.2s ease !important;
        transform-origin: center !important;
    }

    #sbm-account-nav-toggle:hover .sbm-hamburger-bar,
    .sbm-nav-hamburger-btn:hover .sbm-hamburger-bar {
        background-color: var(--sbm-dash-primary, #2b6cb0) !important;
    }

    /* Animate bars to 'X' when active */
    #sbm-account-nav-toggle.is-active .sbm-hamburger-bar:nth-child(1),
    .sbm-nav-hamburger-btn.is-active .sbm-hamburger-bar:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg) !important;
        background-color: var(--sbm-dash-primary, #2b6cb0) !important;
    }

    #sbm-account-nav-toggle.is-active .sbm-hamburger-bar:nth-child(2),
    .sbm-nav-hamburger-btn.is-active .sbm-hamburger-bar:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    #sbm-account-nav-toggle.is-active .sbm-hamburger-bar:nth-child(3),
    .sbm-nav-hamburger-btn.is-active .sbm-hamburger-bar:nth-child(3) {
        transform: translateY(-5.5px) rotate(-45deg) !important;
        background-color: var(--sbm-dash-primary, #2b6cb0) !important;
    }

    .sbm-hamburger-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
    }

    /* Backdrop overlay for mobile drawer */
    #sbm-account-nav-backdrop,
    .sbm-nav-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(15, 23, 42, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 999988 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.28s ease, visibility 0.28s ease !important;
    }

    #sbm-account-nav-backdrop.sbm-backdrop-active,
    .sbm-nav-backdrop.sbm-backdrop-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Offcanvas Navigation Drawer on Tablet & Mobile */
    .woocommerce-MyAccount-navigation.sbm-account-navigation,
    .woocommerce-MyAccount-navigation {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 310px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.16) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
        visibility: hidden !important;
        pointer-events: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .woocommerce-MyAccount-navigation.sbm-account-navigation.sbm-drawer-open,
    .woocommerce-MyAccount-navigation.sbm-drawer-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* RTL support for offcanvas drawer */
    body.rtl .woocommerce-MyAccount-navigation.sbm-account-navigation,
    body.rtl .woocommerce-MyAccount-navigation {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        box-shadow: -4px 0 28px rgba(0, 0, 0, 0.16) !important;
    }

    body.rtl .woocommerce-MyAccount-navigation.sbm-account-navigation.sbm-drawer-open,
    body.rtl .woocommerce-MyAccount-navigation.sbm-drawer-open {
        transform: translateX(0) !important;
    }

    /* Mobile Drawer Header */
    .sbm-nav-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
    }

    .sbm-drawer-title-box {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .sbm-drawer-title-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--sbm-dash-primary, #2b6cb0) !important;
    }

    .sbm-drawer-heading {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    .sbm-nav-drawer-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        color: #64748b !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        line-height: 1 !important;
        outline: none !important;
    }

    .sbm-nav-drawer-close:hover,
    .sbm-nav-drawer-close:focus-visible {
        background: #e2e8f0 !important;
        color: #0f172a !important;
        border-color: #cbd5e1 !important;
    }

    /* Drawer Inner Navigation List */
    .woocommerce-MyAccount-navigation ul.sbm-nav-list,
    .woocommerce-MyAccount-navigation ul {
        padding: 12px 10px !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        gap: 4px !important;
    }

    /* Ensure content area expands to 100% since navigation is offcanvas */
    .woocommerce-account .woocommerce-MyAccount-content,
    .woocommerce-MyAccount-content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }
}

/* Extra small phone screens */
@media (max-width: 480px) {
    .sbm-title-hamburger-wrapper {
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    #sbm-account-nav-toggle,
    .sbm-nav-hamburger-btn {
        padding: 7px 11px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }

    .sbm-hamburger-label {
        font-size: 12px !important;
    }
}


/* --------------------------------------------------------------------------
   2. Modern Dashboard Welcome Greeting (.sbm-dashboard-welcome)
   -------------------------------------------------------------------------- */
.sbm-dashboard-wrapper {
    margin-bottom: 24px;
}

.sbm-dashboard-welcome {
    margin-bottom: 24px;
}

.sbm-dashboard-greeting {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--sbm-dash-title, #0f172a) !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.sbm-dashboard-greeting strong {
    font-weight: 700 !important;
    color: var(--sbm-dash-title, #0f172a) !important;
}

.sbm-dashboard-logout-notice {
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
}

.sbm-dashboard-logout-notice a {
    color: var(--sbm-dash-primary, #2b6cb0) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.sbm-dashboard-logout-notice a:hover {
    color: var(--sbm-dash-primary-hover, #1d4ed8) !important;
    text-decoration: underline !important;
}

.sbm-dashboard-intro {
    font-size: 14.5px !important;
    color: var(--sbm-dash-text, #64748b) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}


/* --------------------------------------------------------------------------
   3. Modern Dashboard Cards Grid (.sbm-dashboard-grid)
   -------------------------------------------------------------------------- */
.sbm-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

/* Card Outer Shell */
.sbm-dashboard-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 18px !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden;
}

/* Card Circular Icon Badge */
.sbm-card-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #eff6ff !important;
    background-color: var(--sbm-dash-primary-tint) !important;
    color: var(--sbm-dash-primary, #2b6cb0) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbm-card-icon-wrap svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Card Body & Text */
.sbm-card-body {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.sbm-card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--sbm-dash-title, #1e293b) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease;
}

.sbm-card-desc {
    font-size: 13px !important;
    color: var(--sbm-dash-text, #64748b) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Card Right Arrow */
.sbm-card-arrow {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbm-card-arrow svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}

/* Card Hover Elevation & Theme Accent */
.sbm-dashboard-card:hover {
    border-color: var(--sbm-dash-primary-border, #93c5fd) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.07), 0 4px 8px -2px rgba(0, 0, 0, 0.03) !important;
}

.sbm-dashboard-card:hover .sbm-card-icon-wrap {
    background-color: #dbeafe !important;
    background-color: var(--sbm-dash-primary-tint-hover) !important;
    transform: scale(1.04) !important;
}

.sbm-dashboard-card:hover .sbm-card-arrow {
    color: var(--sbm-dash-primary, #2b6cb0) !important;
    transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   4. Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sbm-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .sbm-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .sbm-dashboard-greeting {
        font-size: 22px !important;
    }

    .sbm-dashboard-card {
        padding: 16px 14px !important;
    }

    .sbm-card-icon-wrap {
        width: 44px !important;
        height: 44px !important;
    }

    .sbm-card-icon-wrap svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ==========================================================================
   Order Items Product Variations & Details
   ========================================================================== */
.sbm-order-item-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sbm-order-item-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.sbm-order-item-thumb img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    display: block !important;
}

.sbm-order-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}

.sbm-order-item-name {
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.sbm-order-item-sku {
    font-size: 12px;
    color: #64748b;
}

.sbm-order-item-meta {
    margin-top: 5px;
    margin-bottom: 0px;
}

.sbm-item-variation-list,
.wc-item-meta.sbm-item-variation-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.sbm-item-variation-list strong.wc-item-meta-label {
    margin-bottom: 0px;
}


.sbm-item-variation-list li,
.wc-item-meta.sbm-item-variation-list li {
    display: inline-flex !important;
    align-items: center !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #334155 !important;
    margin: 0 !important;
}

.sbm-item-variation-list li strong,
.sbm-item-variation-list li .wc-item-meta-label,
.wc-item-meta.sbm-item-variation-list li strong,
.wc-item-meta.sbm-item-variation-list li .wc-item-meta-label {
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-right: 4px !important;
}

.sbm-item-variation-list p,
.wc-item-meta.sbm-item-variation-list p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Branch Orders List - Item Count & Dropdown Preview */
.sbm-order-items-dropdown {
    margin-top: 5px;
    font-size: 12px;
}

.sbm-order-items-toggle {
    cursor: pointer;
    color: #2563eb;
    font-weight: 500;
    user-select: none;
    outline: none;
    font-size: 12px;
    display: inline-block;
}

.sbm-order-items-toggle:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.sbm-order-items-preview-list {
    margin-top: 6px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-width: 200px;
    max-width: 320px;
}

.sbm-preview-item {
    padding: 5px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.sbm-preview-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sbm-preview-item-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.sbm-preview-item-qty {
    font-weight: 600;
    color: #475569;
}

.sbm-preview-item-title {
    font-weight: 500;
    color: #1e293b;
    word-break: break-word;
}

.sbm-order-items-preview-list .sbm-order-item-meta {
    margin-top: 3px;
    margin-bottom: 0px !important;
}

.sbm-order-items-preview-list .sbm-item-variation-list,
.sbm-order-items-preview-list .wc-item-meta {
    margin-bottom: 0px !important;
}

.sbm-order-items-preview-list .sbm-item-variation-list li,
.sbm-order-items-preview-list .wc-item-meta.sbm-item-variation-list li {
    font-size: 11px !important;
    padding: 1px 6px !important;
    margin-bottom: 0px !important;
}

/* ==========================================================================
   Order Details Page (View Order - WooCommerce & WoodMart)
   ========================================================================== */
.sbm-order-details-container {
    width: 100%;
    margin-bottom: 40px;
    font-family: inherit;
}

/* Breadcrumb Navigation Bar */
.sbm-order-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

.sbm-order-breadcrumbs a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.sbm-order-breadcrumbs a:hover {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-breadcrumb-home {
    display: inline-flex;
    align-items: center;
    color: #64748b;
}

.sbm-breadcrumb-home:hover {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    color: #cbd5e1;
    line-height: 1;
}

.sbm-breadcrumb-current {
    color: #334155;
    font-weight: 500;
}

/* Header Card */
.sbm-order-details-header-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.sbm-details-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sbm-details-main-heading {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.sbm-details-sub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #64748b;
    font-weight: 400;
}

.sbm-order-num-label {
    color: #475569;
    font-weight: 500;
}

.sbm-details-sub-row .sbm-dot-sep {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
}

.sbm-order-date-label {
    color: #64748b;
}

/* Two-Column Grid Layout */
.sbm-order-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: start;
}

.sbm-details-main-col {
    display: flex;
    flex-direction: column;
}

.sbm-details-side-col {
    display: flex;
    flex-direction: column;
}

/* Section Cards */
.sbm-items-ordered-card,
.sbm-order-summary-card,
.sbm-address-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.sbm-section-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Items Ordered Table */
.sbm-ordered-items-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border-spacing: 0;
}

.sbm-ordered-items-table th {
    padding: 0 0 14px 0;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    text-transform: none;
    letter-spacing: normal;
}

.sbm-ordered-items-table .sbm-th-product {
    text-align: left;
}

.sbm-ordered-items-table .sbm-th-qty {
    text-align: center;
    width: 110px;
}

.sbm-ordered-items-table .sbm-th-price {
    text-align: right;
    width: 140px;
}

.sbm-ordered-item-row td {
    padding: 20px 0;
    border-bottom: 1px solid #f8fafc;
    vertical-align: middle;
}

.sbm-ordered-item-row:last-child td {
    border-bottom: none;
    padding-bottom: 6px;
}

/* Item Cell: Thumbnail + Meta */
.sbm-ordered-item-cell {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sbm-ordered-item-thumb {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    border: 1px solid #eef2f6;
    background: #fbfcfe;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 3px;
}

.sbm-ordered-item-thumb img,
.sbm-ordered-item-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.sbm-ordered-item-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.sbm-ordered-item-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sbm-ordered-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.38;
}

.sbm-ordered-item-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}

.sbm-ordered-item-title a:hover {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-ordered-item-var {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

.sbm-ordered-item-var .sbm-order-item-meta,
.sbm-ordered-item-var .wc-item-meta,
.sbm-ordered-item-var .sbm-item-variation-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sbm-ordered-item-var .wc-item-meta li,
.sbm-ordered-item-var .sbm-item-variation-list li {
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.sbm-ordered-item-var .wc-item-meta-label {
    font-weight: 500 !important;
    color: #64748b !important;
}

.sbm-ordered-item-var p {
    display: inline !important;
    margin: 0 !important;
}

/* Quantity Cell */
.sbm-td-qty {
    text-align: center;
}

.sbm-qty-display {
    font-size: 14.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

/* Price Cell */
.sbm-td-price {
    text-align: right;
}

.sbm-price-display {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.sbm-price-display .woocommerce-Price-amount {
    font-weight: 700;
    color: #0f172a;
}

/* Order Summary Rows */
.sbm-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sbm-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14.5px;
    color: #475569;
}

.sbm-summary-label {
    color: #475569;
    font-weight: 500;
}

.sbm-summary-val {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

.sbm-summary-val .woocommerce-Price-amount {
    font-weight: 600;
    color: #0f172a;
}

.sbm-discount-val {
    color: #dc2626 !important;
    font-weight: 600;
}

.sbm-free-shipping {
    color: #16a34a !important;
    font-weight: 600;
}

.sbm-summary-note-row {
    align-items: flex-start;
}

.sbm-summary-note-row .sbm-summary-val {
    max-width: 65%;
    font-weight: normal;
    color: #64748b;
    text-align: right;
    line-height: 1.4;
}

/* Total Bar (Highlighted bottom container) */
.sbm-summary-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f7fb;
    border-radius: 9px;
    padding: 15px 20px;
    margin-top: 8px;
}

.sbm-total-bar-label {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.sbm-total-bar-val {
    font-size: 17.5px;
    font-weight: 700;
    color: #0f172a;
}

.sbm-total-bar-val .woocommerce-Price-amount {
    font-weight: 700;
    color: #0f172a;
}

/* Action Buttons */
.sbm-order-details-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
    margin-bottom: 24px;
}

.sbm-reorder-btn,
.sbm-pay-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 11px 22px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sbm-reorder-btn:hover,
.sbm-pay-btn:hover {
    background-color: var(--wd-primary-color-hover, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px);
}

.sbm-back-orders-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #ffffff !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border: 1.5px solid var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbm-back-orders-btn:hover {
    background-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 8%, #ffffff) !important;
    color: var(--wd-primary-color-hover, #1d4ed8) !important;
    border-color: var(--wd-primary-color-hover, #1d4ed8) !important;
    transform: translateY(-1px);
}

/* Billing Address Card */
.sbm-address-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.sbm-address-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, #ffffff);
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sbm-address-icon-box svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-address-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sbm-address-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #475569;
}

.sbm-addr-line {
    word-break: break-word;
}

.sbm-addr-name {
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 1px;
}

.sbm-addr-phone {
    margin-top: 3px;
    color: #475569;
}

.sbm-addr-email {
    color: #475569;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .sbm-order-details-layout {
        grid-template-columns: 1fr;
    }

    .sbm-details-side-col {
        order: 2;
    }

    .sbm-details-main-col {
        order: 1;
    }
}

@media (max-width: 640px) {

    .sbm-order-details-header-card,
    .sbm-items-ordered-card,
    .sbm-order-summary-card,
    .sbm-address-card {
        padding: 18px 16px;
    }

    .sbm-details-main-heading {
        font-size: 22px;
    }

    .sbm-ordered-items-table th.sbm-th-qty {
        width: 70px;
    }

    .sbm-ordered-items-table th.sbm-th-price {
        width: 95px;
    }

    .sbm-ordered-item-cell {
        gap: 10px;
    }

    .sbm-ordered-item-thumb {
        width: 54px;
        height: 54px;
    }

    .sbm-ordered-item-title {
        font-size: 13.5px;
    }

    .sbm-qty-display {
        font-size: 13.5px;
    }

    .sbm-price-display {
        font-size: 14px;
    }

    .sbm-order-details-actions {
        flex-direction: column;
        width: 100%;
    }

    .sbm-reorder-btn,
    .sbm-pay-btn,
    .sbm-back-orders-btn {
        width: 100%;
        text-align: center;
    }
}

/* Hide WooCommerce legacy duplicate Order Again paragraph button */
.woocommerce-order-details p.order-again,
.woocommerce p.order-again,
.sbm-order-details-container p.order-again,
.woocommerce-MyAccount-content p.order-again,
p.order-again {
    display: none !important;
}

/* ==========================================================================
   Addresses Section (My Account - my-address.php)
   ========================================================================== */
.sbm-addresses-container {
    width: 100%;
    margin-bottom: 40px;
    font-family: inherit;
}

/* Page Header */
.sbm-addresses-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.sbm-addresses-header-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, #ffffff);
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sbm-addresses-header-icon-box svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-addresses-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sbm-addresses-main-heading {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.sbm-addresses-sub-heading {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

/* Two-Card Grid */
.sbm-addresses-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Card Box */
.sbm-address-box-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

.sbm-address-box-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Card Header */
.sbm-address-box-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.sbm-address-box-header-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
}

.sbm-address-type-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, #ffffff);
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sbm-address-type-icon svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-address-box-title {
    font-size: 17.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sbm-address-box-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

/* Soft Action Button (Top Right of Card) */
.sbm-address-soft-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 8%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 15%, transparent) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbm-address-soft-btn svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
    transition: stroke 0.2s ease;
}

.sbm-address-soft-btn:hover {
    background-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 16%, #ffffff) !important;
    color: var(--wd-primary-color-hover, #1d4ed8) !important;
    border-color: color-mix(in srgb, var(--wd-primary-color-hover, #1d4ed8) 30%, transparent) !important;
    transform: translateY(-1px);
}

.sbm-address-soft-btn:hover svg {
    stroke: var(--wd-primary-color-hover, #1d4ed8);
}

.sbm-branch-address-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Card Inner Content Area */
.sbm-address-inner-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Populated Address Rows */
.sbm-address-rows-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sbm-address-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sbm-address-row-icon {
    color: #64748b;
    flex-shrink: 0;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sbm-address-row-icon svg {
    stroke: #64748b;
}

.sbm-address-row-content {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    flex: 1;
}

.sbm-addr-bold-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #1e293b;
    display: block;
}

.sbm-addr-text-line {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    word-break: break-word;
}

/* Empty State (Delivery Parcel Illustration + CTA) */
.sbm-empty-address-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 16px;
}

.sbm-empty-address-icon {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sbm-empty-address-icon svg {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-empty-address-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 10px 0 6px 0;
    letter-spacing: -0.01em;
}

.sbm-empty-address-desc {
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 20px 0;
    max-width: 290px;
    line-height: 1.45;
}

.sbm-add-address-primary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbm-add-address-primary-btn:hover {
    background-color: var(--wd-primary-color-hover, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .sbm-addresses-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sbm-addresses-header {
        align-items: flex-start;
        gap: 12px;
    }

    .sbm-addresses-main-heading {
        font-size: 22px;
    }

    .sbm-address-box-card {
        padding: 20px 16px;
    }

    .sbm-address-box-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .sbm-address-box-action {
        align-self: flex-start;
    }

    .sbm-address-inner-box {
        padding: 18px 16px;
    }
}

/* ==========================================================================
   Shipping Address Preference Card & Business Meta Details
   ========================================================================== */
.sbm-shipping-preference-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.sbm-shipping-preference-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.sbm-pref-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 10%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.sbm-pref-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
}

.sbm-pref-desc {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.sbm-pref-segmented-control {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px !important;
}

.sbm-pref-option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
}

.sbm-pref-option:hover {
    border-color: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 40%, #cbd5e1) !important;
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 3%, #ffffff) !important;
}

.sbm-pref-option.sbm-pref-active {
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 6%, #ffffff) !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 15%, transparent) !important;
}

.sbm-pref-radio {
    margin-top: 3px !important;
    accent-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    cursor: pointer !important;
}

.sbm-pref-option-body {
    flex: 1 !important;
}

.sbm-pref-option-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 3px !important;
}

.sbm-pref-option-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.sbm-pref-pill-tag {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 15%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
}

.sbm-pref-option-text {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.sbm-synced-address-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 10%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 25%, #ffffff) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.sbm-synced-banner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 6%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 20%, #e2e8f0) !important;
    border-left: 3.5px solid var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.sbm-synced-banner svg {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    flex-shrink: 0 !important;
}

.sbm-addr-company-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.sbm-addr-bold-company {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.sbm-addr-type-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
}

.sbm-addr-gst-badge,
.sbm-gst-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 10%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 25%, #bfdbfe) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.sbm-add-gst-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    text-decoration: none !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    border: 1px dashed color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 40%, #cbd5e1) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.sbm-add-gst-link:hover {
    background: color-mix(in srgb, var(--wd-primary-color, #2b6cb0) 8%, #ffffff) !important;
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
}

.sbm-address-box-footer-note {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px dashed #e2e8f0 !important;
    font-size: 12.5px !important;
    color: #64748b !important;
}

/* ==========================================================================
   Wishlist Tab & Page Styling (Cohesive with My Account)
   ========================================================================== */
.sbm-wishlist-myaccount-wrapper,
body.sbm-is-wishlist-page .woocommerce:has(.woocommerce-MyAccount-navigation),
.sbm-is-wishlist-page .site-content>.woocommerce,
.sbm-is-wishlist-page .main-page-wrapper .woocommerce {
    display: flex !important;
    gap: 30px !important;
    align-items: flex-start !important;
    width: 100% !important;
}

@media (max-width: 991px) {

    .sbm-wishlist-myaccount-wrapper,
    body.sbm-is-wishlist-page .woocommerce:has(.woocommerce-MyAccount-navigation),
    .sbm-is-wishlist-page .site-content>.woocommerce,
    .sbm-is-wishlist-page .main-page-wrapper .woocommerce {
        flex-direction: column !important;
        gap: 20px !important;
    }
}

.sbm-wishlist-myaccount-wrapper .woocommerce-MyAccount-navigation,
body.sbm-is-wishlist-page .woocommerce-MyAccount-navigation {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 100% !important;
}

.sbm-wishlist-myaccount-wrapper .woocommerce-MyAccount-content,
body.sbm-is-wishlist-page .woocommerce-MyAccount-content {
    flex: 1 !important;
    min-width: 0 !important;
}

@media (max-width: 991px) {

    .sbm-wishlist-myaccount-wrapper .woocommerce-MyAccount-navigation,
    .sbm-wishlist-myaccount-wrapper .woocommerce-MyAccount-content,
    body.sbm-is-wishlist-page .woocommerce-MyAccount-navigation,
    body.sbm-is-wishlist-page .woocommerce-MyAccount-content {
        width: 100% !important;
        flex: none !important;
    }
}

/* Wishlist Top Header Banner inside Content Area */
.sbm-wishlist-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.sbm-wishlist-page-container {
    width: 100% !important;
    font-family: inherit;
}

/* Wishlist Card Container */
.sbm-card.sbm-wishlist-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Neutralize Elementor container constraints inside Wishlist Card */
.sbm-wishlist-card .elementor,
.sbm-wishlist-card .elementor-element,
.sbm-wishlist-card .e-con,
.sbm-wishlist-card .e-con-inner,
.sbm-wishlist-card .elementor-widget,
.sbm-wishlist-card .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.sbm-wishlist-card .wd-wishlist-content,
.sbm-wishlist-card .woodmart-wishlist-content {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Standalone Wishlist fallback if not wrapped */
.woocommerce-MyAccount-content .wd-wishlist-content,
.woocommerce-MyAccount-content .woodmart-wishlist-content,
.woocommerce-MyAccount-content .wishlist-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Wishlist Table Modern Polish */
.sbm-wishlist-card table.wishlist_table,
.sbm-wishlist-card table.woodmart-wishlist-table,
.sbm-wishlist-card table.wd-wishlist-table,
.woocommerce-MyAccount-content table.wishlist_table,
.woocommerce-MyAccount-content table.woodmart-wishlist-table,
.woocommerce-MyAccount-content table.wd-wishlist-table,
.sbm-is-wishlist-page table.wishlist_table,
.sbm-is-wishlist-page table.woodmart-wishlist-table,
.sbm-is-wishlist-page table.wd-wishlist-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #ffffff !important;
}

.sbm-wishlist-card table thead th,
.woocommerce-MyAccount-content table.wishlist_table thead th,
.woocommerce-MyAccount-content table.woodmart-wishlist-table thead th,
.woocommerce-MyAccount-content table.wd-wishlist-table thead th,
.sbm-is-wishlist-page table.wishlist_table thead th,
.sbm-is-wishlist-page table.woodmart-wishlist-table thead th,
.sbm-is-wishlist-page table.wd-wishlist-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 18px !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.sbm-wishlist-card table tbody td,
.woocommerce-MyAccount-content table.wishlist_table tbody td,
.woocommerce-MyAccount-content table.woodmart-wishlist-table tbody td,
.woocommerce-MyAccount-content table.wd-wishlist-table tbody td,
.sbm-is-wishlist-page table.wishlist_table tbody td,
.sbm-is-wishlist-page table.woodmart-wishlist-table tbody td,
.sbm-is-wishlist-page table.wd-wishlist-table tbody td {
    padding: 16px 18px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    color: #334155 !important;
    font-size: 14px !important;
}

.sbm-wishlist-card table tbody tr:last-child td,
.woocommerce-MyAccount-content table.wishlist_table tbody tr:last-child td,
.woocommerce-MyAccount-content table.woodmart-wishlist-table tbody tr:last-child td,
.woocommerce-MyAccount-content table.wd-wishlist-table tbody tr:last-child td,
.sbm-is-wishlist-page table.wishlist_table tbody tr:last-child td,
.sbm-is-wishlist-page table.woodmart-wishlist-table tbody tr:last-child td,
.sbm-is-wishlist-page table.wd-wishlist-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Product thumbnail */
.wishlist_table .product-thumbnail img,
.woodmart-wishlist-table .product-thumbnail img,
.wd-wishlist-table .product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
}

/* Product name */
.wishlist_table .product-name a,
.woodmart-wishlist-table .product-name a,
.wd-wishlist-table .product-name a {
    font-weight: 600 !important;
    color: #0f172a !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.wishlist_table .product-name a:hover,
.woodmart-wishlist-table .product-name a:hover,
.wd-wishlist-table .product-name a:hover {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
}

/* Product price */
.wishlist_table .product-price .amount,
.woodmart-wishlist-table .product-price .amount,
.wd-wishlist-table .product-price .amount,
.wishlist_table .product-price {
    font-weight: 700 !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    font-size: 15px !important;
}

/* Stock status pills */
.wishlist_table .product-stock-status .wishlist-in-stock,
.woodmart-wishlist-table .product-stock-status .wishlist-in-stock,
.wd-wishlist-table .product-stock-status .wishlist-in-stock,
.wishlist_table .wishlist-in-stock,
.product-stock-status .in-stock {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

.wishlist_table .product-stock-status .wishlist-out-of-stock,
.woodmart-wishlist-table .product-stock-status .wishlist-out-of-stock,
.wd-wishlist-table .product-stock-status .wishlist-out-of-stock,
.wishlist_table .wishlist-out-of-stock,
.product-stock-status .out-of-stock {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

/* Add to Cart button on Wishlist */
.wishlist_table .add_to_cart_button,
.woodmart-wishlist-table .add_to_cart_button,
.wd-wishlist-table .add_to_cart_button,
.wd-wishlist-content .add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    background: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wishlist_table .add_to_cart_button:hover,
.woodmart-wishlist-table .add_to_cart_button:hover,
.wd-wishlist-table .add_to_cart_button:hover,
.wd-wishlist-content .add_to_cart_button:hover {
    background: var(--wd-primary-color-hover, var(--sbm-primary-hover, #1d4ed8)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Remove button */
.wishlist_table .product-remove a,
.woodmart-wishlist-table .product-remove a,
.wd-wishlist-table .product-remove a,
.wd-wishlist-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    color: #94a3b8 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.wishlist_table .product-remove a:hover,
.woodmart-wishlist-table .product-remove a:hover,
.wd-wishlist-table .product-remove a:hover,
.wd-wishlist-remove:hover {
    color: #ef4444 !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

/* Empty Wishlist Card & Block */
.sbm-wishlist-card .wd-empty-block,
.sbm-wishlist-card .wd-empty-wishlist,
.wd-empty-wishlist,
.woodmart-empty-wishlist,
.wishlist-empty,
.sbm-is-wishlist-page .wd-empty-page {
    text-align: center !important;
    padding: 48px 24px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    max-width: 580px !important;
}

.wd-empty-block::before,
.wd-empty-wishlist::before {
    font-size: 54px !important;
    color: #cbd5e1 !important;
    display: block !important;
    margin: 0 auto 16px auto !important;
}

.wd-empty-block-title,
.wd-empty-wishlist .wd-empty-page-title,
.woodmart-empty-wishlist .woodmart-empty-page-title,
.sbm-is-wishlist-page .wd-empty-page .title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 16px 0 8px 0 !important;
}

.wd-empty-block-text,
.wd-empty-wishlist .wd-empty-page-text,
.woodmart-empty-wishlist .woodmart-empty-page-text,
.sbm-is-wishlist-page .wd-empty-page .text {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 auto 24px auto !important;
    max-width: 440px !important;
    line-height: 1.6 !important;
}

.wd-empty-block-btn,
.wd-empty-wishlist .btn,
.woodmart-empty-wishlist .btn,
.sbm-is-wishlist-page .wd-empty-page .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wd-empty-block-btn:hover,
.wd-empty-wishlist .btn:hover,
.woodmart-empty-wishlist .btn:hover,
.sbm-is-wishlist-page .wd-empty-page .btn:hover {
    background: var(--wd-primary-color-hover, var(--sbm-primary-hover, #1d4ed8)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* WoodMart Wishlist Grid (Grid View Support) */
.wd-wishlist-content .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

.wd-wishlist-content .wd-product {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

.wd-wishlist-content .wd-product:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   Account Details Tab Styling (Personal Information & Password)
   ========================================================================== */

/* Main Container Wrapper */
.sbm-account-details-wrapper {
    width: 100% !important;
    margin: 0 0 30px 0 !important;
    box-sizing: border-box !important;
    font-family: inherit;
}

/* Ensure top banner header is removed/hidden */
.sbm-account-details-header {
    display: none !important;
}

/* Main Form Card */
.sbm-account-details-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

/* Section Header inside Card ("Personal information") */
.sbm-card-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 26px !important;
    padding-bottom: 0 !important;
}

.sbm-card-section-header .sbm-section-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 22%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.sbm-card-section-header .sbm-section-icon-box svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    width: 22px !important;
    height: 22px !important;
}

.sbm-card-section-header .sbm-section-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.sbm-card-section-header .sbm-section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.sbm-card-section-header .sbm-section-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Form Layout & Fields */
.sbm-edit-account-form {
    margin: 0 !important;
    padding: 0 !important;
}

.sbm-edit-account-form .sbm-form-row-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.sbm-edit-account-form .sbm-form-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.sbm-edit-account-form .sbm-form-group {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.sbm-edit-account-form .sbm-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
    display: inline-block !important;
    line-height: 1.3 !important;
}

.sbm-edit-account-form .sbm-label .required {
    color: #ef4444 !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
    text-decoration: none !important;
}

.sbm-edit-account-form .sbm-input,
.sbm-edit-account-form input[type="text"].input-text,
.sbm-edit-account-form input[type="email"].input-text,
.sbm-edit-account-form input[type="password"].input-text {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
}

.sbm-edit-account-form .sbm-input:focus,
.sbm-edit-account-form input[type="text"].input-text:focus,
.sbm-edit-account-form input[type="email"].input-text:focus,
.sbm-edit-account-form input[type="password"].input-text:focus {
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 16%, transparent) !important;
}

.sbm-edit-account-form .sbm-field-hint {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Change Password Banner Card */
.sbm-change-password-banner {
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 6%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 22%, #ffffff) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 24px 0 !important;
    box-sizing: border-box !important;
}

.sbm-pwd-banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.sbm-pwd-lock-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 25%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, transparent) !important;
}

.sbm-pwd-lock-icon-box svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    width: 20px !important;
    height: 20px !important;
}

.sbm-pwd-banner-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.sbm-pwd-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
}

.sbm-pwd-subtitle {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
}

/* "Change Password" Button */
.sbm-btn-change-password {
    background: #ffffff !important;
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 45%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    line-height: 1.4 !important;
}

.sbm-btn-change-password svg {
    stroke: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    width: 14px !important;
    height: 14px !important;
}

.sbm-btn-change-password:hover {
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 12%, #ffffff) !important;
    border-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: var(--wd-primary-color-hover, var(--sbm-primary-hover, #1d4ed8)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 20%, transparent) !important;
}

/* Collapsible Password Fields Wrap */
.sbm-password-fields-wrap {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 0 0 24px 0 !important;
    box-sizing: border-box !important;
}

/* Save Changes Button */
.sbm-form-actions {
    margin-top: 24px !important;
    padding-top: 4px !important;
}

.sbm-btn-save-account {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 30%, transparent) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.sbm-btn-save-account svg {
    stroke: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
}

.sbm-btn-save-account:hover {
    background: var(--wd-primary-color-hover, var(--sbm-primary-hover, #1d4ed8)) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 35%, transparent) !important;
}

.sbm-btn-save-account:active {
    transform: translateY(0) !important;
}

/* Lock Notice for Branch Managers */
.sbm-account-lock-notice {
    margin-bottom: 20px !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    color: #92400e !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.45 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .sbm-account-details-card {
        padding: 20px 18px !important;
    }

    .sbm-edit-account-form .sbm-form-row-2col {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .sbm-change-password-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .sbm-pwd-banner-right {
        width: 100% !important;
    }

    .sbm-btn-change-password {
        width: 100% !important;
        justify-content: center !important;
    }

    .sbm-btn-save-account {
        width: 100% !important;
    }
}

/* ==========================================================================
   Accordion Form Card (Add / Edit Branch & Expandable Forms)
   ========================================================================== */
.sbm-accordion-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbm-accordion-card.sbm-accordion-closed {
    padding-bottom: 24px !important;
}

.sbm-accordion-card.sbm-accordion-closed .sbm-accordion-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.sbm-accordion-header {
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.sbm-accordion-header:hover .sbm-card-header-title h3 {
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
}

.sbm-accordion-header:focus-visible {
    outline: 2px solid var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    outline-offset: 4px !important;
    border-radius: 8px !important;
}

.sbm-accordion-header-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.sbm-accordion-header:hover .sbm-accordion-header-icon {
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 16%, #ffffff) !important;
    transform: scale(1.05) !important;
}

.sbm-accordion-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.sbm-accordion-subtitle {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

.sbm-accordion-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.sbm-accordion-toggle-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbm-accordion-header:hover .sbm-accordion-toggle-badge,
.sbm-accordion-card.sbm-accordion-open .sbm-accordion-toggle-badge {
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 8%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 25%, #ffffff) !important;
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) !important;
}

.sbm-accordion-chevron {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}

.sbm-accordion-card.sbm-accordion-open .sbm-accordion-chevron {
    transform: rotate(180deg) !important;
}

.sbm-accordion-content {
    animation: sbmFadeIn 0.2s ease-in-out;
}

@keyframes sbmFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   Branch Shipping Address Toggle & Fields
   ========================================================================== */
.sbm-shipping-toggle-card {
    background: #f8fafc;
    border: 1px solid var(--sbm-border-color, #e2e8f0);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 22px 0 16px 0;
    transition: all 0.2s ease;
}

.sbm-shipping-toggle-card:hover {
    border-color: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 30%, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.sbm-shipping-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.sbm-shipping-toggle-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 260px;
}

.sbm-shipping-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, #ffffff);
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sbm-shipping-toggle-title {
    margin: 0 0 3px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.sbm-shipping-toggle-desc {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

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

/* Custom Toggle Switch */
.sbm-toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    margin: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
}

.sbm-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
}

.sbm-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}

.sbm-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sbm-toggle-switch input:checked+.sbm-toggle-slider {
    background-color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
}

.sbm-toggle-switch input:focus-visible+.sbm-toggle-slider {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 25%, transparent);
}

.sbm-toggle-switch input:checked+.sbm-toggle-slider:before {
    transform: translateX(20px);
}

.sbm-switch-caption {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* Collapsible Shipping Address Container */
.sbm-branch-shipping-fields {
    margin: 16px 0 24px 0;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fbfcfe;
    padding: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
    animation: sbmFadeIn 0.22s ease-in-out;
}

.sbm-shipping-section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
    font-size: 14.5px;
    color: #1e293b;
}

.sbm-sub-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* Branch List Table Address Tags */
.sbm-branch-addresses-split {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

.sbm-addr-tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 6px;
    flex-shrink: 0;
}

.sbm-addr-billing-badge {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.sbm-addr-shipping-badge {
    background: color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 10%, #ffffff);
    color: var(--wd-primary-color, var(--sbm-primary, #2b6cb0));
    border: 1px solid color-mix(in srgb, var(--wd-primary-color, var(--sbm-primary, #2b6cb0)) 25%, #ffffff);
}

.sbm-branch-ship-addr {
    color: #475569;
}

/* ==========================================================================
   Order Approval Notification System (Owner Dashboard & Navigation)
   ========================================================================== */

/* Keyframe Animations */
@keyframes sbm-pulse-badge-dot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

@keyframes sbm-pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

@keyframes sbm-pulse-ring-anim {
    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

/* 1. Top-Right Circular Counter Badge on Dashboard Cards */
.sbm-dashboard-card {
    position: relative !important;
}

.sbm-card-badge {
    position: absolute !important;
    top: 9px !important;
    right: 11px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(234, 88, 12, 0.4) !important;
    z-index: 5 !important;
    animation: sbm-pulse-badge 2.5s infinite ease-in-out !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

.sbm-dashboard-card:hover .sbm-card-badge {
    transform: scale(1.12) !important;
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.55) !important;
}

/* 2. Navigation Sidebar Badge */
.sbm-nav-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 4px rgba(234, 88, 12, 0.3) !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
    animation: sbm-pulse-badge 2.5s infinite ease-in-out !important;
}

/* 3. Mobile Hamburger Button Badge & Drawer Header Badge */
.sbm-nav-hamburger-btn {
    position: relative !important;
}

.sbm-hamburger-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    background: #ea580c !important;
    border: 2px solid #ffffff !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    animation: sbm-pulse-badge 2s infinite ease-in-out !important;
}

.sbm-drawer-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    background: #ea580c !important;
    border-radius: 9999px !important;
    margin-left: 8px !important;
}

/* 4. Orders Page Pending Alert Banner */
.sbm-orders-pending-alert {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #fffbeb !important;
    border: 1px solid #fcd34d !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.1) !important;
}

.sbm-orders-pending-icon {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    background: #fef3c7 !important;
    color: #d97706 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sbm-orders-pending-text {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    color: #92400e !important;
    line-height: 1.4 !important;
    flex-wrap: wrap !important;
}

.sbm-orders-pending-count-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #d97706 !important;
    border-radius: 9999px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   Order Notification Bell Shortcode ([sbm_order_notification])
   ========================================================================== */
.sbm-bell-notification-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: var(--sbm-bell-w, 32px);
    height: var(--sbm-bell-h, 32px);
}

.sbm-bell-notification-link:hover {
    transform: scale(1.1) !important;
}

.sbm-bell-notification-link:active {
    transform: scale(0.95) !important;
}

.sbm-bell-icon-inner {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.sbm-bell-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
    transition: filter 0.2s ease !important;
}

.sbm-bell-notification-link:hover .sbm-bell-svg {
    filter: drop-shadow(0 3px 6px rgba(245, 158, 11, 0.45));
    transform-origin: top center;
    animation: sbm-bell-swing 0.8s ease-in-out;
}

@keyframes sbm-bell-swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(6deg);
    }
    80% {
        transform: rotate(-4deg);
    }
}

.sbm-bell-red-dot {
    position: absolute !important;
    top: -12% !important;
    right: -12% !important;
    min-width: max(18px, calc(var(--sbm-bell-w, 32px) * 0.52)) !important;
    height: max(18px, calc(var(--sbm-bell-h, 32px) * 0.52)) !important;
    padding: 0 4px !important;
    background: #ef4444 !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: max(10px, calc(var(--sbm-bell-w, 32px) * 0.28)) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45) !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    animation: sbm-pulse-badge 2.5s infinite ease-in-out !important;
}

@media (max-width: 1024px) {
    .sbm-bell-notification-link {
        width: var(--sbm-bell-w-m, var(--sbm-bell-w, 28px));
        height: var(--sbm-bell-h-m, var(--sbm-bell-h, 28px));
    }

    .sbm-bell-red-dot {
        min-width: max(16px, calc(var(--sbm-bell-w-m, var(--sbm-bell-w, 28px)) * 0.52)) !important;
        height: max(16px, calc(var(--sbm-bell-h-m, var(--sbm-bell-h, 28px)) * 0.52)) !important;
        font-size: max(9px, calc(var(--sbm-bell-w-m, var(--sbm-bell-w, 28px)) * 0.28)) !important;
    }
}

/* ==========================================================================
   Branch Orders Summary Statistics & KPI Cards (Total Spend, Total Orders, Cancelled Orders)
   ========================================================================== */
.sbm-orders-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sbm-stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease !important;
}

/* Subtle decorative top accent line */
.sbm-stat-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
}

.sbm-stat-card-spend::before {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
}

.sbm-stat-card-orders::before {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
}

.sbm-stat-card-cancelled::before {
    background: linear-gradient(90deg, #f43f5e 0%, #e11d48 100%) !important;
}

.sbm-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px -5px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.03) !important;
}

.sbm-stat-card-spend:hover {
    border-color: #a7f3d0 !important;
}

.sbm-stat-card-orders:hover {
    border-color: #bfdbfe !important;
}

.sbm-stat-card-cancelled:hover {
    border-color: #fecdd3 !important;
}

/* Card Header */
.sbm-stat-card-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.sbm-stat-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.sbm-stat-icon-spend {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #d1fae5 !important;
}

.sbm-stat-icon-orders {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
}

.sbm-stat-icon-cancelled {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #ffe4e6 !important;
}

.sbm-stat-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.sbm-stat-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
}

.sbm-stat-subtitle {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Card Big Value */
.sbm-stat-value {
    display: flex !important;
    align-items: baseline !important;
    margin: 2px 0 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

.sbm-stat-value-price,
.sbm-stat-value-price .woocommerce-Price-amount,
.sbm-stat-value-price .amount {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

.sbm-stat-value-spend .woocommerce-Price-currencySymbol {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    margin-right: 2px !important;
}

.sbm-stat-value-cancelled .woocommerce-Price-currencySymbol {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    margin-right: 2px !important;
}

.sbm-stat-number {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
}

.sbm-stat-unit {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-left: 6px !important;
    letter-spacing: 0 !important;
}

.sbm-stat-count-tag {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
}

/* Card Footer Breakdown Pills */
.sbm-stat-footer {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.sbm-stat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3.5px 8.5px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.sbm-pill-paid {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.sbm-pill-pending {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.sbm-pill-branch {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.sbm-pill-owner {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border: 1px solid #ddd6fe !important;
}

.sbm-pill-cancelled {
    background: #fff1f2 !important;
    color: #be123c !important;
    border: 1px solid #fecdd3 !important;
}

.sbm-pill-rejected {
    background: #fdf2f8 !important;
    color: #9d174d !important;
    border: 1px solid #fbcfe8 !important;
}

@media (max-width: 1080px) {
    .sbm-orders-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .sbm-orders-stats-grid .sbm-stat-card:last-child {
        grid-column: span 2 !important;
    }
}

@media (max-width: 680px) {
    .sbm-orders-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .sbm-orders-stats-grid .sbm-stat-card:last-child {
        grid-column: span 1 !important;
    }

    .sbm-stat-card {
        padding: 16px 18px !important;
        gap: 12px !important;
    }

    .sbm-stat-value,
    .sbm-stat-value-price,
    .sbm-stat-value-price .woocommerce-Price-amount,
    .sbm-stat-value-price .amount {
        font-size: 22px !important;
    }

    .sbm-stat-number {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   Dashboard Enhancements: Pending Alert, Quick Stats, & Sparkle Categories
   ========================================================================== */

.sbm-dashboard-pending-alert {
    margin-bottom: 24px !important;
}

.sbm-dashboard-stats-grid {
    margin-bottom: 32px !important;
}

/* Sparkle Category Section Container */
.sbm-dashboard-sparkle-section {
    position: relative;
    margin-top: 42px;
    padding: 34px 32px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.sbm-dashboard-sparkle-section::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.03) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Section Header */
.sbm-sparkle-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f1f5f9;
}

.sbm-sparkle-header-left {
    flex: 1;
    min-width: 260px;
}

.sbm-sparkle-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #b45309;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 0.6) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    margin-bottom: 10px;
}

.sbm-sparkle-badge svg {
    color: #d97706;
    animation: sbm-sparkle-spin 6s ease-in-out infinite alternate;
}

@keyframes sbm-sparkle-spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.1); }
    100% { transform: rotate(-10deg) scale(1); }
}

.sbm-sparkle-title {
    font-size: 23px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
}

.sbm-sparkle-subtitle {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}

.sbm-sparkle-header-right {
    flex-shrink: 0;
}

.sbm-sparkle-shop-all-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 26px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid #0f172a !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sbm-sparkle-shop-all-btn:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2) !important;
}

.sbm-sparkle-shop-all-btn svg {
    transition: transform 0.25s ease;
}

.sbm-sparkle-shop-all-btn:hover svg {
    transform: translateX(3px);
}

/* Category Grid */
.sbm-sparkle-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Category Card */
.sbm-sparkle-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    position: relative;
}

.sbm-sparkle-card:hover {
    transform: translateY(-5px);
    border-color: #cbd5e1;
    box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.1), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
}

/* Card Media / Thumbnail */
.sbm-sparkle-card-media {
    position: relative;
    height: 146px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
}

.sbm-sparkle-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sbm-sparkle-card:hover .sbm-sparkle-card-img {
    transform: scale(1.07);
}

.sbm-sparkle-card-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sbm-sparkle-card:hover .sbm-sparkle-card-icon-fallback {
    transform: scale(1.12);
}

/* Corner Sparkle Icon Pill */
.sbm-sparkle-card-sparkle-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.sbm-sparkle-card:hover .sbm-sparkle-card-sparkle-tag {
    transform: rotate(20deg) scale(1.15);
    background: #ffffff;
    color: #d97706;
}

/* Card Content Body */
.sbm-sparkle-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #ffffff;
}

.sbm-sparkle-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.sbm-sparkle-card-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.sbm-sparkle-card:hover .sbm-sparkle-card-name {
    color: #b45309;
}

.sbm-sparkle-card-count-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sbm-sparkle-card:hover .sbm-sparkle-card-count-pill {
    background: #fef3c7;
    color: #92400e;
}

.sbm-sparkle-card-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    margin: 5px 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sbm-sparkle-card-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #f1f5f9;
}

.sbm-sparkle-card-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    transition: all 0.2s ease;
}

.sbm-sparkle-card-action svg {
    color: #d97706;
    transition: transform 0.25s ease;
}

.sbm-sparkle-card:hover .sbm-sparkle-card-action {
    color: #d97706;
}

.sbm-sparkle-card:hover .sbm-sparkle-card-action svg {
    transform: translateX(4px);
}

/* Responsive Breakpoints for Sparkle Category Section */
@media (max-width: 1140px) {
    .sbm-sparkle-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 820px) {
    .sbm-dashboard-sparkle-section {
        padding: 24px 20px;
        margin-top: 32px;
    }

    .sbm-sparkle-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 22px;
    }

    .sbm-sparkle-title {
        font-size: 20px;
    }

    .sbm-sparkle-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .sbm-sparkle-card-media {
        height: 130px;
    }
}

@media (max-width: 520px) {
    .sbm-sparkle-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sbm-sparkle-header-right {
        width: 100%;
    }

    .sbm-sparkle-shop-all-btn {
        width: 100%;
        justify-content: center;
    }

    .sbm-sparkle-card-media {
        height: 150px;
    }
}