:root {
    --bz-purple: #6f55ff;
    --bz-purple-dark: #5638f2;
    --bz-purple-soft: #f4f0ff;
    --bz-pink: #ec33b8;
    --bz-green: #12b76a;
    --bz-green-soft: #e9fbf1;
    --bz-red: #f04438;
    --bz-red-soft: #fff0f1;
    --bz-yellow-soft: #fff2cf;
    --bz-yellow-text: #946200;
    --bz-text: #111827;
    --bz-muted: #697386;
    --bz-border: #e3e5ec;
    --bz-surface: #ffffff;
    --bz-page: #fbfbff;
    --bz-shadow: 0 10px 28px rgba(19, 18, 66, .08);
    --bz-radius: 12px;
    --bz-radius-sm: 8px;
    --bz-gradient: linear-gradient(135deg, var(--bz-purple) 0%, var(--bz-purple-dark) 55%, var(--bz-pink) 100%);
    --bz-default-action-gradient: linear-gradient(135deg, #7c3aed, var(--bz-pink));
    --bz-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --bz-primary-color: #7c3aed;
    --bz-primary-color-rgb: 124, 58, 237;
    --bz-accent-color: var(--agenda-accent-color, #7c3aed);
    --bz-accent-color-rgb: 124, 58, 237;
    --bz-accent-readable: #7c3aed;
    --bz-accent-readable-rgb: 124, 58, 237;
    --bz-accent-soft: rgba(124, 58, 237, .08);
    --bz-accent-border: rgba(124, 58, 237, .34);
    --bz-accent-strong-border: rgba(124, 58, 237, .58);
    --bz-accent-icon-filter: invert(40%) sepia(88%) saturate(2369%) hue-rotate(238deg) brightness(97%) contrast(94%);
    --bz-accent-readable-icon-filter: invert(40%) sepia(88%) saturate(2369%) hue-rotate(238deg) brightness(97%) contrast(94%);
    --bz-config-accent-color: #7c3aed;
    --bz-config-accent-color-rgb: 124, 58, 237;
    --bz-config-accent-readable: #7c3aed;
    --bz-config-accent-readable-rgb: 124, 58, 237;
    --bz-config-accent-soft: rgba(124, 58, 237, .10);
    --bz-config-accent-border: rgba(124, 58, 237, .36);
    --bz-config-accent-strong-border: rgba(124, 58, 237, .58);
    --bz-config-accent-icon-filter: invert(40%) sepia(88%) saturate(2369%) hue-rotate(238deg) brightness(97%) contrast(94%);
    --bz-config-accent-readable-icon-filter: invert(40%) sepia(88%) saturate(2369%) hue-rotate(238deg) brightness(97%) contrast(94%);
    --bz-config-primary-color: #7c3aed;
    --bz-config-primary-color-rgb: 124, 58, 237;
    --bz-config-primary-action-bg: var(--bz-default-action-gradient);
    --bz-accent-contrast: #ffffff;
    --bz-primary-action-bg: var(--bz-default-action-gradient);
    --bz-primary-action-color: #ffffff;
    --bz-primary-action-icon-filter: brightness(0) invert(1);
    --bz-primary-action-border-color: transparent;
    --bz-primary-action-shadow: 0 10px 24px rgba(var(--bz-accent-color-rgb), .24);
    --bz-accent-gradient: var(--bz-primary-action-bg);
    --bz-shadow-soft: 0 10px 28px rgba(15, 23, 42, .045);
    --bz-shadow-card: 0 10px 28px rgba(19, 18, 66, .08);
    --bz-control-bg: rgba(255, 255, 255, .72);
    --bz-control-border: rgba(148, 163, 184, .32);
    --bz-selected-bg: #fff;
    --bz-selected-border: var(--bz-accent-color);
    --bz-selected-ring: 0 0 0 2px var(--bz-accent-color), var(--bz-shadow-soft);
    --bz-header-bg: #fff;
    --bz-header-border: rgba(226, 232, 240, .9);
    --bz-header-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    --bz-app-header-height: 45px;
    --bz-app-header-action-size: 34px;
    --bz-app-header-back-icon-size: 28px;
    --bz-default-screen-background:
        radial-gradient(
            circle at 18% 12%,
            rgba(255, 135, 190, 0.10) 0%,
            rgba(255, 135, 190, 0.055) 22%,
            rgba(255, 135, 190, 0) 48%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(167, 139, 250, 0.095) 0%,
            rgba(167, 139, 250, 0.052) 24%,
            rgba(167, 139, 250, 0) 52%
        ),
        radial-gradient(
            circle at 12% 74%,
            rgba(96, 165, 250, 0.085) 0%,
            rgba(96, 165, 250, 0.045) 24%,
            rgba(96, 165, 250, 0) 54%
        ),
        radial-gradient(
            circle at 78% 92%,
            rgba(236, 72, 153, 0.07) 0%,
            rgba(236, 72, 153, 0.038) 26%,
            rgba(236, 72, 153, 0) 56%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFCFF 28%,
            #FBFDFF 52%,
            #FFF7FC 100%
        );
    --bz-screen-background: var(--bz-default-screen-background);
    --bz-appointment-page-background: var(--bz-screen-background);
    --bz-icon-sm: 18px;
    --bz-icon-md: 20px;
    --bz-icon-lg: 25px;
    --bz-type-title-lg: 18px;
    --bz-type-title-md: 15px;
    --bz-type-body: 14px;
    --bz-type-body-sm: 13px;
    --bz-type-caption: 12px;
    --bz-type-micro: 11px;
    --bz-danger: var(--bz-red);
    --bz-danger-soft: var(--bz-red-soft);
    --bz-success: var(--bz-green);
    --bz-success-soft: var(--bz-green-soft);
    --bz-warning: #f59e0b;
    --bz-warning-soft: var(--bz-yellow-soft);
    --bz-info: #2563eb;
    --bz-info-soft: rgba(59, 130, 246, .12);
    --btn-margin-bottom: 16px;
}

.bz-page {
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    letter-spacing: 0;
}

.no-show {
    display: none !important;
}

.show {
    display: block !important;
}

body.white-back {
    min-height: 100vh;
    margin: 0;
    color: var(--bz-text);
    background: var(--bz-screen-background);
    font-family: var(--bz-font-family);
    text-align: center;
}

body.white-back.no-padding-top {
    padding-top: 0 !important;
}

body.padding-left-menu {
    padding-left: 50px;
}

body.padding-left-menu.open {
    padding-left: var(--bz-sidebar-open-width, 220px);
}

.navbar-default.navbar-fixed-top.black-back2 {
    background: transparent !important;
    border: 0;
}

@media (max-width: 992px) {
    body.padding-left-menu.open {
        padding-left: 50px;
    }
}

body.bz-submenu-page.padding-left-menu {
    padding-left: 0 !important;
}

@media (max-width: 768px) {
    body.agenda-page.padding-left-menu {
        padding-left: 0 !important;
    }
}

body.bz-submenu-page .navbar-default.navbar-fixed-top.black-back2 {
    display: none !important;
}

body.bz-submenu-page .bz-app-header-offset-menu {
    --bz-app-header-left: 0;
}

.bz-shell {
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 12px;
    text-align: left;
    box-sizing: border-box;
}

.bz-page-head {
    width: min(100%, var(--bz-page-head-width, 640px));
    margin: 0 auto 22px;
    padding: 8px 0;
    text-align: left;
    box-sizing: border-box;
}

.bz-page-title {
    margin: 0;
    padding: 0;
    color: var(--bz-text);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.12;
}

.bz-page-subtitle {
    margin: 8px 0 0;
    color: var(--bz-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}

@media (max-width: 767px) {
    .bz-page-title {
        font-size: 22px;
        line-height: 1.15;
    }

    .bz-page-subtitle {
        font-size: 13px;
    }
}

.bz-page-form {
    display: grid;
    gap: 0;
    padding-bottom: 78px;
}

.bz-stack {
    display: grid;
    gap: 12px;
}

.bz-card {
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    padding: 14px;
    box-shadow: var(--bz-shadow-card);
    box-sizing: border-box;
}

.bz-card-soft {
    background: linear-gradient(135deg, var(--bz-surface) 0%, var(--bz-accent-soft) 100%);
}

.bz-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(15, 23, 42, .22);
}

.bz-modal-dialog {
    position: fixed;
    inset: 0;
    z-index: 11;
    width: min(100%, 760px);
    margin: 0 auto;
    overflow-y: auto;
    background: var(--bz-screen-background);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: var(--bz-shadow-card);
}

.bz-modal-body {
    min-height: 100%;
    padding: var(--bz-app-header-height) 0 96px;
}

.bz-modal-slot {
    position: fixed;
    inset: 0;
    z-index: 100000;
    width: 100%;
    overflow-y: auto;
}

.bz-modal-slot:empty {
    display: none;
}

.bz-client-list-page {
    min-height: 100vh;
    padding-top: calc(var(--bz-app-header-height) + 12px);
    background: var(--bz-appointment-page-background);
    background-repeat: no-repeat;
    background-size: cover;
}

.bz-sms-subpage {
    padding-top: calc(var(--bz-app-header-height) + 16px) !important;
}

.select-services-screen {
    padding-top: calc(var(--bz-app-header-height) + 16px) !important;
}

.select-services-screen .selectServiceContainer .ServiceName {
    font-size: 13px;
    line-height: 1.25;
}

.select-services-screen .selectServiceContainer .ServicePriceDuration {
    font-size: 11px;
    line-height: 1.25;
}

.bz-field {
    display: grid;
    gap: 5px;
    text-align: left;
}

.bz-client-list-content {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 8px 8px 92px;
    box-sizing: border-box;
}

.bz-client-list-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: start;
}

.bz-client-selection-sticky {
    position: sticky;
    top: calc(var(--bz-app-header-height) + 12px);
    z-index: 30;
    display: grid;
    gap: 8px;
    margin: -8px -8px 10px;
    padding: 8px;
    background: var(--bz-appointment-page-background);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.bz-search-field {
    height: 42px;
    min-height: 42px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid var(--bz-control-border);
    border-radius: 8px;
    background: var(--bz-control-bg);
    box-shadow: var(--bz-shadow-soft);
    padding: 0 11px;
    margin: 0;
    box-sizing: border-box;
}

.bz-search-field img {
    width: 18px;
    height: 18px;
    filter: invert(25%) sepia(17%) saturate(907%) hue-rotate(176deg) brightness(91%) contrast(87%);
}

.bz-search-field input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    font-size: var(--bz-type-body-sm);
    font-weight: 500;
}

.bz-search-field input::placeholder {
    color: #8a93a6;
}

.bz-icon-button {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--bz-shadow-soft);
    color: var(--bz-accent-color);
    padding: 0;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.bz-icon-button img {
    width: 19px;
    height: 19px;
    filter: var(--bz-accent-icon-filter);
}

.bz-icon-button.is-active {
    border-color: var(--bz-accent-color);
    box-shadow: var(--bz-selected-ring);
}

.bz-icon-button span {
    position: absolute;
    top: -7px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bz-green);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.bz-inline-banner {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--bz-shadow-soft);
    box-sizing: border-box;
}

.bz-inline-banner > img {
    width: 18px;
    height: 18px;
}

.bz-inline-banner span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.bz-inline-banner strong {
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
}

.bz-inline-banner small {
    color: var(--bz-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

.bz-inline-banner button {
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--bz-font-family);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 2px;
}

.bz-inline-banner-success {
    border-color: rgba(18, 183, 106, .26);
    background: rgba(233, 251, 241, .78);
    color: var(--bz-green);
}

.bz-inline-banner-success > img {
    filter: invert(47%) sepia(96%) saturate(465%) hue-rotate(101deg) brightness(94%) contrast(94%);
}

.bz-client-campaign-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.bz-client-select-toggle {
    width: 100%;
    margin-top: 10px;
}

.bz-client-list-count {
    margin: 12px 0 8px;
    color: var(--bz-text);
    font-size: var(--bz-type-caption);
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.bz-client-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bz-list-card.bz-client-list-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 12px 6px 12px 10px;
    text-align: left;
    appearance: none;
    font-family: var(--bz-font-family);
}

.bz-list-card.bz-client-list-card.is-selecting {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    cursor: default;
}

.bz-selection-checkbox {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.bz-selection-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bz-selection-checkbox span {
    width: 19px;
    height: 19px;
    border: 1px solid var(--bz-control-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--bz-shadow-soft);
    box-sizing: border-box;
}

.bz-selection-checkbox input:checked + span {
    border-color: var(--bz-accent-color);
    background: var(--bz-accent-color);
    box-shadow: 0 0 0 2px var(--bz-accent-soft);
}

.bz-selection-checkbox input:checked + span::after {
    content: "";
    display: block;
    width: 9px;
    height: 5px;
    margin: 5px auto 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.bz-client-list-card-main {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.bz-client-list-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 5px;
}

.bz-client-list-card-name {
    min-width: 0;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-list-card-chevron {
    grid-column: 3;
    justify-self: end;
    width: 18px;
    height: 18px;
    filter: invert(8%) sepia(18%) saturate(1442%) hue-rotate(181deg) brightness(83%) contrast(103%);
}

.bz-client-list-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    color: #344054;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

.bz-client-list-card-grid > span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-client-list-card-grid img {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    filter: invert(25%) sepia(17%) saturate(907%) hue-rotate(176deg) brightness(91%) contrast(87%);
}

.bz-client-list-card-nif {
    color: var(--bz-text);
    font-weight: 600;
}

.bz-client-list-card-last {
    color: var(--bz-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-client-list-card-note {
    width: fit-content;
    max-width: 100%;
    margin-top: 0;
    font-size: 11px;
}

.bz-client-filter-form {
    gap: 12px;
}

.bz-client-filter-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
}

.bz-client-filter-service img {
    width: 16px;
    height: 16px;
}

.bz-selected-service-filter .selectServiceContainer {
    padding: 0 !important;
}

.bz-campaign-panel {
    display: grid;
    gap: 18px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--bz-shadow-soft);
    padding: 14px;
}

.bz-campaign-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.bz-campaign-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--bz-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.bz-campaign-steps strong {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
}

.bz-campaign-steps .is-active {
    color: var(--bz-accent-color);
}

.bz-campaign-steps .is-active strong {
    border-color: var(--bz-accent-color);
    background: var(--bz-accent-color);
    color: #fff;
}

.bz-campaign-step {
    display: grid;
    gap: 13px;
}

.bz-campaign-step h3 {
    margin: 0;
    color: var(--bz-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.bz-campaign-recipient-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 14px;
    border: 1px solid var(--bz-accent-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--bz-selected-ring);
}

.bz-campaign-recipient-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bz-accent-soft);
}

.bz-campaign-recipient-icon img {
    width: 22px;
    height: 22px;
    filter: var(--bz-accent-icon-filter);
}

.bz-campaign-recipient-card > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.bz-campaign-recipient-card strong {
    min-width: 0;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-campaign-recipient-card span {
    min-width: 0;
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
}

.bz-campaign-recipient-card .bz-button {
    min-width: 126px;
    white-space: nowrap;
}

.bz-campaign-recipient-card .bz-button img {
    width: 15px;
    height: 15px;
}

.bz-campaign-notes-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(var(--bz-accent-color-rgb), .08);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .80), var(--bz-accent-soft));
    box-shadow: var(--bz-shadow-soft);
}

.bz-campaign-notes-card strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--bz-accent-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-campaign-notes-card strong span {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
}

.bz-campaign-notes-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bz-campaign-notes-card li {
    position: relative;
    padding-left: 18px;
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.bz-campaign-notes-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--bz-accent-color);
    border-bottom: 2px solid var(--bz-accent-color);
    transform: rotate(-45deg);
}

.bz-radio-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--bz-text);
    font-size: var(--bz-type-body-sm);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.bz-radio-row input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--bz-accent-color);
}

.bz-campaign-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--bz-text);
    font-size: var(--bz-type-caption);
    font-weight: 600;
    line-height: 1.25;
}

.bz-campaign-textarea {
    min-height: 150px;
    resize: vertical;
}

.bz-campaign-info {
    margin: 0;
    border: 1px solid var(--bz-accent-border);
    border-radius: 8px;
    background: var(--bz-accent-soft);
    color: var(--bz-accent-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    padding: 9px 10px;
}

.bz-campaign-review {
    display: grid;
    gap: 12px;
}

.bz-campaign-review span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--bz-muted);
    font-size: var(--bz-type-body-sm);
    font-weight: 600;
}

.bz-campaign-review strong {
    color: var(--bz-text);
    font-weight: 600;
}

.bz-app-header > .bz-icon-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: var(--bz-app-header-action-size);
    min-width: var(--bz-app-header-action-size);
    height: var(--bz-app-header-action-size);
    min-height: var(--bz-app-header-action-size);
}

.bz-app-header > .bz-icon-button img {
    width: 18px;
    height: 18px;
}

.bz-campaign-warning {
    margin: 0;
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: 8px;
    background: var(--bz-warning-soft);
    color: var(--bz-warning);
    font-size: var(--bz-type-caption);
    font-weight: 600;
    line-height: 1.35;
    padding: 10px;
}

@media (max-width: 520px) {
    .bz-choice-grid-two,
    .bz-appearance-preview {
        grid-template-columns: 1fr;
    }

    .bz-campaign-recipient-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .bz-campaign-recipient-card .bz-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.bz-text-title-lg {
    color: var(--bz-text);
    font-size: var(--bz-type-title-lg);
    font-weight: 600;
    line-height: 1.2;
}

.bz-text-title-md {
    color: var(--bz-text);
    font-size: var(--bz-type-title-md);
    font-weight: 600;
    line-height: 1.25;
}

.bz-text-body {
    color: var(--bz-text);
    font-size: var(--bz-type-body);
    font-weight: 500;
    line-height: 1.45;
}

.bz-text-body-strong {
    color: var(--bz-text);
    font-size: var(--bz-type-body-sm);
    font-weight: 600;
    line-height: 1.35;
}

.bz-text-caption {
    color: var(--bz-muted);
    font-size: var(--bz-type-caption);
    font-weight: 500;
    line-height: 1.35;
}

.bz-text-micro {
    color: var(--bz-muted);
    font-size: var(--bz-type-micro);
    font-weight: 500;
    line-height: 1.3;
}

.bz-card h2,
.bz-card h3,
.bz-card h4 {
    margin: 0 0 10px;
    color: var(--bz-text);
    font-weight: 600;
    line-height: 1.2;
}

.bz-card h2 {
    font-size: var(--bz-type-title-lg);
}

.bz-card h3 {
    font-size: var(--bz-type-title-md);
}

.bz-card h4 {
    font-size: 13px;
}

.bz-muted,
.bz-card p {
    color: var(--bz-muted);
    font-size: var(--bz-type-caption);
    line-height: 1.35;
}

.bz-card p {
    margin: 5px 0 0;
}

.bz-button {
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid var(--bz-border);
    background: #fff;
    color: var(--bz-text);
    font-size: var(--bz-type-body-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.bz-button img,
.bz-button-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.bz-icon-mask {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: inline-block;
    background: currentColor;
    -webkit-mask: var(--bz-icon-url) center / contain no-repeat;
    mask: var(--bz-icon-url) center / contain no-repeat;
}

.bz-icon-user-plus {
    --bz-icon-url: url('/Img/icons/New icons/clientes/user-plus.svg');
}

.bz-icon-scissors {
    --bz-icon-url: url('/Img/icons/New icons/agenda-acoes/scissors.svg');
}

.bz-icon-calendar {
    --bz-icon-url: url('/Img/icons/New icons/agenda/calendar.svg');
}

.bz-icon-chevron-left {
    --bz-icon-url: url('/Img/icons/New icons/navegacao/chevron-left.svg');
}

.bz-icon-chevron-down {
    --bz-icon-url: url('/Img/icons/New icons/navegacao/chevron-down.svg');
}

.bz-icon-sliders {
    --bz-icon-url: url('/Img/icons/New icons/definicoes/sliders.svg');
}

.bz-icon-calendar-check {
    --bz-icon-url: url('/Img/icons/New icons/agenda-acoes/calendar-check.svg');
}

.bz-icon-calendar-x {
    --bz-icon-url: url('/Img/icons/New icons/agenda-acoes/calendar-x.svg');
}

.bz-icon-euro {
    --bz-icon-url: url('/Img/icons/New icons/pagamentos/euro.svg');
}

.bz-icon-receipt {
    --bz-icon-url: url('/Img/icons/New icons/pagamentos/receipt.svg');
}

.bz-icon-refresh {
    --bz-icon-url: url('/Img/icons/New icons/acoes-gerais/refresh-cw.svg');
}

.bz-icon-user-x {
    --bz-icon-url: url('/Img/icons/New icons/clientes/user-x.svg');
}

.bz-icon-users {
    --bz-icon-url: url('/Img/icons/New icons/clientes/users.svg');
}

.bz-icon-arrow-right {
    --bz-icon-url: url('/Img/icons/New icons/navegacao/arrow-right.svg');
}

.bz-icon-clock {
    --bz-icon-url: url('/Img/icons/New icons/agenda/clock.svg');
}

.bz-icon-goal {
    --bz-icon-url: url('/Img/icons/New icons/relatorios/goal.svg');
}

.bz-icon-flag {
    --bz-icon-url: url('/Img/icons/New icons/relatorios/flag.svg');
}

.bz-icon-user-report {
    --bz-icon-url: url('/Img/icons/New icons/relatorios/user.svg');
}

.bz-icon-users-round {
    --bz-icon-url: url('/Img/icons/New icons/relatorios/users-round.svg');
}

.bz-icon-palette {
    --bz-icon-url: url('/Img/icons/New icons/definicoes/palette.svg');
}

.bz-button-primary {
    border-color: var(--bz-primary-action-border-color, transparent);
    color: var(--bz-primary-action-color);
    background: var(--bz-primary-action-bg);
    box-shadow: var(--bz-primary-action-shadow, 0 10px 24px rgba(var(--bz-accent-color-rgb), .24));
}

.bz-button-secondary {
    border-color: var(--bz-accent-border);
    color: var(--bz-accent-color);
    background: rgba(255, 255, 255, .72);
}

.bz-button-secondary img {
    filter: var(--bz-accent-icon-filter);
}

.bz-button-danger {
    border-color: rgba(239, 68, 68, .28);
    color: var(--bz-red);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 22px rgba(239, 68, 68, .08);
}

.bz-button-success {
    border-color: var(--bz-green);
    color: var(--bz-green);
    background: #fff;
}

.bz-button-compact {
    min-height: 36px;
    padding: 0 12px;
    font-size: var(--bz-type-caption);
}

.bz-button-sm {
    min-height: 32px;
    padding: 0 10px;
    font-size: var(--bz-type-micro);
}

.bz-button-full {
    width: 100%;
}

.bz-settings-section {
    display: grid;
    gap: 10px;
    width: 100%;
}

.settings-page .bz-settings-section + .bz-settings-section {
    margin-top: 24px;
}

.settings-field-label {
    display: block;
    color: var(--bz-muted);
    font-size: var(--bz-type-caption);
    font-weight: 600;
    line-height: 1.2;
}

.bz-choice-grid {
    display: grid;
    gap: 10px;
    width: 100%;
}

.bz-choice-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bz-choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    min-height: 96px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    box-shadow: var(--bz-shadow-soft);
    cursor: pointer;
    color: var(--bz-text);
    box-sizing: border-box;
}

.bz-choice-card input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--bz-accent-color);
}

.bz-choice-card:has(input:checked) {
    border-color: var(--bz-accent-color);
    box-shadow: var(--bz-selected-ring);
    background: #fff;
}

.bz-choice-card strong {
    display: block;
    font-size: var(--bz-type-body-sm);
    font-weight: 600;
    color: var(--bz-text);
}

.bz-choice-card small,
.bz-help-text {
    display: block;
    margin: 4px 0 0;
    color: var(--bz-muted);
    font-size: var(--bz-type-caption);
    font-weight: 500;
    line-height: 1.4;
}

.bz-color-input-shell {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    box-shadow: var(--bz-shadow-soft);
    box-sizing: border-box;
}

.bz-color-field input[type="color"] {
    width: 100%;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.bz-accent-note {
    position: relative;
    display: block;
    margin: 2px 0 0;
    padding: 12px 14px 12px 16px;
    border-radius: var(--bz-radius-sm);
    border: 1px solid rgba(var(--bz-accent-color-rgb), .10);
    border-left: 4px solid var(--bz-accent-color);
    background: var(--bz-accent-soft);
    color: var(--bz-muted);
    font-size: var(--bz-type-caption);
    font-weight: 600;
    line-height: 1.45;
}

.settings-reset-button {
    width: fit-content;
    min-height: 40px;
    justify-self: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
}

.settings-reset-icon {
    width: 17px;
    height: 17px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url('/Img/icons/New icons/acoes-gerais/refresh-cw.svg') center / contain no-repeat;
    mask: url('/Img/icons/New icons/acoes-gerais/refresh-cw.svg') center / contain no-repeat;
}

.settings-action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.settings-action-grid > .bz-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.bz-appearance-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-screen-background);
}

.bz-status-pill.bz-status-accent {
    grid-column: 1 / -1;
    justify-self: flex-start;
    border: 1px solid var(--bz-accent-border);
    background: var(--bz-accent-soft);
    color: var(--bz-accent-color);
}

.bz-button-block-action {
    margin-top: 18px;
}

.bz-button-has-chevron {
    position: relative;
    padding-right: 36px;
}

.bz-button-chevron {
    position: absolute;
    right: 14px;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .9;
}

.bz-button-save::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background: url('/Img/icons/New icons/acoes-gerais/save.svg') center / contain no-repeat;
    filter: var(--bz-primary-action-icon-filter, brightness(0) invert(1));
}

.bz-button-primary img {
    filter: var(--bz-primary-action-icon-filter, brightness(0) invert(1));
}

.bz-button-loading-indicator {
    display: none;
}

.bz-button.is-loading .bz-button-loading-text {
    display: none;
}

.bz-button.is-loading .bz-button-loading-indicator {
    display: inline;
}

.bz-button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.bz-fixed-bottom-action {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 1001;
    width: min(calc(100vw - 32px), 728px);
    min-height: 52px;
    border-radius: var(--bz-radius);
}

.bz-fixed-bottom-actions {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 1001;
    width: min(calc(100vw - 32px), 728px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    gap: 12px;
}

.bz-fixed-bottom-actions.confirm-only {
    grid-template-columns: minmax(0, 1fr);
}

.bz-link-row,
button.bz-link-row,
a.bz-link-row {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 0;
    border-top: 1px solid #e5e7ef;
    background: transparent;
    background-color: transparent;
    color: var(--bz-accent-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
}

.bz-link-row:hover,
.bz-link-row:focus,
.bz-link-row:active {
    border: 0;
    border-top: 1px solid #e5e7ef;
    background: transparent;
    color: var(--bz-accent-color);
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

button.bz-link-row,
button.bz-link-row:hover,
button.bz-link-row:focus,
button.bz-link-row:active {
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #e5e7ef !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.bz-link-row-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bz-link-row-icon > span,
.bz-link-row-icon > img {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.bz-link-row-icon > img {
    filter: var(--bz-accent-icon-filter);
}

.bz-segment-option {
    flex: 1 1 0;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    color: var(--bz-text);
    cursor: pointer;
    padding: 10px 22px;
    text-align: left;
    box-shadow: var(--bz-shadow-soft);
}

.bz-segment-option.is-active {
    border-color: var(--bz-selected-border);
    background: var(--bz-selected-bg);
    color: var(--bz-accent-color);
    box-shadow: var(--bz-selected-ring);
}

.bz-segment-option.is-active .personal-time-mode-subtitle {
    color: var(--bz-accent-color);
}

.bz-agenda-color-button {
    min-height: 40px;
    border: 0;
    border-radius: var(--bz-radius-sm);
    background: var(--bz-agenda-button-color, var(--bz-accent-color));
    color: #fff;
    font-weight: 900;
}

.bz-select-service-bottom {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: min(250px, calc(100vw - 32px));
    min-height: 52px;
}

.bz-badge {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.bz-badge-success {
    background: var(--bz-green-soft);
    color: #079455;
}

.bz-badge-warning {
    background: var(--bz-yellow-soft);
    color: var(--bz-yellow-text);
}

.bz-badge-purple {
    background: var(--bz-accent-soft);
    color: var(--bz-accent-color);
}

.bz-badge-danger {
    background: var(--bz-red-soft);
    color: var(--bz-red);
}

.bz-option-card {
    position: relative;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius);
    background: var(--bz-control-bg);
    padding: 14px 44px 14px 14px;
    min-height: 80px;
    display: grid;
    gap: 5px;
    cursor: pointer;
    box-sizing: border-box;
}

.bz-option-card.is-selected {
    border-color: var(--bz-selected-border);
    box-shadow: var(--bz-selected-ring);
    background: var(--bz-selected-bg);
}

.bz-option-card input[type="radio"] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--bz-accent-color);
}

.bz-option-title {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--bz-type-body);
    font-weight: 600;
}

.bz-option-price {
    font-size: var(--bz-type-body-sm);
    font-weight: 600;
}

.bz-positive {
    color: #079455;
}

.bz-negative {
    color: var(--bz-red);
}

.bz-form-field {
    display: grid;
    gap: 5px;
    text-align: left;
}

.bz-form-field label,
.bz-form-field > span,
.bz-field-label {
    justify-self: start;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
}

.bz-form-field input,
.bz-form-field select,
.bz-form-field textarea,
.bz-input,
.bz-select,
.bz-textarea {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--bz-control-border);
    border-radius: 8px;
    background: var(--bz-control-bg);
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    font-size: var(--bz-type-body);
    font-weight: 500;
    padding: 9px 11px;
    box-shadow: var(--bz-shadow-soft);
    box-sizing: border-box;
}

.bz-form-field input:focus,
.bz-form-field select:focus,
.bz-form-field textarea:focus,
.bz-input:focus,
.bz-select:focus,
.bz-textarea:focus {
    border-color: var(--bz-accent-color);
    outline: none;
    box-shadow: var(--bz-shadow-soft);
}

.bz-auto-grow-textarea {
    overflow: hidden !important;
    resize: none !important;
}

.bz-detail-page {
    width: min(100%, 760px);
    min-height: 100vh;
    margin: 0 auto;
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    background: var(--bz-screen-background);
    background-repeat: no-repeat;
    background-size: cover;
}

.bz-detail-page *,
.bz-detail-page *::before,
.bz-detail-page *::after {
    box-sizing: border-box;
}

.bz-detail-section {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.bz-form-grid {
    display: grid;
    gap: 12px;
}

.bz-grid-span-full {
    grid-column: 1 / -1;
}

.bz-icon-input {
    position: relative;
    min-height: 42px;
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid var(--bz-control-border);
    border-radius: 8px;
    background: var(--bz-control-bg);
    box-shadow: var(--bz-shadow-soft);
    justify-self: stretch;
}

.bz-icon-input:focus-within {
    border-color: var(--bz-accent-color);
    box-shadow: var(--bz-shadow-soft);
}

.bz-icon-input-icon,
.bz-action-card-icon,
.bz-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bz-icon-input-icon img {
    width: 21px;
    height: 21px;
    filter: var(--bz-accent-icon-filter);
}

.bz-icon-input .bz-input,
.bz-icon-input .bz-textarea {
    min-height: 40px;
    padding: 0;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
    outline: 0 !important;
}

.bz-icon-input .bz-input:focus,
.bz-icon-input .bz-textarea:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.bz-icon-input .bz-textarea {
    min-height: 64px;
    padding: 8px 0;
    line-height: 1.45;
}

.bz-icon-input .intl-tel-input,
.bz-icon-input .iti {
    width: 100%;
    grid-column: 2;
}

.bz-icon-input .intl-tel-input .bz-input,
.bz-icon-input .iti .bz-input {
    padding-left: 50px;
}

.bz-form-field > .bz-icon-input {
    justify-self: stretch;
    width: 100%;
    color: var(--bz-text);
    font-size: var(--bz-type-body);
    font-weight: 500;
}

.bz-validation-text {
    grid-column: 2;
    min-height: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-validation-success {
    color: var(--bz-success);
}

.bz-validation-danger {
    color: var(--bz-danger);
}

.bz-switch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 2px 4px 0;
}

.bz-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    margin: 0;
    padding: 0 4px;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bz-switch-control {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #d1d5db;
    transition: background .16s ease;
}

.bz-switch-control::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transition: transform .16s ease;
}

.bz-switch-input:checked ~ .bz-switch-control {
    background: var(--bz-primary-action-bg);
}

.bz-switch-input:checked ~ .bz-switch-control::before {
    transform: translateX(18px);
}

.bz-action-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 50px;
}

.bz-action-card {
    min-height: 74px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    margin: 0;
    padding: 9px 8px;
    border: 1px solid var(--bz-control-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    box-shadow: var(--bz-shadow-soft);
}

.bz-action-card:hover,
.bz-action-card:focus {
    border-color: var(--bz-accent-border);
    outline: 0;
}

.bz-action-card-top {
    grid-column: span 2;
}

.bz-action-card-bottom {
    grid-column: span 3;
}

.bz-action-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--bz-accent-soft);
}

.bz-action-card-icon img {
    width: 22px;
    height: 22px;
    filter: var(--bz-accent-icon-filter);
}

.bz-action-card-whatsapp .bz-action-card-icon {
    background: rgba(37, 211, 102, .12);
}

.bz-action-card-whatsapp .bz-action-card-icon img {
    filter: invert(69%) sepia(72%) saturate(673%) hue-rotate(83deg) brightness(93%) contrast(88%);
}

.bz-action-card-danger .bz-action-card-icon {
    background: var(--bz-danger-soft);
}

.bz-action-card-danger .bz-action-card-icon img {
    filter: invert(35%) sepia(99%) saturate(2568%) hue-rotate(340deg) brightness(96%) contrast(93%);
}

.bz-tab-panel {
    display: none;
}

.bz-tab-panel.is-active {
    display: block;
}

.bz-empty-state {
    min-height: 92px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--bz-accent-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .42);
    color: var(--bz-muted);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.bz-empty-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bz-accent-soft);
}

.bz-empty-icon img {
    width: 22px;
    height: 22px;
    filter: var(--bz-accent-icon-filter);
}

.bz-association-list {
    width: 100%;
}

.bz-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 20px;
    padding: 0;
    list-style: none;
}

.bz-list-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--bz-shadow-soft);
    cursor: pointer;
}

.bz-list-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bz-accent-soft);
}

.bz-list-card-icon img {
    width: 22px;
    height: 22px;
    filter: var(--bz-accent-icon-filter);
}

.bz-list-card-body {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
}

.bz-list-card-body strong {
    color: var(--bz-text);
    font-size: 14px;
    font-weight: 600;
}

.bz-list-card-body span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bz-list-card-body span img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    filter: var(--bz-accent-icon-filter);
}

.bz-form-errors {
    color: var(--bz-danger);
    font-size: var(--bz-type-body-sm);
    font-weight: 600;
}

.bz-form-errors:empty {
    display: none;
}

.bz-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bz-toggle-row input[type="checkbox"] {
    width: 38px;
    height: 22px;
    accent-color: var(--bz-accent-color);
}

.bz-payment-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.bz-payment-method {
    min-height: 60px;
    border: 1px solid #d9dce6;
    border-radius: 8px;
    background: var(--bz-control-bg);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    box-sizing: border-box;
}

.bz-payment-method.is-selected,
.bz-payment-method.selected {
    border-color: var(--bz-selected-border);
    background: var(--bz-selected-bg);
    box-shadow: var(--bz-selected-ring);
}

.bz-payment-method input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    accent-color: var(--bz-accent-color);
}

.bz-payment-method img {
    width: 48px;
    max-height: 36px;
    object-fit: contain;
}

.bz-payment-method span {
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
}

.bz-mbway-panel {
    border: 0;
    border-radius: var(--bz-radius-sm);
    background: transparent;
    padding: 0;
    display: grid;
    gap: 10px;
}

.bz-mbway-input {
    border: 1px solid #d9dce6;
    border-radius: 8px;
    padding: 7px 9px;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.bz-mbway-input:focus-within {
    border-color: var(--bz-accent-color);
    box-shadow: 0 0 0 1px var(--bz-accent-color);
}

.bz-mbway-input .iti {
    width: 100%;
    flex: 1 1 auto;
}

.bz-mbway-input input {
    border: 0;
    outline: 0;
    min-height: auto;
    padding: 0;
    font-size: 14px;
    flex: 1;
}

.bz-mbway-input input,
.bz-mbway-input input:focus,
.bz-mbway-input .iti input,
.bz-mbway-input .iti input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
}

.bz-reference-state {
    display: grid;
    gap: 10px;
}

.bz-reference-head {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;
}

.bz-reference-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bz-accent-color);
    box-shadow: 0 0 0 6px var(--bz-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bz-reference-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.bz-reference-card {
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: center;
}

.bz-reference-card img {
    width: 58px;
    max-height: 46px;
    object-fit: contain;
}

.bz-reference-details {
    display: grid;
    gap: 5px;
    color: #333b4f;
    font-size: 13px;
}

.bz-reference-details b {
    color: var(--bz-text);
    font-weight: 900;
}

.bz-payment-help {
    border-radius: 8px;
    background: var(--bz-accent-soft);
    color: var(--bz-accent-color);
    padding: 10px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.bz-payment-help b {
    display: block;
    font-size: 12px;
    font-weight: 900;
}

.bz-payment-help small {
    display: block;
    color: #363f72;
    font-size: 12px;
    line-height: 1.35;
}

.bz-payment-help-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bz-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.bz-payment-help-icon img {
    width: 13px;
    height: 13px;
    filter: var(--bz-accent-icon-filter);
}

.bz-new-reference {
    border: 0;
    background: transparent;
    justify-self: flex-start;
    padding: 3px 0;
    color: var(--bz-accent-color);
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

.bz-new-reference-icon {
    color: var(--bz-green);
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.bz-bottom-summary {
    position: sticky;
    bottom: 0;
    z-index: 3;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius) var(--bz-radius) 0 0;
    background: rgba(255, 255, 255, .96);
    padding: 12px;
    margin-top: 12px;
    display: grid;
    gap: 12px;
    box-shadow: 0 -10px 28px rgba(19, 18, 66, .06);
}

.bz-total-row,
.bz-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--bz-text);
    font-size: 13px;
}

.bz-total-row strong {
    color: var(--bz-accent-color);
    font-size: 17px;
}

.bz-detail-row {
    padding: 6px 0;
    border-bottom: 1px solid #eef0f5;
}

.bz-detail-row:last-child {
    border-bottom: 0;
}

.bz-detail-row span:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4b5565;
}

.bz-detail-row img {
    width: 14px;
    height: 14px;
    opacity: .7;
}

.bz-detail-row strong {
    text-align: right;
    font-weight: 600;
}

.bz-chevron {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bz-chevron:after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--bz-accent-color);
    border-top: 2px solid var(--bz-accent-color);
    transform: rotate(45deg);
}

.bz-app-header {
    min-height: var(--bz-app-header-height);
    display: grid;
    grid-template-columns: var(--bz-app-header-action-size) minmax(0, 1fr) var(--bz-app-header-action-size);
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px 8px;
    background: var(--bz-header-bg);
    border-bottom: 1px solid var(--bz-header-border);
    box-shadow: var(--bz-header-shadow);
    backdrop-filter: blur(14px);
    box-sizing: border-box;
}

.bz-app-header-fixed {
    position: fixed;
    top: 0;
    left: var(--bz-app-header-left, 0);
    right: var(--bz-app-header-right, 0);
    z-index: var(--bz-app-header-z, 1000);
}

.bz-app-header-sticky {
    position: sticky;
    top: 0;
    z-index: var(--bz-app-header-z, 20);
}

.bz-app-header-contained {
    width: min(100vw, var(--bz-app-header-contained-width, 760px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.bz-app-header-offset-menu {
    --bz-app-header-left: 50px;
}

.bz-app-header-title {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    display: block;
    width: min(100%, calc(100% - (var(--bz-app-header-action-size) * 2 + 20px)));
    min-width: 0;
    margin: 0;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.bz-app-header-spacer {
    grid-column: 3;
    grid-row: 1;
    width: var(--bz-app-header-action-size);
    min-width: var(--bz-app-header-action-size);
    height: 1px;
}

.bz-app-back {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: var(--bz-app-header-action-size);
    height: var(--bz-app-header-action-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.bz-app-back img {
    width: var(--bz-app-header-back-icon-size);
    height: var(--bz-app-header-back-icon-size);
    opacity: .72;
}

.bz-app-action-primary,
.bz-app-action-danger {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: var(--bz-app-header-action-size);
    height: var(--bz-app-header-action-size);
    min-width: var(--bz-app-header-action-size);
    min-height: var(--bz-app-header-action-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.bz-app-action-primary {
    border: 1px solid var(--bz-primary-action-border-color, transparent);
    background: var(--bz-primary-action-bg);
    color: var(--bz-primary-action-color);
    box-shadow: var(--bz-primary-action-shadow, 0 8px 18px rgba(var(--bz-accent-color-rgb), .28));
}

.bz-app-action-primary img {
    width: 24px;
    height: 24px;
    filter: var(--bz-primary-action-icon-filter, brightness(0) invert(1));
}

.bz-app-action-danger {
    border: 1px solid rgba(239, 68, 68, .24);
    background: rgba(254, 226, 226, .72);
}

.bz-app-action-danger:disabled {
    opacity: .55;
    cursor: default;
}

.bz-app-action-danger img {
    width: 24px;
    height: 24px;
    filter: invert(35%) sepia(99%) saturate(2568%) hue-rotate(340deg) brightness(96%) contrast(93%);
}

.bz-app-header-danger-left {
    grid-template-columns: calc(var(--bz-app-header-action-size) * 2 + 8px) minmax(0, 1fr) var(--bz-app-header-action-size);
}

.bz-app-header-danger-left .bz-app-action-danger {
    grid-column: 1;
    justify-self: start;
}

.bz-app-header-danger-left .bz-app-back {
    grid-column: 1;
    justify-self: end;
}

.bz-surface-card {
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius);
    background: var(--bz-control-bg);
    box-shadow: var(--bz-shadow-soft);
}

.bz-service-card {
    min-width: 0;
    display: grid;
    gap: 12px;
    border: 1px solid var(--bz-control-border);
    border-left: 5px solid var(--bz-service-color, var(--bz-accent-color));
    border-radius: var(--bz-radius);
    background: var(--bz-control-bg);
    box-shadow: var(--bz-shadow-soft);
    color: var(--bz-text);
    box-sizing: border-box;
}

.bz-service-card-title {
    margin: 0;
    color: var(--bz-text);
    font-size: var(--bz-type-body);
    font-weight: 600;
    line-height: 1.25;
}

.bz-service-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--bz-text);
    font-size: var(--bz-type-caption);
    font-weight: 600;
}

.bz-action-primary {
    min-height: 52px;
    border: 1px solid var(--bz-primary-action-border-color, transparent);
    border-radius: var(--bz-radius);
    background: var(--bz-primary-action-bg);
    color: var(--bz-primary-action-color);
    box-shadow: var(--bz-primary-action-shadow, 0 10px 24px rgba(var(--bz-accent-color-rgb), .24));
    font-size: 15px;
    font-weight: 600;
}

.bz-action-secondary {
    min-height: 42px;
    border: 1px solid var(--bz-accent-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: var(--bz-accent-color);
    font-size: 13px;
    font-weight: 600;
}

.bz-tabs {
    display: grid;
    gap: 14px;
}

.bz-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
}

.bz-filter-bar::-webkit-scrollbar {
    display: none;
}

.bz-filter-group {
    display: grid;
    gap: 4px;
}

.bz-filter-bar-stacked {
    display: grid;
    align-items: stretch;
    gap: 6px;
    overflow: visible;
    padding: 0;
}

.bz-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
}

.bz-filter-row::-webkit-scrollbar {
    display: none;
}

.bz-filter-select,
.bz-filter-chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-sm);
    background: rgba(255, 255, 255, .86);
    color: var(--bz-text);
    box-shadow: var(--bz-shadow-soft);
}

.bz-filter-select {
    position: relative;
    min-width: 190px;
    padding: 0 10px;
}

.bz-filter-row .bz-filter-select {
    width: 100%;
    max-width: 260px;
}

.bz-filter-bar-stacked .bz-filter-row:first-child .bz-filter-select {
    max-width: none;
}

.bz-filter-select img,
.bz-filter-chip img {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.bz-filter-select img {
    filter: var(--bz-accent-icon-filter);
}

.bz-filter-select select {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    font-size: 12px;
    font-weight: 600;
    outline: 0;
}

.bz-filter-chip {
    margin: 0;
    padding: 0 12px;
    font-family: var(--bz-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.bz-filter-chip.is-active {
    border-color: var(--bz-accent-color);
    color: var(--bz-accent-color);
    box-shadow: var(--bz-selected-ring);
}

.bz-filter-chip-danger img {
    filter: invert(35%) sepia(99%) saturate(2568%) hue-rotate(340deg) brightness(96%) contrast(93%);
}

.bz-filter-chip-warning img {
    filter: invert(62%) sepia(75%) saturate(1897%) hue-rotate(2deg) brightness(102%) contrast(94%);
}

.bz-filter-chip-muted img {
    filter: invert(30%) sepia(12%) saturate(1111%) hue-rotate(176deg) brightness(94%) contrast(87%);
}

.bz-tab-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--bz-border);
}

.bz-tab {
    position: relative;
    min-height: 50px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.bz-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: transparent;
}

.bz-tab.is-active {
    color: var(--bz-accent-color);
}

.bz-tab.is-active::after {
    background: var(--bz-accent-color);
}

.bz-appointment-list {
    display: grid;
    gap: 10px;
}

.bz-appointment-link,
.bz-appointment-link:hover,
.bz-appointment-link:focus {
    color: inherit;
    text-decoration: none;
    outline: 0;
}

.bz-appointment-card {
    --bz-appointment-color: var(--bz-accent-color);
    --bz-appointment-state-color: var(--bz-border);
    --bz-agenda-color: var(--bz-accent-color);
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--bz-appointment-state-color);
    border-left: 5px solid var(--bz-appointment-color);
    border-radius: var(--bz-radius-sm);
    background: #fff;
    box-shadow: var(--bz-shadow-soft);
    overflow: hidden;
    text-align: left;
}

.bz-appointment-card-muted {
    opacity: .62;
}

.bz-appointment-card-main {
    min-width: 0;
    display: grid;
    gap: 5px;
    justify-items: start;
    text-align: left;
}

.bz-appointment-card-header {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bz-appointment-card-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.bz-appointment-card-date {
    min-width: 0;
    color: var(--bz-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.bz-appointment-card-title {
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-appointment-card-agenda {
    position: relative;
    width: fit-content;
    padding-bottom: 4px;
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-appointment-card-agenda::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--bz-agenda-color);
}

.bz-appointment-card-note {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bz-accent-soft);
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.bz-appointment-card-meta {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.bz-appointment-card-meta span:not(.bz-pill) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bz-appointment-card-meta .bz-status-inline {
    margin-left: auto;
}

.bz-appointment-card-meta img {
    width: 14px;
    height: 14px;
    filter: invert(25%) sepia(17%) saturate(907%) hue-rotate(176deg) brightness(91%) contrast(87%);
}

.bz-status-pill,
.bz-status-inline,
.bz-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    font-family: var(--bz-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.bz-status-pill {
    min-height: 28px;
    padding: 0 10px;
}

.bz-status-inline {
    min-height: 22px;
    padding: 0;
    background: transparent !important;
}

.bz-status-pill img,
.bz-status-inline img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.bz-pill {
    min-height: 24px;
    padding: 0 11px;
}

.bz-status-success,
.bz-pill-success {
    background: var(--bz-success-soft);
    color: var(--bz-success);
}

.bz-status-success img {
    filter: invert(47%) sepia(96%) saturate(465%) hue-rotate(101deg) brightness(94%) contrast(94%);
}

.bz-status-danger {
    background: var(--bz-danger-soft);
    color: var(--bz-danger);
}

.bz-status-danger img {
    filter: invert(35%) sepia(99%) saturate(2568%) hue-rotate(340deg) brightness(96%) contrast(93%);
}

.bz-status-warning {
    background: var(--bz-warning-soft);
    color: var(--bz-warning);
}

.bz-status-warning img {
    filter: invert(62%) sepia(75%) saturate(1897%) hue-rotate(2deg) brightness(102%) contrast(94%);
}

.bz-status-muted {
    background: rgba(100, 116, 139, .10);
    color: #64748b;
}

.bz-status-muted img {
    filter: invert(45%) sepia(15%) saturate(632%) hue-rotate(176deg) brightness(90%) contrast(86%);
}

.bz-status-info {
    background: var(--bz-info-soft);
    color: var(--bz-info);
}

.bz-status-info img {
    filter: invert(40%) sepia(69%) saturate(2095%) hue-rotate(204deg) brightness(96%) contrast(94%);
}

.bz-appointment-card-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 0;
    filter: invert(8%) sepia(18%) saturate(1442%) hue-rotate(181deg) brightness(83%) contrast(103%);
}

.bz-metrics-banner {
    display: grid;
    grid-template-columns: repeat(var(--bz-metrics-columns, 5), minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    background: var(--bz-primary-action-bg);
    box-shadow: none;
    padding:0px;
}

.bz-metrics-banner-3 {
    --bz-metrics-columns: 3;
}

.bz-metric-item {
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-height: 82px;
    padding: 10px 8px;
    color: var(--bz-primary-action-color);
    text-align: center;
}

.bz-metric-item + .bz-metric-item {
    border-left: 1px solid rgba(255, 255, 255, .34);
}

.bz-metric-icon {
    width: 21px;
    height: 21px;
}

.bz-metric-icon img {
    width: 21px;
    height: 21px;
    filter: var(--bz-primary-action-icon-filter, brightness(0) invert(1));
    opacity: .74;
}

.bz-metric-item span:not(.bz-metric-icon) {
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    opacity: .88;
}

.bz-metric-item strong {
    min-width: 0;
    color: var(--bz-primary-action-color);
    max-width: 100%;
    font-size: clamp(13px, 2.6vw, 18px);
    font-weight: 600;
    line-height: 1;
    overflow-wrap: anywhere;
}

.bz-header-text-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    border: 0;
    background: transparent;
    color: var(--bz-accent-color);
    font-family: var(--bz-font-family);
    font-size: 13px;
    font-weight: 600;
    min-height: var(--bz-app-header-action-size);
    padding: 4px 6px;
}

.bz-field-clear {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bz-muted);
    font-size: 18px;
    line-height: 1;
}

.bz-bottom-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 24%, rgba(255,255,255,.98));
}

.bz-option-list {
    display: grid;
    gap: 8px;
}

.bz-option-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border: 1px solid var(--bz-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--bz-shadow-soft);
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
}

.bz-option-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--bz-accent-color);
}

.bz-campaign-history-modal,
.bz-campaign-history-modal * {
    box-sizing: border-box;
}

.bz-campaign-history-dialog {
    --bz-app-header-contained-width: 430px;
    width: min(100%, 430px);
    background: var(--bz-appointment-page-background);
    background-repeat: no-repeat;
    background-size: cover;
}

.bz-campaign-history-view {
    display: none;
    min-height: 100vh;
}

.bz-campaign-history-view.is-active {
    display: block;
}

.bz-campaign-history-content {
    display: grid;
    gap: 12px;
    padding: 12px 10px 90px;
}

.bz-section-title {
    margin: 8px 0 0;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.bz-campaign-card-list {
    display: grid;
    gap: 10px;
}

.bz-campaign-summary-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px 34px 12px 14px;
    overflow: hidden;
}

.bz-campaign-summary-card[hidden],
.bz-campaign-summary-card.is-filter-hidden {
    display: none !important;
}

.bz-card-click {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bz-campaign-card-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
}

.bz-campaign-accent-running,
.bz-campaign-legend-running img {
    background: var(--bz-warning);
}

.bz-campaign-accent-done,
.bz-campaign-legend-done img {
    background: var(--bz-success);
}

.bz-campaign-accent-error,
.bz-campaign-legend-error img {
    background: var(--bz-danger);
}

.bz-campaign-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.bz-campaign-card-header strong {
    min-width: 0;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-campaign-preview {
    margin: 0;
    color: var(--bz-text) !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    white-space: pre-wrap;
}

.bz-campaign-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.bz-campaign-stat-grid > span {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 3px;
    color: var(--bz-muted);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

.bz-campaign-stat-grid > span > span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.bz-campaign-date-row span {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--bz-muted);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.bz-campaign-date-row span span {
    width: auto;
    display: inline;
}

.bz-campaign-stat-grid img,
.bz-campaign-date-row img {
    width: 14px;
    height: 14px;
    filter: invert(25%) sepia(17%) saturate(907%) hue-rotate(176deg) brightness(91%) contrast(87%);
}

.bz-campaign-stat-grid strong {
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
}

.bz-campaign-stat-grid small {
    color: var(--bz-muted);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

.bz-campaign-date-row {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
}

.bz-campaign-date-row::-webkit-scrollbar {
    display: none;
}

.bz-campaign-card-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    filter: invert(8%) sepia(18%) saturate(1442%) hue-rotate(181deg) brightness(83%) contrast(103%);
}

.bz-campaign-state-legend {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.bz-campaign-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bz-campaign-legend-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px 8px;
    min-height: 76px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .66);
    border: 1px solid var(--bz-border);
    box-shadow: var(--bz-shadow-soft);
}

.bz-campaign-legend-item img {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 9px;
    filter: brightness(0) invert(1);
}

.bz-campaign-legend-canceled img {
    background: #64748b;
}

.bz-campaign-legend-item strong {
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
}

.bz-campaign-legend-item span {
    color: var(--bz-muted);
    font-size: 11px;
    line-height: 1.25;
}

.bz-campaign-message-card {
    display: grid;
    gap: 12px;
    border-color: rgba(245, 158, 11, .42);
}

.bz-campaign-message-card p {
    margin: 0;
    color: var(--bz-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    white-space: pre-wrap;
    text-align: left;
}

.bz-summary-list {
    display: grid;
    padding: 0;
    overflow: hidden;
}

.bz-summary-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--bz-border);
}

.bz-summary-list div:last-child {
    border-bottom: 0;
}

.bz-summary-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 500;
}

.bz-summary-list img {
    width: 15px;
    height: 15px;
    filter: var(--bz-accent-icon-filter);
}

.bz-summary-list strong {
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.bz-campaign-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
}

.bz-campaign-action-grid .bz-action-card-top {
    grid-column: auto;
}

.bz-campaign-action-grid .bz-action-card strong {
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
}

.bz-campaign-details-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bz-campaign-details-card span {
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 500;
}

.bz-campaign-details-card button {
    border: 0;
    background: transparent;
    color: var(--bz-accent-color);
    font-size: 12px;
    font-weight: 600;
}

.bz-campaign-cancel-button {
    width: 100%;
    background: var(--bz-danger-soft);
}

.bz-campaign-cancel-button[hidden] {
    display: none !important;
}

.bz-campaign-sms-panel {
    display: grid;
    gap: 12px;
}

body.white-back.bz-sms-history-body:not(.agenda-page),
body.bz-sms-history-body {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

.bz-sms-history-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 28px 28px 44px;
    background: var(--bz-screen-background);
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    text-align: left;
}

.bz-sms-history-page * {
    text-align: left;
}

.bz-sms-history-shell {
    width: min(100%, 860px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 24px;
    text-align: left;
}

.bz-sms-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
}

.bz-sms-history-header h1 {
    margin: 0;
    color: var(--bz-text);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.12;
}

.bz-sms-history-count {
    color: #172554;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    justify-self: start;
    text-align: left;
}

.bz-sms-history-list {
    display: grid;
    gap: 10px;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.bz-sms-history-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    min-height: 142px;
    padding: 18px 22px;
    border: 1px solid var(--bz-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.bz-sms-history-card[hidden] {
    display: none !important;
}

.bz-sms-history-date,
.bz-sms-history-main {
    min-width: 0;
    display: grid;
}

.bz-sms-history-date {
    grid-template-rows: auto auto auto 1fr auto;
    justify-items: start;
    align-items: start;
    gap: 6px;
    color: #172554;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.bz-sms-history-main {
    gap: 5px;
    align-content: start;
    justify-items: start;
    text-align: left;
}

.bz-sms-history-main strong {
    color: var(--bz-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-sms-history-main span {
    color: #334155;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.bz-sms-history-main p {
    margin: 7px 0 0;
    color: var(--bz-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.bz-sms-history-pill {
    min-width: 0;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    justify-self: start;
}

.bz-sms-history-pill-icon {
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
}

.bz-sms-history-consumed {
    align-self: end;
    margin-top: 14px;
    color: #172554;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-sms-history-pill.sms-state-pending {
    background: rgba(239, 68, 68, .10);
    color: #DC2626;
}

.bz-sms-history-pill.sms-state-pending .bz-sms-history-pill-icon {
    -webkit-mask: url("/Img/icons/New icons/sms-estados/message-square-x.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/sms-estados/message-square-x.svg") center / contain no-repeat;
}

.bz-sms-history-pill.sms-state-sent {
    background: rgba(163, 230, 53, .20);
    color: #3F6212;
}

.bz-sms-history-pill.sms-state-sent .bz-sms-history-pill-icon {
    -webkit-mask: url("/Img/icons/New icons/sms-estados/message-square-share.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/sms-estados/message-square-share.svg") center / contain no-repeat;
}

.bz-sms-history-pill.sms-state-delivered {
    background: rgba(34, 197, 94, .12);
    color: #15803D;
}

.bz-sms-history-pill.sms-state-delivered .bz-sms-history-pill-icon {
    -webkit-mask: url("/Img/icons/New icons/sms-estados/message-square-check.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/sms-estados/message-square-check.svg") center / contain no-repeat;
}

.bz-sms-history-compact {
    gap: 14px;
}

.bz-campaign-history-modal #SMSHistory {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: visible;
}

.bz-sms-history-compact .bz-sms-history-count {
    font-size: 14px;
}

.bz-sms-history-compact .bz-sms-history-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    min-height: 116px;
    padding: 14px;
}

.bz-sms-history-compact .bz-sms-history-date {
    font-size: 12px;
}

.bz-sms-history-compact .bz-sms-history-main strong,
.bz-sms-history-compact .bz-sms-history-main span {
    font-size: 14px;
}

.bz-sms-history-compact .bz-sms-history-main p {
    font-size: 13px;
    line-height: 1.45;
}

.bz-sms-history-compact .bz-sms-history-pill {
    min-height: 24px;
    font-size: 12px;
}

.bz-sms-history-compact .bz-sms-history-consumed {
    font-size: 11px;
}

@media (max-width: 767px) {
    .bz-sms-history-page {
        padding: 18px 10px 32px;
    }

    .bz-sms-history-shell {
        gap: 14px;
    }

    .bz-sms-history-header h1 {
        font-size: 24px;
    }

    .bz-sms-history-count {
        font-size: 15px;
    }

    .bz-sms-history-card {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
        min-height: 116px;
        padding: 12px 10px;
    }

    .bz-sms-history-date {
        font-size: 11px;
    }

    .bz-sms-history-main strong,
    .bz-sms-history-main span {
        font-size: 14px;
    }

    .bz-sms-history-main p {
        font-size: 13px;
        line-height: 1.45;
    }

    .bz-sms-history-pill {
        min-height: 24px;
        padding: 0 8px;
        font-size: 11px;
    }

    .bz-sms-history-consumed {
        font-size: 11px;
    }
}

@media (max-width: 430px) {
    .bz-sms-history-card {
        grid-template-columns: 84px minmax(0, 1fr);
    }
}

.bz-confirm-layer {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: grid;
    align-items: end;
    justify-items: center;
}

.bz-confirm-layer[hidden] {
    display: none;
}

.bz-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
}

.bz-confirm-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    display: grid;
    gap: 14px;
    padding: 26px 18px 18px;
    border-radius: 14px 14px 0 0;
    background: #fff;
    box-shadow: 0 -18px 38px rgba(15, 23, 42, .18);
    text-align: center;
}

.bz-confirm-dialog > img {
    width: 28px;
    height: 28px;
    justify-self: center;
    filter: invert(62%) sepia(75%) saturate(1897%) hue-rotate(2deg) brightness(102%) contrast(94%);
}

.bz-confirm-dialog h3 {
    margin: 0;
    color: var(--bz-text);
    font-size: 18px;
    font-weight: 600;
}

.bz-confirm-dialog p {
    margin: 0;
    color: var(--bz-muted);
    font-size: 14px;
    line-height: 1.45;
}

.bz-campaign-warning {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(245, 158, 11, .34);
    border-radius: 8px;
    background: rgba(245, 158, 11, .10);
    color: var(--bz-text);
    text-align: left;
}

.bz-campaign-warning strong {
    color: var(--bz-warning);
    font-size: 13px;
    font-weight: 600;
}

.bz-campaign-warning span {
    color: var(--bz-muted);
    font-size: 12px;
    line-height: 1.35;
}

@media (min-width: 900px) {
    .bz-shell {
        width: min(100%, 760px);
        padding: 22px;
    }

    .bz-card h2 {
        font-size: 20px;
    }

    .bz-fixed-bottom-action,
    .bz-fixed-bottom-actions {
        width: min(calc(100vw - 32px), 728px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

@media (min-width: 768px) {
    .bz-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bz-switch-grid {
        width: fit-content;
        grid-template-columns: repeat(2, max-content);
        gap: 28px;
    }

    .bz-switch-row {
        justify-content: flex-start;
    }

    .bz-filter-bar-stacked {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .bz-filter-bar-stacked .bz-filter-row {
        overflow: visible;
        padding: 0;
    }

    .bz-filter-bar-stacked .bz-filter-row:first-child {
        flex: 0 0 240px;
    }

    .bz-filter-bar-stacked .bz-filter-row:last-child {
        flex: 1 1 auto;
    }

    .bz-filter-bar-stacked .bz-filter-row:first-child .bz-filter-select {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 767px) {
    .bz-filter-bar-stacked .bz-filter-row {
        display: grid;
        width: 100%;
        overflow: visible;
    }

    .bz-filter-bar-stacked .bz-filter-row:first-child {
        grid-template-columns: 1fr;
    }

    .bz-filter-bar-stacked .bz-filter-row:last-child {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bz-filter-bar-stacked .bz-filter-select,
    .bz-filter-bar-stacked .bz-filter-chip {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .bz-filter-bar-stacked .bz-filter-select {
        justify-content: flex-start;
    }

    .bz-appointment-card-meta .bz-status-inline {
        margin-left: auto;
    }

    .bz-detail-page {
        width: 100%;
    }

    .bz-detail-section {
        padding: 12px;
    }

    .bz-switch-grid {
        grid-template-columns: 1fr;
    }

    .bz-filter-bar {
        margin: 0 -2px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .bz-filter-select {
        min-width: 180px;
    }

    .bz-metric-item {
        min-height: 78px;
        padding: 10px 6px;
    }

    .bz-metric-item strong {
        font-size: 17px;
    }
}

@media (max-width: 420px) {
    .bz-metric-item span:not(.bz-metric-icon) {
        font-size: 10px;
    }

    .bz-metric-item strong {
        font-size: 16px;
    }
}

/* Reusable modal action dialog. */
.modal-around.bz-action-dialog-backdrop {
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.bz-action-dialog {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100031;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 20px);
    margin: 0;
    padding: 34px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .84);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    overflow-y: auto;
}

.bz-action-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .06);
    color: var(--bz-text);
    cursor: pointer;
}

.bz-action-dialog-close-icon,
.bz-action-dialog-icon,
.bz-action-dialog-option-icon {
    display: inline-block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--bz-action-dialog-icon) center / contain no-repeat;
    mask: var(--bz-action-dialog-icon) center / contain no-repeat;
}

.bz-action-dialog-close-icon {
    --bz-action-dialog-icon: url('/Img/icons/New icons/estados/x.svg');
    width: 18px;
    height: 18px;
}

.bz-action-dialog-hero {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--bz-accent-soft);
    color: var(--bz-accent-readable);
}

.bz-action-dialog-icon {
    width: 34px;
    height: 34px;
}

.bz-action-dialog-title {
    margin: 0;
    color: var(--bz-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.bz-action-dialog-subtitle {
    margin: 8px 0 0;
    color: var(--bz-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
}

.bz-action-dialog-options {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.bz-action-dialog-option {
    width: 100%;
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--bz-control-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    color: var(--bz-text);
    box-shadow: var(--bz-shadow-soft);
    text-align: left;
    cursor: pointer;
}

.bz-action-dialog-option-icon {
    width: 30px;
    height: 30px;
    color: var(--bz-accent-readable);
}

.bz-action-dialog-option-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.bz-action-dialog-option-copy strong {
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-action-dialog-option-copy small {
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

.bz-action-dialog-option-primary {
    border-color: var(--bz-primary-action-border-color);
    background: var(--bz-primary-action-bg);
    color: var(--bz-primary-action-color);
    box-shadow: var(--bz-primary-action-shadow);
}

.bz-action-dialog-option-primary .bz-action-dialog-option-icon,
.bz-action-dialog-option-primary .bz-action-dialog-option-copy small {
    color: currentColor;
}

.bz-action-dialog-option-muted {
    border-color: transparent;
    background: rgba(15, 23, 42, .045);
    color: var(--bz-text);
    box-shadow: none;
}

.bz-action-dialog-option-muted .bz-action-dialog-option-icon {
    color: var(--bz-muted);
}

.bz-action-dialog-cancel {
    width: 100%;
    margin-top: 20px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--bz-accent-readable);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}

@media (max-width: 767px) {
    .bz-action-dialog {
        max-height: calc(100vh - 12px);
    }
}

/* Appointment edit v2 */
.modal-content-appoint {
    --bz-accent-color: var(--bz-config-accent-color, #7c3aed);
    --bz-accent-color-rgb: var(--bz-config-accent-color-rgb, 124, 58, 237);
    --bz-accent-soft: var(--bz-config-accent-soft, rgba(124, 58, 237, .10));
    --bz-accent-border: var(--bz-config-accent-border, rgba(124, 58, 237, .36));
    --bz-accent-strong-border: var(--bz-config-accent-strong-border, rgba(124, 58, 237, .58));
    --bz-accent-icon-filter: var(--bz-config-accent-icon-filter, invert(40%) sepia(88%) saturate(2369%) hue-rotate(238deg) brightness(97%) contrast(94%));
    --bz-primary-action-bg: var(--bz-config-primary-action-bg, var(--bz-default-action-gradient));
    --appointment-primary: var(--bz-config-accent-color, #7c3aed);
    --appointment-primary-gradient: var(--bz-primary-action-bg);
    --appointment-page-background:
        radial-gradient(
            circle at 18% 12%,
            rgba(255, 135, 190, 0.10) 0%,
            rgba(255, 135, 190, 0.055) 22%,
            rgba(255, 135, 190, 0) 48%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(167, 139, 250, 0.095) 0%,
            rgba(167, 139, 250, 0.052) 24%,
            rgba(167, 139, 250, 0) 52%
        ),
        radial-gradient(
            circle at 12% 74%,
            rgba(96, 165, 250, 0.085) 0%,
            rgba(96, 165, 250, 0.045) 24%,
            rgba(96, 165, 250, 0) 54%
        ),
        radial-gradient(
            circle at 78% 92%,
            rgba(236, 72, 153, 0.07) 0%,
            rgba(236, 72, 153, 0.038) 26%,
            rgba(236, 72, 153, 0) 56%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFCFF 28%,
            #FBFDFF 52%,
            #FFF7FC 100%
        );
    --appointment-page-background: var(--bz-screen-background);
    width: min(100vw, 760px) !important;
    max-width: 760px !important;
    min-height: 100vh;
    margin: 0 auto !important;
    border: 0;
    border-radius: 0;
    background: var(--appointment-page-background);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: none;
    color: #1f2942;
    font-family: var(--bz-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-content-appoint .BookAppointment {
    width: 100%;
    gap: 18px;
    padding: calc(var(--bz-app-header-height) + 16px) 24px 92px;
}

.modal-content-appoint.client-record-modal .client-record-modal-content {
    width: 100%;
    box-sizing: border-box;
    padding: calc(var(--bz-app-header-height) + 16px) 16px 96px !important;
}

.modal-content-appoint .appointment-agenda-row {
    position: relative;
    align-items: flex-start;
    gap: 12px;
}

.modal-content-appoint .appointment-agenda-row .appointment-agenda-selector {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.modal-content-appoint .appointment-agenda-row .tempo-pessoal {
    position: absolute;
    top: 0;
    right: 0;
    flex: 0 0 auto;
    margin-left: 0;
    display: flex;
    align-items: flex-start;
    width: auto;
    gap: 8px;
    padding-top: 0;
}

.modal-content-appoint .appointment-agenda-row .tempo-pessoal .Bool-lbl {
    color: #111827;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.modal-content-appoint .appointment-agenda-row .tempo-pessoal .switch {
    margin-top: 0;
}

.modal-content-appoint .switch {
    width: 42px;
    height: 23px;
}

.modal-content-appoint .togle {
    background: #d5d6de;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .16);
}

.modal-content-appoint .togle:before {
    width: 17px;
    height: 17px;
    left: 3px;
    bottom: 3px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22);
}

.modal-content-appoint input:checked + .togle {
    background: var(--appointment-primary-gradient);
}

.modal-content-appoint input:checked + .togle:before {
    transform: translateX(19px);
}


.modal-content-appoint .appointment-field-label,
.modal-content-appoint .colorArea > label,
.modal-content-appoint .deleteExArea > label,
.modal-content-appoint .flexDivInner > label[for="App_Annotations"] {
    color: #111827;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.modal-content-appoint #selected-option-name {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 35px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px 22px 10px 4px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    box-shadow: inset 0 -3px 0 var(--appointment-agenda-color, var(--bz-accent-color));
    font-size: 12px !important;
    font-weight: 600;
    line-height: 19px;
    cursor: pointer;
    text-align: center;
}

.modal-content-appoint #selected-option-name::before {
    content: none;
    position: absolute;
    left: 20px;
    width: 24px;
    height: 24px;
    background: url('/Img/icons/New icons/agenda/calendar.svg') center / contain no-repeat;
    filter: brightness(0) invert(1);
}

.modal-content-appoint #selected-option-name::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 10px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #64748B;
}

.modal-content-appoint #DropDownAgendas {
    margin: 8px 0 0 !important;
    border-radius: 14px;
    overflow: hidden;
}

.modal-content-appoint .appointment-date-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.modal-content-appoint .appointment-date-layout .personal-time-date-row,
.modal-content-appoint .appointment-date-layout .personal-time-hours-row,
.modal-content-appoint .personal-time-date-row,
.modal-content-appoint .personal-time-hours-row,
.modal-content-appoint .personal-time-full-days-row {
    width: 100%;
}

.modal-content-appoint .app-date-time .app-date,
.modal-content-appoint .personal-time-hours-row .app-date,
.modal-content-appoint .personal-time-full-days-row .app-date {
    width: 100%;
    gap: 8px;
}

.modal-content-appoint .BookAppointment input,
.modal-content-appoint .BookAppointment select,
.modal-content-appoint .app-date-time input,
.modal-content-appoint .recurrentFieldsArea input,
.modal-content-appoint .recurrentFieldsArea select {
    width: 100%;
    max-width: none;
    min-height: 46px;
    padding: 0 12px 0 42px;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .72);
    color: #25304f;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

.modal-content-appoint .BookAppointment input.colorSelector,
.modal-content-appoint .colorArea .colorSelector {
    width: 58px;
    max-width: 58px;
    min-height: 46px;
    height: 46px;
    padding: 3px !important;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
    cursor: pointer;
}

.modal-content-appoint .BookAppointment input.colorSelector::-webkit-color-swatch-wrapper,
.modal-content-appoint .colorArea .colorSelector::-webkit-color-swatch-wrapper {
    padding: 0;
}

.modal-content-appoint .BookAppointment input.colorSelector::-webkit-color-swatch,
.modal-content-appoint .colorArea .colorSelector::-webkit-color-swatch {
    border: 0;
    border-radius: 10px;
}

.modal-content-appoint #App_Datetest,
.modal-content-appoint #ExeptionVM_ExEndDate {
    background-image: url('/Img/icons/New icons/agenda/calendar.svg');
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px;
}

.modal-content-appoint #App_SelectedHourTest,
.modal-content-appoint #ExeptionVM_ExEndHour {
    background-image: url('/Img/icons/New icons/agenda/clock.svg');
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px;
}

.modal-content-appoint .recurrency-card {
    padding: 0;
    border: 0;
    background: transparent;
}

.modal-content-appoint .recurrency-card.recurrency-card-summary-only {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.modal-content-appoint .recurrency-card-header {
    justify-content: flex-start;
    gap: 16px;
    margin: 0;
}

.modal-content-appoint .recurrency-card-title strong {
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.modal-content-appoint .recurrency-summary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 14px;
    background: rgba(255, 255, 255, .58);
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.modal-content-appoint .recurrency-summary strong {
    color: #111827;
    font-weight: 600;
}

.modal-content-appoint .recurrency-summary-edit {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bz-accent-border);
    border-radius: 10px;
    background: rgba(var(--bz-accent-color-rgb), .06);
    color: var(--appointment-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.modal-content-appoint .recurrency-summary-edit img {
    width: 15px;
    height: 15px;
    filter: var(--bz-accent-icon-filter);
}

.modal-content-appoint .recurrentFieldsArea {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.modal-content-appoint .addBtnApp {
    min-height: 48px;
    height: 48px;
    justify-content: center;
    gap: 8px;
    border: 1.5px dashed var(--bz-accent-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .28);
    color: #25304f;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
}

.modal-content-appoint .addBtnApp img {
    width: 22px;
    height: 22px;
    filter: var(--bz-accent-icon-filter);
}

.modal-content-appoint .annotation {
    min-height: 64px;
    max-height: 180px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    color: #25304f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
    overflow-y: hidden;
    resize: none;
}

.modal-content-appoint .annotation::placeholder {
    color: #7b849b;
}

.modal-content-appoint .statesArea {
    gap: 8px;
}

.modal-content-appoint .appointment-state-card {
    width: 100%;
    display: grid;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.modal-content-appoint .stateDiv,
.modal-content-appoint .deleteDiv,
.modal-content-appoint .sendRememberBtn,
.modal-content-appoint .clientPayAppArea {
    border-color: rgba(148, 163, 184, .32);
    border-radius: 14px;
    background: rgba(255, 255, 255, .62);
    box-shadow: none;
}

.modal-content-appoint .stateDiv {
    min-height: 80px;
    height: 80px;
    padding: 8px 6px;
    justify-content: center;
}

.modal-content-appoint .stateDiv img {
    height: 16px;
    width: 16px;
    margin-bottom: 3px;
    opacity: .82;
}

.modal-content-appoint .stateDiv label,
.modal-content-appoint .deleteDiv label,
.modal-content-appoint .stateSMSDiv label {
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
}

.modal-content-appoint .stateDiv.selected:hover {
    opacity: 1;
}


.modal-content-appoint .sendRememberBtn {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.modal-content-appoint .deleteDiv {
    min-width: 56px;
    padding: 8px 6px;
}

.modal-content-appoint .deleteDiv img {
    height: 22px;
    width: 22px;
    margin-bottom: 4px;
}

.modal-content-appoint .stateSMSDiv {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-top: 0;
}

.modal-content-appoint .appointment-sms-card {
    width: 100%;
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

.modal-content-appoint .appointment-sms-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.modal-content-appoint .appointment-sms-status-badge {
    flex: 0 0 auto;
    min-width: 148px;
    min-height: 38px;
    max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: var(--bz-accent-soft);
    color: var(--appointment-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.modal-content-appoint .appointment-sms-status-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--sms-status-icon) center / contain no-repeat;
    mask: var(--sms-status-icon) center / contain no-repeat;
}

.modal-content-appoint .appointment-sms-status-badge.sms-state-pending {
    background: rgba(239, 68, 68, .10);
    color: #DC2626;
}

.modal-content-appoint .appointment-sms-status-badge.sms-state-sent {
    background: rgba(163, 230, 53, .20);
    color: #3F6212;
}

.modal-content-appoint .appointment-sms-status-badge.sms-state-delivered {
    background: rgba(34, 197, 94, .12);
    color: #15803D;
}

.modal-content-appoint .appointment-sms-status-badge.sms-state-unsent {
    background: rgba(148, 163, 184, .16);
    color: #64748B;
}

.modal-content-appoint .appointment-sms-actions {
    display: flex;
}

.modal-content-appoint .appointment-sms-card .sendRememberBtn {
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--bz-accent-color-rgb), .55);
    border-radius: 10px;
    background: rgba(255, 255, 255, .42);
    color: var(--appointment-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
}

.modal-content-appoint .appointment-sms-card .sendRememberBtn::before {
    content: "";
    width: 17px;
    height: 17px;
    display: block;
    background: currentColor;
    -webkit-mask: url("/Img/icons/New icons/principal/send.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/principal/send.svg") center / contain no-repeat;
}

.modal-content-appoint .card-item,
.modal-content-appoint .client-card-item,
.modal-content-appoint .clientAppInfo,
.modal-content-appoint .serviceAppInfo,
.modal-content-appoint .label-form,
.modal-content-appoint .clientPayAppArea {
    border: 1px solid rgba(148, 163, 184, .32);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045) !important;
}

.modal-content-appoint .clientAppInfo .label-form,
.modal-content-appoint .serviceAppInfo .label-form {
    border: 0;
    box-shadow: none !important;
}

.modal-content-appoint .clientAppInfo .label-form label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    min-height: 32px;
    height: fit-content;
    color: #28272B;
    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal-content-appoint .serviceAppInfo {
    border-left-width: 5px;
    border-left-style: solid;
}

.modal-content-appoint .clientAppInfo .phoneLeft label {
    color: #28272B;
    font-family: Roboto, Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.modal-content-appoint .clientAppInfo .customer-File label {
    color: #28272B;
    font-family: Roboto, Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    text-decoration-line: underline;
    cursor: pointer;
}

.modal-content-appoint .serviceFields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
}

.modal-content-appoint .serviceFields > .serviceDuration,
.modal-content-appoint .serviceFields > .servicePrice {
    width: 100%;
    min-width: 0;
    padding-left: 0;
}

.modal-content-appoint .serviceFields > .serviceDuration input,
.modal-content-appoint .serviceFields > .servicePrice input {
    width: 100%;
    box-sizing: border-box;
}

.modal-content-appoint .servicePrice {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.modal-content-appoint .servicePrice input {
    width: 100%;
    padding-right: 36px;
}

.modal-content-appoint .servicePrice label {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: #475569;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1;
    pointer-events: none;
}

.modal-content-appoint .btn-save {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 12px;
    z-index: 1001;
    width: auto;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    border: 1px solid var(--bz-primary-action-border-color, transparent) !important;
    border-radius: 14px;
    background: var(--appointment-primary-gradient);
    color: var(--bz-primary-action-color, #fff);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--bz-primary-action-shadow, 0 10px 24px rgba(var(--bz-accent-color-rgb), .24));
    text-align: center !important;
    text-shadow: none;
}

.modal-content-appoint .btn-save::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url('/Img/icons/New icons/acoes-gerais/save.svg') center / contain no-repeat;
    filter: var(--bz-primary-action-icon-filter, brightness(0) invert(1));
}

.modal-content-appoint .btn-save:hover {
    background: var(--appointment-primary-gradient);
    box-shadow: var(--bz-primary-action-shadow, 0 10px 24px rgba(var(--bz-accent-color-rgb), .24));
    text-shadow: none;
}

.modal-content-appoint .appointment-online-pending-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, .72);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 251, 235, .92), rgba(255, 255, 255, .72));
    box-shadow: 0 10px 26px rgba(245, 158, 11, .08);
}

.modal-content-appoint .appointment-online-pending-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    background: #F59E0B;
    -webkit-mask: url("/Img/icons/New icons/agenda/calendar-clock.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/agenda/calendar-clock.svg") center / contain no-repeat;
}

.modal-content-appoint .appointment-online-pending-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.modal-content-appoint .appointment-online-pending-copy strong {
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

/* Design system alignment: keep the appointment header as the canonical header
   and map appointment form controls/cards to the shared BEEZZY primitives. */
.modal-content-appoint,
.modal-content-appoint * {
    font-family: var(--bz-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

.modal-content-appoint .BookAppointment input,
.modal-content-appoint .BookAppointment select,
.modal-content-appoint .app-date-time input,
.modal-content-appoint .recurrentFieldsArea input,
.modal-content-appoint .recurrentFieldsArea select,
.modal-content-appoint .annotation {
    border: 1px solid var(--bz-control-border, rgba(148, 163, 184, .32));
    border-radius: var(--bz-radius-sm, 8px);
    background-color: var(--bz-control-bg, rgba(255, 255, 255, .72));
    color: var(--bz-text, #111827);
    box-shadow: var(--bz-shadow-soft, 0 10px 28px rgba(15, 23, 42, .045));
}

.modal-content-appoint .BookAppointment input.colorSelector,
.modal-content-appoint .colorArea .colorSelector,
.modal-content-appoint .BookAppointment input.colorSelector::-webkit-color-swatch,
.modal-content-appoint .colorArea .colorSelector::-webkit-color-swatch {
    border-radius: var(--bz-radius-sm, 8px);
}

.modal-content-appoint .appointment-sms-card,
.modal-content-appoint .appointment-online-pending-card,
.modal-content-appoint .card-item,
.modal-content-appoint .client-card-item,
.modal-content-appoint .clientAppInfo,
.modal-content-appoint .serviceAppInfo,
.modal-content-appoint .clientPayAppArea {
    border: 1px solid var(--bz-control-border, rgba(148, 163, 184, .32));
    border-radius: var(--bz-radius, 12px);
    background: var(--bz-control-bg, rgba(255, 255, 255, .72));
    box-shadow: var(--bz-shadow-soft, 0 10px 28px rgba(15, 23, 42, .045)) !important;
}

.modal-content-appoint .serviceAppInfo.client-card-redesign {
    border-left-width: 5px !important;
    border-left-style: solid !important;
    border-left-color: var(--bz-service-color, var(--appointment-primary)) !important;
}

.modal-content-appoint .stateDiv,
.modal-content-appoint .deleteDiv,
.modal-content-appoint .sendRememberBtn {
    border-color: var(--bz-control-border, rgba(148, 163, 184, .32));
    border-radius: var(--bz-radius-sm, 8px);
    background: rgba(255, 255, 255, .72);
}

.modal-content-appoint .appointment-sms-status-badge,
.modal-content-appoint .appointment-sms-card .sendRememberBtn,
.modal-content-appoint .recurrency-summary-edit {
    border-color: var(--bz-accent-border);
    border-radius: var(--bz-radius-sm, 8px);
    background: var(--bz-accent-soft);
    color: var(--appointment-primary);
}

.modal-content-appoint .btn-save {
    border-radius: var(--bz-radius, 12px);
    background: var(--appointment-primary-gradient);
    box-shadow: 0 10px 24px rgba(var(--bz-accent-color-rgb), .24);
}

.modal-content-appoint .btn-save:hover {
    background: var(--appointment-primary-gradient);
}

.modal-content-appoint .appointment-online-pending-copy span {
    color: #64748B;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

.modal-content-appoint .appointment-pending-actions {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 12px;
    z-index: 1001;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    gap: 12px;
}

.modal-content-appoint .appointment-pending-actions.confirm-only {
    grid-template-columns: minmax(0, 1fr);
}

.modal-content-appoint .appointment-pending-actions button {
    min-width: 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
}

.modal-content-appoint .appointment-pending-reject {
    border: 1px solid rgba(239, 68, 68, .28);
    background: rgba(254, 254, 254, .72);
    color: #DC2626;
    box-shadow: 0 10px 22px rgba(239, 68, 68, .08);
}

.modal-content-appoint .appointment-pending-confirm {
    border: 0;
    background: var(--appointment-primary-gradient);
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--bz-accent-color-rgb), .24);
}

.modal-content-appoint .appointment-pending-action-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: currentColor;
}

.modal-content-appoint .appointment-pending-reject-icon {
    -webkit-mask: url("/Img/icons/New icons/ficha-acoes/trash-2.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/ficha-acoes/trash-2.svg") center / contain no-repeat;
}

.modal-content-appoint .appointment-pending-confirm-icon {
    -webkit-mask: url("/Img/icons/New icons/estados/check.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/estados/check.svg") center / contain no-repeat;
}

.modal-content-appoint .appointment-confirmation-actions {
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 50px auto 20px;
    text-align: center;
}

.modal-content-appoint .appointment-confirmation-actions .btnBase {
    width: 100%;
    min-height: 42px;
}

.modal-content-appoint .appointment-confirmation-actions .appointment-confirmation-skip {
    color: #6B7280;
    font-weight: 600;
}

/* Appointment shared client/service cards migrated from appointment partial CSS files */
.modal-content-appoint #servicesArea {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-content-appoint .client-card-redesign {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--bz-control-border, rgba(148, 163, 184, .32));
    border-radius: var(--bz-radius, 12px);
    background: var(--bz-control-bg, rgba(255, 255, 255, .72));
    box-shadow: var(--bz-shadow-soft, 0 10px 28px rgba(15, 23, 42, .045));
}

.modal-content-appoint .client-card-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.modal-content-appoint .client-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-content-appoint .client-card-title-group {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.modal-content-appoint .client-card-redesign .client-card-name {
    margin: 0;
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .modal-content-appoint .client-card-redesign .client-card-name {
        font-size: 12px;
        line-height: 1.2;
    }
}

.modal-content-appoint .client-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-right: 2px;
}

.modal-content-appoint .client-card-phone {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--bz-accent-border);
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

.modal-content-appoint .client-card-phone:hover,
.modal-content-appoint .client-card-phone:focus {
    border-color: var(--bz-accent-color);
    background: transparent;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .12);
    color: var(--bz-text);
    text-decoration: none;
    outline: none;
}

.modal-content-appoint .client-card-email {
    min-width: 0;
    max-width: 100%;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

.modal-content-appoint .client-card-alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
}

.modal-content-appoint .client-card-alert-late {
    border: 1px solid rgba(245, 158, 11, .18);
    background: rgba(245, 158, 11, .10);
    color: #D97706;
}

.modal-content-appoint .client-card-alert-noshow {
    border: 1px solid rgba(239, 68, 68, .18);
    background: rgba(239, 68, 68, .10);
    color: #DC2626;
}

.modal-content-appoint .client-card-notes {
    position: relative;
    display: block;
    padding: 12px 14px 12px 18px;
    border-radius: var(--bz-radius-sm, 8px);
    background: var(--bz-accent-soft);
}

.modal-content-appoint .client-card-notes::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--bz-accent-color);
}

.modal-content-appoint .client-card-notes p {
    margin: 0;
    color: var(--bz-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.modal-content-appoint .client-card-icon {
    display: inline-block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.modal-content-appoint .client-card-icon-phone {
    width: 19px;
    height: 19px;
    color: var(--bz-accent-color);
    -webkit-mask-image: url("/Img/icons/New icons/confirmacao-card/phone.svg");
    mask-image: url("/Img/icons/New icons/confirmacao-card/phone.svg");
}

.modal-content-appoint .client-card-icon-alert {
    width: 17px;
    height: 17px;
    -webkit-mask-image: url("/Img/icons/New icons/estados/alert-triangle.svg");
    mask-image: url("/Img/icons/New icons/estados/alert-triangle.svg");
}

.modal-content-appoint .client-card-icon-edit {
    width: 18px;
    height: 18px;
    color: currentColor;
    -webkit-mask-image: url("/Img/icons/New icons/agenda-acoes/repeat.svg");
    mask-image: url("/Img/icons/New icons/agenda-acoes/repeat.svg");
}

.modal-content-appoint .service-card-remove-action .client-card-icon-edit {
    -webkit-mask-image: url("/Img/icons/New icons/ficha-acoes/trash-2.svg");
    mask-image: url("/Img/icons/New icons/ficha-acoes/trash-2.svg");
}

.modal-content-appoint .client-card-icon-note,
.modal-content-appoint .client-card-icon-file {
    width: 18px;
    height: 18px;
    color: currentColor;
    -webkit-mask-image: url("/Img/icons/New icons/clientes-extra/file-text.svg");
    mask-image: url("/Img/icons/New icons/clientes-extra/file-text.svg");
}

.modal-content-appoint .client-card-icon-chevron {
    width: 7px;
    height: 7px;
    color: currentColor;
    justify-self: end;
    background: transparent;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .9;
    -webkit-mask-image: none;
    mask-image: none;
}

.modal-content-appoint .serviceAppInfo {
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: var(--bz-service-color, var(--bz-accent-color));
}

.modal-content-appoint .bz-button {
    font-size: 11px;
}

/* Appointment accent enforcement for dynamically loaded partials */
.modal-content-appoint .bz-button-secondary,
.modal-content-appoint .recurrency-summary-edit,
.modal-content-appoint .addBtnApp,
.modal-content-appoint .bz-link-row {
    border-color: var(--bz-accent-border) !important;
    color: var(--bz-accent-color) !important;
}

.modal-content-appoint .bz-button-secondary,
.modal-content-appoint .recurrency-summary-edit {
    background: rgba(255, 255, 255, .72) !important;
}

.modal-content-appoint .addBtnApp {
    border-style: solid !important;
    background: rgba(255, 255, 255, .72) !important;
}

.modal-content-appoint .bz-button-secondary .client-card-icon,
.modal-content-appoint .bz-link-row .client-card-icon,
.modal-content-appoint .addBtnApp img,
.modal-content-appoint .recurrency-summary-edit img {
    color: var(--bz-accent-color) !important;
    filter: var(--bz-accent-icon-filter) !important;
}

.modal-content-appoint .client-card-notes {
    background: var(--bz-accent-soft) !important;
}

.modal-content-appoint .client-card-notes::before {
    background: var(--bz-accent-color) !important;
}

/* Appointment legacy markup bridge: maps the existing appointment view classes
   to the shared Beezzy primitives now that modalEditAppointment.css is not loaded. */
.modal-content-appoint .BookAppointment,
.modal-content-appoint #SearchClientApp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    z-index: 12;
    box-sizing: border-box;
}

.modal-content-appoint .BookAppointment label,
.modal-content-appoint #SearchClientApp label {
    margin: 0;
}

.modal-content-appoint .flexDivInner,
.modal-content-appoint .bookApp-AnnotationsArea,
.modal-content-appoint .add-service {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    box-sizing: border-box;
}

.modal-content-appoint .flexDivInner.centerItems {
    align-items: center;
}

.modal-content-appoint #wraper-ClientCardItem {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.modal-content-appoint .flexDivOuter {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modal-content-appoint .flexDivRow,
.modal-content-appoint .app-date-time {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    align-self: stretch;
    box-sizing: border-box;
}

.modal-content-appoint .app-date-time .app-date,
.modal-content-appoint .colorArea,
.modal-content-appoint .deleteExArea {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.modal-content-appoint .app-date-time .app-date {
    flex: 1 1 0;
}

.modal-content-appoint .appointment-date-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.modal-content-appoint .personal-time-date-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-content-appoint .personal-time-date-row,
.modal-content-appoint .personal-time-hours-row,
.modal-content-appoint .personal-time-full-days-row {
    width: 100%;
    display: flex;
    gap: 16px;
}

.modal-content-appoint .personal-time-date-row > .app-date,
.modal-content-appoint .personal-time-hours-row > .app-date,
.modal-content-appoint .personal-time-full-days-row > .app-date,
.modal-content-appoint #inlineStartDateArea,
.modal-content-appoint #inlineEndHourArea,
.modal-content-appoint #inlineEndDateArea {
    flex: 1 1 0;
    min-width: 0;
}

.modal-content-appoint .BookAppointment input:not([type="checkbox"]):not([type="hidden"]):not(.colorSelector),
.modal-content-appoint .BookAppointment select,
.modal-content-appoint .app-date-time input:not([type="checkbox"]):not([type="hidden"]):not(.colorSelector),
.modal-content-appoint .recurrentFieldsArea input:not([type="checkbox"]):not([type="hidden"]),
.modal-content-appoint .recurrentFieldsArea select {
    width: 100%;
    max-width: none;
    min-height: 46px;
    padding: 0 12px 0 42px;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background-color: var(--bz-control-bg);
    color: var(--bz-text);
    font-size: var(--bz-type-body);
    font-weight: 500;
    box-shadow: var(--bz-shadow-soft);
    box-sizing: border-box;
}

.modal-content-appoint #App_SelectedHourTest,
.modal-content-appoint #ExeptionVM_ExEndHour {
    padding-right: 16px;
}

.modal-content-appoint .app-date .ui-datepicker-trigger {
    display: none !important;
}

.bootstrap-timepicker-widget.dropdown-menu.open,
.ui-datepicker {
    z-index: 99999 !important;
}

.modal-content-appoint .switch {
    position: relative;
    display: inline-block;
    flex: 0 0 42px;
    width: 42px;
    height: 23px;
    margin: 0;
    vertical-align: middle;
}

.modal-content-appoint .switch input {
    display: none !important;
}

.modal-content-appoint .togle {
    position: absolute;
    inset: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 999px;
    background: #d5d6de;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .16);
    transition: background .2s ease;
}

.modal-content-appoint .togle::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    left: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22);
    transition: transform .2s ease;
}

.modal-content-appoint input:checked + .togle {
    background: var(--bz-primary-action-bg);
}

.modal-content-appoint input:checked + .togle::before {
    transform: translateX(19px);
}

.modal-content-appoint #SearchClientApp {
    height: 100%;
    min-height: 100vh;
    padding: calc(var(--bz-app-header-height) + 16px) 24px 92px;
    overflow: hidden;
}

.modal-content-appoint #SearchClientApp .search-client-input-container {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
}

.modal-content-appoint #SearchClientApp .input_container.search-client-input-container {
    display: block;
    align-self: auto;
}

.modal-content-appoint #SearchClientApp .search-input {
    width: 100%;
    min-height: 54px;
    height: 54px;
    box-sizing: border-box;
    padding: 0 16px 0 54px;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    color: var(--bz-text);
    font-size: var(--bz-type-body);
    font-weight: 500;
    line-height: 1.3;
    box-shadow: var(--bz-shadow-soft);
}

.modal-content-appoint #SearchClientApp .search-input::placeholder {
    color: var(--bz-muted);
}

.modal-content-appoint #SearchClientApp .search-input:focus {
    border-color: var(--bz-accent-border);
    outline: none;
    box-shadow: 0 0 0 3px var(--bz-accent-soft);
}

.modal-content-appoint #SearchClientApp .search-client-input-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 1;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background: var(--bz-muted);
    -webkit-mask: url("/Img/icons/New icons/clientes-extra/search.svg") center / contain no-repeat;
    mask: url("/Img/icons/New icons/clientes-extra/search.svg") center / contain no-repeat;
    pointer-events: none;
}

.modal-content-appoint #SearchClientApp .lst-clientsApp {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 0 2px 18px;
    margin: 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-content-appoint #SearchClientApp .lst-clientsApp li {
    margin: 0;
    border-bottom: 1px solid rgba(226, 232, 240, .95);
    list-style: none;
}

.modal-content-appoint #SearchClientApp .client-letter-group {
    display: block;
    padding: 18px 0 6px;
    border-bottom: 0;
    color: var(--bz-accent-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: default;
}

.modal-content-appoint #SearchClientApp .client-list-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 13px 0 14px;
    cursor: pointer;
}

.modal-content-appoint #SearchClientApp .client-list-row:hover {
    background: rgba(var(--bz-accent-color-rgb), .035);
}

.modal-content-appoint #SearchClientApp .client-list-row .lblClientName {
    margin: 0;
    color: var(--bz-text);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.18;
    cursor: pointer;
}

.modal-content-appoint #SearchClientApp .client-list-row .lblClientPhone {
    margin: 0;
    color: var(--bz-muted);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

.modal-content-appoint .annotation {
    width: 100%;
    min-height: 104px;
    max-height: 220px;
    padding: 14px;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    color: var(--bz-text);
    font-size: var(--bz-type-body);
    font-weight: 500;
    line-height: 1.5;
    box-shadow: var(--bz-shadow-soft);
    resize: vertical;
    box-sizing: border-box;
}

.modal-content-appoint .annotation::placeholder {
    color: var(--bz-muted);
}

.modal-content-appoint .BookAppointment input.colorSelector,
.modal-content-appoint .colorArea .colorSelector {
    width: 58px;
    max-width: 58px;
    min-width: 58px;
    min-height: 46px;
    height: 46px;
    padding: 3px !important;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg) !important;
    box-shadow: var(--bz-shadow-soft);
    cursor: pointer;
    box-sizing: border-box;
}

.modal-content-appoint .BookAppointment input.colorSelector::-webkit-color-swatch-wrapper,
.modal-content-appoint .colorArea .colorSelector::-webkit-color-swatch-wrapper {
    padding: 0;
}

.modal-content-appoint .BookAppointment input.colorSelector::-webkit-color-swatch,
.modal-content-appoint .colorArea .colorSelector::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--bz-radius-sm) - 2px);
}

.modal-content-appoint .statesArea {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.modal-content-appoint .stateDiv {
    min-width: 0;
    min-height: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    box-shadow: var(--bz-shadow-soft);
    cursor: pointer;
    box-sizing: border-box;
}

.modal-content-appoint .stateDiv img {
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 1;
    filter: none;
}

.modal-content-appoint .stateDiv label {
    color: var(--bz-muted);
    font-size: var(--bz-type-caption);
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    text-align: center;
}

.modal-content-appoint .stateDiv.late {
    color: #F59E0B;
}

.modal-content-appoint .stateDiv.miss {
    color: #EF4444;
}

.modal-content-appoint .stateDiv.cancelled {
    color: #64748B;
}

.modal-content-appoint .stateDiv.pay {
    color: #16A34A;
}

.modal-content-appoint .stateDiv img {
    filter: none !important;
}

.modal-content-appoint .stateDiv.selected {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 12%, #fff);
    box-shadow: 0 8px 20px color-mix(in srgb, currentColor 16%, transparent);
}

.modal-content-appoint .stateDiv.selected label {
    color: currentColor;
}

.modal-content-appoint .bz-button-secondary,
.modal-content-appoint .bz-button-secondary .bz-icon-mask,
.modal-content-appoint .addBtnApp,
.modal-content-appoint .bz-link-row,
.modal-content-appoint .client-card-icon-phone {
    color: var(--bz-accent-color) !important;
}

@media (min-width: 768px) {
    .modal-content-appoint .btn-save,
    .modal-content-appoint .appointment-pending-actions {
        width: min(calc(100vw - 32px), 728px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .modal-content-appoint {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .modal-content-appoint .BookAppointment {
        padding: calc(var(--bz-app-header-height) + 16px) 16px 92px;
        gap: 18px;
    }

    .modal-content-appoint .btn-save,
    .modal-content-appoint .appointment-pending-actions {
        left: 16px;
        right: 16px;
        bottom: 12px;
        width: auto;
        transform: none;
    }

    .modal-content-appoint .appointment-agenda-row .tempo-pessoal {
        padding-top: 0;
    }

    .modal-content-appoint .appointment-date-layout {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .modal-content-appoint .appointment-field-label,
    .modal-content-appoint .colorArea > label,
    .modal-content-appoint .deleteExArea > label,
    .modal-content-appoint .flexDivInner > label[for="App_Annotations"] {
        font-size: 12px;
        font-weight: 600;
    }

    .modal-content-appoint .BookAppointment input,
    .modal-content-appoint .BookAppointment select,
    .modal-content-appoint .app-date-time input,
    .modal-content-appoint .recurrentFieldsArea input,
    .modal-content-appoint .recurrentFieldsArea select {
        min-height: 46px;
        font-size: 12px;
        font-weight: 500;
        padding: 0 12px 0 42px;
    }

    .modal-content-appoint #App_Datetest,
    .modal-content-appoint #ExeptionVM_ExEndDate,
    .modal-content-appoint #App_SelectedHourTest,
    .modal-content-appoint #ExeptionVM_ExEndHour {
        background-position: 14px center;
        background-size: 20px;
    }

    .modal-content-appoint .statesArea {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
}

@media (max-width: 380px) {
    .modal-content-appoint .appointment-date-layout {
        grid-template-columns: 1fr;
    }
}

    .appHask button {
        width: 40%;
        font-weight: 900;
        height: 40px;
    }
    .appHask button+button {
        margin-left: 10%;
    }

@media(max-width:450px) {
    .singleMetric .header {
        height: 40px;
    }

    .appHask button {
        width: 90%;
        margin-bottom: 40px;
    }
        .appHask button + button {
            margin-left: 0;
        }
}

.editServices {
    border: 2px solid #E2970A !important;
    position: absolute;
    bottom: 10px;
    width: 40%;
    left: 30%;
}

#editContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background: #fff;
    z-index: 10;
}

.DayHourSelector {
    width: 60px;
    margin-right: 10px;
}

@media(max-width:767px) {
    .allstatesDiv {
        display: block;
    }

    .editServices {
        width: 90%;
        left: 5%;
    }

    .show-inline-sm {
        display: inline-block;
    }


    .service-Type + .select-date-content > .salon-service {
        width: 140px;
        margin: 5px !important;
        font-size: 14px;
    }

        .service-Type + .select-date-content > .salon-service > .ServiceAgendaGroupPriceDuration {
            font-size: 12px;
        }

    .service-Type {
        width: 140px;
        margin: 5px !important;
        font-size: 14px;
    }

    .deletebtn {
        float: none;
    }
}

@media(max-width:510px) {

/* Appointment recurrency layout migrated from view */
.modal-content-appoint .recurrentFieldsArea {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 14px;
        justify-content: flex-start;
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        width: 100%;
    }

    .modal-content-appoint .recurrency-card {
        border: 1px solid #d9dee6;
        border-radius: 8px;
        padding: 12px;
        width: 100%;
    }

    .modal-content-appoint .recurrency-card-header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
        width: 100%;
    }

    .modal-content-appoint .recurrency-card-header .switch {
        margin: 0;
    }

    .modal-content-appoint .recurrency-card-title {
        display: flex;
        flex-direction: column;
    }

    .modal-content-appoint .recurrency-card-title strong {
        color: #6B7280;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
    }

    .modal-content-appoint .recurrency-frequency-card {
        border: 1px solid #d9dee6;
        border-radius: 8px;
        padding: 12px;
        width: 100%;
    }

    .modal-content-appoint .recurrency-frequency-title {
        color: #28272b;
        display: block;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 14px;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-repeat-line {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-line {
        display: flex;
        align-items: stretch;
        gap: 8px;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: 0;
        width: 100%;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-repeat-line select {
        flex: 0 0 auto;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-option {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        width: auto;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-option label {
        align-self: flex-start;
        color: #6B7280;
        display: flex;
        flex-direction: column;
        font-size: 13px;
        font-weight: 500;
        gap: 1px;
        line-height: 1.25;
        margin: 0;
    }

    .modal-content-appoint .recurrentFieldsArea input,
    .modal-content-appoint .recurrentFieldsArea select {
        border: 1px solid #d9dee6;
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 500;
        height: 42px;
        max-width: none;
        padding: 9px 12px;
        width: 100%;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrencyNumber {
        width: 100%;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-optional-label {
        color: #8a8f99;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.15;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-separator {
        align-items: center;
        align-self: stretch;
        color: #7f8286;
        display: flex;
        flex: 0 0 34px;
        flex-direction: column;
        font-weight: 600;
        gap: 7px;
        justify-content: center;
        padding-top: 22px;
        width: 34px;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-separator:before,
    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-separator:after {
        background: #d9dee6;
        content: "";
        flex: 1 1 auto;
        min-height: 12px;
        width: 1px;
    }

    .modal-content-appoint .recurrency-field {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        gap: 6px;
    }

    .modal-content-appoint .recurrency-field label {
        align-self: flex-start;
        color: #7f8286;
        margin: 0;
    }

    .modal-content-appoint .recurrency-unit-field {
        padding-top: 0;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-option.is-disabled label {
        color: #8a8f99;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-option.is-disabled input {
        background: #f1f3f5;
        border-color: #c8cdd3;
        color: #8a8f99;
        cursor: not-allowed;
        opacity: 1;
    }

    .personal-time-mode-area {
        align-self: stretch;
        margin-bottom: 0px;
    }

    .personal-time-mode {
        display: flex;
        gap: 12px;
        width: 100%;
        margin: 10px 0 14px;
    }

    .personal-time-mode-title {
        display: block;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .personal-time-mode-subtitle {
        display: block;
        color: #7f8286;
        font-size: 13px;
    }

    .personal-time-date-layout {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .personal-time-date-row,
    .personal-time-hours-row,
    .personal-time-full-days-row {
        display: flex;
        gap: 24px;
        width: 100%;
    }

    .personal-time-hours-row .app-date,
    .personal-time-full-days-row .app-date {
        flex: 1 1 0;
    }

    .modal-content-appoint .appointment-date-layout {
        align-items: flex-start;
        flex-direction: row;
        gap: 24px;
        justify-content: space-between;
    }

    .modal-content-appoint .appointment-date-layout .personal-time-date-row,
    .modal-content-appoint .appointment-date-layout .personal-time-hours-row {
        display: flex;
        flex: 0 0 auto;
        width: auto;
    }

    .modal-content-appoint .appointment-date-layout #inlineEndHourArea {
        display: none;
    }

    @media (max-width: 640px) {
    }

.modal-content-appoint #appointmentDateTimeArea.appointment-date-layout {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start;
}

.modal-content-appoint #appointmentDateTimeArea.appointment-date-layout .personal-time-date-row,
.modal-content-appoint #appointmentDateTimeArea.appointment-date-layout .personal-time-hours-row {
    width: 100% !important;
    min-width: 0;
    display: block !important;
}

.modal-content-appoint #appointmentDateTimeArea.appointment-date-layout .app-date,
.modal-content-appoint #appointmentDateTimeArea.appointment-date-layout #startDateArea,
.modal-content-appoint #appointmentDateTimeArea.appointment-date-layout #startHour {
    width: 100%;
    min-width: 0;
}

.modal-content-appoint #appointmentDateTimeArea.appointment-date-layout input:not([type="checkbox"]):not([type="hidden"]):not(.colorSelector) {
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    padding: 0 12px 0 42px;
    line-height: 46px;
    box-sizing: border-box;
}

.modal-content-appoint .personal-time-mode {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.modal-content-appoint .personal-time-mode .bz-segment-option {
    width: 100%;
    min-width: 0;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.modal-content-appoint .recurrentFieldsArea {
    width: 100%;
}

.modal-content-appoint .recurrentFieldsArea .recurrency-repeat-line {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.modal-content-appoint .recurrentFieldsArea .recurrency-field,
.modal-content-appoint .recurrentFieldsArea .recurrency-unit-field {
    width: 100%;
    min-width: 0;
    padding-top: 0;
}

.modal-content-appoint .recurrentFieldsArea .recurrency-limit-line {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.modal-content-appoint .recurrentFieldsArea .recurrency-limit-option {
    width: 100%;
    min-width: 0;
}

.modal-content-appoint .recurrentFieldsArea .recurrency-limit-separator {
    width: 34px;
    min-width: 34px;
    align-self: end;
    padding-bottom: 13px;
    text-align: center;
}

@media (max-width: 767px) {
    .modal-content-appoint #appointmentDateTimeArea.appointment-date-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .modal-content-appoint #appointmentDateTimeArea.appointment-date-layout input:not([type="checkbox"]):not([type="hidden"]):not(.colorSelector) {
        font-size: 14px;
        padding-right: 10px;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-repeat-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-line {
        grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
        gap: 8px;
    }

    .modal-content-appoint .recurrentFieldsArea .recurrency-limit-separator {
        width: 28px;
        min-width: 28px;
    }
}

}

/* Pricing payment layout migrated from pricing-payments.css */
.pricing-payment-page {
    min-height: calc(100vh - 20px);
    background: var(--bz-screen-background, var(--bz-page));
    --bz-page-head-width: 750px;
    --bz-purple: var(--bz-accent-color);
    --bz-purple-soft: var(--bz-accent-soft);
    --bz-gradient: var(--bz-primary-action-bg);
}

html.pricing-payment-page-active,
body.pricing-payment-page-active {
    height: auto !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

body.pricing-payment-subscreen-active.padding-left-menu {
    padding-left: 0 !important;
}

body.pricing-payment-subscreen-active .navbar-default.navbar-fixed-top.black-back2 {
    display: none !important;
}

.pricing-payment-page * {
    box-sizing: border-box;
}

.pricing-payment-page img {
    max-width: 100%;
}

.pricing-payment-page input[type="text"],
.pricing-payment-page input[type="number"],
.pricing-payment-page input[type="tel"],
.pricing-payment-page input[type="email"],
.pricing-payment-page select,
.pricing-payment-page textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    color: var(--bz-text);
    font-family: var(--bz-font-family);
    font-size: var(--bz-type-body);
    font-weight: 500;
    padding: 8px 11px;
    box-shadow: var(--bz-shadow-soft);
}

.pricing-payment-page input[type="text"]:focus,
.pricing-payment-page input[type="number"]:focus,
.pricing-payment-page input[type="tel"]:focus,
.pricing-payment-page input[type="email"]:focus,
.pricing-payment-page select:focus,
.pricing-payment-page textarea:focus {
    border-color: var(--bz-accent-color);
    outline: none;
    box-shadow: 0 0 0 1px var(--bz-accent-color), var(--bz-shadow-soft);
}

body.pricing-payment-subscreen-active .pricing-payment-page .bz-screen:not(.no-show) {
    padding-top: calc(var(--bz-app-header-height) + 12px);
}

.pricing-payment-page .bz-mbway-input input,
.pricing-payment-page .bz-mbway-input input:focus,
.pricing-payment-page .bz-mbway-input .iti input,
.pricing-payment-page .bz-mbway-input .iti input:focus {
    width: auto;
    min-height: auto;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0;
}

#pricingPlanArea {
    margin-top: 0 !important;
}

.pricing-blocked-dashboard {
    gap: 12px;
}

.pricing-blocked-hero {
    border-color: #ffc7c7;
    background: linear-gradient(135deg, #fff6f6 0%, #fffafa 100%);
    box-shadow: 0 14px 32px rgba(199, 24, 48, .12);
    padding: 24px;
}

.pricing-blocked-hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #c7162d;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 26px;
}

.pricing-blocked-lock {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffe6e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-blocked-lock img {
    width: 25px;
    height: 25px;
    filter: none;
}

.pricing-blocked-hero h2 {
    color: #c7162d;
    font-size: 18px;
    line-height: 1.18;
    font-weight: 900;
    margin: 0;
}

.pricing-blocked-hero p {
    color: #50545d;
    font-size: 12px;
    line-height: 1.35;
    margin: 18px 0 24px;
}

.pricing-blocked-sms-card {
    padding: 24px;
    box-shadow: var(--bz-shadow);
}

.pricing-blocked-sms-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.pricing-blocked-sms-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bz-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-blocked-sms-icon img {
    width: 25px;
    height: 25px;
    filter: var(--bz-accent-icon-filter);
}

.pricing-blocked-sms-main h3 {
    font-size: 15px;
    font-weight: 900;
}

.pricing-blocked-sms-main strong {
    display: block;
    color: var(--bz-accent-color);
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    margin-top: 8px;
}

.pricing-blocked-sms-main strong span {
    font-size: inherit;
}

.pricing-blocked-sms-link {
    min-height: 82px;
    border-top: 1px solid #e5e7ef;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 18px;
    align-items: center;
    color: var(--bz-accent-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.pricing-blocked-list-icon img {
    width: 27px;
    height: 27px;
    filter: var(--bz-accent-icon-filter);
}

.pricing-blocked-sms-history {
    display: grid;
    gap: 14px;
}

.pricing-blocked-sms-history h2 {
    margin: 0 10px;
    color: var(--bz-text);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
}

.pricing-blocked-sms-history-card {
    padding: 16px 22px;
    box-shadow: var(--bz-shadow);
}

.pricing-blocked-sms-row {
    min-height: 95px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto 16px;
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid #e5e7ef;
    cursor: pointer;
}

.pricing-blocked-sms-row:last-child {
    border-bottom: 0;
}

.pricing-blocked-sms-row .bz-badge {
    min-width: 104px;
    min-height: 36px;
    font-size: 11px;
    gap: 8px;
}

.pricing-blocked-sms-row .bz-badge img {
    width: 19px;
    height: 19px;
    filter: none;
}

.pricing-blocked-sms-row-info {
    display: grid;
    gap: 4px;
    border-left: 1px solid #e5e7ef;
    padding-left: 28px;
}

.pricing-blocked-sms-row-info strong {
    color: var(--bz-text);
    font-size: 13px;
    line-height: 1.1;
    font-weight: 900;
}

.pricing-blocked-sms-row-info small {
    color: #555b66;
    font-size: 11px;
}

.pricing-blocked-sms-row-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #676d78;
    font-size: 11px;
    white-space: nowrap;
}

.pricing-blocked-sms-row-date img {
    width: 23px;
    height: 23px;
    opacity: .72;
}

.pricing-dashboard-card {
    display: grid;
    gap: 12px;
}

.pricing-subscription-card {
    padding: 16px 14px;
}

.pricing-subscription-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.pricing-subscription-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bz-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-subscription-icon img {
    width: 24px;
    height: 24px;
    filter: var(--bz-accent-icon-filter);
}

.pricing-subscription-copy h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    text-align: left;
}

.pricing-subscription-copy p {
    margin: 3px 0 0;
    color: var(--bz-muted);
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
}

.pricing-subscription-copy p strong {
    color: var(--bz-text);
    font-weight: 600;
}

.pricing-subscription-status {
    align-self: start;
}

.pricing-referral-card {
    min-height: 158px;
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .22), transparent 24%),
        var(--bz-primary-action-bg);
    box-shadow: var(--bz-shadow);
    overflow: hidden;
}

.pricing-referral-card h2,
.pricing-referral-card p {
    color: #fff;
}

.pricing-referral-card h2 {
    font-size: 14px;
    text-transform: uppercase;
}

.pricing-referral-main {
    color: var(--bz-accent-contrast);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.15;
}

.pricing-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pricing-value-center {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 82px;
}

.pricing-value-center small {
    color: var(--bz-muted);
    font-size: 12px;
}

.pricing-value-center strong {
    color: var(--bz-accent-color);
    font-size: 28px;
    line-height: 1;
}

.pricing-sms-dashboard-card {
    padding: 16px 14px 0;
    gap: 12px;
}

.pricing-sms-dashboard-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.pricing-sms-dashboard-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bz-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-sms-dashboard-icon img {
    width: 25px;
    height: 25px;
    filter: var(--bz-accent-icon-filter);
}

.pricing-sms-dashboard-main h3 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 900;
}

.pricing-sms-dashboard-main strong {
    display: block;
    color: var(--bz-accent-color);
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

.pricing-sms-dashboard-main strong span {
    font-size: 12px;
}

.pricing-sms-extra-notes {
    display: grid;
    gap: 7px;
}

.pricing-sms-extra-note {
    margin: 0;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: #697386;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 500;
}

.pricing-sms-note-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bz-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-sms-note-icon img {
    width: 12px;
    height: 12px;
    filter: var(--bz-accent-icon-filter);
    opacity: .72;
}

.pricing-sms-dashboard-card > .bz-button + .pricing-sms-history-row {
    margin-top: 2px;
}

.pricing-sms-dashboard-card .pricing-reference-wrap {
    margin-top: 0;
}

.pricing-link-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--bz-accent-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.pricing-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pricing-history-head a {
    color: var(--bz-accent-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.pricing-history-list {
    display: grid;
    gap: 8px;
}

.pricing-history-row {
    border: 1px solid #eef0f5;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.pricing-history-row-title {
    display: grid;
    gap: 3px;
}

.pricing-history-row-title strong {
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
}

.pricing-history-row-title small {
    color: var(--bz-muted);
    font-size: 11px;
}

.pricing-history-row-side {
    display: grid;
    gap: 4px;
    justify-items: end;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
}

.pricing-payment-mini-method {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bz-muted);
    font-size: 11px;
    font-weight: 600;
}

.pricing-payment-mini-method img {
    width: 25px;
    max-height: 18px;
    object-fit: contain;
}

.pricing-empty {
    color: var(--bz-muted);
    font-size: 12px;
    padding: 8px 0;
}

.pricing-month-options,
.pricing-sms-options,
.pricing-agenda-options {
    display: grid;
    gap: 10px;
}

.pricing-month-option .pricing-save,
.pricing-sms-option .pricing-save {
    color: #079455;
    font-size: 12px;
    font-weight: 600;
}

.pricing-month-option .bz-option-title,
.pricing-sms-option .bz-option-title {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}

.pricing-month-option .bz-option-price,
.pricing-sms-option .bz-option-price {
    color: var(--bz-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}

.pricing-sms-option .bz-muted {
    font-size: 11px;
}

.pricing-month-option .bz-badge {
    font-size: 9px;
    padding: 4px 7px;
}

.pricing-month-free-badge {
    justify-self: start;
    margin-bottom: 1px;
    color: #d92d20;
    background: #ffedef;
    font-size: 10px;
    font-weight: 900;
}

.pricing-month-discount {
    color: var(--bz-muted);
    font-size: 11px;
}

.pricing-month-discount b {
    color: #079455;
}

.pricing-form-section {
    display: grid;
    gap: 10px;
}

.pricing-section-title {
    display: block;
    color: var(--bz-text);
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 2px;
}

.pricing-inline-card {
    border: 1px solid var(--bz-control-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-control-bg);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pricing-inline-card strong {
    color: var(--bz-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}

.pricing-summary-card {
    display: grid;
    gap: 10px;
}

.pricing-summary-card .bz-detail-row {
    font-size: 12px;
}

.pricing-summary-card .pricing-summary-total {
    border-top: 1px solid #eef0f5;
    padding-top: 10px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 900;
}

.pricing-summary-card .pricing-summary-total strong {
    color: var(--bz-accent-color);
    font-size: 18px;
}

.pricing-invoice-fields {
    display: grid;
    gap: 9px;
    margin-top: 10px;
}

.pricing-subscription-consent {
    align-items: flex-start;
}

.pricing-subscription-consent label {
    color: #4b5565;
    font-size: 12px;
    line-height: 1.35;
}

.pricing-subscription-consent a {
    color: var(--bz-accent-color);
}

.pricing-agenda-top {
    background: linear-gradient(135deg, #fff 0%, var(--bz-accent-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pricing-top-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bz-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-top-icon img {
    width: 23px;
    height: 23px;
    filter: var(--bz-accent-icon-filter);
}

.pricing-custom-sms {
    display: grid;
    gap: 8px;
}

.pricing-payment-submit-row {
    display: grid;
    gap: 10px;
}

.pricing-reference-wrap {
    margin-top: 10px;
}

.pricing-agenda-benefits {
    display: grid;
    gap: 8px;
}

.pricing-benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 600;
}

.pricing-benefit:before {
    content: "✓";
    width: 15px;
    height: 15px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--bz-accent-color);
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    font-weight: 900;
    flex: 0 0 auto;
}

.pricing-detail-hero {
    border-color: var(--bz-accent-color);
    box-shadow: 0 0 0 1px var(--bz-accent-color);
}

.pricing-detail-title-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    align-items: center;
}

.pricing-detail-title-row .pricing-top-icon {
    width: 38px;
    height: 38px;
}

.pricing-detail-title-row .pricing-top-icon img {
    width: 19px;
    height: 19px;
}

.pricing-detail-amount {
    color: var(--bz-accent-color);
    font-size: 20px;
    font-weight: 900;
}

.pricing-detail-method img {
    width: 32px;
    max-height: 24px;
}

.pricing-pay-form-card {
    display: grid;
    gap: 12px;
}

.pricing-view-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.pricing-payment-page .field-validation-error,
.pricing-payment-page .validation-summary-errors {
    color: var(--bz-red);
    font-size: 12px;
}

.pricing-payment-page .bz-payment-method {
    min-width: 0;
}

.pricing-payment-page .bz-bottom-summary {
    position: static;
    border-radius: var(--bz-radius);
}

.pricing-payment-page .bz-payment-method span {
    min-width: 0;
    line-height: 1.08;
    overflow-wrap: normal;
    white-space: nowrap;
}

@media (max-width: 430px) {
    .pricing-blocked-hero {
        padding: 18px;
    }

    .pricing-blocked-hero-meta {
        margin-bottom: 20px;
    }

    .pricing-blocked-sms-card {
        padding: 18px;
    }

    .pricing-blocked-sms-main {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
    }

    .pricing-blocked-sms-link {
        min-height: 72px;
    }

    .pricing-blocked-sms-history-card {
        padding: 10px 16px;
    }

    .pricing-blocked-sms-row {
        grid-template-columns: 1fr auto 16px;
        gap: 6px 12px;
        padding: 14px 0;
    }

    .pricing-blocked-sms-row .bz-badge {
        justify-self: start;
        min-width: 88px;
    }

    .pricing-blocked-sms-row-info {
        grid-column: 1;
        border-left: 0;
        padding-left: 0;
    }

    .pricing-blocked-sms-row-date {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .pricing-blocked-sms-row > .bz-chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
        justify-self: end;
    }

    .pricing-payment-page .bz-payment-method {
        min-height: 58px;
        padding: 8px 8px;
        gap: 7px;
    }

    .pricing-payment-page .bz-payment-method input[type="radio"] {
        width: 17px;
        height: 17px;
        min-width: 17px;
    }

    .pricing-payment-page .bz-payment-method img {
        width: 42px;
        max-height: 34px;
    }

    .pricing-payment-page .bz-payment-method span {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .pricing-payment-page .bz-payment-methods {
        gap: 6px;
    }

    .pricing-payment-page .bz-payment-method {
        min-height: 56px;
        padding: 7px 6px;
        gap: 4px;
    }

    .pricing-payment-page .bz-payment-method input[type="radio"] {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    .pricing-payment-page .bz-payment-method img {
        width: 32px;
        max-height: 28px;
    }

    .pricing-payment-page .bz-payment-method span {
        font-size: 11px;
    }
}

@media (min-width: 900px) {
    .pricing-payment-page {
        padding-bottom: 28px;
    }

    body:not(.pricing-payment-subscreen-active) .pricing-payment-page .bz-shell {
        width: min(100%, 794px);
    }

    .pricing-dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 750px);
        justify-content: center;
        gap: 14px;
    }

    body:not(.pricing-payment-subscreen-active) .pricing-subscription-card > .bz-button,
    body:not(.pricing-payment-subscreen-active) .pricing-sms-dashboard-card > .bz-button {
        width: min(100%, 402px);
        justify-self: center;
    }

    body:not(.pricing-payment-subscreen-active) .pricing-sms-extra-note {
        font-size: 12px;
        line-height: 1.3;
    }

    .pricing-dashboard-grid > .pricing-referral-card,
    .pricing-dashboard-grid > .pricing-history-card {
        grid-column: 1 / -1;
    }

    .pricing-pay-form-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .pricing-pay-form-card > .pricing-span-full,
    .pricing-pay-form-card > .bz-bottom-summary {
        grid-column: 1 / -1;
    }

    .pricing-payment-page .bz-bottom-summary {
        position: static;
        border-radius: var(--bz-radius);
    }
}


/* Referral component layout migrated from ReferralComponent.css */
/* Base styles - shared between popup and inline */
.overlay-referral,
.referral-inline {
    z-index: 9999;
}

.overlay-referral {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.referral-inline {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
}

.referral-inline .popup-referral {
    animation: none;
    width: 100%;
    max-width: 100%;
}

.popup-referral {
    background: linear-gradient(180deg, #1e1e4a 0%, #2a2a5a 100%);
    border-radius: 24px;
    padding: 40px 30px;
    max-width: 500px;
    width: 90%;
    max-height: 98vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideInReferral 0.3s ease-out;
}

.popup-referral::-webkit-scrollbar {
    width: 8px;
}

.popup-referral::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.popup-referral::-webkit-scrollbar-thumb {
    background: rgba(var(--bz-accent-color-rgb), .5);
    border-radius: 10px;
}

.popup-referral::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bz-accent-color-rgb), .7);
}

@keyframes slideInReferral {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-btn-referral {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.close-btn-referral:hover {
    background: rgba(255, 255, 255, 0.2);
}

.badge-referral {
    background: var(--bz-primary-action-bg);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.title-referral {
    color: white;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.2;
}

.discount-small-referral {
    font-size: 60px;
    font-weight: 900;
    background: var(--bz-primary-action-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 20px 0;
    letter-spacing: -2px;
}

.link-container-referral {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.link-input-referral {
    flex: 1;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    color: #333;
    font-family: inherit;
}

.copy-btn-referral {
    background: #2a2a5a;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
    font-family: inherit;
}

.copy-btn-referral:hover {
    background: #3a3a6a;
}

.cta-button-referral {
    background: var(--bz-primary-action-bg);
    color: white;
    border: none;
    padding: 18px 32px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
    font-family: inherit;
}

.cta-button-referral:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--bz-accent-color-rgb), .28);
}

.steps-container-referral {
    color: #fff;
    margin: 30px 0;
    text-align: left;
}

.step-item-referral {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}

.step-number-referral {
    min-width: 36px;
    height: 36px;
    background: var(--bz-primary-action-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.step-text-referral {
    color: white;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

.countdown-container-referral {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 100px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    border: 2px solid rgba(var(--bz-accent-color-rgb), .3);
}

.countdown-items-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.countdown-item-referral {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.countdown-value-referral {
    font-size: 36px;
    font-weight: 900;
    color: var(--bz-accent-color);
    line-height: 1;
    text-shadow: 0 2px 10px rgba(var(--bz-accent-color-rgb), .35);
}

.countdown-label-referral {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.countdown-separator-referral {
    font-size: 32px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 4px;
    padding-bottom: 20px;
}

.payment-warning-referral {
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    margin: 0;
    padding: 12px 15px;
    border-radius: 0 0 12px 12px;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
    width: 100%;
}

.promo-tip-referral {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 50px 0;
    padding: 5px;
    background: linear-gradient(135deg, rgba(var(--bz-accent-color-rgb), .16) 0%, var(--bz-accent-soft) 100%);
    border: 2px solid transparent;
    border-image: var(--bz-primary-action-bg);
    border-image-slice: 1;
    border-radius: 16px;
    animation: pulsePromo 3s ease-in-out infinite;
}

@keyframes pulsePromo {
    0%, 100% {
        box-shadow: 0 0 0 rgba(var(--bz-accent-color-rgb), 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--bz-accent-color-rgb), .28);
    }
}

.promo-tip-title {
    font-size: 22px;
    font-weight: 600;
    width: 100%;
    text-align: left;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-tip-title span:first-child {
    font-size: 28px;
    line-height: 1;
}

.promo-tip-title-highlight {
    background: var(--bz-primary-action-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.promo-tip-title-normal {
    color: white;
}

.promo-tip-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}

@media (max-width: 480px) {
    .popup-referral {
        padding: 30px 20px;
        width: 95%;
        max-height: 96vh;
    }

    .title-referral {
        font-size: 22px;
    }

    .discount-small-referral {
        font-size: 48px;
    }

    .link-container-referral {
        flex-direction: column;
    }

    .badge-referral {
        font-size: 12px;
        padding: 10px 20px;
    }

    .countdown-container-referral {
        gap: 12px;
        padding: 15px 10px;
    }

    .countdown-items-wrapper {
        gap: 4px;
    }

    .countdown-item-referral {
        min-width: 50px;
    }

    .countdown-value-referral {
        font-size: 28px;
    }

    .countdown-label-referral {
        font-size: 10px;
    }

    .countdown-separator-referral {
        font-size: 24px;
        margin: 0 2px;
    }

    .payment-warning-referral {
        font-size: 14px;
        padding: 10px 12px;
    }

    .promo-tip-referral {
        gap: 12px;
    }

    .promo-tip-title {
        font-size: 18px;
    }

    .promo-tip-text {
        font-size: 15px;
    }
}


/* Sidebar layout migrated from custom.css */
:root {
  --layout-accent-color: var(--bz-accent-color, var(--agenda-accent-color, #7C3AED));
  --layout-accent-soft: var(--bz-accent-soft, rgba(124, 58, 237, .08));
  --layout-accent-border: var(--bz-accent-border, rgba(124, 58, 237, .34));
  --layout-accent-filter: var(--bz-accent-icon-filter);
  --layout-menu-text: var(--bz-text, #111827);
  --layout-menu-icon: #404040;
  --layout-menu-muted-filter: brightness(0) saturate(100%);
  --bz-sidebar-open-width: 220px;
}
.Sidebar-outer {
  box-sizing: border-box;
}
.Sidebar-outer .btnOpenSidebar,
.Sidebar-outer .btnCloseSidebar {
  border: none;
  padding: 4px;
  background: transparent;
}

.Sidebar {
  z-index: 10;
  transition: 0.3s;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 203px;
  height: 100%;
  padding: 12px 8px 16px 8px;
  transform: translateX(0%);
  background-color: #28272B;
}
.Sidebar-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--btn-margin-bottom);
}
.Sidebar-footer {
  width: 100%;
  margin-top: auto;
}
.Sidebar-footer .btnLogout {
  justify-content: flex-end;
}
.Sidebar-footer .btnLogout h2 {
  font-size: 14px;
  color: #7F8286;
}
.Sidebar-footer .btnLogout:hover h2 {
  color: #BFBFBF;
}
.Sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.Sidebar_closed {
  transform: translateX(-110%);
}

@media only screen and (min-width: 576px) {
  .Sidebar {
    width: var(--bz-sidebar-open-width);
  }
}
.Sidebar,
#side-menu {
	display: flex;
	flex-direction: column;
	padding: 12px 8px 16px 8px;
	background-color: #ffffff;
	opacity: 1;
	box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.3);
	border-right: 1px solid #cccccc;
}
.Sidebar .Sidebar-header,
#side-menu .Sidebar-header {
  justify-content: center;
}
.Sidebar .Sidebar-header button img,
#side-menu .Sidebar-header button img {
  height: 32px;
}
.Sidebar .Sidebar-header .btnCloseSidebar .icMenu,
#side-menu .Sidebar-header .btnCloseSidebar .icMenu {
  display: block;
}
.Sidebar .Sidebar-header .btnCloseSidebar .icClose,
#side-menu .Sidebar-header .btnCloseSidebar .icClose {
  display: none;
}
.Sidebar .Sidebar-footer,
#side-menu .Sidebar-footer {
  margin-top: auto;
}
.Sidebar .menu-option,
#side-menu .menu-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--btn-margin-bottom);
}
.Sidebar .menu-option img,
#side-menu .menu-option img {
  height: 32px;
}
	.Sidebar .menu-option .menuIcon,
	#side-menu .menu-option .menuIcon {
		margin: 0;
	}
.menuIcon {
	filter: var(--layout-menu-muted-filter);
}

.Sidebar .menu-option span.menuIcon,
#side-menu .menu-option span.menuIcon,
.Sidebar .Sidebar-header span.menuIcon,
#side-menu .Sidebar-header span.menuIcon {
	width: 24px;
	height: 24px;
	flex: 0 0 32px;
	display: inline-block;
	background: currentColor;
	color: var(--layout-menu-icon);
	filter: none !important;
	-webkit-mask-image: var(--sidebar-icon);
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-image: var(--sidebar-icon);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

.Sidebar .menu-option:hover span.menuIcon,
#side-menu .menu-option:hover span.menuIcon,
.Sidebar .menu-option.active-menuitem span.menuIcon,
#side-menu .menu-option.active-menuitem span.menuIcon {
	color: var(--layout-accent-color);
	filter: none !important;
}

.bz-sidebar-icon-menu {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/menu.svg');
}

.bz-sidebar-icon-bell {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/bell.svg');
}

.bz-sidebar-icon-chart {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/chart-column.svg');
}

.bz-sidebar-icon-calendar {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/calendar.svg');
}

.bz-sidebar-icon-contact {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/id-card.svg');
}

.bz-sidebar-icon-settings {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/settings.svg');
}

.bz-sidebar-icon-credit-card {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/credit-card.svg');
}

.bz-sidebar-icon-message {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/message-square-text.svg');
}

.bz-sidebar-icon-help {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/circle-help.svg');
}

.bz-sidebar-icon-log-out {
	--sidebar-icon: url('/Img/icons/New%20icons/sidebar/log-out.svg');
}
.Sidebar .menu-option .bb-subtitle,
.Sidebar .menu-option .side-nav a,
.side-nav .Sidebar .menu-option a,
#side-menu .menu-option .bb-subtitle,
#side-menu .menu-option .side-nav a,
.side-nav #side-menu .menu-option a {
  color: var(--layout-menu-text);
  font-family: var(--bz-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  transition: 0.14s;
}
.Sidebar .menu-option.btnLogout, .Sidebar .menu-option.btnLogout label,
#side-menu .menu-option.btnLogout,
#side-menu .menu-option.btnLogout label {
  transition: 0.14s;
  cursor: pointer;
  margin-bottom: 0;
  font-size: 14px;
}
.Sidebar .menu-option.btnLogout,
#side-menu .menu-option.btnLogout {
  justify-content: flex-end;
}
.Sidebar .menu-option.btnLogout label,
#side-menu .menu-option.btnLogout label {
  color: #7F8286;
}
.Sidebar .menu-option.btnLogout label:hover,
#side-menu .menu-option.btnLogout label:hover {
  color: #BFBFBF;
}
.Sidebar .menu-option.btnLogout .logout-img,
#side-menu .menu-option.btnLogout .logout-img {
  margin-left: 16px;
}
.Sidebar .menu-option.btnLogout img,
#side-menu .menu-option.btnLogout img {
  transition: 0.14s;
}
.Sidebar .menu-option.btnLogout:hover label,
#side-menu .menu-option.btnLogout:hover label {
  color: #BFBFBF;
}
.Sidebar .menu-option.btnLogout:hover img,
#side-menu .menu-option.btnLogout:hover img {
  filter: brightness(150.5%);
}



.Sidebar .menu-option.active-menuitem,
#side-menu .menu-option.active-menuitem {
  position: relative;
  background-color: transparent;
  box-shadow: none;
}
.Sidebar .menu-option.active-menuitem:before,
#side-menu .menu-option.active-menuitem:before {

  display: none;
  margin-left: -4px;
  position: absolute;
  content: ' ';

  width: calc(100% + 6px);
  height: calc(100% + 8px);

  border-radius: var(--bz-radius-sm, 8px);
  border-left: none;
  border: 1px solid var(--layout-accent-border);
}


.Sidebar .menu-option:hover,
#side-menu .menu-option:hover {
  background-color: transparent;
  box-shadow: none;
}
.Sidebar .menu-option:hover a,
#side-menu .menu-option:hover a,
.Sidebar .menu-option.active-menuitem a,
#side-menu .menu-option.active-menuitem a {
  color: var(--layout-accent-color);
}
.Sidebar .menu-option img,
#side-menu .menu-option img {
  filter: var(--layout-menu-muted-filter);
}

.Sidebar .menu-option:hover img,
#side-menu .menu-option:hover img,
.Sidebar .menu-option.active-menuitem img,
#side-menu .menu-option.active-menuitem img {
  filter: var(--layout-accent-filter);
}

.Sidebar .menu-option:focus,
#side-menu .menu-option:focus,
.Sidebar .menu-option a:focus,
#side-menu .menu-option a:focus {
  outline: none;
  box-shadow: none;
}



.Sidebar .btnCloseSidebar,
#side-menu .btnCloseSidebar {
  background-color: transparent;
  border: none;
  padding: 0;
}
.Sidebar .btnCloseSidebar:focus,
#side-menu .btnCloseSidebar:focus {
  outline: none;
  box-shadow: none;
}
.Sidebar.open .Sidebar-header,
#side-menu.open .Sidebar-header {
  justify-content: flex-start;
}
.Sidebar.open .Sidebar-header .btnCloseSidebar .icMenu,
#side-menu.open .Sidebar-header .btnCloseSidebar .icMenu {
  display: none;
}
.Sidebar.open .Sidebar-header .btnCloseSidebar .icClose,
#side-menu.open .Sidebar-header .btnCloseSidebar .icClose {
  display: block;
}
.Sidebar.open .menu-option,
#side-menu.open .menu-option {
  padding: 0 4px 0 8px;
}


.Sidebar.open .menu-option.active-menuitem:before,
#side-menu.open .menu-option.active-menuitem:before {

  margin-left: -10px;
}


@media only screen and (min-width: 576px) {
  .Sidebar.open .menu-option,
#side-menu.open .menu-option {
  padding: 8px;
  padding-right: 4px;
  }
}

/* Sidebar shell behavior migrated from layout.css/custom.css for new-design pages */
.side-nav {
    height: 100%;
    position: fixed;
    z-index: 1032;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: width .3s ease, transform .3s ease;
}

.side-nav a,
.Sidebar a,
#side-menu a {
    text-decoration: none !important;
}

#side-menu.Sidebar.side-nav {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    transform: translateX(0);
    overflow: hidden;
    padding: 12px 8px 16px;
    box-sizing: border-box;
}

#side-menu.Sidebar.side-nav.open {
    width: var(--bz-sidebar-open-width);
    max-width: var(--bz-sidebar-open-width);
}

#side-menu:not(.open) .menu-option {
    justify-content: center;
    padding: 0;
}

#side-menu:not(.open) .menu-option .bb-subtitle,
#side-menu:not(.open) .menu-option a,
#side-menu:not(.open) .btnLogout label {
    display: none !important;
}

#side-menu:not(.open) .Sidebar-footer .btnLogout {
    justify-content: center;
}

#side-menu:not(.open) .Sidebar-footer .btnLogout .logout-img {
    margin-left: 0;
}

#side-menu:not(.open) .Sidebar-header {
    justify-content: center;
    margin-left: 0;
}

#side-menu.open .menu-option .bb-subtitle,
#side-menu.open .menu-option a,
#side-menu.open .btnLogout label {
    display: block;
}

#side-menu.Sidebar .menu-option .bb-subtitle,
#side-menu.Sidebar .menu-option a {
    text-decoration: none !important;
}

#side-menu.Sidebar.open .menu-option {
    justify-content: space-between;
}

@media (max-width: 767px) {
    body.padding-left-menu:not(.agenda-page):not(.bz-submenu-page):not(.pricing-payment-subscreen-active) {
        padding-left: 50px;
    }

    #side-menu.Sidebar.side-nav {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        transform: translateX(0);
    }

    #side-menu.Sidebar.side-nav.open {
        width: var(--bz-sidebar-open-width);
        transform: translateX(0);
        max-width: var(--bz-sidebar-open-width);
    }
}

/* Appointment merge hardening: keep normal appointments and personal-time controls
   in equal-width columns even when older appointment layout classes are present. */
#appointmentDateTimeArea.appointment-date-layout {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

#appointmentDateTimeArea.appointment-date-layout > .personal-time-date-row,
#appointmentDateTimeArea.appointment-date-layout > .personal-time-hours-row {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

#appointmentDateTimeArea.appointment-date-layout .app-date,
#appointmentDateTimeArea.appointment-date-layout input:not([type="checkbox"]):not([type="hidden"]):not(.colorSelector) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#personalTimeModeArea,
#personalTimeModeArea .personal-time-mode {
    width: 100% !important;
}

#personalTimeModeArea .personal-time-mode {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#personalTimeModeArea .bz-segment-option {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
}

#recurrentFieldsArea .recurrency-repeat-line {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#recurrentFieldsArea .recurrency-limit-line {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

#recurrentFieldsArea .recurrency-field,
#recurrentFieldsArea .recurrency-unit-field,
#recurrentFieldsArea .recurrency-limit-option {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 767px) {
    #appointmentDateTimeArea.appointment-date-layout {
        gap: 12px !important;
    }

    #recurrentFieldsArea .recurrency-limit-line {
        grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}

/* Appointment layout hardening after the design-system merge. These rules use
   component ids because this view can switch between normal and personal-time
   class names while keeping the same visual grid. */
#appointmentDateTimeArea {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

#appointmentDateTimeArea > .personal-time-date-row,
#appointmentDateTimeArea > .personal-time-hours-row {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

#appointmentDateTimeArea > .personal-time-full-days-row {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

#appointmentDateTimeArea > .personal-time-date-row.no-show,
#appointmentDateTimeArea > .personal-time-hours-row.no-show,
#appointmentDateTimeArea > .personal-time-full-days-row.no-show {
    display: none !important;
}

#appointmentDateTimeArea .app-date,
#appointmentDateTimeArea input:not([type="checkbox"]):not([type="hidden"]):not(.colorSelector) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

#personalTimeModeArea .personal-time-mode {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#personalTimeModeArea .personal-time-mode .bz-segment-option {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 767px) {
    #appointmentDateTimeArea {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #appointmentDateTimeArea > .personal-time-full-days-row {
        gap: 12px !important;
    }
}

/* Recurrency layout hardening. Desktop keeps the same two-column structure as
   mobile; older modal rules can otherwise stack these fields vertically. */
#recurrentFieldsArea {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#recurrentFieldsArea.no-show {
    display: none !important;
}

#recurrentFieldsArea .recurrency-repeat-line {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
}

#recurrentFieldsArea .recurrency-limit-line {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

#recurrentFieldsArea .recurrency-field,
#recurrentFieldsArea .recurrency-unit-field,
#recurrentFieldsArea .recurrency-limit-option {
    width: 100% !important;
    min-width: 0 !important;
}

#recurrentFieldsArea .recurrency-limit-option > label {
    color: #6B7280 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
}

#recurrentFieldsArea .recurrency-optional-label {
    color: #8A94A6 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

#recurrentFieldsArea .recurrency-limit-separator {
    width: 34px !important;
    min-width: 34px !important;
    align-self: end !important;
    padding-bottom: 13px !important;
    color: #6B7280 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

@media (max-width: 767px) {
    #recurrentFieldsArea .recurrency-limit-line {
        grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    #recurrentFieldsArea .recurrency-limit-separator {
        width: 28px !important;
        min-width: 28px !important;
    }
}

/* Appointment/personal-time date layout visibility and grouping. */
#appointmentDateTimeArea.appointment-date-layout #inlineEndHourArea {
    display: none !important;
}

#appointmentDateTimeArea.personal-time-date-layout {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
}

#appointmentDateTimeArea.personal-time-date-layout > .personal-time-date-row {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: block !important;
}

#appointmentDateTimeArea.personal-time-date-layout > .personal-time-hours-row {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

#appointmentDateTimeArea.personal-time-date-layout > .personal-time-full-days-row {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

#appointmentDateTimeArea.personal-time-date-layout > .personal-time-date-row.no-show,
#appointmentDateTimeArea.personal-time-date-layout > .personal-time-hours-row.no-show,
#appointmentDateTimeArea.personal-time-date-layout > .personal-time-full-days-row.no-show,
#appointmentDateTimeArea.personal-time-date-layout #inlineEndHourArea.no-show {
    display: none !important;
}

@media (max-width: 767px) {
    #appointmentDateTimeArea.personal-time-date-layout,
    #appointmentDateTimeArea.personal-time-date-layout > .personal-time-hours-row,
    #appointmentDateTimeArea.personal-time-date-layout > .personal-time-full-days-row {
        gap: 12px !important;
    }
}

/* Analytics and report surfaces. */
.bz-analytics-page {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    padding: 28px 24px 92px;
    background: var(--bz-screen-background);
    text-align: left;
    overflow-x: hidden;
    box-sizing: border-box;
}

.bz-analytics-shell {
    width: min(100%, 1180px);
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

body.bz-reports-body .bz-analytics-shell > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.bz-reports-body {
    max-width: 100%;
    overflow-x: hidden;
}

body.bz-reports-body.padding-left-menu {
    padding-left: 50px;
}

body.bz-reports-body.padding-left-menu.open {
    padding-left: var(--bz-sidebar-open-width);
}

body.bz-reports-body .bz-analytics-page {
    width: auto;
    max-width: none;
}

body.bz-reports-body .bz-app-header-offset-menu {
    --bz-app-header-left: 50px;
}

body.bz-reports-body.open .bz-app-header-offset-menu {
    --bz-app-header-left: var(--bz-sidebar-open-width);
}

body.bz-reports-body #side-menu.Sidebar.side-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1032 !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 12px 8px 16px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-right: 1px solid rgba(226, 232, 240, .9) !important;
    box-shadow: 1px 0 3px rgba(15, 23, 42, .14) !important;
}

body.bz-reports-body #side-menu.Sidebar.side-nav.open {
    width: var(--bz-sidebar-open-width) !important;
    max-width: var(--bz-sidebar-open-width) !important;
}

body.bz-reports-body #side-menu:not(.open) .menu-option {
    width: 34px !important;
    min-height: 34px !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
}

body.bz-reports-body #side-menu:not(.open) .menu-option .bb-subtitle,
body.bz-reports-body #side-menu:not(.open) .menu-option a,
body.bz-reports-body #side-menu:not(.open) .btnLogout label {
    display: none !important;
}

body.bz-reports-body #side-menu .Sidebar-header {
    justify-content: center !important;
    margin-bottom: 14px !important;
}

body.bz-reports-body #side-menu.open .Sidebar-header {
    justify-content: flex-start !important;
}

body.bz-reports-body #side-menu .menu-option span.menuIcon,
body.bz-reports-body #side-menu .Sidebar-header span.menuIcon {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
}

body.bz-reports-body .navbar-default.navbar-fixed-top.black-back2 {
    position: static !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.bz-app-header-action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: var(--bz-app-header-action-size);
    height: var(--bz-app-header-action-size);
    min-width: var(--bz-app-header-action-size);
    min-height: var(--bz-app-header-action-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bz-accent-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: var(--bz-accent-color);
    box-shadow: var(--bz-shadow-soft);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.bz-report-header {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    position: relative;
    z-index: 12;
}

.bz-report-heading {
    min-width: 0;
    display: grid;
    gap: 9px;
}

.bz-report-heading h1 {
    margin: 0;
    color: var(--bz-text);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
}

.bz-report-period-nav {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bz-report-period-arrow,
.bz-report-period-button,
.bz-report-filter-button {
    font-family: var(--bz-font-family);
    cursor: pointer;
}

.bz-report-period-arrow {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bz-text);
}

.bz-report-period-button {
    max-width: 100%;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-report-period-button [data-report-current-label] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-report-period-button .bz-icon-mask,
.bz-report-period-arrow .bz-icon-mask {
    width: 16px;
    height: 16px;
}

.bz-report-filter-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--bz-accent-border);
    border-radius: var(--bz-radius-sm);
    background: rgba(255, 255, 255, .88);
    color: var(--bz-accent-color);
    box-shadow: var(--bz-shadow-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.bz-report-filter-button .bz-icon-mask {
    width: 18px;
    height: 18px;
}

.bz-filter-bar[hidden] {
    display: none !important;
}

.bz-goal-card {
    min-width: 0;
    display: grid;
    gap: 0;
    border: 1px solid rgba(var(--bz-accent-color-rgb), .22);
    border-radius: var(--bz-radius);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    overflow: hidden;
    position: relative;
}

.bz-goal-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
    gap: 14px;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 86%, rgba(var(--bz-accent-color-rgb), .18), transparent 34%),
        radial-gradient(circle at 52% 18%, rgba(255, 255, 255, .12), transparent 26%),
        linear-gradient(135deg, var(--bz-text) 0%, rgba(var(--bz-accent-color-rgb), .62) 100%);
}

.bz-goal-card.is-complete .bz-goal-top {
    background:
        radial-gradient(circle at 88% 86%, rgba(255, 255, 255, .1), transparent 34%),
        linear-gradient(135deg, var(--bz-text) 0%, rgba(var(--bz-accent-color-rgb), .72) 100%);
}

.bz-goal-card.is-complete .bz-goal-message {
    background: rgba(15, 23, 42, .26);
    border-color: rgba(255, 255, 255, .2);
}

.bz-goal-card.is-complete .bz-goal-message-icon {
    width: 72px;
    min-width: 72px;
    right: 8px;
    bottom: -4px;
}

.bz-goal-card.is-complete .bz-goal-message-icon img {
    width: 72px;
    height: 72px;
}

.bz-goal-heading,
.bz-goal-metrics,
.bz-goal-realized,
.bz-goal-forecast,
.bz-goal-progress-area,
.bz-goal-message {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.bz-goal-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    grid-column: 1 / -1;
}

.bz-goal-heading-asset {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex: 0 0 auto;
    margin: -4px 0 -2px;
    filter: drop-shadow(0 14px 20px rgba(15, 23, 42, .18));
}

.bz-goal-card h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-goal-heading [data-goal="subtitle"] {
    display: none;
}

.bz-goal-card p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.bz-goal-metrics {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    position: relative;
    margin-top: 2px;
    margin-bottom: 0;
}

.bz-goal-realized {
    width: clamp(126px, 28vw, 190px);
    max-width: 46%;
    display: grid;
    gap: 5px;
    position: absolute;
    bottom: 0;
    transform: translateX(-12%);
    opacity: 0;
    transition: left 1.55s cubic-bezier(.2, .8, .2, 1), opacity .42s ease;
}

.bz-goal-realized span,
.bz-goal-forecast span {
    color: rgba(255, 255, 255, .86);
    font-size: 11px;
    font-weight: 500;
}

.bz-goal-realized strong {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.bz-goal-forecast {
    width: clamp(150px, 30vw, 210px);
    max-width: 48%;
    display: grid;
    gap: 5px;
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    opacity: 0;
    transition: left 1.55s cubic-bezier(.2, .8, .2, 1), opacity .42s ease;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .28);
    z-index: 3;
}

.bz-goal-forecast.has-open-popover,
.bz-goal-forecast:has(.bz-goal-info-popover:not([hidden])) {
    z-index: 30;
}

.bz-goal-realized.is-visible,
.bz-goal-forecast.is-visible {
    opacity: 1;
}

.bz-goal-forecast[hidden] {
    display: none;
}

.bz-goal-forecast span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bz-goal-forecast strong {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.bz-goal-info {
    width: 12px;
    height: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    color: #fff !important;
    background: transparent;
    font-size: 9px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.bz-goal-info-popover {
    width: min(240px, 72vw);
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .24);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    position: absolute;
    z-index: 40;
    top: 100%;
    left: 12px;
    margin-top: 7px;
}

.bz-goal-info-popover[hidden] {
    display: none;
}

.bz-goal-progress-area {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    margin-top: 0;
    z-index: 1;
}

.bz-goal-progress {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    overflow: visible;
    position: relative;
}

.bz-goal-progress-fill {
    height: 100%;
    display: block;
    border-radius: inherit;
    min-width: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 1.55s cubic-bezier(.2, .8, .2, 1);
}

.bz-goal-progress-fill[hidden] {
    display: none;
}

.bz-goal-progress-marked {
    z-index: 1;
    background: rgba(var(--bz-accent-color-rgb), .7);
}

.bz-goal-progress-billed {
    z-index: 2;
    background: linear-gradient(90deg, var(--bz-accent-color), rgba(var(--bz-accent-color-rgb), .92));
}

.bz-goal-progress-over-target {
    z-index: 3;
    background: var(--bz-success);
    box-shadow: none;
}

.bz-goal-progress-marker {
    width: 1px;
    height: 14px;
    display: block;
    position: absolute;
    z-index: 4;
    top: -12px;
    transform: translateX(-50%);
    pointer-events: none;
    transition: left 1.55s cubic-bezier(.2, .8, .2, 1);
}

.bz-goal-progress-marker[hidden] {
    display: none;
}

.bz-goal-progress-marker::before {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: rgba(255, 255, 255, .46);
}

.bz-goal-progress-marker::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #fff;
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}

.bz-goal-progress-marker-billed::before {
    background: rgba(255, 255, 255, .64);
}

.bz-goal-progress-marker-marked::before {
    background: rgba(255, 255, 255, .38);
}

.bz-goal-progress-flag {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    z-index: 5;
    top: -26px;
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .28));
    transition: left .65s ease, right .65s ease;
    pointer-events: none;
}

.bz-goal-progress-flag.is-at-end {
    transform: none;
}

.bz-goal-celebration {
    inset: -140px 0 auto;
    height: 118px;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.bz-goal-celebration[hidden] {
    display: none;
}

.bz-goal-celebration span {
    width: 7px;
    height: 13px;
    display: block;
    border-radius: 999px;
    background: var(--bz-accent-color);
    opacity: .9;
    position: absolute;
    top: 18px;
    transform: rotate(18deg);
}

.bz-goal-celebration.is-active span {
    animation: bz-goal-confetti-fall 4.2s ease-out both;
}

.bz-goal-celebration span:nth-child(1) { left: 42%; top: 10px; background: var(--bz-warning); animation-delay: .02s; }
.bz-goal-celebration span:nth-child(2) { left: 51%; top: 4px; background: var(--bz-info); animation-delay: .12s; }
.bz-goal-celebration span:nth-child(3) { left: 60%; top: 18px; background: var(--bz-success); animation-delay: .05s; }
.bz-goal-celebration span:nth-child(4) { left: 71%; top: 2px; animation-delay: .18s; }
.bz-goal-celebration span:nth-child(5) { left: 82%; top: 16px; background: var(--bz-danger); animation-delay: .08s; }
.bz-goal-celebration span:nth-child(6) { left: 92%; top: 8px; background: var(--bz-warning); animation-delay: .2s; }
.bz-goal-celebration span:nth-child(7) { left: 13%; top: 74px; background: var(--bz-info); animation-delay: .1s; }
.bz-goal-celebration span:nth-child(8) { left: 27%; top: 66px; background: var(--bz-success); animation-delay: .16s; }
.bz-goal-celebration span:nth-child(9) { left: 62%; top: 82px; animation-delay: .04s; }
.bz-goal-celebration span:nth-child(10) { left: 76%; top: 70px; background: var(--bz-danger); animation-delay: .22s; }
.bz-goal-celebration span:nth-child(11) { left: 88%; top: 58px; background: var(--bz-warning); animation-delay: .28s; }
.bz-goal-celebration span:nth-child(12) { left: 35%; top: 88px; background: var(--bz-info); animation-delay: .3s; }

@keyframes bz-goal-confetti-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, -26px, 0) rotate(0deg);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: .82;
        transform: translate3d(12px, 36px, 0) rotate(230deg);
    }
}

.bz-goal-progress-flag .bz-icon-mask {
    width: 26px;
    height: 26px;
    position: relative;
    z-index: 1;
    transform: scaleX(-1);
}

.bz-goal-scale {
    min-height: 22px;
    position: relative;
}

.bz-goal-scale span {
    display: grid;
    gap: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    top: 0;
    min-width: max-content;
}

.bz-goal-scale-start {
    left: 0;
}

.bz-goal-scale-target {
    text-align: right;
    transition: left .65s ease;
}

.bz-goal-scale strong {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.bz-goal-scale small {
    display: none;
}

.bz-goal-message {
    grid-column: 1 / -1;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 96px 12px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--bz-radius-sm);
    background: rgba(15, 23, 42, .22);
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .58s ease, transform .82s cubic-bezier(.2, .8, .2, 1);
}

.bz-goal-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.bz-goal-message-icon {
    width: 86px;
    min-width: 86px;
    text-align: center;
    line-height: 1;
    position: absolute;
    right: 2px;
    bottom: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(36px) scale(.92);
    transition: opacity .72s ease .18s, transform .95s cubic-bezier(.2, .8, .2, 1) .18s;
}

.bz-goal-message-icon img {
    width: 86px;
    height: 86px;
    display: block;
    object-fit: contain;
}

.bz-goal-message.is-visible .bz-goal-message-icon {
    opacity: .82;
    transform: translateY(0) scale(1);
}

.bz-goal-message > div:not(.bz-goal-confetti) {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.bz-goal-message strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
}

.bz-goal-message p {
    margin-top: 4px;
    font-size: 14px;
}

.bz-goal-state-value {
    display: inline;
    color: #fff;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
}

.bz-goal-message .bz-goal-state-value {
    display: inline;
    font-size: inherit;
    line-height: inherit;
}

.bz-goal-state-line {
    display: block;
    white-space: nowrap;
}

.bz-goal-card.is-past-missed .bz-goal-message {
    padding-right: 92px;
}

.bz-goal-card.is-past-missed .bz-goal-message-icon {
    width: 78px;
    min-width: 78px;
    right: 8px;
    bottom: 4px;
}

.bz-goal-card.is-past-missed .bz-goal-message-icon img {
    width: 78px;
    height: 78px;
}

.bz-goal-state-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.bz-goal-confetti {
    display: none;
}

.bz-goal-confetti span {
    width: 8px;
    height: 14px;
    display: block;
    border-radius: 999px;
    background: var(--bz-accent-color);
    position: absolute;
}

.bz-goal-confetti span:nth-child(1) { left: 20px; top: 16px; transform: rotate(-34deg); background: var(--bz-warning); }
.bz-goal-confetti span:nth-child(2) { left: 62px; top: 6px; transform: rotate(22deg); background: var(--bz-success); }
.bz-goal-confetti span:nth-child(3) { left: 92px; top: 34px; transform: rotate(-12deg); }
.bz-goal-confetti span:nth-child(4) { right: 18px; top: 12px; transform: rotate(39deg); background: var(--bz-info); }
.bz-goal-confetti span:nth-child(5) { right: 54px; bottom: 6px; transform: rotate(-48deg); background: var(--bz-danger); }

.bz-goal-client-strip {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(190px, auto);
    gap: 14px;
    align-items: start;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(var(--bz-accent-color-rgb), .06), rgba(255, 255, 255, .92));
}

.bz-goal-client-asset {
    width: 58px;
    height: 58px;
    object-fit: contain;
    align-self: center;
    justify-self: center;
    margin: -4px 0 -2px;
    filter: drop-shadow(0 12px 18px rgba(var(--bz-accent-color-rgb), .18));
    grid-column: 1;
    grid-row: 1;
}

.bz-goal-client-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
    grid-column: 2;
    grid-row: 1;
}

.bz-goal-client-copy > strong {
    color: var(--bz-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-goal-client-count-line {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-width: 0;
}

.bz-goal-client-count-line > span {
    color: var(--bz-text);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.bz-goal-client-count-line > span b {
    color: var(--bz-accent-color);
    font-size: 32px;
    font-weight: 600;
}

.bz-goal-client-count-line small {
    color: var(--bz-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.15;
    padding-bottom: 2px;
}

.bz-goal-client-new {
    color: var(--bz-accent-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-goal-client-new[hidden] {
    display: none;
}

.bz-goal-client-dots {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    max-width: none;
    margin-top: 5px;
}

.bz-goal-client-dots span {
    width: min(100%, 22px);
    height: 22px;
    display: inline-flex;
    justify-self: center;
    position: relative;
    color: rgba(148, 163, 184, .48);
}

.bz-goal-client-dots span::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: currentColor;
    mask: url('/Img/icons/New icons/relatorios/user.svg') center / contain no-repeat;
    -webkit-mask: url('/Img/icons/New icons/relatorios/user.svg') center / contain no-repeat;
}

.bz-goal-client-dots span.is-active {
    color: var(--bz-accent-color);
}

.bz-goal-client-dots span.is-star {
    filter: drop-shadow(0 0 8px rgba(var(--bz-accent-color-rgb), .34));
}

.bz-goal-client-action {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    min-height: 48px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--bz-accent-border);
    border-radius: var(--bz-radius-sm);
    background: rgba(255, 255, 255, .7);
    color: var(--bz-accent-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.bz-goal-client-action .bz-icon-mask {
    width: 18px;
    height: 18px;
}

.bz-action-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.bz-action-insight {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--bz-radius-sm);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--bz-shadow-card);
    box-sizing: border-box;
}

.bz-action-insight strong {
    display: block;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-action-insight p {
    margin: 4px 0 0;
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.bz-action-insight-link {
    min-height: 34px;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--bz-accent-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-primary-action-bg);
    color: var(--bz-primary-action-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.bz-action-insight-accent { border-color: rgba(var(--bz-accent-color-rgb), .18); background: linear-gradient(135deg, rgba(var(--bz-accent-color-rgb), .08), rgba(255, 255, 255, .9)); }
.bz-action-insight-info { border-color: rgba(37, 99, 235, .14); background: linear-gradient(135deg, var(--bz-info-soft), rgba(255, 255, 255, .9)); }
.bz-action-insight-success { border-color: rgba(16, 185, 129, .16); background: linear-gradient(135deg, var(--bz-success-soft), rgba(255, 255, 255, .9)); }
.bz-action-insight-warning { border-color: rgba(245, 158, 11, .18); background: linear-gradient(135deg, var(--bz-warning-soft), rgba(255, 255, 255, .9)); }
.bz-action-insight-danger { border-color: rgba(240, 68, 56, .18); background: linear-gradient(135deg, var(--bz-danger-soft), rgba(255, 255, 255, .9)); }
.bz-action-insight-soft { border-color: rgba(148, 163, 184, .2); background: linear-gradient(135deg, rgba(241, 245, 249, .9), rgba(255, 255, 255, .9)); }

.bz-insight-grid {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bz-insight-card {
    min-width: 0;
    min-height: 112px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px 96px 14px 16px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--bz-radius-sm);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--bz-shadow-card);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.bz-insight-card-accent {
    border-color: rgba(var(--bz-accent-color-rgb), .16);
    background: linear-gradient(135deg, rgba(var(--bz-accent-color-rgb), .12), rgba(255, 255, 255, .9));
}

.bz-insight-card-info {
    border-color: rgba(37, 99, 235, .14);
    background: linear-gradient(135deg, var(--bz-info-soft), rgba(255, 255, 255, .9));
}

.bz-insight-card-warning {
    border-color: rgba(245, 158, 11, .18);
    background: linear-gradient(135deg, var(--bz-warning-soft), rgba(255, 255, 255, .9));
}

.bz-insight-card-soft {
    border-color: rgba(245, 158, 11, .18);
    background: linear-gradient(135deg, rgba(245, 158, 11, .11), rgba(255, 255, 255, .9));
}

.bz-insight-card-success {
    border-color: rgba(16, 185, 129, .16);
    background: linear-gradient(135deg, var(--bz-success-soft), rgba(255, 255, 255, .9));
}

.bz-insight-card-client {
    border-color: rgba(37, 99, 235, .14);
    background: linear-gradient(135deg, rgba(59, 130, 246, .11), rgba(255, 255, 255, .9));
}

.bz-insight-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
    position: relative;
    z-index: 1;
}

.bz-insight-label,
.bz-insight-note {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-insight-label {
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-insight-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bz-text);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.08;
    white-space: nowrap;
}

.bz-insight-note {
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.bz-insight-card-accent .bz-insight-note {
    color: var(--bz-accent-color);
}

.bz-insight-card-success .bz-insight-value {
    color: var(--bz-success);
}

.bz-insight-icon {
    width: 118px;
    height: 118px;
    max-width: none;
    object-fit: contain;
    position: absolute;
    right: -10px;
    bottom: -16px;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 14px 18px rgba(15, 23, 42, .12));
}

.bz-analytics-page .bz-filter-bar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    gap: 12px;
    overflow: visible;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--bz-radius);
    background: rgba(255, 255, 255, .84);
    box-shadow: var(--bz-shadow-soft);
    box-sizing: border-box;
    position: relative;
    z-index: 11;
}

.bz-segmented-control {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--bz-shadow-soft);
    box-sizing: border-box;
}

.bz-segment-control {
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bz-muted);
    font-family: var(--bz-font-family);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bz-segment-control.is-active {
    background: var(--bz-primary-action-bg);
    color: var(--bz-primary-action-color);
    box-shadow: var(--bz-primary-action-shadow);
}

.bz-filter-controls {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: end;
    min-width: 0;
}

body.bz-reports-body .bz-input,
body.bz-reports-body .bz-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bz-date-input {
    cursor: pointer;
}

.bz-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.bz-section-title {
    margin: 0;
    color: var(--bz-text);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.bz-section-subtitle {
    margin: 4px 0 0;
    color: var(--bz-muted);
    font-size: 13px;
    font-weight: 400;
}

.bz-stat-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.bz-stat-grid-4 {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.bz-stat-grid-2 {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.bz-stat-card,
.bz-chart-card,
.bz-table-card {
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--bz-radius);
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--bz-shadow-card);
    box-sizing: border-box;
}

.bz-stat-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    padding: 14px;
}

.bz-stat-card-alert {
    border-color: rgba(226, 232, 240, .94);
}

.bz-stat-icon {
    grid-row: span 3;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bz-radius-sm);
}

.bz-stat-icon .bz-icon-mask {
    width: 19px;
    height: 19px;
}

.bz-stat-icon-accent {
    color: var(--bz-accent-color);
    background: var(--bz-accent-soft);
}

.bz-stat-icon-info {
    color: var(--bz-info);
    background: var(--bz-info-soft);
}

.bz-stat-icon-success {
    color: var(--bz-success);
    background: var(--bz-success-soft);
}

.bz-stat-icon-warning {
    color: var(--bz-warning);
    background: var(--bz-warning-soft);
}

.bz-stat-icon-danger {
    color: var(--bz-danger);
    background: var(--bz-danger-soft);
}

.bz-stat-icon-muted {
    color: var(--bz-muted);
    background: rgba(148, 163, 184, .12);
}

.bz-stat-label,
.bz-stat-muted,
.bz-stat-trend {
    display: block;
    min-width: 0;
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
}

.bz-stat-value {
    display: block;
    min-width: 0;
    color: var(--bz-text);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.bz-stat-trend.is-positive {
    color: var(--bz-success);
}

.bz-stat-trend.is-negative {
    color: var(--bz-danger);
}

.bz-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 12px;
    min-width: 0;
}

.bz-chart-card,
.bz-table-card {
    padding: 16px;
}

.bz-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    min-width: 0;
}

.bz-card-head h2 {
    margin: 0;
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.bz-card-head p {
    margin: 4px 0 0;
    color: var(--bz-muted);
    font-size: 12px;
    font-weight: 400;
}

.bz-chart-frame {
    height: 300px;
}

.bz-donut-layout {
    min-height: 300px;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.bz-donut-frame {
    width: 180px;
    height: 180px;
}

.bz-inline-list {
    display: grid;
    gap: 10px;
}

.bz-inline-list-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: var(--bz-text);
    font-size: 13px;
    font-weight: 500;
}

.bz-inline-list-row strong {
    font-weight: 600;
}

.bz-color-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--bz-dot-color, var(--bz-accent-color));
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .12);
}

.bz-analytics-page .bz-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 0 2px;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    scrollbar-width: none;
}

.bz-analytics-page .bz-tabs::-webkit-scrollbar {
    display: none;
}

.bz-tab-button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--bz-muted);
    font-family: var(--bz-font-family);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.bz-tab-button.is-active {
    border-bottom-color: var(--bz-accent-color);
    color: var(--bz-accent-color);
}

.bz-tab-panel {
    display: none;
}

.bz-tab-panel.is-active {
    display: block;
}

.bz-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.bz-data-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    color: var(--bz-text);
    font-size: 13px;
}

.bz-data-table th,
.bz-data-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(226, 232, 240, .82);
    text-align: left;
    vertical-align: middle;
}

.bz-data-table th {
    color: var(--bz-muted);
    background: rgba(248, 250, 252, .8);
    font-size: 12px;
    font-weight: 600;
}

.bz-data-table td {
    font-weight: 500;
}

.bz-data-table tr:last-child td {
    border-bottom: 0;
}

.bz-rank-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(226, 232, 240, .82);
}

.bz-rank-row:last-child {
    border-bottom: 0;
}

.bz-rank-index {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bz-accent-soft);
    color: var(--bz-accent-color);
    font-size: 12px;
    font-weight: 600;
}

.bz-rank-name {
    min-width: 0;
    color: var(--bz-text);
    font-size: 11px;
    font-weight: 600;
}

.bz-rank-name small {
    display: block;
    margin-top: 2px;
    color: var(--bz-muted);
    font-size: 11px;
    font-weight: 400;
}

.bz-empty-state {
    padding: 18px;
    border: 1px dashed rgba(148, 163, 184, .48);
    border-radius: var(--bz-radius-sm);
    color: var(--bz-muted);
    background: rgba(248, 250, 252, .72);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.bz-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(6px);
}

.bz-loader-overlay[hidden] {
    display: none;
}

.bz-loader-card {
    min-width: 132px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--bz-accent-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-surface);
    color: var(--bz-accent-color);
    box-shadow: var(--bz-shadow-card);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .bz-analytics-page {
        padding: 22px 16px 92px;
    }

    .bz-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bz-action-insights {
        grid-template-columns: 1fr;
    }

    .bz-goal-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bz-goal-client-strip {
        grid-template-columns: 1fr;
    }

    .bz-goal-client-action {
        justify-self: start;
    }

    .bz-stat-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bz-stat-grid-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bz-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    body.bz-reports-body.padding-left-menu {
        padding-left: 50px;
    }

    body.bz-reports-body.padding-left-menu.open {
        padding-left: 50px;
    }

    body.bz-reports-body.open .bz-app-header-offset-menu {
        --bz-app-header-left: 50px;
    }

    .bz-analytics-page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .bz-report-header {
        gap: 12px;
    }

    .bz-report-heading h1 {
        font-size: 22px;
    }

    .bz-report-filter-button {
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }

    .bz-report-filter-button .bz-icon-mask {
        width: 17px;
        height: 17px;
    }

    .bz-insight-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bz-goal-card {
        border-radius: var(--bz-radius-sm);
    }

    .bz-goal-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 14px;
    }

    .bz-goal-heading {
        gap: 12px;
        grid-column: 1 / -1;
    }

    .bz-goal-heading-asset {
        width: 48px;
        height: 48px;
        margin: -2px 0;
    }

    .bz-goal-card h2 {
        font-size: 18px;
    }

    .bz-goal-card p,
    .bz-goal-realized span,
    .bz-goal-forecast span {
        font-size: 12px;
    }

    .bz-goal-metrics {
        width: 100%;
        min-height: 46px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .bz-goal-realized strong,
    .bz-goal-forecast strong {
        font-size: clamp(22px, 6vw, 26px);
    }

    .bz-goal-realized {
        width: 132px;
        max-width: 48%;
    }

    .bz-goal-forecast {
        width: 148px;
        max-width: 52%;
        padding-left: 10px;
    }

    .bz-goal-message {
        align-items: flex-start;
        gap: 9px;
        min-height: 54px;
        padding: 10px 70px 10px 10px;
    }

    .bz-goal-card.is-past-missed .bz-goal-message {
        padding-right: 74px;
    }

    .bz-goal-message-icon {
        width: 68px;
        min-width: 68px;
        right: 0;
    }

    .bz-goal-message-icon img {
        width: 68px;
        height: 68px;
    }

    .bz-goal-card.is-complete .bz-goal-message-icon {
        width: 56px;
        min-width: 56px;
        right: 6px;
        bottom: -3px;
    }

    .bz-goal-card.is-complete .bz-goal-message-icon img {
        width: 56px;
        height: 56px;
    }

    .bz-goal-card.is-past-missed .bz-goal-message-icon {
        width: 62px;
        min-width: 62px;
        right: 6px;
        bottom: 3px;
    }

    .bz-goal-card.is-past-missed .bz-goal-message-icon img {
        width: 62px;
        height: 62px;
    }

    .bz-goal-message strong {
        font-size: 14px;
    }

    .bz-goal-message p {
        font-size: 12px;
    }

    .bz-goal-state-value {
        font-size: 15px;
    }

    .bz-goal-scale span {
        font-size: 12px;
    }

    .bz-goal-scale strong {
        font-size: 13px;
    }

    .bz-goal-scale small {
        display: none;
    }

    .bz-goal-confetti {
        display: none;
    }

    .bz-goal-client-strip {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .bz-goal-client-asset {
        width: 48px;
        height: 48px;
        margin: -2px 0;
    }

    .bz-goal-client-action {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        justify-self: stretch;
        min-height: 46px;
        padding: 0 12px;
        font-size: 13px;
    }

    .bz-goal-client-copy > strong {
        font-size: 14px;
    }

    .bz-goal-client-count-line {
        gap: 8px;
    }

    .bz-goal-client-count-line > span {
        font-size: 18px;
    }

    .bz-goal-client-count-line > span b {
        font-size: 28px;
    }

    .bz-goal-client-count-line small {
        font-size: 12px;
    }

    .bz-goal-client-dots span {
        width: min(100%, 20px);
        height: 20px;
    }

    .bz-goal-client-dots {
        grid-row: auto;
        grid-template-columns: repeat(15, minmax(0, 1fr));
        gap: 4px;
        margin-top: 2px;
    }

    .bz-goal-progress-flag {
        width: 28px;
        height: 28px;
        top: -24px;
    }

    .bz-goal-progress-flag .bz-icon-mask {
        width: 24px;
        height: 24px;
    }

    .bz-goal-progress-marker {
        height: 12px;
        top: -10px;
    }

    .bz-action-insight {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        justify-items: stretch;
    }

    .bz-action-insight-link {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        padding: 10px 12px;
    }

    .bz-insight-card {
        min-height: 98px;
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 78px 12px 12px;
    }

    .bz-insight-value {
        font-size: 22px;
    }

    .bz-insight-icon {
        width: 90px;
        height: 90px;
        right: 10px;
        bottom: 0;
    }

    .bz-analytics-shell {
        width: 100%;
    }

    .bz-segmented-control {
        gap: 3px;
        padding: 3px;
    }

    .bz-segment-control {
        min-height: 34px;
        padding: 0 4px;
        font-size: 12px;
    }

    .bz-filter-controls,
    .bz-stat-grid-2,
    .bz-stat-grid-4 {
        grid-template-columns: 1fr;
    }

    body.bz-reports-body .bz-data-table {
        min-width: 0;
        table-layout: fixed;
        font-size: 11px;
    }

    body.bz-reports-body .bz-data-table th,
    body.bz-reports-body .bz-data-table td {
        padding: 9px 6px;
        overflow-wrap: anywhere;
    }

    .bz-section-title-row,
    .bz-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .bz-section-title-row .bz-button,
    .bz-card-head .bz-button {
        width: 100%;
        justify-content: center;
    }

    .bz-donut-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .bz-donut-layout .bz-inline-list {
        width: 100%;
    }

    .bz-stat-value {
        font-size: 20px;
    }
}

/* Appointment compact cards */
.modal-content-appoint .BookAppointment,
.modal-content-appoint #SearchClientApp {
    gap: 14px;
}

.modal-content-appoint .flexDivOuter {
    gap: 14px;
}

.modal-content-appoint .flexDivInner,
.modal-content-appoint .bookApp-AnnotationsArea,
.modal-content-appoint .add-service {
    gap: 6px;
}

.modal-content-appoint .appointment-field-label,
.modal-content-appoint .colorArea > label,
.modal-content-appoint .deleteExArea > label,
.modal-content-appoint .flexDivInner > label,
.modal-content-appoint #selected-option-name,
.modal-content-appoint .client-card-redesign .client-card-name,
.modal-content-appoint .clientAppInfo .label-form label,
.modal-content-appoint .serviceAppInfo .label-form label,
.modal-content-appoint .appointment-sms-status-row > label {
    font-weight: 700 !important;
}

.modal-content-appoint .client-card-main {
    gap: 8px;
    padding: 10px 12px;
}

.modal-content-appoint .client-card-meta {
    gap: 6px 10px;
}

.modal-content-appoint .client-card-phone {
    min-height: 28px;
    padding: 4px 9px;
}

.modal-content-appoint .client-card-icon-phone {
    width: 16px;
    height: 16px;
}

.modal-content-appoint .bz-link-row {
    min-height: 36px;
    padding: 0 12px;
}

.modal-content-appoint .bz-link-row-icon {
    width: 18px;
    height: 18px;
}

.modal-content-appoint .bz-link-row-icon > span,
.modal-content-appoint .bz-link-row-icon > img {
    width: 15px;
    height: 15px;
}

.modal-content-appoint .serviceFields {
    gap: 8px;
}

.modal-content-appoint .serviceFields > .serviceDuration input,
.modal-content-appoint .serviceFields > .servicePrice input {
    min-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

.modal-content-appoint .addBtnApp {
    min-height: 38px;
    height: 38px;
    gap: 6px;
}

.modal-content-appoint .addBtnApp img {
    width: 16px;
    height: 16px;
}

.modal-content-appoint .annotation {
    min-height: 78px;
    max-height: 160px;
    padding: 10px 12px;
    line-height: 1.45;
}

.modal-content-appoint .appointment-sms-card {
    gap: 8px;
    padding: 10px 12px;
}

.modal-content-appoint .appointment-sms-status-badge {
    min-height: 32px;
    padding: 7px 12px;
}

.modal-content-appoint .appointment-sms-card .sendRememberBtn {
    min-height: 34px;
    padding: 7px 12px;
}